commit 21c2dd1c4d493ba707402ffd0d77aed29a3babe7 parent 1e3373d5cf78cf8ec19fe9c2a3baea0522050987 Author: Michael Neuper <michael@michaelneuper.com> Date: Sat, 4 Nov 2023 00:11:42 +0200 Merge pull request #7 from michaelneuper/css-refactor Refactor all css Diffstat:
| D | assets/css/common.css | | | 198 | ------------------------------------------------------------------------------- |
| D | assets/css/content.css | | | 231 | ------------------------------------------------------------------------------- |
| D | assets/css/index.css | | | 41 | ----------------------------------------- |
| D | assets/css/list.css | | | 25 | ------------------------- |
| D | assets/css/single.css | | | 40 | ---------------------------------------- |
| A | assets/sass/fonts.scss | | | 64 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | assets/sass/layouts/common.scss | | | 214 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | assets/sass/layouts/content.scss | | | 274 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | assets/sass/layouts/index.scss | | | 59 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | assets/sass/layouts/list.scss | | | 38 | ++++++++++++++++++++++++++++++++++++++ |
| A | assets/sass/layouts/single.scss | | | 59 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| D | assets/sass/main.scss | | | 351 | ------------------------------------------------------------------------------- |
| A | assets/sass/vars.scss | | | 39 | +++++++++++++++++++++++++++++++++++++++ |
| M | config.toml | | | 1 | - |
| M | layouts/_default/baseof.html | | | 17 | +++++++---------- |
| M | layouts/_default/list.html | | | 5 | +++-- |
| M | layouts/_default/single.html | | | 5 | +++-- |
| M | layouts/index.html | | | 5 | +++-- |
18 files changed, 763 insertions(+), 903 deletions(-)
diff --git a/assets/css/common.css b/assets/css/common.css @@ -1,198 +0,0 @@ -/* fonts */ - -@font-face { - font-display: swap; - font-family: 'Latin Modern Mono'; - font-style: normal; - font-weight: bold; - src: url('../font/lmmono-bold.woff'); -} - -@font-face { - font-display: swap; - font-family: 'Latin Modern Mono'; - font-style: italic; - font-weight: bold; - src: url('../font/lmmono-bolditalic.woff'); -} - -@font-face { - font-display: swap; - font-family: 'Latin Modern Mono'; - font-style: italic; - font-weight: normal; - src: url('../font/lmmono-italic.woff'); -} - -@font-face { - font-display: swap; - font-family: 'Latin Modern Mono'; - font-style: normal; - font-weight: normal; - src: url('../font/lmmono-normal.woff'); -} - -@font-face { - font-display: swap; - font-family: 'Latin Modern Roman'; - font-style: normal; - font-weight: bold; - src: url('../font/lmroman-bold.woff'); -} - -@font-face { - font-display: swap; - font-family: 'Latin Modern Roman'; - font-style: italic; - font-weight: bold; - src: url('../font/lmroman-bolditalic.woff'); -} - -@font-face { - font-display: swap; - font-family: 'Latin Modern Roman'; - font-style: italic; - font-weight: normal; - src: url('../font/lmroman-italic.woff'); -} - -@font-face { - font-display: swap; - font-family: 'Latin Modern Roman'; - font-style: normal; - font-weight: normal; - src: url('../font/lmroman-normal.woff'); -} - -/* global */ - -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -a { - color: inherit; - text-decoration: none; -} - -time { - color: gray; - margin-left: 1rem; - min-width: 5rem; -} - -#wrapper { - background-color: #FAFAFA; - display: flex; - flex-direction: column; - font-family: 'Latin Modern Roman', 'Times New Roman', serif; - min-height: 100vh; - overflow-wrap: break-word; - padding: 1rem; -} - -.link { - color: #AA0000; - text-decoration: underline; -} - -.paginator { - align-items: flex-end; - display: flex; - flex-direction: row; - justify-content: space-between; - margin-top: 2rem; -} - -::-webkit-scrollbar { - background-color: #FAFAFA; - height: 8px; - width: 8px; -} - -::-webkit-scrollbar-thumb { - background-color: #AAAAAA; -} - -::-webkit-scrollbar-thumb:hover { - background-color: #888888; -} - -/* header */ - -#header { - align-items: center; - display: flex; - flex-direction: column; -} - -#header > h1 { - text-align: center; -} - -@media screen and (min-width: 768px) { - #header > h1 { - font-size: 2.8rem; - } -} - -#header > nav { - display: flex; - flex-direction: row; - justify-content: space-around; - flex-wrap: wrap; - max-width: 768px; - width: 100%; -} - -#header > nav > span > a { - font-size: 1.2rem; -} - -/* main */ - -#main { - align-self: center; - display: flex; - flex-direction: column; - flex-grow: 1; - max-width: 768px; - padding: 2rem 0; - width: calc(100% - 2rem); -} - -/* footer */ - -#footer { - align-items: center; - display: flex; - font-size: .9rem; - flex-direction: column;; -} - -#footer > .footnote { - text-align: center; -} - -#sharingbuttons { - align-items: center; - display: flex; - flex-direction: row; - justify-content: space-between; - margin-top: 1rem; - flex-wrap: wrap; -} - -#searchbox { - align-items: center; - display: flex; - flex-direction: row; - justify-content: space-between; - margin-top: 1rem; -} - -#searchbox > #search > input { - font-size: 1.2rem; -} diff --git a/assets/css/content.css b/assets/css/content.css @@ -1,231 +0,0 @@ -.content .MathJax { - font-size: 100%!important; - overflow-x: auto; - overflow-y: hidden; -} - -.content .katex { - font-size: 100%!important; - overflow-x: auto; - overflow-y: hidden; -} - -.content :last-child { - margin-bottom: 0; -} - -.content a { - color: #AA0000; - text-decoration: underline; -} - -.content a.footnote-ref::before { - content: "["; -} - -.content a.footnote-ref::after { - content: "]"; -} - -.content blockquote, -.content div, -.content h1, -.content h2, -.content h3, -.content h4, -.content h5, -.content h6, -.content p, -.content pre, -.content ol, -.content table, -.content ul { - margin-bottom: 1rem; -} - -.content blockquote { - border-left: black 2px solid; - font-style: italic; - padding: 1rem 0 1rem 2rem; -} - -.content code { - background-color: #F5F5F5; - border-radius: .2rem; - color: #AA0000; - font-family: 'Latin Modern Mono', Courier, monospace; - padding: 0 .2rem; -} - -.content h1, .content h2, .content h3, -.content h4, .content h5, .content h6 { - line-height: 1.5; -} - -.content h1 { - font-size: 2.4rem; -} - -.content h2 { - font-size: 1.8rem; -} - -.content h3 { - font-size: 1.4rem; -} - -.content h4 { - font-size: 1.2rem; -} - -.content h5 { - font-size: 1.1rem; -} - -.content h6 { - font-size: 1rem; -} - -.content img { - max-width: 100%; -} - -.content p { - text-align: justify; -} - -.content pre { - background-color: #F5F5F5!important; - border-radius: .2rem; - font-family: 'Latin Modern Mono', Courier, monospace; - margin-top: .5rem; - overflow-x: auto; - padding: .5rem; -} - -.content pre code { - padding: 0; -} - -.content strong.chinese { - font-weight: normal; - text-emphasis-style: dot; - text-emphasis-position: under; - -webkit-text-emphasis-style: dot; - -webkit-text-emphasis-position: under; -} - -.content table { - display: block; - overflow-x: auto; -} - -.content td, .content th { - border: #575C61 1px solid; - padding: .1rem .5rem; -} - -.content th { - background-color: #575C61; - color: #FAFAFA; -} - -.content ol, .content ul { - margin-left: 1.5rem; -} - -.content.numbered-subtitles { - counter-reset: section-h2; -} - -.content.numbered-subtitles h2 { - counter-reset: section-h3; -} - -.content.numbered-subtitles h2:before { - counter-increment: section-h2; - content: counter(section-h2) " "; -} - -.content.numbered-subtitles h3 { - counter-reset: section-h4; -} - -.content.numbered-subtitles h3:before { - counter-increment: section-h3; - content: counter(section-h2) "." counter(section-h3) " "; -} - -.content.numbered-subtitles h4 { - counter-reset: section-h5; -} - -.content.numbered-subtitles h4:before { - counter-increment: section-h4; - content: counter(section-h2) "." counter(section-h3) "." counter(section-h4) " "; -} - -.content.numbered-subtitles h5 { - counter-reset: section-h6; -} - -.content.numbered-subtitles h5:before { - counter-increment: section-h5; - content: counter(section-h2) "." counter(section-h3) "." counter(section-h4) "." counter(section-h5) " "; -} - -.content.numbered-subtitles h6:before { - counter-increment: section-h6; - content: counter(section-h2) "." counter(section-h3) "." counter(section-h4) "." counter(section-h5) "." counter(section-h6) " "; -} - - - - - - - -.toc.numbered-subtitles { - counter-reset: ul-h2; -} - -.toc.numbered-subtitles li { - counter-reset: ul-h3; -} - -.toc.numbered-subtitles li:before { - counter-increment: ul-h2; - content: counter(ul-h2) " "; -} - -.toc.numbered-subtitles li li { - counter-reset: ul-h4; -} - -.toc.numbered-subtitles li li:before { - counter-increment: ul-h3; - content: counter(ul-h2) "." counter(ul-h3) " "; -} - -.toc.numbered-subtitles li li li { - counter-reset: ul-h5; -} - -.toc.numbered-subtitles li li li:before { - counter-increment: ul-h4; - content: counter(ul-h2) "." counter(ul-h3) "." counter(ul-h4) " "; -} - -.toc.numbered-subtitles li li li li { - counter-reset: ul-h6; -} - -.toc.numbered-subtitles li li li li:before { - counter-increment: ul-h5; - content: counter(ul-h2) "." counter(ul-h3) "." counter(ul-h4) "." counter(ul-h5) " "; -} - -.toc.numbered-subtitles li li li li li:before { - counter-increment: ul-h6; - content: counter(ul-h2) "." counter(ul-h3) "." counter(ul-h4) "." counter(ul-h5) "." counter(ul-h6) " "; -} diff --git a/assets/css/index.css b/assets/css/index.css @@ -1,41 +0,0 @@ -#main > .post + .post { - margin-top: 2rem; -} - -#main > .post > h2 { - align-items: center; - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; -} - -#main > .post > h2 > div { - align-items: center; - display: flex; - flex-direction: row; - justify-content: flex-end; -} - -#main > .post > h2 > div > time { - font-size: 1rem; - font-weight: normal; - justify-self: flex-end; -} - -#main > .post > h2 > div > span { - font-size: 1rem; - font-weight: normal; - color: gray; - margin-left: 1rem; -} - -#main > .post > .content { - padding-top: 1rem; -} - -@media screen and (min-width: 768px) { - #main > .post > div { - margin-left: 2rem; - } -} diff --git a/assets/css/list.css b/assets/css/list.css @@ -1,25 +0,0 @@ -#main > .post-group > ul { - border-left: gray solid 1px; - list-style-type: none; - margin-left: .5rem; - padding-left: 1rem; -} - -#main > .post-group > ul > li { - align-items: center; - display: flex; - flex-direction: row; - justify-content: space-between; - line-height: 1.6; -} - -#main > .post-group > ul > li > time { - text-align: right; -} - -@media screen and (min-width: 768px) { - #main > .post-group > ul { - margin-left: 1rem; - padding-left: 2rem; - } -} diff --git a/assets/css/single.css b/assets/css/single.css @@ -1,40 +0,0 @@ -#main > h1 { - text-align: center; -} - -#main > .content { - padding-top: 1rem; -} - -#main > .warning { - background-color: brown; - color: white; - font-size: 1.1rem; - margin: 2rem 0; - padding: 1rem 0; - text-align: center; -} - -#main .toc { - background-color: #EEEEEE; - border: black 1px dashed; - display: inline-block; - margin: 1rem; - padding: .5rem 1rem; -} - -#main .toc a:hover { - text-decoration: underline; -} - -#main .toc li > ul { - margin-left: 1.5rem; -} - -#main .toc ul { - list-style: none; -} - -#main :target { - background-color: azure; -} diff --git a/assets/sass/fonts.scss b/assets/sass/fonts.scss @@ -0,0 +1,63 @@ +@font-face { + font-display: swap; + font-family: 'Latin Modern Mono'; + font-style: normal; + font-weight: bold; + src: url('../font/lmmono-bold.woff'); +} + +@font-face { + font-display: swap; + font-family: 'Latin Modern Mono'; + font-style: italic; + font-weight: bold; + src: url('../font/lmmono-bolditalic.woff'); +} + +@font-face { + font-display: swap; + font-family: 'Latin Modern Mono'; + font-style: italic; + font-weight: normal; + src: url('../font/lmmono-italic.woff'); +} + +@font-face { + font-display: swap; + font-family: 'Latin Modern Mono'; + font-style: normal; + font-weight: normal; + src: url('../font/lmmono-normal.woff'); +} + +@font-face { + font-display: swap; + font-family: 'Latin Modern Roman'; + font-style: normal; + font-weight: bold; + src: url('../font/lmroman-bold.woff'); +} + +@font-face { + font-display: swap; + font-family: 'Latin Modern Roman'; + font-style: italic; + font-weight: bold; + src: url('../font/lmroman-bolditalic.woff'); +} + +@font-face { + font-display: swap; + font-family: 'Latin Modern Roman'; + font-style: italic; + font-weight: normal; + src: url('../font/lmroman-italic.woff'); +} + +@font-face { + font-display: swap; + font-family: 'Latin Modern Roman'; + font-style: normal; + font-weight: normal; + src: url('../font/lmroman-normal.woff'); +} +\ No newline at end of file diff --git a/assets/sass/layouts/common.scss b/assets/sass/layouts/common.scss @@ -0,0 +1,214 @@ +@use "sass:math"; + +@import "../vars"; +@import "../fonts"; + +// global +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + background-color: var(--background); + color: var(--text); +} + +a { + text-decoration: none; + + &:link { + color: var(--blue); + } + + &:hover, + &:visited { + color: var(--violet); + } +} + +::selection { + background-color: var(--blue); + color: white; +} + +time { + color: var(--text-secondary); + margin-left: 1rem; + min-width: 5rem; +} + +hr { + background-color: var(--text-secondary); + margin-top: $margin; + margin-bottom: $margin; + border: 0; + height: $border; +} + +#wrapper { + background-color: var(--background); + display: flex; + flex-direction: column; + font-family: "Latin Modern Roman", "Times New Roman", serif; + min-height: 100vh; + overflow-wrap: break-word; + padding: 1rem $padding; + + @media screen and (max-width: $mobile-breakpoint) { + padding-left: math.div($padding, 3); + padding-right: math.div($padding, 3); + } +} + +.paginator { + align-items: flex-end; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 2rem; +} + +::-webkit-scrollbar { + background-color: var(--background); + height: 8px; + width: 8px; +} + +::-webkit-scrollbar-thumb { + background-color: var(--text-secondary); + + &:hover { + background-color: var(--text-emphasized); + } +} + +// header +#header { + align-items: center; + display: flex; + flex-direction: column; + + & > h1 { + text-align: center; + + @media screen and (min-width: $mobile-breakpoint) { + font-size: 2.8rem; + } + } + + & > nav { + display: flex; + flex-direction: row; + justify-content: space-around; + flex-wrap: wrap; + max-width: $mobile-breakpoint; + margin-top: 10px; + width: 100%; + + & > span > a { + font-size: 1.2rem; + color: var(--text-emphasized); + text-decoration: none; + display: inline-block; + position: relative; + + &:after { + background-color: var(--text-emphasized); + content: ""; + position: absolute; + width: 100%; + transform: scaleX(0); + height: $border; + bottom: 0; + left: 0; + transform-origin: bottom right; + transition: transform 0.25s ease-out; + } + + &:hover:after { + transform: scaleX(1); + transform-origin: bottom left; + } + } + } + + a, + a:hover, + a:visited { + color: var(--text-emphasized); + } +} + +// main +main { + margin: 0 $margin; +} + +#main { + align-self: center; + display: flex; + flex-direction: column; + flex-grow: 1; + max-width: 100%; + padding: 0; + width: calc(100% - 2rem); // TODO +} + +// footer +#footer { + color: var(--text-secondary); + align-items: center; + display: flex; + font-size: 0.9rem; + flex-direction: column; + margin-top: $margin; + + & > .footnote { + text-align: center; + } +} + +// misc +#sharingbuttons { + align-items: center; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 1rem; + flex-wrap: wrap; +} + +#searchbox { + align-items: center; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 0; + margin-bottom: $margin; + + #ddgSearch > input { + color: var(--text-emphasized); + background-color: var(--background-secondary); + font-family: "Latin Modern Roman", "Times New Roman", serif; + padding-left: 8px; + width: 200px; + height: 1.5rem; + border: $border solid var(--text-secondary); + border-radius: $radius; + + &:focus { + outline: $border solid var(--text-emphasized); + } + } +} + +.icon { + padding-right: 0.1em; + padding-left: 0.1em; +} + +.row { + margin-left: 2rem; +} diff --git a/assets/sass/layouts/content.scss b/assets/sass/layouts/content.scss @@ -0,0 +1,274 @@ +@import "../vars"; + +.content { + .MathJax { + font-size: 100% !important; + overflow-x: auto; + overflow-y: hidden; + } + + .katex { + font-size: 100% !important; + overflow-x: auto; + overflow-y: hidden; + } + + :last-child { + margin-bottom: 0; + } + + a { + text-decoration: none; + + &.footnote-ref { + &::before { + content: "["; + } + &::after { + content: "]"; + } + } + } + + blockquote { + background: var(--background-secondary); + border-left: var(--text) $border solid; + border-radius: $radius; + font-style: italic; + padding: 1rem 2rem; + } + + code { + background-color: var(--background-secondary); + border-radius: $radius; + color: var(--text); + font-family: "Latin Modern Mono", Courier, monospace; + padding: 0 0.2rem; + } + + pre { + background-color: var(--background-secondary) !important; + border-radius: $radius; + font-family: "Latin Modern Mono", Courier, monospace; + position: relative; + margin-top: 0.5rem; + overflow-x: auto; + padding: 0.5rem; + + code { + padding: 0; + } + } + + mark { + background-color: var(--background-secondary); + color: var(--text-emphasized); + border-radius: $radius; + padding: 0 0.2rem; + } + + kbd { + background-color: var(--background-secondary); + color: var(--text-emphasized); + border-radius: $radius; + } + + table { + display: block; + overflow-x: auto; + margin: auto; + background-color: var(--background); + border-collapse: collapse; + border: none; + + td, + th { + border: var(--text-secondary) $border solid; + padding: 0.1rem 0.5rem; + } + + th { + background-color: var(--background-secondary); + color: var(--text-emphasized); + } + } + + ol, + ul { + margin-left: $margin; + } +} + +button.copyButton { + background-color: var(--background); + color: var(--text-emphasized); + position: absolute; + bottom: 5px; + right: 5px; + opacity: 0.7; + border: none; + padding: 5px 10px; + border-radius: $radius; + cursor: pointer; + font-size: 14px; + transition: opacity 0.3s; + + &:hover { + opacity: 1; + } +} + +.book-container { + clear: both; + + & > img { + margin-left: 50px; + } +} + +.content blockquote, +.content div, +.content h1, +.content h2, +.content h3, +.content h4, +.content h5, +.content h6, +.content p, +.content pre, +.content ol, +.content table, +.content ul { + margin-bottom: $margin; +} + +.content h1, +.content h2, +.content h3, +.content h4, +.content h5, +.content h6 { + line-height: 1.5; +} + +// TODO change to golden ratio +.content h1 { + font-size: 2.4rem; +} + +.content h2 { + font-size: 1.8rem; +} + +.content h3 { + font-size: 1.4rem; +} + +.content h4 { + font-size: 1.2rem; +} + +.content h5 { + font-size: 1.1rem; +} + +.content h6 { + font-size: 1rem; +} + +.content img { + max-width: 100%; +} + +.content p { + text-align: justify; +} + +// .content +.content strong.chinese { + font-weight: normal; + text-emphasis-style: dot; + text-emphasis-position: under; + -webkit-text-emphasis-style: dot; + -webkit-text-emphasis-position: under; +} + +.content.numbered-subtitles { + counter-reset: section-h2; + h2 { + counter-reset: section-h3; + &:before { + counter-increment: section-h2; + content: counter(section-h2) " "; + } + } + h3 { + counter-reset: section-h4; + &:before { + counter-increment: section-h3; + content: counter(section-h2) "." counter(section-h3) " "; + } + } + h4 { + counter-reset: section-h5; + &:before { + counter-increment: section-h4; + content: counter(section-h2) "." counter(section-h3) "." + counter(section-h4) " "; + } + } + h5 { + counter-reset: section-h6; + &:before { + counter-increment: section-h5; + content: counter(section-h2) "." counter(section-h3) "." + counter(section-h4) "." counter(section-h5) " "; + } + } + h6 { + &:before { + counter-increment: section-h6; + content: counter(section-h2) "." counter(section-h3) "." + counter(section-h4) "." counter(section-h5) "." counter(section-h6) " "; + } + } +} +.toc.numbered-subtitles { + counter-reset: ul-h2; + li { + counter-reset: ul-h3; + &:before { + counter-increment: ul-h2; + content: counter(ul-h2) " "; + } + li { + counter-reset: ul-h4; + &:before { + counter-increment: ul-h3; + content: counter(ul-h2) "." counter(ul-h3) " "; + } + li { + counter-reset: ul-h5; + &:before { + counter-increment: ul-h4; + content: counter(ul-h2) "." counter(ul-h3) "." counter(ul-h4) " "; + } + li { + counter-reset: ul-h6; + &:before { + counter-increment: ul-h5; + content: counter(ul-h2) "." counter(ul-h3) "." counter(ul-h4) "." + counter(ul-h5) " "; + } + li { + &:before { + counter-increment: ul-h6; + content: counter(ul-h2) "." counter(ul-h3) "." counter(ul-h4) "." + counter(ul-h5) "." counter(ul-h6) " "; + } + } + } + } + } + } +} diff --git a/assets/sass/layouts/index.scss b/assets/sass/layouts/index.scss @@ -0,0 +1,59 @@ +@use "sass:math"; + +@import "../vars"; + +.grid-container { + display: grid; + grid-template-columns: 3fr 1fr; + gap: $margin * 2; + + @media (max-width: $mobile-breakpoint) { + grid-template-columns: 1fr; + } + + .sidebar { + flex: 1; + + @media screen and (max-width: $mobile-breakpoint) { + order: 1; + } + + h3.taxonomy > a { + color: var(--text); + + &:visited { + color: var(--text); + } + + &:hover { + color: var(--text-emphasized); + } + } + + ul { + list-style: none; + padding: 0; + border-color: var(--text-secondary); + display: block; + padding: math.div($margin, 2); + margin-top: math.div($margin, 2); + margin-bottom: math.div($margin, 2); + border: $border solid; + border-radius: $radius; + + li a { + text-decoration: none; + display: block; + padding: 2px 12px; + color: var(--text); + transition: color 0.3s, background-color 0.3s; + + &:hover { + color: var(--text-emphasized); + background-color: var(--background-secondary); + border-radius: $radius; + } + } + } + } +} diff --git a/assets/sass/layouts/list.scss b/assets/sass/layouts/list.scss @@ -0,0 +1,38 @@ +@import "../vars"; + +#main { + & > .post-group { + & > ul { + border-left: var(--text-secondary) solid $border; + list-style-type: none; + margin-left: 0.5rem; + padding-left: $margin; + + & > li { + align-items: center; + display: flex; + flex-direction: row; + justify-content: space-between; + line-height: 1.6; + + & > time { + text-align: right; + } + } + + @media screen and (min-width: $mobile-breakpoint) { + margin-left: 1rem; + padding-left: 2rem; + } + } + + a { + text-decoration: none; + transition: text-decoration 0.3s ease; + + &:hover { + text-decoration: underline; + } + } + } +} diff --git a/assets/sass/layouts/single.scss b/assets/sass/layouts/single.scss @@ -0,0 +1,59 @@ +@import "../vars"; + +#main { + & > h1 { + text-align: center; + } + + .post-heading { + text-align: center; + + .publish-date { + color: var(--text-secondary); + font-size: large; + padding-top: 0.5rem; + } + } + + .toc { + background-color: var(--background-secondary); + border: var(--text-secondary) 1px dashed; + display: inline-block; + margin: 1rem; + padding: 0.5rem 1rem; + + a { + color: var(--text); + + &:hover { + text-decoration: underline; + } + } + + li > ul { + margin-left: 1.5rem; + } + + ul { + list-style: none; + } + + &:target { + background-color: var(--background-secondary); + } + } + + .warning { + background-color: var(--red); + color: white; + font-size: 1.1rem; + margin: 2rem 0; + padding: 1rem 0; + text-align: center; + border-radius: $radius; + } + + .content { + padding-top: 1rem; + } +} diff --git a/assets/sass/main.scss b/assets/sass/main.scss @@ -1,351 +0,0 @@ -@use "sass:math"; - -$radius: 0.25rem; -$margin: 1rem; -$max-width: 70vw; -$padding: math.div(100vw - $max-width, 2); -$border: 2px; -$mobile-breakpoint: 768px; - -@media (prefers-color-scheme: dark) { - :root { - --background: #002b36; - --background-secondary: #073642; - --text: #839496; - --text-secondary: #586e75; - --text-emphasized: #93a1a1; - } -} - -@media (prefers-color-scheme: light) { - :root { - --background: #fdf6e3; - --background-secondary: #eee8d5; - --text: #657b83; - --text-secondary: #93a1a1; - --text-emphasized: #586e75; - } -} - -:root { - --yellow: #b58900; - --orange: #cb4b16; - --red: #dc322f; - --magenta: #d33682; - --violet: #6c71c4; - --blue: #268bd2; - --cyan: #2aa198; - --green: #859900; -} - -body { - background-color: var(--background); - color: var(--text); - - #wrapper { - background-color: var(--background); - padding-left: $padding; - padding-right: $padding; - - @media (max-width: $mobile-breakpoint) { - padding-left: math.div($padding, 3); - padding-right: math.div($padding, 3); - } - } -} - -a { - text-decoration: none; - - &:link { - color: var(--blue); - } - - &:hover, - &:visited { - color: var(--violet); - } -} - -::selection { - background-color: var(--blue); - color: white; -} - -hr { - background-color: var(--text-secondary); - margin-top: $margin; - margin-bottom: $margin; - border: 0; - height: $border; -} - -time { - color: var(--text-secondary); -} - -header { - a, - a:hover, - a:visited { - color: var(--text-emphasized); - } - - nav { - margin-top: 10px; - - a.link { - color: var(--text-emphasized); - text-decoration: none; - display: inline-block; - position: relative; - - &:after { - background-color: var(--text-emphasized); - content: ""; - position: absolute; - width: 100%; - transform: scaleX(0); - height: $border; - bottom: 0; - left: 0; - transform-origin: bottom right; - transition: transform 0.25s ease-out; - } - - &:hover:after { - transform: scaleX(1); - transform-origin: bottom left; - } - } - } -} - -.content { - a { - text-decoration: none; - } - - table { - margin: auto; - background-color: var(--background); - border-collapse: collapse; - border: none; - margin-top: 0; - margin-bottom: $margin; - - th { - background: var(--background-secondary); - color: var(--text-emphasized); - } - } - - blockquote { - background: var(--background-secondary); - border-color: var(--text); - border-radius: $radius; - padding-right: 2rem; - } - - pre { - background-color: var(--background-secondary) !important; - position: relative; - border-radius: $radius; - } - - code { - background-color: var(--background-secondary); - color: var(--text); - } - - mark { - background-color: var(--background-secondary); - color: var(--text-emphasized); - border-radius: $radius; - padding-left: 5px; - padding-right: 5px; - } - - kbd { - background-color: var(--background-secondary); - color: var(--text-emphasized); - border-radius: $radius; - } -} - -main { - display: flex; - padding: 0 !important; - margin-left: $margin; - margin-right: $margin; - - &#main { - max-width: 100%; - - .post-heading { - text-align: center; - - .publish-date { - color: var(--text-secondary); - font-size: large; - padding-top: math.div($margin, 2); - } - } - - .toc { - background-color: var(--background-secondary); - border: math.div($border, 2) dashed var(--text-secondary); - border-radius: $radius; - - #TableOfContents a { - text-decoration: none; - color: var(--text); - - &:hover { - text-decoration: underline; - } - } - } - - .numbered-subtitles { - color: var(--text); - } - - &.archive { - padding: 0; - - .post-group { - ul { - border-left-color: var(--text-secondary); - border-left-width: $border; - } - - a { - text-decoration: none; - transition: text-decoration 0.3s ease; - - &:hover { - text-decoration: underline; - } - } - } - } - } - - &.grid-container { - display: grid; - grid-template-columns: 3fr 1fr; - gap: $margin * 2; - - @media (max-width: $mobile-breakpoint) { - grid-template-columns: 1fr; - } - - .sidebar { - flex: 1; - - @media (max-width: $mobile-breakpoint) { - order: 1; - } - - h3.taxonomy > a { - color: var(--text); - - &:visited { - color: var(--text); - } - - &:hover { - color: var(--text-emphasized); - } - } - - ul { - list-style: none; - padding: 0; - border-color: var(--text-secondary); - display: block; - padding: math.div($margin, 2); - margin-top: math.div($margin, 2); - margin-bottom: math.div($margin, 2); - border: $border solid; - border-radius: $radius; - - li a { - text-decoration: none; - display: block; - padding: 2px 12px; - color: var(--text); - transition: color 0.3s, background-color 0.3s; - - &:hover { - color: var(--text-emphasized); - background-color: var(--background-secondary); - border-radius: $radius; - } - } - } - } - } -} - -footer { - color: var(--text-secondary); - margin-top: $margin; -} - -.icon { - padding-right: 0.1em; - padding-left: 0.1em; -} - -.row { - margin-left: 2rem; -} - -#searchbox { - margin-top: 0; - margin-bottom: $margin; - - #ddgSearch > input { - color: var(--text-emphasized); - background-color: var(--background-secondary); - font-family: "Latin Modern Roman", "Times New Roman", serif; - padding-left: 8px; - width: 200px; - height: 1.5rem; - border: $border solid var(--text-secondary); - border-radius: $radius; - - &:focus { - outline: $border solid var(--text-emphasized); - } - } -} - -button.copyButton { - background-color: var(--background); - color: var(--text-emphasized); - position: absolute; - bottom: 5px; - right: 5px; - opacity: 0.7; - border: none; - padding: 5px 10px; - border-radius: $radius; - cursor: pointer; - font-size: 14px; - transition: opacity 0.3s; - - &:hover { - opacity: 1; - } -} - -.book-container { - clear: both; -} - -.book-container > img { - margin-left: 50px; -} diff --git a/assets/sass/vars.scss b/assets/sass/vars.scss @@ -0,0 +1,39 @@ +@use "sass:math"; + +$radius: 0.25rem; +$margin: 1rem; +$max-width: 70vw; +$padding: math.div(100vw - $max-width, 2); +$border: 2px; +$mobile-breakpoint: 768px; + +@media (prefers-color-scheme: dark) { + :root { + --background: #002b36; + --background-secondary: #073642; + --text: #839496; + --text-secondary: #586e75; + --text-emphasized: #93a1a1; + } +} + +@media (prefers-color-scheme: light) { + :root { + --background: #fdf6e3; + --background-secondary: #eee8d5; + --text: #657b83; + --text-secondary: #93a1a1; + --text-emphasized: #586e75; + } +} + +:root { + --yellow: #b58900; + --orange: #cb4b16; + --red: #dc322f; + --magenta: #d33682; + --violet: #6c71c4; + --blue: #268bd2; + --cyan: #2aa198; + --green: #859900; +} diff --git a/config.toml b/config.toml @@ -64,7 +64,6 @@ footnote = """ <a class=link href=/index.xml>RSS</a> --> """ keywords = ["michael", "neuper", "linux", "blog", "productivity"] -customCSS = ["css/styles.css", "css/syntax.css"] customJS = ["js/script.js"] dateFormat = "2 January 2006" emphasisWithDots = true diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html @@ -53,11 +53,14 @@ {{ template "_internal/schema.html" . }} <!-- style --> - {{ with resources.Get "css/common.css" | postCSS | minify }} - <link rel="stylesheet" href="{{ .RelPermalink }}"> + {{ $options := dict "transpiler" "dartsass" "targetPath" "css/common.css" }} + {{ with resources.Get "sass/layouts/common.scss" | toCSS $options | postCSS | minify | fingerprint }} + <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> {{ end }} - {{ with resources.Get "css/content.css" | postCSS | minify }} - <link rel="stylesheet" href="{{ .RelPermalink }}"> + + {{ $options := dict "transpiler" "dartsass" "targetPath" "css/content.css" }} + {{ with resources.Get "sass/layouts/content.scss" | toCSS $options | postCSS | minify | fingerprint }} + <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> {{ end }} <!-- title --> @@ -80,12 +83,6 @@ {{ partial "footer.html" . }} </div> - <!-- custom css --> - {{ $options := dict "transpiler" "dartsass" "targetPath" "css/style.css" }} - {{ with resources.Get "sass/main.scss" | toCSS $options | postCSS | minify | fingerprint }} - <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> - {{ end }} - <!-- custom js --> {{ range .Site.Params.customJS }} <script src="{{ . | absURL }}"></script> diff --git a/layouts/_default/list.html b/layouts/_default/list.html @@ -1,6 +1,7 @@ {{ define "head" }} -{{ with resources.Get "css/list.css" | postCSS | minify }} - <link rel="stylesheet" href="{{ .RelPermalink }}"> +{{ $options := dict "transpiler" "dartsass" "targetPath" "css/list.css" }} +{{ with resources.Get "sass/layouts/list.scss" | toCSS $options | postCSS | minify | fingerprint }} + <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> {{ end }} {{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html @@ -1,6 +1,7 @@ {{ define "head" }} -{{ with resources.Get "css/single.css" | postCSS | minify }} - <link rel="stylesheet" href="{{ .RelPermalink }}"> +{{ $options := dict "transpiler" "dartsass" "targetPath" "css/single.css" }} +{{ with resources.Get "sass/layouts/single.scss" | toCSS $options | postCSS | minify | fingerprint }} + <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> {{ end }} {{ end }} diff --git a/layouts/index.html b/layouts/index.html @@ -1,6 +1,7 @@ {{ define "head" }} -{{ with resources.Get "css/index.css" | postCSS | minify }} - <link rel="stylesheet" href="{{ .RelPermalink }}"> +{{ $options := dict "transpiler" "dartsass" "targetPath" "css/index.css" }} +{{ with resources.Get "sass/layouts/index.scss" | toCSS $options | postCSS | minify | fingerprint }} + <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> {{ end }} {{ end }}