diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/footer.scss | 6 | ||||
| -rw-r--r-- | css/main.scss | 12 | ||||
| -rw-r--r-- | css/navBar.scss | 3 | ||||
| -rw-r--r-- | css/page.scss | 6 |
4 files changed, 15 insertions, 12 deletions
diff --git a/css/footer.scss b/css/footer.scss index edd15c2..bee71fa 100644 --- a/css/footer.scss +++ b/css/footer.scss @@ -4,7 +4,7 @@ background-color: var(--foregroundColour); border-top-left-radius: calc($padding / 2); border-top-right-radius: calc($padding / 2); - font-family: $monospaceFont; + font-family: $codeFont; margin: auto; max-width: calc($contentWidth + $padding * 2); padding: $padding; @@ -35,9 +35,9 @@ text-align: left; &::before, &::after { - @include separator($width); + @include separator; - margin: $padding 0; + margin: $padding 0; } } diff --git a/css/main.scss b/css/main.scss index 878b2d1..730347c 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,4 +1,6 @@ -$monospaceFont: "Fira Mono", "monospace"; +$mainFont: "Montserrat", "sans-serif"; +$specialFont: "Raleway", "sans-serif"; +$codeFont: "Fira Mono", "Martian Mono", "monospace"; $contentWidth: 72rem; $padding: 1rem; @@ -6,17 +8,17 @@ $separatorWidth: 0.25rem; $shadowColour: color-mix(in srgb, black, transparent 50%); -@mixin separator($width) { +@mixin separator { background-color: var(--textColour); border-radius: calc($separatorWidth / 3); content: ""; display: block; height: $separatorWidth; - width: $width; + width: 100%; } :root { - font-family: "Raleway", "sans-serif"; + font-family: $mainFont; scroll-behavior: smooth; } @@ -52,7 +54,7 @@ a, a:visited { } code { - font-family: $monospaceFont; + font-family: $codeFont; } ul { diff --git a/css/navBar.scss b/css/navBar.scss index 4c33e35..136b592 100644 --- a/css/navBar.scss +++ b/css/navBar.scss @@ -1,6 +1,7 @@ #navBar { align-items: center; display: flex; + font-family: $specialFont; justify-content: space-between; left: 50%; max-width: calc($contentWidth + $padding * 2); @@ -35,7 +36,7 @@ text-decoration-color: #00000000; &[aria-current = "page"]::after { - @include separator(100%); + @include separator; left: 50%; position: absolute; diff --git a/css/page.scss b/css/page.scss index ee53182..77bcdf5 100644 --- a/css/page.scss +++ b/css/page.scss @@ -9,6 +9,7 @@ } h1 { + font-family: $specialFont; font-size: 2em; font-weight: bold; width: 100%; @@ -18,7 +19,7 @@ } &::after { - @include separator(100%); + @include separator; margin-top: $separatorWidth; } @@ -35,7 +36,6 @@ } section { - font-family: "Montserrat", "sans-serif"; line-height: 2em; max-width: calc($contentWidth / 2 - $padding); text-align: justify; @@ -55,7 +55,7 @@ background-color: var(--textColour); border-radius: calc($padding / 2); color: var(--backgroundColour); - font-family: $monospaceFont; + font-family: $codeFont; line-height: normal; padding: $padding; text-align: left; |