leilukin-tumbleblog/themes/leilukin/stylesheets/all.css

@font-face {
    font-display: swap;
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 400;
    src: url('../../../fonts/lexend-v19-latin-regular.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 600;
    src: url('../../../fonts/lexend-v19-latin-600.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 700;
    src: url('../../../fonts/lexend-v19-latin-700.woff2') format('woff2');
}
:root {
    --clr-body-bg: #f7f5ed;
    --clr-body-txt: #1f1f23;
    --clr-content-bg: #fbfbf7;
    --clr-pinned-bg: #fffddd;
    --clr-code-bg: #e5e2dc;
    --clr-highlight: #ffdd00;
    --clr-border-main: #c6ccc8;
    --clr-link-hover: #d94c7b;
    --clr-tag: #208448;
    --clr-tag-hover: #006428;
    --clr-edit-btn: #39434d;
    --clr-edit-btn-hover: #000;
    --clr-delete-btn: #c04b4b;
    --clr-delete-btn-hover: #af2d2d;
    --clr-input-err: #ffdede;
    --clr-white: #fff;
}
html {
    font-size: 16px;
}
*::selection {
    color: var(--clr-body-txt);
    background-color: var(--clr-highlight);
}
body {
    font-family: "Lexend", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.2rem;
    color: var(--clr-body-txt);
    line-height: 1.5;
    tab-size: 4;
    background-color: var(--clr-body-bg);
    margin: 2rem;
    margin-inline-start: 16rem;
    min-width: 280px;
    max-width: 980px;
}
body.preview {
    margin: 1rem;
    max-width: none;
}
p {
    margin: 1rem 0rem;
}
p.footnote-backrefs {
    font-size: 0.75em;
}
h1 {
    font-size: 2em;
    font-weight: bold;
    margin: 1em 0em;
    padding: 0em;
}
h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 1em 0em;
    padding: 0em;
}
#sidebar > h1,
#sidebar > h2 {
    font-size: 1em;
}
h2.archive {
    margin: 2rem 0rem 0rem 0rem;
}
h2.menu_toggle {
    display: none;
}
h3 {
    font-size: 1em;
    font-weight: bold;
    margin: 1em 0em;
    padding: 0em;
}
h3.archive {
    font-size: 1.33em;
}
* + h3.article_label {
    margin-top: 2rem;
}
h4, h5, h6 {
    font-size: 1em;
    font-weight: bold;
    margin: 1em 0em;
    padding: 0em;
}
sup, sub {
    line-height: 1;
    font-size: 0.75em;
}
em, dfn, cite {
    font: inherit;
    font-style: italic;
}
strong {
    font: inherit;
    font-weight: bold;
}
address {
    font: inherit;
}
small {
    font-weight: normal;
    font-size: 0.75em;
}
mark {
    color: var(--clr-body-txt);
    background-color: var(--clr-highlight);
}
del {
    font: inherit;
    text-decoration: line-through;
}
figure, blockquote {
    margin: 0;
    padding: 0 1rem;
    font: inherit;
    page-break-inside: avoid;
}
blockquote {
    border-inline-start: 0.1em solid var(--clr-body-txt);
}
figcaption {
    font-size: 0.9em;
    margin: 1rem 0rem;
}
aside {
    max-width: 40%;
    float: right;
    float: inline-end;
    font-style: italic;
    margin: 0rem;
    margin-inline-start: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: var(--clr-code-bg);
    border-left: 2px solid var(--clr-body-txt);
}
blockquote em,
aside em {
    font-style: normal;
}
pre {
    font-family: "Cousine webfont", monospace;
    font-size: 0.85em;
    background-color: var(--clr-code-bg);
    margin: 1rem 0rem;
    overflow-x: auto;
    white-space: pre;
}
code {
    font-family: "Cousine webfont", monospace;
    font-size: 0.85em;
    background-color: var(--clr-code-bg);
    padding: 0.125em 0.25em 0em 0.25em;
    vertical-align: bottom;
    white-space: break-spaces;
}
pre > code {
    font-size: 0.85rem;
    display: block;
    padding: 0.5rem;
    white-space: inherit;
}
hr {
    width: 100%;
    clear: both;
    border: none;
    border-top: 1px solid #ddd;
    margin: 1em 0em;
}
hr:last-child,
hr + hr {
    display: none;
}
ul,
ol.comments ul {
    list-style: disc outside;
    margin: 1em 0em;
    margin-inline-start: 2em;
    padding: 0em;
}
ul ul,
ol.comments ul ul {
    list-style-type: circle;
}
ol,
ol.comments ol {
    list-style: decimal outside;
    margin: 1em 0em;
    margin-inline-start: 2em;
    padding: 0em;
}
ol ol,
ol.comments ol ol {
    list-style-type: lower-latin;
}
html[lang="ar"] ol ol,
html[lang="ar"] ol.comments ol ol {
    list-style-type: arabic-indic;
}
html[lang="he"] ol ol,
html[lang="he"] ol.comments ol ol {
    list-style-type: hebrew;
}
li {
    margin: 0em;
    padding: 0em;
}
dl {
    list-style: none;
    margin: 1em 0em;
}
dl dt {
    font-weight: bold;
    margin: 0em;
    padding: 0em;
}
dl dd {
    margin: 0em;
    padding: 0em;
    margin-inline-start: 2em;
}
ul.navigation {
    list-style: none;
    box-sizing: border-box;
    background-color: var(--clr-content-bg);
    margin: 0rem 0rem 2rem 0rem;
    padding: 0em;
    border: 1px solid var(--clr-border-main);
    border-radius: 0.5rem;
    background-image: linear-gradient(
        to bottom,
        var(--clr-white) 0em,
        var(--clr-content-bg) 10em
    );
    box-shadow: 0px 2px 4px 2px rgba(57,67,77,0.05);
}
ul.navigation > li {
    box-sizing: border-box;
    display: block;
    padding: 0.67em 1em;
    margin: 0em;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #d2d9d4;
}
ul.navigation > li:last-child {
    border-bottom: none;
}
ul.sidebar > li {
    text-align: start;
    font-size: 0.75em;
}
ul.archive {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
    grid-auto-flow: row;
    gap: 1rem;
    margin: 1rem 0rem 0rem 0rem;
}
ul.archive > li {
    margin: 0em;
}
ol.pingbacks {
    list-style: none;
    padding: 2rem;
    margin: 0rem;
}
ol.comments {
    list-style: none;
    padding: 0rem;
    margin: 0rem;
}
ol.comments > li {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 0em;
    padding: 2rem 2rem 0rem 2rem;
    border-bottom: 1px solid var(--clr-border-main);
}
ol.comments > li:last-child {
    border-bottom: none;
}
ol.comments > li#comment_shim {
    display: none;
}
ol.comments > li.comment_form {
    padding: 2rem;
}
div#main > details {
    display: block;
    box-sizing: border-box;
    background-color: var(--clr-content-bg);
    margin: 0rem 0rem 2rem 0rem;
    padding: 0em;
    border: 1px solid var(--clr-border-main);
    border-radius: 0.5rem;
    background-image: linear-gradient(
        to bottom,
        var(--clr-white) 0em,
        var(--clr-content-bg) 10em
    );
    box-shadow: 0px 2px 4px 2px rgba(57,67,77,0.05);
}
div#main > details > summary {
    box-sizing: border-box;
    margin: 0.5rem 2rem;
    cursor: pointer;
    list-style-position: outside;
}
div#main > details > article {
    display: block;
    padding: 2rem;
    margin: 0em;
    border-top: 1px solid #d2d9d4;
}
table {
    border-collapse: collapse;
    border-spacing: 0em;
    width: 100%;
    margin: 0em 0em 1em 0em;
    overflow-x: scroll;
}
table th {
    text-align: start;
    padding: 0.5em;
    font: inherit;
    font-weight: bold;
    background-color: var(--clr-edit-btn);
    color: var(--clr-white);
    border: 1px solid var(--clr-edit-btn);
    vertical-align: middle;
}
table td {
    text-align: start;
    padding: 0.5em;
    font: inherit;
    border: 1px solid var(--clr-edit-btn);
    vertical-align: middle;
}
form, fieldset {
    margin: 0em;
    padding: 0em;
    border: none;
}
form.search_box {
    display: block;
    position: relative;
    max-width: 12em;
    margin-bottom: 2rem;
}
form.comment_edit {
    width: 100%;
    padding: 0rem 0rem 2rem 0rem;
}
select[disabled],
textarea[disabled],
input[disabled],
button[disabled] {
    cursor: not-allowed;
    opacity: 0.33;
}
select, input {
    box-sizing: border-box;
    display: block;
    width: 320px;
    margin: 0.5em 0em;
    padding: 0.5em;
    background: none;
    text-align: start;
    font: inherit;
    font-size: inherit;
    color: var(--clr-body-txt);
    background-color: var(--clr-white);
    border: 1px solid var(--clr-border-main);
    border-radius: 0em;
}
html[dir="ltr"] select {
    appearance: none;
    padding-right: 1.5em;
    background-image: url(../images/select.svg);
    background-size: 1rem;
    background-position: center right 0.25em;
    background-repeat: no-repeat;
}
html[dir="rtl"] select {
    appearance: none;
    padding-left: 1.5em;
    background-image: url(../images/select.svg);
    background-size: 1rem;
    background-position: center left 0.25em;
    background-repeat: no-repeat;
}
input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    padding: 0em;
}
input[type="radio"] {
    border-radius: 50%;
}
input[type="checkbox"]:checked {
    background-image: url(../images/checkbox.svg);
    background-size: 1rem;
    background-position: center;
    background-repeat: no-repeat;
}
input[type="radio"]:checked {
    background-image: url(../images/radio.svg);
    background-size: 1rem;
    background-position: center;
    background-repeat: no-repeat;
}
select:focus, input:focus {
    background-color: var(--clr-white);
    border: 1px solid var(--clr-link-hover);
    outline: var(--clr-link-hover) solid 1px;
    outline-offset: 0px;
}
input::placeholder {
    color: var(--clr-body-txt);
    opacity: 1;
}
input.error,
input:invalid {
    background-color: var(--clr-input-err);
}
input#sidebar_search_field {
    display: inline;
    width: 100%;
    margin: 0em;
    padding-inline-end: 2.5rem;
}
textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 20ex;
    font: inherit;
    font-size: inherit;
    color: var(--clr-body-txt);
    margin: 0.5em 0em;
    padding: 0.5em;
    background-color: var(--clr-white);
    border: 1px solid var(--clr-border-main);
    border-radius: 0em;
    resize: vertical;
}
textarea:focus {
    border: 1px solid var(--clr-link-hover);
    outline: var(--clr-link-hover) solid 1px;
    outline-offset: 0px;
}
button {
    font: inherit;
    font-size: inherit;
    cursor: pointer;
}
button:focus {
    outline: none;
}
button#sidebar_search_submit {
    display: block;
    position: absolute;
    width: 2.5rem;
    height: 100%;
    top: 0px;
    inset-inline-end: 0px;
    border: none;
    border-radius: 0em;
    margin: 0em;
    padding: 0em;
    background: transparent url(../images/search.svg) center no-repeat;
    background-size: 50%;
    overflow: hidden;
    color: transparent;
}
button#sidebar_search_submit:focus {
    background-color: var(--clr-border-main);
}
button#sidebar_search_submit:hover {
    background-size: 60%;
}
label {
    display: block;
    margin-top: 1em;
}
div#main {
    width: 100%;
    margin: 0em;
    padding: 0em;
    overflow: visible;
}
div#sidebar {
    display: block;
    position: absolute;
    top: 2rem;
    inset-inline-start: 2rem;
    width: 12rem;
}
div.prev {
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
}
div.next {
    width: 100%;
    text-align: center;
    margin-top: 2rem;
}
div.ribbon {
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    color: var(--clr-white);
    background-color: #426aa6;
    padding: 0.5em;
    margin-bottom: 2rem;
    border-radius: 0.25em;
}
div.flash {
    background-color: var(--clr-link-hover);
}
div.metadata {
    font-weight: normal;
    font-size: 0.9em;
    text-align: center;
    display: block;
    position: relative;
    bottom: 0em;
    inset-inline-start: -2rem;
    width: 100%;
    padding: 0.25rem 2rem;
    margin-top: 2rem;
    background-color: var(--clr-white);
    border-top: 1px solid var(--clr-border-main);
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
article.post.pinned div.metadata {
    background-color: var(--clr-pinned-bg);
}
div.comments_pagination {
    width: 100%;
    text-align: center;
}
div.tags {
    margin: 1rem 0rem 0rem 0rem;
    font-size: 0.75em;
}
div.doaction {
    font-family: inherit;
    margin: 1em 0em;
}
div.admin {
    margin: 1em 0em 0em 0em;
}
div#main > article, div.standalone {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    background-color: var(--clr-content-bg);
    margin: 0rem auto 2rem 0rem;
    padding: 2rem 2rem 0rem 2rem;
    border: 1px solid var(--clr-border-main);
    border-radius: 0.5rem;
    background-image: linear-gradient(
        to bottom,
        var(--clr-white) 0em,
        var(--clr-content-bg) 10em
    );
    box-shadow: 0px 2px 4px 2px rgba(57,67,77,0.05);
}
div#main > article.discourse,
div#main > article.commentary {
    padding: 0rem;
    overflow: hidden;
}
div#main > article.page {
    padding-bottom: 2rem;
}
div.standalone {
    margin-bottom: 0rem;
    padding-bottom: 2rem;
}
div.user_controls.standalone,
div.user_login.standalone,
div.lost_password.standalone,
div.reset_password.standalone,
div.user_register.standalone {
    max-width: 384px;
}
ul.archive article.post.archive {
    display: block;
    position: relative;
    height: 196px;
    font-size: 0.75em;
    background-color: var(--clr-content-bg);
    padding: 8px;
    border: 1px solid var(--clr-border-main);
    border-radius: 0.5rem;
    background-image: linear-gradient(
        to bottom,
        var(--clr-white) 0em,
        var(--clr-content-bg) 10em
    );
}
section.post_archive_container {
    height: 100%;
    overflow: hidden;
}
article > header {
    display: block;
    margin: 0rem 0rem 1rem 0rem;
    padding: 0rem;
}
article > section {
    display: block;
    width: 100%;
    margin: 1rem 0rem 0rem 0rem;
    padding: 0rem;
}
article > footer {
    display: block;
    text-align: start;
    margin: 1rem 0rem 0rem 0rem;
    padding: 0rem;
    border: none;
    clear: both;
}
article.video video,
article.audio audio {
    width: 100%;
}
a:link,
a:visited {
    color: var(--clr-body-txt);
    text-decoration: none;
}
a:hover,
a:focus,
a:active {
    outline: none;
    color: var(--clr-link-hover);
    text-decoration: underline;
    text-underline-offset: 0.125em;
    text-decoration-thickness: 0.0625em;
}
div.ribbon a {
    color: var(--clr-white);
    font-weight: bold;
}
div.traversal a {
    display: inline-block;
    padding: 0.5em 1em;
    min-width: 8em;
    border-radius: 0.25em;
    color: var(--clr-white);
    text-decoration: none;
    background-color: var(--clr-tag);
}
div.traversal a:hover,
div.traversal a:focus,
div.traversal a:active {
    color: var(--clr-white);
    background-color: var(--clr-tag-hover);
}
section a:link,
p a:link,
section a:visited,
p a:visited {
    color: var(--clr-body-txt);
    text-decoration: underline;
    text-underline-offset: 0.125em;
    text-decoration-thickness: 0.0625em;
}
section a:hover,
p a:hover,
section a:focus,
p a:focus,
section a:active,
p a:active {
    color: var(--clr-link-hover);
}
div.tags a,
div.tag_cloud a {
    display: inline-block;
    padding: 0.25em 0.5em;
    margin-bottom: 4px;
    border-radius: 0.25em;
    color: var(--clr-white);
    text-decoration: none;
    background-color: var(--clr-tag);
}
div.tags a:hover,
div.tags a:focus,
div.tags a:active,
div.tag_cloud a:hover,
div.tag_cloud a:focus,
div.tag_cloud a:active {
    color: var(--clr-white);
    background-color: var(--clr-tag-hover);
}
div.doaction a, button {
    display: inline-block;
    white-space: nowrap;
    padding: 0.5em 1em;
    border: none;
    border-radius: 0.25em;
    color: var(--clr-white);
    text-decoration: none;
    background-color: var(--clr-edit-btn);
}
div.doaction a:hover,
button:hover,
div.doaction a:focus,
button:focus,
div.doaction a:active,
button:active {
    background-color: var(--clr-edit-btn-hover);
}
div.doaction a.post_delete_link,
div.doaction a.delete_link {
    background-color: var(--clr-delete-btn);
}
div.doaction a.post_delete_link:hover,
div.doaction a.delete_link:hover,
div.doaction a.post_delete_link:focus,
div.doaction a.delete_link:focus,
div.doaction a.post_delete_link:active,
div.doaction a.delete_link:active {
    background-color: var(--clr-delete-btn-hover);
}
section.photo > a:focus {
    outline: var(--clr-link-hover) solid 4px;
}
a.likes > img {
    display: inline-block;
    position: relative;
    top: 0px;
    height: 1rem;
}
a.likes:hover > img,
a.likes:focus > img,
a.likes:active > img {
    top: 1px;
}
a.archive_post_link {
    box-sizing: border-box;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    border-radius: 0.5rem;
    color: transparent;
    background-color: transparent;
}
a.archive_post_link:hover,
a.archive_post_link:focus,
a.archive_post_link:active {
    outline: var(--clr-link-hover) solid 4px;
}
iframe {
    max-width: 100%;
    border: none;
    margin: 1rem 0rem;
}
iframe.video_embed {
    width: 100%;
    aspect-ratio: 16 / 9;
}
img {
    border-style: none;
    margin: 0em;
    padding: 0em;
}
section img {
    display: block;
    max-width: 100%;
}
section.photo img,
article.archive img {
    width: 100%;
}
article > *:first-child,
header > *:first-child,
section > *:first-child,
footer > *:first-child,
form > *:first-child,
aside > *:first-child,
#sidebar > *:first-child,
div.standalone > *:first-child {
    margin-top: 0rem;
}
article > *:last-child,
header > *:last-child,
section > *:last-child,
footer > *:last-child,
form > *:last-child,
aside > *:last-child,
div.standalone > *:last-child {
    margin-bottom: 0rem;
}
.ajax_loading {
    background-size: 30px 30px;
    background-image: linear-gradient(
        -45deg,
        #f2f0e6 25%,
        transparent 25%,
        transparent 50%,
        #f2f0e6 50%,
        #f2f0e6 75%,
        transparent 75%,
        transparent
    ) !important;
    animation: ajax_loading 2s linear infinite;
}
.ajax_loading .doaction {
    visibility: hidden;
}
@keyframes ajax_loading {
    from {
        background-position: 0px 0px;
    }
    to {
        background-position: 60px 30px;
    }
}
@media print {
    html {
        font-size: 4.2mm;
    }
    body {
        background-color: var(--clr-white);
    }
    div#main > article,
    div.standalone {
        background-color: var(--clr-white);
        background-image: none;
        page-break-inside: avoid;
        box-shadow: none;
    }
    ul.navigation {
        background-color: var(--clr-white);
        background-image: none;
    }
}
@media screen and (max-width: 959px) {
    body {
        margin: 1rem;
    }
    form.comment_edit {
        padding: 0rem 0rem 1rem 0rem;
    }
    input, select {
        width: 100%;
    }
    form.search_box {
        margin: 0rem auto 1rem auto;
    }
    ol.pingbacks {
        padding: 1rem;
    }
    ol.comments > li {
        margin: 0em;
        padding: 1rem 1rem 0rem 1rem;
    }
    ol.comments > li.comment_form {
        padding: 1rem;
    }
    ul.navigation > li {
        text-align: center;
    }
    div#sidebar {
        position: static;
        width: 100%;
        text-align: center;
        margin-bottom: 2rem;
    }
    div#sidebar > *:not(h1):not(form) {
        display: none;
    }
    div#sidebar > #menu {
        display: block;
    }
    div#sidebar > #menu:target {
        display: none;
    }
    div#sidebar > #menu:target ~ *:not(script, style) {
        display: block;
    }
    div#main > article {
        padding: 1rem 1rem 0rem 1rem;
    }
    div.standalone {
        padding: 1rem;
    }
    div.user_controls.standalone,
    div.user_login.standalone,
    div.lost_password.standalone,
    div.reset_password.standalone,
    div.user_register.standalone {
        margin-left: auto;
    }
    div.metadata {
        left: -1rem;
        margin-top: 1rem;
        padding: 0.25rem 1rem;
    }
}
@media screen and (max-width: 639px) {
    aside {
        float: none;
        max-width: 100%;
        margin: 1rem 0rem;
    }
}
@media (prefers-reduced-motion) {
    .ajax_loading {
        animation: none;
    }
}
@media (prefers-contrast: more) {
    body {
        background-color: var(--clr-white);
    }
    div#main > article,
    div.standalone {
        background-color: var(--clr-white);
        background-image: none;
    }
    ul.navigation {
        background-color: var(--clr-white);
        background-image: none;
    }
}