commit 2555c749781d0c45f748023adcb902e554d0746a parent ba11c73f0664b70512078bd84dc4897f70696de5 Author: Yohanes Bandung Bondowoso <hi@ybbond.dev> Date: Sat, 2 Jan 2021 22:02:27 +0700 migrate from scss to css Diffstat:
| A | assets/content.css | | | 185 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| D | assets/content.scss | | | 243 | ------------------------------------------------------------------------------- |
| R | assets/fonts.scss -> assets/fonts.css | | | 0 | |
| A | assets/footer.css | | | 71 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | assets/header.css | | | 27 | +++++++++++++++++++++++++++ |
| A | assets/main.css | | | 210 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | assets/responsive.css | | | 102 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| D | assets/styles.scss | | | 459 | ------------------------------------------------------------------------------- |
| A | assets/theme.css | | | 170 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | assets/variables.css | | | 24 | ++++++++++++++++++++++++ |
| D | assets/variables.scss | | | 48 | ------------------------------------------------ |
| M | layouts/_default/single.html | | | 4 | ++-- |
| M | layouts/partials/head/head.html | | | 24 | ++++++++++++++++++++++-- |
| M | layouts/partials/header/header.html | | | 6 | ------ |
| D | static/darkToggler.js | | | 29 | ----------------------------- |
15 files changed, 813 insertions(+), 789 deletions(-)
diff --git a/assets/content.css b/assets/content.css @@ -0,0 +1,185 @@ +.content { + font-family: var(--font-text); + width: 100%; +} + +.content .language-json { + font-size: 0.75rem; +} + +.content .headline-hash { + padding: 0 0.2em; +} + +.content .before-hash { + position: absolute; + font-size: 0.9em; + top: 0.1rem; +} +.content .before-hash.h2 { + left: -1.6em; +} +.content .before-hash.h3 { + left: -2.4em; +} + +.content figcaption { + font-size: 0.8em; +} + +.content twitter-widget, .content .twitter-tweet { + margin-left: auto; + margin-right: auto; +} + +.content i:not(.no-sup) { + font-size: 0.8rem; + vertical-align: 0.4rem; +} + +.content i.fa-font-awesome-flag { + font-size: 0.6rem; +} + +.content p:not([class]) { + margin: 1.2rem 0; +} + +.content p + ul, .content p + ol { + margin-top: -0.8rem; +} + +.content table { + display: block; + overflow-x: auto; + border-collapse: collapse; +} +.content table td, .content table th { + border: 1px solid; +} +.content table td { + padding: 0.5em 1em; +} +.content table th { + padding: 1em 2em; +} + +.content ol { + margin: 1.5em 0; + padding: 0; + counter-reset: my-awesome-counter; + list-style: none; +} +.content ol li { + counter-increment: my-awesome-counter; + list-style-position: outside; + margin-bottom: 0.2em; +} +.content ol li span { + position: relative; +} +.content ol li span:before { + position: absolute; + right: 0.5em; + top: 0.1em; + content: counter(my-awesome-counter)'.'; + font-size: 0.8em; +} + +.content ul { + margin: 1.5em 0; + padding: 0; + list-style: none; +} +.content ul li { + margin-bottom: 0.2em; + position: relative; +} +.content ul li span { + position: relative; +} +.content ul li span:before { + right: 0.6em; + top: -0.2em; + display: inline-block; + content: "–"; + position: absolute; + z-index: 1; +} +.content ul li input { + margin-left: -1.9em; + position: absolute; + z-index: 2; + top: 3.9px; + margin-right: 0; +} + +.content__hr { + margin: 4em 0 0; +} + +.notes { + margin-bottom: 2rem; +} +.notes > div, .notes > p { + margin: 0; + margin-top: 0.7rem; +} +.notes > div > p, .notes > p > p { + margin: 0; + margin-top: 0.7rem; +} +.notes:target { + outline-style: solid; + outline-width: 0.2em; + outline-offset: 0.6em; +} + +.notes__title { + margin: 0; +} +.notes__title a { + font-family: var(--font-mono); +} + +.notes__content { + margin-top: 0 !important; +} +.notes__content > p { + margin-top: 0 !important; +} + +.twitter-link { + margin-bottom: 0.2rem; + font-size: 0.9rem; +} + +.mastodon-link { + margin-top: 0.2rem; + font-size: 0.9rem; +} + +.responses { + margin-bottom: 3rem; +} +.responses:target { + outline-style: solid; + outline-width: 0.2rem; + outline-offset: 1.3rem; +} + +.responses h1 { + margin-bottom: 0; +} + +.responses__subtitle { + margin: 0; +} +.responses__subtitle a { + font-family: var(--font-mono); +} + +.image-figure { + margin-top: 1.5rem; + margin-bottom: 1.5rem; +} diff --git a/assets/content.scss b/assets/content.scss @@ -1,243 +0,0 @@ -@import "fonts"; -@import "variables"; - -@function themed($key) { - @return map-get($theme-map, $key); -} - -.content { - font-family: $font-text; - width: 100%; - - &__hr { - margin: 4em 0 0; - } - - .language-json { - font-size: 0.75rem; - } - - .headline-hash { - padding: 0 0.2em; - @media(min-width: 600px) { - display: none; - } - } - - .before-hash { - position: absolute; - font-size: 0.9em; - top: 0.1rem; - &.h2 { - left: -1.6em; - } - &.h3 { - left: -2.4em; - } - @media(max-width: 599px) { - display: none; - } - } - - i:not(.no-sup) { - font-size: 0.8rem; - vertical-align: 0.4rem; - } - - i.fa-font-awesome-flag { - font-size: 0.6rem; - } - - p:not([class]) { - margin: 1.2rem 0; - } - - p + ul, p + ol { - margin-top: -0.8rem; - } - - table { - display: block; - overflow-x: auto; - border-collapse: collapse; - td, th { - border: 1px solid; - @include themify($themes) { - border-color: themed('color-text'); - } - } - td { - padding: 0.5em 1em; - } - th { - padding: 1em 2em; - @include themify($themes) { - background-color: themed('color-background-hover'); - color: themed('color-text'); - } - } - tr:nth-child(even) { - @include themify($themes) { - background-color: themed('color-background-hover'); - color: themed('color-text'); - } - } - } - - ol { - margin: 1.5em 0; - padding: 0; - counter-reset: my-awesome-counter; - list-style: none; - li { - counter-increment: my-awesome-counter; - list-style-position: outside; - margin-bottom: 0.2em; - span { - position: relative; - &:before { - position: absolute; - right: 0.5em; - top: 0.1em; - content: counter(my-awesome-counter)'.'; - font-size: 0.8em; - @include themify($themes) { - color: themed('color-red'); - } - } - } - } - } - - ul { - margin: 1.5em 0; - padding: 0; - list-style: none; - li { - margin-bottom: 0.2em; - position: relative; - span { - position: relative; - &:before { - right: 0.6em; - top: -0.2em; - display: inline-block; - content: "–"; - position: absolute; - z-index: 1; - @include themify($themes) { - color: themed('color-red'); - } - } - } - input { - margin-left: -1.9em; - position: absolute; - z-index: 2; - top: 3.9px; - margin-right: 0; - } - } - } - - figcaption { - font-size: 0.8em; - } - - twitter-widget, .twitter-tweet { - margin-left: auto; - margin-right: auto; - } -} - -.notes { - margin-bottom: 2rem; - - & > div, & > p { - margin: 0; - margin-top: 0.7rem; - & > p { - margin: 0; - margin-top: 0.7rem; - } - } - - &__title { - margin: 0; - a { - font-family: $font-mono; - } - } - - &__content { - margin-top: 0 !important; - & > p { - margin-top: 0 !important; - } - } - - &:target { - outline: solid 0.2em; - outline-offset: 0.6em; - @include themify($themes) { - outline-color: themed('color-background-hover'); - } - @media (max-width: 599px) { - outline: solid 0.3em; - outline-offset: 0.5em; - } - } - - @media (max-width: 599px) { - &__title { - margin: 10px 0 0; - &__separator { - display: none; - } - display: flex; - flex-direction: column; - } - } -} - -.twitter-link { - margin-bottom: 0.2rem; - font-size: 0.9rem; -} - -.mastodon-link { - margin-top: 0.2rem; - font-size: 0.9rem; -} - -.responses { - margin-bottom: 3rem; - - h1 { - margin-bottom: 0; - } - - &__subtitle { - margin: 0; - a { - font-family: $font-mono; - } - } - - &:target { - outline: solid 0.2rem; - outline-offset: 1.3rem; - @include themify($themes) { - outline-color: themed('color-background-hover'); - } - @media (max-width: 599px) { - outline: solid 0.3rem; - outline-offset: 1.2rem 0.8rem; - } - } -} - -.image-figure { - margin-top: 1.5rem; - margin-bottom: 1.5rem; -} diff --git a/assets/fonts.scss b/assets/fonts.css diff --git a/assets/footer.css b/assets/footer.css @@ -0,0 +1,71 @@ +.footer__nav { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 1.5em; +} + +.footer__nav > p { + margin: 0; +} + +.footer__nav__left { + text-align: left; +} + +.footer__nav__right { + text-align: right; +} +.footer__nav__right a { + padding: 0 0.2rem; + margin: 0 0.2rem; +} + +.footer .web-ring { + font-size: 0.8rem; + margin: 0 0 1.5rem; +} + +.footer__separator { + margin: 0.5rem auto 1.4rem; +} + +.footer__license { + margin: 0.7rem 0 1rem; + font-size: 0.7rem; +} + +.footer .hcard { + max-width: 19rem; + font-size: 0.8rem; + margin: 2rem auto 0.5rem; + padding: 1rem 1rem 0.8rem; + position: relative; + border-style: solid; + border-width: 1px; +} +.footer .hcard .h-card { + position: relative; +} +.footer .hcard .h-card img { + position: absolute; + width: 3.8rem; + height: 3.8rem; +} +.footer .hcard .h-card > a { + margin-left: 5rem; +} +.footer .hcard .h-card > .p-locality { + margin-left: 5rem; +} + +.footer .hcard__description { + top: -0.7rem; + left: 0.8rem; + padding: 0 0.4rem; + position: absolute; +} + +.footer .hcard__description > p { + margin: 0; +} diff --git a/assets/header.css b/assets/header.css @@ -0,0 +1,27 @@ +.header { + margin-top: 1em; +} + +.header__menu { + margin: 0 0 10px; + display: flex; + justify-content: flex-start; +} + +.header__menu__list { + padding: 0; + margin: 0; + display: flex; + flex-grow: 1; + flex-wrap: nowrap; +} + +.header__menu__list__item { + margin: 0 0.4rem; + border-style: solid; + border-width: 1px; +} + +.header__menu__list__item:first-child { + margin-left: 0; +} diff --git a/assets/main.css b/assets/main.css @@ -0,0 +1,210 @@ +html { + font-family: var(--font-text); + letter-spacing: 0.025rem; + line-height: 1.6; + text-rendering: optimizeLegibility; + font-size: 16px; +} + +body { + max-width: 600px; + margin: 0 auto; +} + +[hidden] { + display: none; +} + +pre { + overflow: auto; + padding: 0.5rem; +} + +hr { + border: 0; + height: 0; + border-top-width: 1px; + border-top-style: solid; +} +hr.list__subtitle { + margin-bottom: 2rem; +} + +code { + padding: 0.1rem; + font-family: var(--font-mono); + font-size: 0.9rem; +} +code.language-bash::before { + content: "$ "; +} + +h1, h2, h3, h4, h5 { + font-family: var(--font-text); + line-height: 1.3; + position: relative; +} +h1 a, h2 a, h3 a, h4 a, h5 a { + font-family: var(--font-mono); +} + +h1:not(.header__title) { + font-size: 2.2rem; +} + +a { + text-decoration: none; +} +a:hover:not(.wm-avatar):not(.no-hover):not(.no-outline):not(.footnote-ref), +a#active:not(.no-outline):not(.footnote-ref) { + outline-style: solid; + outline-width: 0.3rem; +} +a.button { + display: inline-block; + padding: 0.3rem 0.7rem; +} +a#active { + cursor: default; +} +blockquote { + margin: inherit auto; + margin-left: 0; + padding: 0 1em; + border-left-style: solid; + border-left-width: 2px; +} +blockquote p { + font-size: 0.9rem; +} + +time { + font-family: var(--font-mono); +} +time[title] { + cursor: help; +} + +.listing__post { + width: 100%; + display: inline-block; + padding: 0.5rem 0 0.7rem; +} +.listing__post__title { + margin: 0.01rem; +} +.listing__post__description { + margin: 0; + margin-top: 0.8em; +} + +.main__more { + padding: 1em 0 0; + margin-bottom: 0; + margin-right: 0.3em; + text-align: right; +} + +.summary { + margin: 1.5em 0; +} +.summary p { + margin: 0em 0 0.4em; +} +.summary__title { + margin-bottom: 0; +} + +.pagination { + padding: 1em 0; + display: flex; + &__left { + text-align: left; + margin-left: 0.3rem; + } + &__center { + flex: 1; + text-align: center; + } + &__right { + text-align: right; + margin-right: 0.3rem; + } +} + +.tagitem { + font-family: $font-mono; + margin: 0 0.4rem; +} + +.footnotes { + hr { + margin-top: 3rem; + margin-bottom: 0.2rem; + } + &__text { + margin: 0; + } +} + +.footnote-ref::before { + content: '['; +} +.footnote-ref::after { + content: ']'; +} + +.bottom-hcard-container { + margin: 4rem 0 1rem; +} +.hcard-top { + margin: 0 0 0.8rem; + font-size: 0.9rem; +} +.hcard-tags { + margin: 0.8rem 0 0.7rem; +} +.hcard-bottom { + margin: 0; + font-size: 0.9rem; +} + +.wm-hr { + margin-bottom: 0.2rem; +} +.wm-div { + margin-bottom: 3rem; +} + +.wm-title { + margin: 0 0 0.7rem; +} +.wm-subtitle { + margin: 0.7rem 0 0.3rem; + font-size: 0.8rem; +} + +a.wm-avatar { + width: 2rem; + height: 2rem; + font-size: 0.6rem; + margin-right: 0.4rem; +} +img.wm-avatar { + width: 2rem; + height: 2rem; + border-radius: 1rem; +} + +.wm-reply { + margin-bottom: 1rem; + padding-left: 1rem; +} +.wm-reply-head { + display: flex; + align-items: center; +} +.wm-reply-content { + margin-top: 0.4rem; + font-size: 0.9rem; +} diff --git a/assets/responsive.css b/assets/responsive.css @@ -0,0 +1,102 @@ +@media (min-width: 600px) { + /* content */ + .headline-hash { + display: none; + } + + /* header */ + .header__title:not(h1) { + margin-top: 1.4em; + } +} + +@media (max-width: 599px) { + html { + font-size: 15px; + } + + body { + padding: 0 1.5em; + margin: 0; + } + + .listing__post { + padding: 0.3em 0 1.3em 0; + } + + /* content */ + .before-hash { + display: none; + } + .responses:target { + outline: solid 0.3rem; + outline-offset: 1.2rem 0.8rem; + } + .notes:target { + outline: solid 0.3em; + outline-offset: 0.5em; + } + .notes__title { + margin: 10px 0 0; + display: flex; + flex-direction: column; + } + .notes__title__separator { + display: none; + } + + /* header */ + .header__title { + font-size: 1.4rem; + margin: 1rem 0; + } + .header__menu__list { + justify-content: space-between; + } + .header__menu__list__item { + margin: 0 0.1rem; + font-size: 0.9rem; + } + + /* footer */ + .footer__nav { + font-size: 0.9rem; + display: flex; + flex-direction: column; + } + .footer__nav__left { + text-align: center; + padding-bottom: 0.5em; + margin: 0; + } + .footer__nav__right { + text-align: center; + margin-top: 0; + } + .footer__nav__right a { + line-height: 2rem; + } +} + +@media (max-width: 400px) { + /* footer */ + .footer__nav__right a { + padding: 0 0.15rem; + margin: 0 0.15rem; + } +} + +@media(max-width: 360px) { + a.button { + padding: 0.3rem; + } + + /* header */ + .header__title { + font-size: 1.2em; + } + .header__menu__list__item { + font-size: 0.8rem; + } +} + diff --git a/assets/styles.scss b/assets/styles.scss @@ -1,459 +0,0 @@ -@import "variables"; -@import "fonts"; -@import "content"; - -html { - @include themify($themes) { - background-color: themed('color-background'); - color: themed('color-text'); - font-weight: themed('font-weight'); - } - font-family: $font-text; - letter-spacing: 0.025rem; - line-height: 1.6; - text-rendering: optimizeLegibility; - font-size: 16px; -} - -@media (max-width: 599px) { - html { - font-size: 15px; - } - body { - padding: 0 1.5em; - margin: 0; - } -} - -strong { - @include themify($themes) { - font-weight: themed('font-weight-bold'); - } -} - -body { - @include themify($themes) { - background-color: themed('color-background'); - color: themed('color-text'); - } - max-width: 600px; - margin: 0 auto; -} - -[hidden] { - display: none; -} - -pre { - overflow: auto; - padding: 0.5rem; -} - -:not(pre) > code { - @include themify($themes) { - background-color: themed('color-background-hover'); - } -} - -hr { - border: 0; - height: 0; - @include themify($themes) { - border-top: 1px solid themed('color-text'); - } - &.list__subtitle { - margin-bottom: 2rem; - } -} - -code { - padding: 0.1rem; - font-family: $font-mono; - font-size: 0.9rem; - &.language-bash { - &:before { - content: "$ "; - } - } -} - -h1, h2, h3, h4, h5 { - @include themify($themes) { - color: themed('color-green'); - font-weight: themed('font-weight'); - } - font-family: $font-text; - line-height: 1.3; - position: relative; - a { - font-family: $font-mono; - } -} - -h1:not(.header__title) { - font-size: 2.2rem; -} - -a { - text-decoration: none; - @include themify($themes) { - color: themed('color-blue'); - &.link-white, .link-white { - color: themed('color-text'); - } - } - &#active { - cursor: default; - } - &:hover:not(.wm-avatar):not(.no-hover), &#active { - @include themify($themes) { - background-color: themed('color-background-hover'); - color: themed('color-red'); - } - &:not(.no-outline):not(.footnote-ref) { - outline-style: solid; - outline-width: 0.3rem; - @include themify($themes) { - outline-color: themed('color-background-hover'); - background-color: themed('color-background-hover'); - } - } - } - &.button { - display: inline-block; - padding: 0.3rem 0.7rem; - @media(max-width: 360px) { - padding: 0.3rem; - } - } -} - -blockquote { - margin: inherit auto; - margin-left: 0; - padding: 0 1em; - border-left: 2px solid; - @include themify($themes) { - border-color: themed('color-red'); - } - p { - font-size: 0.9rem; - } -} - -time { - @include themify($themes) { - color: themed('color-red'); - } - font-family: $font-mono; - &[title] { - cursor: help; - } -} - -.listing { - &__post { - width: 100%; - display: inline-block; - padding: 0.5rem 0 0.7rem; - @media (max-width: 599px) { - padding: 0.3em 0 1.3em 0; - } - &__title { - margin: 0.01rem; - } - &__description { - margin: 0; - margin-top: 0.8em; - } - } -} - -.header { - margin-top: 1em; - @media (min-width: 600px) { - &__title:not(h1) { - margin-top: 1.4em; - } - } - @media (max-width: 599px) { - &__title { - font-size: 1.4rem; - margin: 1rem 0; - } - } - @media (max-width: 360px) { - &__title { - font-size: 1.2em; - } - } - - &__menu { - margin: 0 0 10px; - display: flex; - justify-content: flex-start; - &__list { - padding: 0; - margin: 0; - display: flex; - flex-grow: 1; - flex-wrap: nowrap; - @media (max-width: 599px) { - justify-content: space-between; - } - &__item { - &:first-child { - margin-left: 0; - } - margin: 0 0.4rem; - border-style: solid; - border-width: 1px; - @media (max-width: 599px) { - margin: 0 0.1rem; - font-size: 0.9rem; - } - @media (max-width: 360px) { - font-size: 0.8rem; - } - } - - &__toggler { - &__off { - display: none; - } - font-size: 1.5rem; - padding: 0 0.3em; - background-color: transparent; - background-repeat: no-repeat; - border: none; - cursor: pointer; - overflow: hidden; - outline: none; - @media (min-width: 600px) { - margin-left: 20px; - } - &:hover { - @include themify($themes) { - background-color: themed('color-background-hover'); - } - } - } - } - } -} - -.main { - &__more { - padding: 1em 0 0; - margin-bottom: 0; - margin-right: 0.3em; - text-align: right; - } -} - -.summary { - margin: 1.5em 0; - p { - margin: 0em 0 0.4em; - } - &__title { - margin-bottom: 0; - } -} - -.pagination { - padding: 1em 0; - display: flex; - &__left { - text-align: left; - margin-left: 0.3rem; - } - &__center { - flex: 1; - text-align: center; - } - &__right { - text-align: right; - margin-right: 0.3rem; - } -} - -.tagitem { - font-family: $font-mono; - margin: 0 0.4rem; -} - -.footer { - &__separator { - margin: 0.5rem auto 1.4rem; - } - - &__nav { - display: flex; - flex-direction: row; - justify-content: space-between; - margin-bottom: 1.5em; - & > p { - margin: 0; - } - &__left { - text-align: left; - } - &__right { - text-align: right; - a { - padding: 0 0.2rem; - margin: 0 0.2rem; - } - } - @media (max-width: 599px) { - font-size: 0.9rem; - display: flex; - flex-direction: column; - &__left { - text-align: center; - padding-bottom: 0.5em; - margin: 0; - } - &__right { - text-align: center; - margin-top: 0; - a { - line-height: 2rem; - } - } - } - @media (max-width: 400px) { - &__right { - a { - padding: 0 0.15rem; - margin: 0 0.15rem; - } - } - } - } - - &__analytic { - font-size: 0.8em; - } - - .hcard { - max-width: 19rem; - font-size: 0.8rem; - margin: 2rem auto 0.5rem; - padding: 1rem 1rem 0.8rem; - position: relative; - @include themify($themes) { - border: solid 1px themed('color-border'); - } - &__description { - top: -0.7rem; - left: 0.8rem; - padding: 0 0.4rem; - position: absolute; - @include themify($themes) { - background-color: themed('color-background'); - } - & > p { - margin: 0; - } - } - .h-card { - position: relative; - img { - position: absolute; - width: 3.8rem; - height: 3.8rem; - } - & > a { - margin-left: 5rem; - } - & > .p-locality { - margin-left: 5rem; - } - } - } - - .web-ring { - font-size: 0.8rem; - margin: 0 0 1.5rem; - } - - &__license { - margin: 0.7rem 0 1rem; - font-size: 0.7rem; - } -} - -.footnotes { - hr { - margin-top: 3rem; - margin-bottom: 0.2rem; - } - &__text { - margin: 0; - } -} -.footnote-ref { - &:before { - content: '['; - } - &:after { - content: ']'; - } -} - -.bottom-hcard-container { - margin: 4rem 0 1rem; -} -.hcard-top { - margin: 0 0 0.8rem; - font-size: 0.9rem; -} -.hcard-tags { - margin: 0.8rem 0 0.7rem; -} -.hcard-bottom { - margin: 0; - font-size: 0.9rem; -} - -.wm-hr { - margin-bottom: 0.2rem; -} -.wm-div { - margin-bottom: 3rem; -} - -.wm-title { - margin: 0 0 0.7rem; -} -.wm-subtitle { - margin: 0.7rem 0 0.3rem; - font-size: 0.8rem; -} - -a.wm-avatar { - width: 2rem; - height: 2rem; - font-size: 0.6rem; - margin-right: 0.4rem; -} -img.wm-avatar { - width: 2rem; - height: 2rem; - border-radius: 1rem; -} - -.wm-reply { - margin-bottom: 1rem; - padding-left: 1rem; -} -.wm-reply-head { - display: flex; - align-items: center; -} -.wm-reply-content { - margin-top: 0.4rem; - font-size: 0.9rem; -} diff --git a/assets/theme.css b/assets/theme.css @@ -0,0 +1,170 @@ +@media (prefers-color-scheme: light) { + html { + background-color: var(--light-background); + color: var(--light-text); + font-weight: var(--light-font); + } + + h1, h2, h3, h4, h5 { + color: var(--light-green); + font-weight: var(--light-font); + } + + a { + color: var(--light-blue); + } + .link-white { + color: var(--light-text); + } + + a:hover:not(.wm-avatar):not(.no-hover), a#active { + background-color: var(--light-background-hover); + color: var(--light-red); + } + a:hover:not(.wm-avatar):not(.no-hover):not(.no-outline):not(.footnote-ref), + a#active:not(.no-outline):not(.footnote-ref) { + outline-color: var(--light-background-hover); + background-color: var(--light-background-hover); + } + + hr { + border-top-color: var(--light-text); + } + + strong { + font-weight: var(--light-font-bold); + } + + time { + color: var(--light-red); + } + + blockquote { + border-left-color: var(--light-red); + } + + :not(pre) > code { + background-color: var(--light-background-hover); + } + + /* content */ + .notes:target { + outline-color: var(--light-background-hover); + } + .responses:target { + outline-color: var(--light-background-hover); + } + + .content ol li span:before { + color: var(--light-red); + } + .content ul li span:before { + color: var(--light-red); + } + + .content table th { + background-color: var(--light-background-hover); + color: var(--light-text); + } + .content table td, .content table th { + border-color: var(--light-text); + } + .content table tr:nth-child(even) { + background-color: var(--light-background-hover); + color: var(--light-text); + } + + /* footer */ + .footer .hcard { + border: solid 1px var(--light-border); + } + .footer .hcard__description { + background-color: var(--light-background); + } +} + +@media (prefers-color-scheme: dark) { + html { + background-color: var(--dark-background); + color: var(--dark-text); + font-weight: var(--dark-font); + } + + h1, h2, h3, h4, h5 { + color: var(--dark-green); + font-weight: var(--dark-font); + } + + a { + color: var(--dark-blue); + } + .link-white { + color: var(--dark-text); + } + + a:hover:not(.wm-avatar):not(.no-hover), a#active { + background-color: var(--dark-background-hover); + color: var(--dark-red); + } + a:hover:not(.wm-avatar):not(.no-hover):not(.no-outline):not(.footnote-ref), + a#active:not(.no-outline):not(.footnote-ref) { + outline-color: var(--dark-background-hover); + background-color: var(--dark-background-hover); + } + + hr { + border-top-color: var(--dark-text); + } + + strong { + font-weight: var(--dark-font-bold); + } + + time { + color: var(--dark-red); + } + + blockquote { + border-color-color: var(--dark-red); + } + + :not(pre) > code { + background-color: var(--dark-background-hover); + } + + /* content */ + .notes:target { + outline-color: var(--dark-background-hover); + } + .responses:target { + outline-color: var(--dark-background-hover); + } + + .content ol li span:before { + color: var(--dark-red); + } + .content ul li span:before { + color: var(--dark-red); + } + + .content table th { + background-color: var(--dark-background-hover); + color: var(--dark-text); + } + .content table td, .content table th { + border-color: var(--dark-text); + } + .content table tr:nth-child(even) { + background-color: var(--dark-background-hover); + color: var(--dark-text); + } + + /* footer */ + .footer .hcard { + border: solid 1px var(--dark-border); + } + .footer .hcard__description { + background-color: var(--dark-background); + } +} + diff --git a/assets/variables.css b/assets/variables.css @@ -0,0 +1,24 @@ +:root { + --light-text: #242424; + --light-background: #E3E0D7; + --light-background-hover: #D4D1C7; + --light-border: #555555; + --light-red: #C31B00; + --light-blue: #2263b6; + --light-green: #257933; + --light-font: 400; + --light-font-bold: 600; + + --dark-text: #E3E0D7; + --dark-background: #242424; + --dark-background-hover: #303030; + --dark-border: #808080; + --dark-red: #F9690E; + --dark-blue: #8DBFFF; + --dark-green: #79D688; + --dark-font: 300; + --dark-font-bold: 700; + + --font-mono: 'iA Writer Duospace', monospace; + --font-text: -apple-system, BlinkMacSystemFont, avenir, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif; +} diff --git a/assets/variables.scss b/assets/variables.scss @@ -1,48 +0,0 @@ -@mixin themify($themes: $themes) { - @each $theme, $map in $themes { - - .theme-#{$theme} & { - $theme-map: () !global; - @each $key, $submap in $map { - $value: map-get(map-get($themes, $theme), '#{$key}'); - $theme-map: map-merge($theme-map, ($key: $value)) !global; - } - - @content; - $theme-map: null !global; - } - - } -} - -@function themed($key) { - @return map-get($theme-map, $key); -} - -$themes: ( - light: ( - color-text: #242424, - color-background: #E3E0D7, - color-background-hover: #D4D1C7, - color-border: #555555, - color-red: #C31B00, - color-blue: #2263b6, - color-green: #257933, - font-weight: 400, - font-weight-bold: 600, - ), - dark: ( - color-text: #E3E0D7, - color-background: #242424, - color-background-hover: #303030, - color-border: #808080, - color-red: #F9690E, - color-blue: #8DBFFF, - color-green: #79D688, - font-weight: 300, - font-weight-bold: 700, - ), -); - -$font-mono: 'iA Writer Duospace', monospace; -$font-text: -apple-system, BlinkMacSystemFont, avenir, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif; diff --git a/layouts/_default/single.html b/layouts/_default/single.html @@ -30,9 +30,9 @@ <div class="bottom-hcard-container" {{ if eq .Type "page" }} hidden=""{{ end }}> <p class="hcard-top hcard"> - <a class="u-url link-white" href={{ .Permalink }}>Published</a> on + Published on <time title="{{ .Date.Format "Monday, 02 January 2006 on 15:04:05" }} GMT+7" class="dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05" }}+07:00"> - {{ .Date.Format "02 January 2006" }}</time>, + {{ .Date.Format "02 January 2006" }}</time> <a class="u-url link-white" href={{ .Permalink }}>🔗</a>, tagged: {{ with .Params.tags }} <span class="hcard-tags"> diff --git a/layouts/partials/head/head.html b/layouts/partials/head/head.html @@ -16,11 +16,31 @@ {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $rssTitle | safeHTML }} {{ end }} -<script type="application/javascript" src="{{ .Site.BaseURL }}darkToggler.js" async="true"></script> <script type="application/javascript" src="{{ .Site.BaseURL }}lazyImage.js" async="true"></script> <style> - {{ with resources.Get "styles.scss" | resources.ToCSS | resources.Minify }} + {{ with resources.Get "fonts.css" | resources.Minify }} + {{ .Content | safeCSS }} + {{ end }} + {{ with resources.Get "theme.css" | resources.Minify }} + {{ .Content | safeCSS }} + {{ end }} + {{ with resources.Get "responsive.css" | resources.Minify }} + {{ .Content | safeCSS }} + {{ end }} + {{ with resources.Get "main.css" | resources.Minify }} + {{ .Content | safeCSS }} + {{ end }} + {{ with resources.Get "content.css" | resources.Minify }} + {{ .Content | safeCSS }} + {{ end }} + {{ with resources.Get "header.css" | resources.Minify }} + {{ .Content | safeCSS }} + {{ end }} + {{ with resources.Get "footer.css" | resources.Minify }} + {{ .Content | safeCSS }} + {{ end }} + {{ with resources.Get "variables.css" | resources.Minify }} {{ .Content | safeCSS }} {{ end }} </style> diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html @@ -22,11 +22,5 @@ </a> {{ end }} </span> - <button - class="header__menu__list__toggler__off" - id="dark-toggler" - > - 🌛 - </button> </div> </nav> diff --git a/static/darkToggler.js b/static/darkToggler.js @@ -1,28 +0,0 @@ -(function() { - const toggler = document.getElementById("dark-toggler"); - const mainWrapper = document.getElementById("main-theme"); - const currentTheme = localStorage.getItem("theme"); - - if (toggler && mainWrapper) { - toggler.className = "header__menu__list__toggler"; - toggler.onclick = function() { - if (mainWrapper.className === "theme-light") { - mainWrapper.className = "theme-dark"; - localStorage.setItem("theme", "dark"); - toggler.innerText = "🌛"; - } else if (mainWrapper.className === "theme-dark") { - mainWrapper.className = "theme-light"; - localStorage.setItem("theme", "light"); - toggler.innerText = "🌞"; - } - }; - } - - if (currentTheme && currentTheme === "light") { - mainWrapper.className = "theme-light"; - toggler.innerText = "🌞"; - } - - console.log("Nice! You have the privilege of toggling the dark mode :D"); - console.log("Just press the 🌞 or 🌛 logo on the top of page!"); -})()- \ No newline at end of file