commit 953553f1af66b32e25ed066eada0cbff08997db8
parent 6436f6bcf9ea2bd0dde3e38e3844558426b40448
Author: Michael Neuper <michael@michaelneuper.com>
Date: Tue, 31 Oct 2023 14:42:58 +0200
Switch from css to scss
Diffstat:
8 files changed, 408 insertions(+), 388 deletions(-)
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
@@ -0,0 +1,384 @@
+: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,8 +77,9 @@
</div>
<!-- custom css -->
- {{ range .Site.Params.customCSS }}
- <link media="screen" rel="stylesheet" href="{{ . | absURL }}" />
+ {{ $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">
{{ end }}
<!-- custom js -->
diff --git a/netlify.toml b/netlify.toml
@@ -1,2 +1,14 @@
-[context.production.environment]
- HUGO_VERSION = "0.115.1"
+[build.environment]
+HUGO_VERSION = "0.115.1"
+DART_SASS_VERSION = "1.63.6"
+TZ = "America/Los_Angeles"
+
+[build]
+publish = "public"
+command = """\
+ curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
+ tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
+ rm dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
+ export PATH=/opt/build/repo/dart-sass:$PATH && \
+ hugo --gc --minify \
+ """
diff --git a/resources/_gen/assets/scss/sass/main.scss_17d836d605e0c91e6275eb2120c9a238.content b/resources/_gen/assets/scss/sass/main.scss_17d836d605e0c91e6275eb2120c9a238.content
@@ -0,0 +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
diff --git a/resources/_gen/assets/scss/sass/main.scss_17d836d605e0c91e6275eb2120c9a238.json b/resources/_gen/assets/scss/sass/main.scss_17d836d605e0c91e6275eb2120c9a238.json
@@ -0,0 +1 @@
+{"Target":"css/style.min.aa2db6f48b3ceb27f3067e65fd1e26048d0864c2dd4c5c66081cd1c742b1d693.css","MediaType":"text/css","Data":{"Integrity":"sha256-qi229Is86yfzBn5l/R4mBI0IZMLdTFxmCBzRx0Kx1pM="}}
+\ No newline at end of file
diff --git a/resources/_gen/assets/scss/sass/main.scss_5481928335aee5e714c50847675a4f4e.content b/resources/_gen/assets/scss/sass/main.scss_5481928335aee5e714c50847675a4f4e.content
diff --git a/resources/_gen/assets/scss/sass/main.scss_5481928335aee5e714c50847675a4f4e.json b/resources/_gen/assets/scss/sass/main.scss_5481928335aee5e714c50847675a4f4e.json
@@ -0,0 +1 @@
+{"Target":"css/style.min.e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css","MediaType":"text/css","Data":{"Integrity":"sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU="}}
+\ No newline at end of file
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -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;
-}
