commit 63cbe321a7e07b90a3b6ad06a270ac4fbc864589
parent b23b4a26240d0411cb0da010dd5b422d34040ba7
Author: FIGBERT <figbert@figbert.com>
Date: Fri, 1 Jan 2021 00:58:56 -0800
Move redesigned styles into sass files
Diffstat:
11 files changed, 194 insertions(+), 158 deletions(-)
diff --git a/config.toml b/config.toml
@@ -10,7 +10,7 @@ default_language = "en"
generate_feed = true
# Whether to automatically compile all Sass files in the sass directory
-compile_sass = false
+compile_sass = true
# Whether to do syntax highlighting
# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
diff --git a/sass/code.sass b/sass/code.sass
@@ -0,0 +1,13 @@
+@import variables.sass
+
+pre
+ padding: 1rem
+ white-space: pre-wrap
+ code
+ border: none
+
+code
+ font-size: 1.25rem
+ padding: 0 4px
+ border: 1px solid #ccc
+
diff --git a/sass/error.sass b/sass/error.sass
@@ -0,0 +1,14 @@
+.error
+ display: grid
+ place-items: center
+ width: 100%
+ height: 100%
+ img
+ max-width: 19rem
+ strong
+ font-size: 5rem
+ font-weight: 800
+ p
+ font-size: 2rem
+ font-weight: 200
+
diff --git a/sass/global.sass b/sass/global.sass
@@ -0,0 +1,30 @@
+@import variables.sass
+@import headers.sass
+@import table.sass
+@import links.sass
+@import nav.sass
+@import code.sass
+@import kbd.sass
+@import error.sass
+
+body
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+ background-color: $background-color
+ color: $text-color
+ margin-left: auto
+ margin-right: auto
+ line-height: 200%
+ max-width: 40rem
+ padding-left: 3rem
+ padding-right: 3rem
+ padding-bottom: 3rem
+
+video, picture, img
+ width: 100%
+
+.page-preview
+ margin-top: 2rem
+ margin-bottom: 4rem
+ h3
+ margin: 0
+
diff --git a/sass/headers.sass b/sass/headers.sass
@@ -0,0 +1,74 @@
+@import variables.sass
+
+h1
+ &::before
+ content: "#"
+ padding-right: 0.5rem
+ color: $secondary-color
+ a
+ color: inherit
+ &::before
+ content: ""
+ &::after
+ content: ""
+
+h2
+ &::before
+ content: "##"
+ padding-right: 0.5rem
+ color: $secondary-color
+ a
+ color: inherit
+ &::before
+ content: ""
+ &::after
+ content: ""
+
+h3
+ &::before
+ content: "###"
+ padding-right: 0.5rem
+ color: $secondary-color
+ a
+ color: inherit
+ &::before
+ content: ""
+ &::after
+ content: ""
+
+h4
+ &::before
+ content: "####"
+ padding-right: 0.5rem
+ color: $secondary-color
+ a
+ color: inherit
+ &::before
+ content: ""
+ &::after
+ content: ""
+
+h5
+ &::before
+ content: "#####"
+ padding-right: 0.5rem
+ color: $secondary-color
+ a
+ color: inherit
+ &::before
+ content: ""
+ &::after
+ content: ""
+
+h6
+ &::before
+ content: "######"
+ padding-right: 0.5rem
+ color: $secondary-color
+ a
+ color: inherit
+ &::before
+ content: ""
+ &::after
+ content: ""
+
diff --git a/sass/kbd.sass b/sass/kbd.sass
@@ -0,0 +1,9 @@
+kbd
+ font-size: 1.25rem
+ padding: 0.1rem 0.6rem
+ text-shadow: 0 1px 0 #fff
+ background-color: #e4e6e8
+ border: 1px solid #9fa6ad
+ border-radius: 3px
+ box-shadow: 0 1px 1px rgba(12,13,14,0.15), inset 0 1px 0 0 #fff
+
diff --git a/sass/links.sass b/sass/links.sass
@@ -0,0 +1,20 @@
+@import variables.sass
+
+a
+ color: $tertiary-color
+ font-weight: 500
+ text-decoration: none
+ &::before
+ content: "["
+ font-weight: bold
+ padding-right: 0.1rem
+ &::after
+ content: "]"
+ font-weight: bold
+ padding-left: 0.1rem
+ &:hover
+ &::before
+ color: $secondary-color
+ &::after
+ color: $secondary-color
+
diff --git a/sass/nav.sass b/sass/nav.sass
@@ -0,0 +1,14 @@
+nav
+ width: 100%
+ padding-bottom: 1rem
+ div
+ display: flex
+ justify-content: space-around
+ a
+ font-weight: 800
+ color: inherit
+ &::before
+ content: ""
+ &::after
+ content: ""
+
diff --git a/sass/table.sass b/sass/table.sass
@@ -0,0 +1,14 @@
+@import variables.sass
+
+table
+ border-collapse: collapse
+ width: 100%
+
+thead
+ background-color: $secondary-color
+
+td, th
+ border: 1px solid $text-color
+ padding: 0.5rem
+ text-align: left
+
diff --git a/sass/variables.sass b/sass/variables.sass
@@ -0,0 +1,5 @@
+$background-color: #f5f5f5
+$text-color: #212121
+$secondary-color: #214ED4
+$tertiary-color: #6082E6
+
diff --git a/static/global.css b/static/global.css
@@ -1,157 +0,0 @@
-:root {
- --background-color: #f5f5f5;
- --text-color: #212121;
- --secondary-color: #4169e1;
- --tertiary-color: #b6c6f4;
-}
-
-@media(prefers-color-scheme: dark) {
- :root {
- --background-color: #212121;
- --text-color: #f5f5f5;
- }
-}
-
-body {
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
- background-color: var(--background-color);
- color: var(--text-color);
- margin-left: auto;
- margin-right: auto;
- line-height: 200%;
- max-width: 40rem;
- padding-left: 3rem;
- padding-right: 3rem;
- padding-bottom: 3rem;
-}
-
-nav {
- width: 100%;
- padding-bottom: 1rem;
-}
-
-nav > div {
- display: flex;
- justify-content: space-around;
-}
-
-a {
- color: inherit;
- font-weight: 500;
- text-decoration: underline;
-}
-
-a:hover {
- color: var(--tertiary-color);
- text-decoration-color: var(--secondary-color);
-}
-
-nav > div > a {
- font-weight: 800;
- text-decoration: none;
-}
-
-nav > div > a:hover {
- color: #7a96ea;
-}
-
-pre {
- padding: 1rem;
- white-space: pre-wrap;
-}
-
-video, picture, img {
- width: 100%;
-}
-
-code {
- font-size: 1.25rem;
-}
-
-h1::before {
- content: "#";
- padding-right: 0.5rem;
- color: var(--secondary-color);
-}
-
-h2::before {
- content: "##";
- padding-right: 0.5rem;
- color: var(--secondary-color);
-}
-
-h3::before {
- content: "###";
- padding-right: 0.5rem;
- color: var(--secondary-color);
-}
-
-h4::before {
- content: "####";
- padding-right: 0.5rem;
- color: var(--secondary-color);
-}
-
-h5::before {
- content: "#####";
- padding-right: 0.5rem;
- color: var(--secondary-color);
-}
-
-h6::before {
- content: "######";
- padding-right: 0.5rem;
- color: var(--secondary-color);
-}
-
-table {
- border-collapse: collapse;
- width: 100%;
-}
-
-thead {
- background-color: var(--secondary-color);
-}
-
-td, th {
- border: 1px solid var(--text-color);
- padding: 0.5rem;
- text-align: left;
-}
-
-.emoji > svg {
- width: 2rem;
- height: auto;
- vertical-align: top;
-}
-
-.page-preview {
- margin-top: 2rem;
- margin-bottom: 4rem;
-}
-
-.page-preview > h3 {
- margin: 0;
-}
-
-.error {
- display: grid;
- place-items: center;
- width: 100%;
- height: 100%;
-}
-
-.error > img {
- max-width: 19rem;
-}
-
-.error > strong {
- font-size: 5rem;
- font-weight: 800;
-}
-
-.error > p {
- font-size: 2rem;
- font-weight: 200;
-}
-
