commit c8dd136e739db439c685366a614c9e724b8e3a59
parent 4c4f04b44f9125b4568a2126018c2c2a366b6aff
Author: Michael Neuper <michael@michaelneuper.com>
Date: Thu, 2 Nov 2023 10:24:44 +0200
Change to sass/scss
Diffstat:
5 files changed, 382 insertions(+), 367 deletions(-)
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
@@ -0,0 +1,371 @@
+$radius: 0.25rem;
+
+@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);
+ margin-top: 20px;
+ margin-bottom: 10px;
+ border: 0;
+ height: 2px;
+}
+
+table {
+ margin: auto;
+ background-color: var(--background);
+ border-top: 1px solid var(--text);
+ border-bottom: 1px solid var(--text);
+ border-collapse: collapse;
+ border: none;
+ border-radius: $radius;
+ margin-top: 0;
+ margin-bottom: 0;
+
+ thead {
+ th {
+ border-bottom: 1px solid var(--text-secondary);
+ }
+ }
+}
+
+.content th {
+ background: var(--background-secondary);
+ color: var(--text-emphasized);
+}
+
+th,
+td {
+ padding: 5px;
+}
+
+.content {
+ blockquote {
+ background: var(--background-secondary);
+ border-color: var(--text);
+ border-radius: $radius;
+ padding-right: 20px;
+ }
+
+ 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;
+ }
+}
+
+#wrapper {
+ background-color: var(--background);
+ padding-left: 100px;
+ padding-right: 100px;
+
+ @media (max-width: 767px) {
+ padding-left: 40px;
+ padding-right: 40px; /* TODO fix padding */
+ }
+}
+
+main {
+ display: flex;
+}
+
+main.grid-container {
+ display: grid;
+ grid-template-columns: 3fr 1fr;
+ gap: 20px;
+
+ @media (max-width: 767px) {
+ grid-template-columns: 1fr;
+ }
+}
+
+#main {
+ max-width: 1000px;
+
+ .toc {
+ background-color: var(--background-secondary);
+ border: 1px dashed var(--text-secondary);
+ border-radius: $radius;
+ }
+}
+
+#main :target {
+ background-color: var(--background-secondary);
+ color: var(--text-emphasized);
+ border-radius: 0.25em;
+ padding-left: 20px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.numbered-subtitles {
+ color: var(--text) !important;
+}
+
+.index {
+ flex: 3;
+ padding-right: 10px;
+ padding-left: 10px;
+
+ @media (max-width: 767px) {
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+}
+
+.sidebar {
+ flex: 1;
+
+ @media (max-width: 767px) {
+ order: 1;
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+}
+
+.sidebar ul {
+ list-style: none;
+ padding: 0;
+}
+
+.sidebar ul li a {
+ text-decoration: none;
+ display: block;
+ padding: 2px 12px;
+ color: var(--text);
+
+ transition: color 0.3s, background-color 0.3s;
+}
+
+.sidebar ul li a:hover {
+ color: var(--text-emphasized);
+ background-color: var(--background-secondary);
+}
+
+.nav-list {
+ border-color: var(--text-secondary);
+ display: block;
+ padding: 10px 15px;
+ margin: 10px 5px;
+ margin-left: -5px;
+ border: 2px solid;
+ border-radius: $radius;
+}
+
+.content a {
+ text-decoration: none;
+}
+
+a:link {
+ color: var(--blue);
+}
+
+a:visited {
+ color: var(--violet);
+}
+
+a:hover {
+ color: var(--violet);
+}
+
+/* h2 a {
+ color: var(--basei1);
+ } */
+
+span.nav-bar-item a.link {
+ color: var(--text-emphasized);
+ text-decoration: none;
+ display: inline-block;
+ position: relative;
+}
+
+span.nav-bar-item a:after {
+ background-color: var(--text-emphasized);
+ content: "";
+ position: absolute;
+ width: 100%;
+ transform: scaleX(0);
+ height: 2px;
+ bottom: 0;
+ left: 0;
+ transform-origin: bottom right;
+ transition: transform 0.25s ease-out;
+}
+
+span.nav-bar-item a:hover:after {
+ transform: scaleX(1);
+ transform-origin: bottom left;
+}
+
+#TableOfContents a {
+ text-decoration: none;
+ color: var(--text);
+}
+
+#TableOfContents a:hover {
+ text-decoration: underline;
+}
+
+header a:hover,
+header a:visited,
+header .current a {
+ color: var(--text-emphasized);
+}
+
+#header > nav {
+ margin-top: 10px;
+}
+
+h3.taxonomy > a {
+ color: var(--text);
+}
+
+h3.taxonomy > a:visited {
+ color: var(--text);
+}
+
+h3.taxonomy > a:hover {
+ color: var(--text-emphasized);
+}
+
+.post-group a {
+ text-decoration: none;
+ transition: text-decoration 0.3s ease;
+}
+
+.post-group a:hover {
+ text-decoration: underline;
+}
+
+time {
+ color: var(--text-secondary);
+}
+
+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;
+}
+
+button.copyButton:hover {
+ opacity: 1;
+}
+
+/* TODO fix this */
+.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;
+ }
+}
+
+.post-title {
+ text-align: center;
+}
+
+.publish-date {
+ color: var(--text-secondary);
+ font-size: large;
+ padding-top: 10px;
+}
+
+::selection {
+ background-color: var(--blue);
+ color: white;
+}
+
+::-moz-selection {
+ background-color: var(--blue);
+ color: white;
+}
+
+.book-container {
+ clear: both;
+}
+
+.book-container > img {
+ margin-left: 50px;
+}
+
+#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: 25px;
+ margin-bottom: 25px;
+ border: 1px solid var(--text);
+ border-radius: $radius;
+
+ &:focus {
+ outline: 1.5px solid var(--text-emphasized);
+ }
+}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -77,10 +77,15 @@
</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 }}
+ {{/* {{ range .Site.Params.customCSS }}
+ <link media="screen" rel="stylesheet" href="{{ . | absURL }}" />
+ {{ end }} */}}
+
<!-- custom js -->
{{ range .Site.Params.customJS }}
<script src="{{ . | absURL }}"></script>
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 @@
+@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);margin-top:20px;margin-bottom:10px;border:0;height:2px}table{margin:auto;background-color:var(--background);border-top:1px solid var(--text);border-bottom:1px solid var(--text);border-collapse:collapse;border:none;border-radius:.25rem;margin-top:0;margin-bottom:0}table thead th{border-bottom:1px solid var(--text-secondary)}.content th{background:var(--background-secondary);color:var(--text-emphasized)}th,td{padding:5px}.content blockquote{background:var(--background-secondary);border-color:var(--text);border-radius:.25rem;padding-right:20px}.content pre{background-color:var(--background-secondary)!important;position:relative;border-radius:.25rem}.content code{background-color:var(--background-secondary);color:var(--text)}.content mark{background-color:var(--background-secondary);color:var(--text-emphasized);border-radius:.25rem;padding-left:5px;padding-right:5px}.content kbd{background-color:var(--background-secondary);color:var(--text-emphasized);border-radius:.25rem}#wrapper{background-color:var(--background);padding-left:100px;padding-right:100px}@media(max-width:767px){#wrapper{padding-left:40px;padding-right:40px}}main{display:flex}main.grid-container{display:grid;grid-template-columns:3fr 1fr;gap:20px}@media(max-width:767px){main.grid-container{grid-template-columns:1fr}}#main{max-width:1000px}#main .toc{background-color:var(--background-secondary);border:1px dashed var(--text-secondary);border-radius:.25rem}#main :target{background-color:var(--background-secondary);color:var(--text-emphasized);border-radius:.25em;padding-left:20px;padding-top:10px;padding-bottom:10px}.numbered-subtitles{color:var(--text)!important}.index{flex:3;padding-right:10px;padding-left:10px}@media(max-width:767px){.index{padding-left:10px;padding-right:10px}}.sidebar{flex:1}@media(max-width:767px){.sidebar{order:1;padding-left:10px;padding-right:10px}}.sidebar ul{list-style:none;padding:0}.sidebar ul li a{text-decoration:none;display:block;padding:2px 12px;color:var(--text);transition:color .3s,background-color .3s}.sidebar ul li a:hover{color:var(--text-emphasized);background-color:var(--background-secondary)}.nav-list{border-color:var(--text-secondary);display:block;padding:10px 15px;margin:10px 5px;margin-left:-5px;border:2px solid;border-radius:.25rem}.content a{text-decoration:none}a:link{color:var(--blue)}a:visited{color:var(--violet)}a:hover{color:var(--violet)}span.nav-bar-item a.link{color:var(--text-emphasized);text-decoration:none;display:inline-block;position:relative}span.nav-bar-item a:after{background-color:var(--text-emphasized);content:"";position:absolute;width:100%;transform:scaleX(0);height:2px;bottom:0;left:0;transform-origin:bottom right;transition:transform .25s ease-out}span.nav-bar-item a:hover:after{transform:scaleX(1);transform-origin:bottom left}#TableOfContents a{text-decoration:none;color:var(--text)}#TableOfContents a:hover{text-decoration:underline}header a:hover,header a:visited,header .current a{color:var(--text-emphasized)}#header>nav{margin-top:10px}h3.taxonomy>a{color:var(--text)}h3.taxonomy>a:visited{color:var(--text)}h3.taxonomy>a:hover{color:var(--text-emphasized)}.post-group a{text-decoration:none;transition:text-decoration .3s ease}.post-group a:hover{text-decoration:underline}time{color:var(--text-secondary)}button.copyButton{background-color:var(--background);color:var(--text-emphasized);position:absolute;bottom:5px;right:5px;opacity:.7;border:none;padding:5px 10px;border-radius:.25rem;cursor:pointer;font-size:14px;transition:opacity .3s}button.copyButton:hover{opacity:1}.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}}.post-title{text-align:center}.publish-date{color:var(--text-secondary);font-size:large;padding-top:10px}::selection{background-color:var(--blue);color:#fff}::-moz-selection{background-color:var(--blue);color:#fff}.book-container{clear:both}.book-container>img{margin-left:50px}#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:25px;margin-bottom:25px;border:1px solid var(--text);border-radius:.25rem}#ddgSearch>input:focus{outline:1.5px solid var(--text-emphasized)}
+\ 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.7399b1cc819fdca7e84c748cc6ed8189cd3861a76b91c9705e4215a3114f10ad.css","MediaType":"text/css","Data":{"Integrity":"sha256-c5mxzIGf3KfoTHSMxu2Bic04YadrkclwXkIVoxFPEK0="}}
+\ No newline at end of file
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -1,365 +0,0 @@
-@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);
- margin-top: 20px;
- margin-bottom: 10px;
- border: 0;
- height: 2px;
-}
-
-table {
- margin: auto;
- background-color: var(--background);
- border-top: 1px solid var(--text);
- border-bottom: 1px solid var(--text);
- border-collapse: collapse;
- border: none;
- border-radius: 0.25rem;
- margin-top: 0;
- margin-bottom: 0;
-}
-
-table thead th {
- border-bottom: 1px solid var(--text-secondary);
-}
-
-.content th {
- background: var(--background-secondary);
- color: var(--text-emphasized);
-}
-
-th,
-td {
- padding: 5px;
-}
-
-.content blockquote {
- background: var(--background-secondary);
- border-color: var(--text);
- border-radius: 0.25rem;
- padding-right: 20px;
-}
-
-.content pre {
- background-color: var(--background-secondary) !important;
- position: relative;
- border-radius: 0.25rem;
-}
-
-.content code {
- background-color: var(--background-secondary);
- color: var(--text);
-}
-
-.content mark {
- background-color: var(--background-secondary);
- color: var(--text-emphasized);
- border-radius: 0.25rem;
- padding-left: 5px;
- padding-right: 5px;
-}
-
-.content kbd {
- background-color: var(--background-secondary);
- color: var(--text-emphasized);
- border-radius: 0.25rem;
-}
-
-#wrapper {
- background-color: var(--background);
- padding-left: 100px;
- padding-right: 100px;
-
- @media (max-width: 767px) {
- padding-left: 40px;
- padding-right: 40px; /* TODO fix padding */
- }
-}
-
-main {
- display: flex;
-}
-
-main.grid-container {
- display: grid;
- grid-template-columns: 3fr 1fr;
- gap: 20px;
-
- @media (max-width: 767px) {
- grid-template-columns: 1fr;
- }
-}
-
-#main {
- max-width: 1000px;
-
- .toc {
- background-color: var(--background-secondary);
- border: 1px dashed var(--text-secondary);
- border-radius: 0.25rem;
- }
-}
-
-#main :target {
- background-color: var(--background-secondary);
- color: var(--text-emphasized);
- border-radius: 0.25em;
- padding-left: 20px;
- padding-top: 10px;
- padding-bottom: 10px;
-}
-
-.numbered-subtitles {
- color: var(--text) !important;
-}
-
-.index {
- flex: 3;
- padding-right: 10px;
- padding-left: 10px;
-
- @media (max-width: 767px) {
- padding-left: 10px;
- padding-right: 10px;
- }
-}
-
-.sidebar {
- flex: 1;
-
- @media (max-width: 767px) {
- order: 1;
- padding-left: 10px;
- padding-right: 10px;
- }
-}
-
-.sidebar ul {
- list-style: none;
- padding: 0;
-}
-
-.sidebar ul li a {
- text-decoration: none;
- display: block;
- padding: 2px 12px;
- color: var(--text);
-
- transition: color 0.3s, background-color 0.3s;
-}
-
-.sidebar ul li a:hover {
- color: var(--text-emphasized);
- background-color: var(--background-secondary);
-}
-
-.nav-list {
- border-color: var(--text-secondary);
- display: block;
- padding: 10px 15px;
- margin: 10px 5px;
- margin-left: -5px;
- border: 2px solid;
- border-radius: 0.25rem;
-}
-
-.content a {
- text-decoration: none;
-}
-
-a:link {
- color: var(--blue);
-}
-
-a:visited {
- color: var(--violet);
-}
-
-a:hover {
- color: var(--violet);
-}
-
-/* h2 a {
- color: var(--basei1);
-} */
-
-span.nav-bar-item a.link {
- color: var(--text-emphasized);
- text-decoration: none;
- display: inline-block;
- position: relative;
-}
-
-span.nav-bar-item a:after {
- background-color: var(--text-emphasized);
- content: "";
- position: absolute;
- width: 100%;
- transform: scaleX(0);
- height: 2px;
- bottom: 0;
- left: 0;
- transform-origin: bottom right;
- transition: transform 0.25s ease-out;
-}
-
-span.nav-bar-item a:hover:after {
- transform: scaleX(1);
- transform-origin: bottom left;
-}
-
-#TableOfContents a {
- text-decoration: none;
- color: var(--text);
-}
-
-#TableOfContents a:hover {
- text-decoration: underline;
-}
-
-header a:hover,
-header a:visited,
-header .current a {
- color: var(--text-emphasized);
-}
-
-#header > nav {
- margin-top: 10px;
-}
-
-h3.taxonomy > a {
- color: var(--text);
-}
-
-h3.taxonomy > a:visited {
- color: var(--text);
-}
-
-h3.taxonomy > a:hover {
- color: var(--text-emphasized);
-}
-
-.post-group a {
- text-decoration: none;
- transition: text-decoration 0.3s ease;
-}
-
-.post-group a:hover {
- text-decoration: underline;
-}
-
-time {
- color: var(--text-secondary);
-}
-
-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: 0.25rem;
- cursor: pointer;
- font-size: 14px;
- transition: opacity 0.3s;
-}
-
-button.copyButton:hover {
- opacity: 1;
-}
-
-/* TODO fix this */
-.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;
- }
-}
-
-.post-title {
- text-align: center;
-}
-
-.publish-date {
- color: var(--text-secondary);
- font-size: large;
- padding-top: 10px;
-}
-
-::selection {
- background-color: var(--blue);
- color: white;
-}
-
-::-moz-selection {
- background-color: var(--blue);
- color: white;
-}
-
-.book-container {
- clear: both;
-}
-
-.book-container > img {
- margin-left: 50px;
-}
-
-#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: 25px;
- margin-bottom: 25px;
- border: 1px solid var(--text);
- border-radius: 0.25rem;
-}
-
-#ddgSearch > input:focus {
- outline: 1.5px solid var(--text-emphasized);
-}
