commit 7564abaec5199613527c64b7429876987a399818
parent d51d8ee2447c50e31219735ee27b94329c8ebc6c
Author: Michael Neuper <michael@michaelneuper.com>
Date: Sat, 4 Nov 2023 00:10:37 +0200
Refactor all css
Diffstat:
18 files changed, 752 insertions(+), 898 deletions(-)
diff --git a/assets/sass/common.scss b/assets/sass/common.scss
@@ -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/sass/content.scss b/assets/sass/content.scss
@@ -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/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/index.scss b/assets/sass/index.scss
@@ -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/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/list.scss b/assets/sass/list.scss
@@ -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/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/single.scss b/assets/sass/single.scss
@@ -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/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
@@ -54,12 +54,12 @@
<!-- style -->
{{ $options := dict "transpiler" "dartsass" "targetPath" "css/common.css" }}
- {{ with resources.Get "sass/common.scss" | toCSS $options | postCSS | minify | fingerprint }}
+ {{ with resources.Get "sass/layouts/common.scss" | toCSS $options | postCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
{{ $options := dict "transpiler" "dartsass" "targetPath" "css/content.css" }}
- {{ with resources.Get "sass/content.scss" | toCSS $options | postCSS | minify | fingerprint }}
+ {{ with resources.Get "sass/layouts/content.scss" | toCSS $options | postCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
@@ -83,12 +83,6 @@
{{ partial "footer.html" . }}
</div>
- <!-- custom css -->
- {{ $options := dict "transpiler" "dartsass" "targetPath" "css/main.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,6 @@
{{ define "head" }}
{{ $options := dict "transpiler" "dartsass" "targetPath" "css/list.css" }}
-{{ with resources.Get "sass/list.scss" | toCSS $options | postCSS | minify | fingerprint }}
+{{ 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,6 @@
{{ define "head" }}
{{ $options := dict "transpiler" "dartsass" "targetPath" "css/single.css" }}
-{{ with resources.Get "sass/single.scss" | toCSS $options | postCSS | minify | fingerprint }}
+{{ 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,6 @@
{{ define "head" }}
{{ $options := dict "transpiler" "dartsass" "targetPath" "css/index.css" }}
-{{ with resources.Get "sass/index.scss" | toCSS $options | postCSS | minify | fingerprint }}
+{{ with resources.Get "sass/layouts/index.scss" | toCSS $options | postCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
{{ end }}
