commit f252b0b9b0265d6bdd9f6b68e219761fe78cd68c
parent 953553f1af66b32e25ed066eada0cbff08997db8
Author: Michael Neuper <michael@michaelneuper.com>
Date: Tue, 31 Oct 2023 16:05:59 +0200
Change back to css
Diffstat:
5 files changed, 153 insertions(+), 392 deletions(-)
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
@@ -1,384 +0,0 @@
-:root {
- --base03: #002b36;
- --base02: #073642;
- --base01: #586e75;
- --base00: #657b83;
- --base0: #839496;
- --base1: #93a1a1;
- --base2: #eee8d5;
- --base3: #fdf6e3;
- --yellow: #b58900;
- --orange: #cb4b16;
- --red: #dc322f;
- --magenta: #d33682;
- --violet: #6c71c4;
- --blue: #268bd2;
- --cyan: #2aa198;
- --green: #859900;
- }
-
- /* Dark mode */
- @media (prefers-color-scheme: dark) {
- body {
- background-color: var(--base03);
- color: var(--base0);
- }
-
- hr {
- background-color: var(--base01);
- }
-
- #wrapper {
- background-color: var(--base03);
- }
-
- #main .toc {
- background-color: var(--base02);
- }
-
- blockquote {
- background: var(--base02);
- }
-
- .content pre {
- background-color: var(--base02) !important;
- color: var(--base0);
- }
-
- code {
- background-color: var(--base02) !important;
- color: var(--base1) !important;
- }
-
- button.copyButton {
- background-color: var(--base03);
- color: var(--base1);
- }
-
- a:link {
- color: var(--blue);
- }
- a:visited {
- color: var(--violet);
- }
- a:hover {
- color: var(--violet);
- }
-
- nav a {
- color: var(--base1) !important;
- }
- nav a:after {
- background-color: var(--base0);
- }
-
- h2 a {
- color: var(--base1) !important;
- }
- header a:hover,
- header a:visited,
- header .current a {
- color: var(--base1);
- }
-
- time {
- color: var(--base01);
- }
-
- table {
- margin: auto;
- background-color: var(--base03);
- border-top: 1px solid var(--base0);
- border-bottom: 1px solid var(--base0);
- }
- table thead th {
- border-bottom: 1px solid var(--base0);
- }
- th {
- background: var(--base02) !important;
- color: var(--base1) !important;
- }
- th,
- td {
- padding: 5px;
- }
-
- .nav-list {
- border-color: var(--base01);
- }
-
- .sidebar ul li a {
- color: var(--base0);
- }
-
- .sidebar ul li a:hover {
- color: var(--base1);
- background-color: var(--base02);
- }
- }
-
- /* Light mode */
- @media (prefers-color-scheme: light) {
- body {
- background-color: var(--base3);
- color: var(--base00);
- }
-
- hr {
- background-color: var(--base1);
- }
-
- h1,
- h2,
- h3 {
- color: var(--base01);
- }
-
- #wrapper {
- background-color: var(--base3);
- }
-
- #main .toc {
- background-color: var(--base2);
- }
-
- blockquote {
- background: var(--base3);
- }
-
- a:link {
- color: var(--blue);
- }
- a:visited {
- color: var(--violet);
- }
- a:hover {
- color: var(--violet);
- }
-
- nav a:after {
- background-color: var(--base00);
- }
-
- button.copyButton {
- background-color: var(--base3);
- color: var(--base01);
- }
-
- header {
- background: var(--base3);
- }
- h2 a {
- color: var(--base01) !important;
- }
- header a:hover,
- header a:visited,
- header .current a {
- color: var(--base01);
- }
-
- time {
- color: var(--base1);
- }
- .content pre {
- background-color: var(--base2) !important;
- color: var(--base00);
- }
-
- code {
- background-color: var(--base2) !important;
- color: var(--base01) !important;
- }
-
- table {
- margin: auto;
- border-top: 1px solid var(--base00);
- border-bottom: 1px solid var(--base00);
- }
- table thead th {
- border-bottom: 1px solid var(--base00);
- }
- th {
- background: var(--base2) !important;
- color: var(--base01) !important;
- }
- th,
- td {
- padding: 5px;
- }
-
- .nav-list {
- border-color: var(--base1);
- }
-
- .sidebar ul li a {
- color: var(--base00);
- }
-
- .sidebar ul li a:hover {
- color: var(--base01);
- background-color: var(--base2);
- }
- }
-
- hr {
- margin-top: 20px;
- margin-bottom: 10px;
- border: 0;
- height: 2px;
- }
-
- table {
- border-collapse: collapse;
- border: none;
- margin-top: 0;
- margin-bottom: 0;
- }
-
- pre {
- position: relative;
- }
-
- button.copyButton {
- position: absolute;
- bottom: 5px;
- right: 5px;
- opacity: 0.7;
- border: none;
- padding: 5px 10px;
- border-radius: 5px;
- cursor: pointer;
- font-size: 14px;
- transition: opacity 0.3s;
- }
-
- button.copyButton:hover {
- opacity: 1;
- }
-
- #wrapper {
- padding-left: 0;
- padding-right: 100px;
- }
-
- .main-content {
- flex: 1;
- max-width: 80%;
- margin: 0 auto;
- box-sizing: border-box;
- padding-left: 300px;
-
- @media (max-width: 768px) {
- padding-left: 0;
- margin: 20px;
- }
- }
-
- a {
- text-decoration: none !important;
- }
-
- nav a {
- text-decoration: none !important;
- display: inline-block;
- position: relative;
- }
-
- nav a:after {
- content: "";
- position: absolute;
- width: 100%;
- transform: scaleX(0);
- height: 2px;
- bottom: 0;
- left: 0;
- transform-origin: bottom right;
- transition: transform 0.25s ease-out;
- }
-
- nav a:hover:after {
- transform: scaleX(1);
- transform-origin: bottom left;
- }
-
- .nav-list {
- display: block;
- padding: 10px 15px;
- margin: 10px 5px;
- margin-left: -5px;
- border: 2px solid;
- }
-
- .grid-container {
- display: grid;
- grid-template-columns: 3fr 1fr;
- gap: 20px;
- }
-
- main {
- display: flex;
- }
-
- .index {
- flex: 3;
- padding-left: 100px;
- padding-right: 20px;
- padding-top: 20px;
- }
-
- .sidebar {
- flex: 1;
- padding-top: 20px;
- }
-
- @media (max-width: 767px) {
- .grid-container {
- grid-template-columns: 1fr;
- }
-
- .sidebar {
- order: 1;
- padding-left: 30px;
- padding-right: 10px;
- }
-
- .index {
- padding-left: 30px;
- }
-
- .head-rule {
- margin-left: 30px !important;
- margin-right: 10px !important;
- }
-
- #wrapper {
- padding-right: 20px !important;
- }
- }
-
- .sidebar ul {
- list-style: none;
- padding: 0;
- }
-
- .sidebar ul li a {
- text-decoration: none;
- display: block;
- padding: 2px 12px;
- transition: color 0.3s, background-color 0.3s;
- }
-
- .post-group a {
- text-decoration: none;
- transition: text-decoration 0.3s ease;
- }
-
- .post-group a:hover {
- text-decoration: underline;
- }
-
- .head-rule {
- margin-left: 100px;
- margin-right: 10px;
- margin-top: 20px;
- }
-\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -77,9 +77,8 @@
</div>
<!-- custom css -->
- {{ $options := dict "transpiler" "dartsass" "targetPath" "css/style.css" }}
- {{ with resources.Get "sass/main.scss" | toCSS $options | minify | fingerprint }}
- <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+ {{ range .Site.Params.customCSS }}
+ <link media="screen" rel="stylesheet" href="{{ . | absURL }}" />
{{ end }}
<!-- custom js -->
diff --git a/resources/_gen/assets/scss/sass/main.scss_17d836d605e0c91e6275eb2120c9a238.content b/resources/_gen/assets/scss/sass/main.scss_17d836d605e0c91e6275eb2120c9a238.content
@@ -1 +1 @@
-:root{--base03:#002b36;--base02:#073642;--base01:#586e75;--base00:#657b83;--base0:#839496;--base1:#93a1a1;--base2:#eee8d5;--base3:#fdf6e3;--yellow:#b58900;--orange:#cb4b16;--red:#dc322f;--magenta:#d33682;--violet:#6c71c4;--blue:#268bd2;--cyan:#2aa198;--green:#859900}@media(prefers-color-scheme:dark){body{background-color:var(--base03);color:var(--base0)}hr{background-color:var(--base01)}#wrapper{background-color:var(--base03)}#main .toc{background-color:var(--base02)}blockquote{background:var(--base02)}.content pre{background-color:var(--base02)!important;color:var(--base0)}code{background-color:var(--base02)!important;color:var(--base1)!important}button.copyButton{background-color:var(--base03);color:var(--base1)}a:link{color:var(--blue)}a:visited{color:var(--violet)}a:hover{color:var(--violet)}nav a{color:var(--base1)!important}nav a:after{background-color:var(--base0)}h2 a{color:var(--base1)!important}header a:hover,header a:visited,header .current a{color:var(--base1)}time{color:var(--base01)}table{margin:auto;background-color:var(--base03);border-top:1px solid var(--base0);border-bottom:1px solid var(--base0)}table thead th{border-bottom:1px solid var(--base0)}th{background:var(--base02)!important;color:var(--base1)!important}th,td{padding:5px}.nav-list{border-color:var(--base01)}.sidebar ul li a{color:var(--base0)}.sidebar ul li a:hover{color:var(--base1);background-color:var(--base02)}}@media(prefers-color-scheme:light){body{background-color:var(--base3);color:var(--base00)}hr{background-color:var(--base1)}h1,h2,h3{color:var(--base01)}#wrapper{background-color:var(--base3)}#main .toc{background-color:var(--base2)}blockquote{background:var(--base3)}a:link{color:var(--blue)}a:visited{color:var(--violet)}a:hover{color:var(--violet)}nav a:after{background-color:var(--base00)}button.copyButton{background-color:var(--base3);color:var(--base01)}header{background:var(--base3)}h2 a{color:var(--base01)!important}header a:hover,header a:visited,header .current a{color:var(--base01)}time{color:var(--base1)}.content pre{background-color:var(--base2)!important;color:var(--base00)}code{background-color:var(--base2)!important;color:var(--base01)!important}table{margin:auto;border-top:1px solid var(--base00);border-bottom:1px solid var(--base00)}table thead th{border-bottom:1px solid var(--base00)}th{background:var(--base2)!important;color:var(--base01)!important}th,td{padding:5px}.nav-list{border-color:var(--base1)}.sidebar ul li a{color:var(--base00)}.sidebar ul li a:hover{color:var(--base01);background-color:var(--base2)}}hr{margin-top:20px;margin-bottom:10px;border:0;height:2px}table{border-collapse:collapse;border:none;margin-top:0;margin-bottom:0}pre{position:relative}button.copyButton{position:absolute;bottom:5px;right:5px;opacity:.7;border:none;padding:5px 10px;border-radius:5px;cursor:pointer;font-size:14px;transition:opacity .3s}button.copyButton:hover{opacity:1}#wrapper{padding-left:0;padding-right:100px}.main-content{flex:1;max-width:80%;margin:0 auto;box-sizing:border-box;padding-left:300px}@media(max-width:768px){.main-content{padding-left:0;margin:20px}}a{text-decoration:none!important}nav a{text-decoration:none!important;display:inline-block;position:relative}nav a:after{content:"";position:absolute;width:100%;transform:scaleX(0);height:2px;bottom:0;left:0;transform-origin:bottom right;transition:transform .25s ease-out}nav a:hover:after{transform:scaleX(1);transform-origin:bottom left}.nav-list{display:block;padding:10px 15px;margin:10px 5px;margin-left:-5px;border:2px solid}.grid-container{display:grid;grid-template-columns:3fr 1fr;gap:20px}main{display:flex}.index{flex:3;padding-left:100px;padding-right:20px;padding-top:20px}.sidebar{flex:1;padding-top:20px}@media(max-width:767px){.grid-container{grid-template-columns:1fr}.sidebar{order:1;padding-left:30px;padding-right:10px}.index{padding-left:30px}.head-rule{margin-left:30px!important;margin-right:10px!important}#wrapper{padding-right:20px!important}}.sidebar ul{list-style:none;padding:0}.sidebar ul li a{text-decoration:none;display:block;padding:2px 12px;transition:color .3s,background-color .3s}.post-group a{text-decoration:none;transition:text-decoration .3s ease}.post-group a:hover{text-decoration:underline}.head-rule{margin-left:100px;margin-right:10px;margin-top:20px}
-\ No newline at end of file
+@media(prefers-color-scheme:dark){:root{--background:$base03;--background-secondary:$base02;--text:$base0;--text-secondary:$base01;--text-emphasized:$base1}}@media(prefers-color-scheme:light){:root{--background:$base3;--background-secondary:$base2;--text:$base00;--text-secondary:$base1;--text-emphasized:$base01}}:root{--yellow:$yellow;--orange:$orange;--red:$red;--magenta:$magenta;--violet:$violet;--blue:$blue;--cyan:$cyan;--green:$green}body{background-color:var(--background);color:var(--text)}hr{background-color:var(--text-secondary)}#wrapper{background-color:var(--background)}#main .toc{background-color:var(--background-secondary)}blockquote{background:var(--background-secondary)}.content pre{background-color:var(--background-secondary)!important;color:var(--text)}code{background-color:var(--background)!important;color:var(--text-emphasized)!important}button.copyButton{background-color:var(--background);color:var(--text-secondary)}a:link{color:var(--blue)}a:visited{color:var(--violet)}a:hover{color:var(--violet)}nav a{color:var(--text-emphasized)!important}nav a:after{background-color:var(--text)}h2 a{color:var(--text-emphasized)!important}h2.header a:hover,h2.header a:visited,h2.header a.current{color:var(--text-emphasized)}time{color:var(--text-secondary)}table{margin:auto;background-color:var(--background);border-top:1px solid var(--text);border-bottom:1px solid var(--text)}table thead th{border-bottom:1px solid var(--text)}table th{background:var(--background-secondary)!important;color:var(--text-emphasized)!important}table td{padding:5px}.nav-list{border-color:var(--text-secondary)}.sidebar ul li a{color:var(--text)}.sidebar ul li a:hover{color:var(--text-emphasized);background-color:var(--background-secondary)}
+\ No newline at end of file
diff --git a/resources/_gen/assets/scss/sass/main.scss_17d836d605e0c91e6275eb2120c9a238.json b/resources/_gen/assets/scss/sass/main.scss_17d836d605e0c91e6275eb2120c9a238.json
@@ -1 +1 @@
-{"Target":"css/style.min.aa2db6f48b3ceb27f3067e65fd1e26048d0864c2dd4c5c66081cd1c742b1d693.css","MediaType":"text/css","Data":{"Integrity":"sha256-qi229Is86yfzBn5l/R4mBI0IZMLdTFxmCBzRx0Kx1pM="}}
-\ No newline at end of file
+{"Target":"css/style.min.41fda607c3dfd41ae9d7d5708f56bc7e53b25269487b59db797032f5ddb678a8.css","MediaType":"text/css","Data":{"Integrity":"sha256-Qf2mB8Pf1Brp19Vwj1a8flOyUmlIe1nbeXAy9d22eKg="}}
+\ No newline at end of file
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -0,0 +1,147 @@
+@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);
+}
+
+hr {
+ background-color: var(--text-secondary);
+}
+
+#wrapper {
+ background-color: var(--background);
+}
+
+#main {
+ .toc {
+ background-color: var(--background-secondary);
+ }
+}
+
+blockquote {
+ background: var(--background-secondary);
+}
+
+.content {
+ pre {
+ background-color: var(--background-secondary) !important;
+ color: var(--text);
+ }
+}
+
+code {
+ background-color: var(--background) !important;
+ color: var(--text-emphasized) !important;
+}
+
+button.copyButton {
+ background-color: var(--background);
+ color: var(--text-secondary);
+}
+
+a {
+ &:link {
+ color: var(--blue);
+ }
+ &:visited {
+ color: var(--violet);
+ }
+ &:hover {
+ color: var(--violet);
+ }
+}
+
+nav {
+ a {
+ color: var(--text-emphasized) !important;
+ &:after {
+ background-color: var(--text);
+ }
+ }
+}
+
+h2 {
+ a {
+ color: var(--text-emphasized) !important;
+ }
+ &.header {
+ a {
+ &:hover,
+ &:visited,
+ &.current {
+ color: var(--text-emphasized);
+ }
+ }
+ }
+}
+
+time {
+ color: var(--text-secondary);
+}
+
+table {
+ margin: auto;
+ background-color: var(--background);
+ border-top: 1px solid var(--text);
+ border-bottom: 1px solid var(--text);
+ thead {
+ th {
+ border-bottom: 1px solid var(--text);
+ }
+ }
+ th {
+ background: var(--background-secondary) !important;
+ color: var(--text-emphasized) !important;
+ }
+ td {
+ padding: 5px;
+ }
+}
+
+.nav-list {
+ border-color: var(--text-secondary);
+}
+
+.sidebar {
+ ul {
+ li {
+ a {
+ color: var(--text);
+ &:hover {
+ color: var(--text-emphasized);
+ background-color: var(--background-secondary);
+ }
+ }
+ }
+ }
+}
