diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/content.scss | 93 | ||||
| -rw-r--r-- | css/fonts.scss | 75 | ||||
| -rw-r--r-- | css/frontPage.scss | 43 | ||||
| -rw-r--r-- | css/main.scss | 26 | ||||
| -rw-r--r-- | css/navigationBar.scss | 52 |
5 files changed, 289 insertions, 0 deletions
diff --git a/css/content.scss b/css/content.scss new file mode 100644 index 0000000..bdac41c --- /dev/null +++ b/css/content.scss @@ -0,0 +1,93 @@ +#content { + background-color: $backgroundColour; + margin: auto; + min-height: 100vh; + max-width: 72rem; + padding: 2rem; + + p:not(.heading, #contentHeading) { + line-height: 2rem; + } + + a, a:visited { + color: $highlightColour; + font-weight: bold; + } + + span { + &.code { + background-color: $foregroundColour; + border-radius: calc(1rem / 4); + font-family: "Martian Mono", "monospace"; + padding: calc(1rem / 4); + + a { + font-weight: normal; + } + } + + &.fancy { + font-weight: bold; + } + + &.small { + font-size: 0.75em; + } + } + + #contentHeading { + background-color: $foregroundColour; + border-radius: 1rem; + display: block; + font-family: "Martian Mono", "monospace"; + font-size: 4rem; + font-weight: bold; + margin: auto; + margin-bottom: 1rem; + padding: 1rem; + text-align: center; + + span.small { + font-size: 0.5em; + } + } + + section:nth-of-type(even) p.heading { + text-align: right; + } + + section + section { + margin-top: 1rem; + } + + p.heading { + border-bottom-style: solid; + border-bottom-width: calc(1rem / 4); + font-size: 2rem; + font-weight: bold; + margin-bottom: 1rem; + width: 100%; + } + + x-image { + display: block; + width: fit-content; + + &:nth-of-type(odd) { + margin-right: auto; + } + + &:nth-of-type(even) { + margin-left: auto; + } + + a { + img { + border-radius: 1rem; + display: block; + height: 16rem; + image-rendering: pixelated; + } + } + } +}
\ No newline at end of file diff --git a/css/fonts.scss b/css/fonts.scss new file mode 100644 index 0000000..6abafc0 --- /dev/null +++ b/css/fonts.scss @@ -0,0 +1,75 @@ +@font-face { + font-family: "Martian Mono"; + src: url("/ttf/MartianMono-Regular.ttf"); +} + +@font-face { + font-family: "Martian Mono"; + font-weight: bold; + src: url("/ttf/MartianMono-Bold.ttf"); +} + +@font-face { + font-family: "Oswald"; + src: url("/ttf/Oswald-Regular.ttf"); +} + +@font-face { + font-family: "Oswald"; + font-weight: bold; + src: url("/ttf/Oswald-Bold.ttf"); +} + +@font-face { + font-family: "Oswald"; + font-weight: bold; + src: url("/ttf/Oswald-Bold.ttf"); +} + +@font-face { + font-family: "Playfair Display"; + src: url("/ttf/PlayfairDisplay-Regular.ttf"); +} + +@font-face { + font-family: "Playfair Display"; + font-weight: bold; + src: url("/ttf/PlayfairDisplay-Regular.ttf"); +} + +@font-face { + font-family: "Playfair Display"; + font-style: italic; + src: url("/ttf/PlayfairDisplay-Italic.ttf"); +} + +@font-face { + font-family: "Playfair Display"; + font-style: italic; + font-weight: bold; + src: url("/ttf/PlayfairDisplay-BoldItalic.ttf"); +} + +@font-face { + font-family: "Raleway"; + src: url("/ttf/Raleway-Regular.ttf"); +} + +@font-face { + font-family: "Raleway"; + font-weight: bold; + src: url("/ttf/Raleway-Bold.ttf"); +} + +@font-face { + font-family: "Raleway"; + font-style: italic; + src: url("/ttf/Raleway-Italic.ttf"); +} + +@font-face { + font-family: "Raleway"; + font-style: italic; + font-weight: bold; + src: url("/ttf/Raleway-BoldItalic.ttf"); +} diff --git a/css/frontPage.scss b/css/frontPage.scss new file mode 100644 index 0000000..dc40d11 --- /dev/null +++ b/css/frontPage.scss @@ -0,0 +1,43 @@ +#frontPage { + align-items: center; + border-bottom-left-radius: 1rem; + border-bottom-right-radius: 1rem; + display: flex; + justify-content: center; + height: calc(100vh + 1rem); + padding-bottom: 1rem; + width: 100vw; + + body.about & { + background-color: $achernarColour; } + + body.benoit & { + background-image: url("/svg/benoit-background.svg"); + background-size: cover; + } + + body.bzipper & { + background-color: #FFFFFF; + } + + body.eas & { + background-color: #01CD93; + } + + body.luma & { + background-color: #6051B2; + } + + body.pollex & { + background-color: #4D4084; + } + + #glyph { + display: block; + font-size: 4rem; + font-weight: bold; + height: fit-content; + width: calc(100vmin / 2); + text-align: center; + } +} diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..e3cb1cd --- /dev/null +++ b/css/main.scss @@ -0,0 +1,26 @@ +@import "fonts"; + +$backgroundColour: oklch(20% 0.032625 270); +$foregroundColour: oklch(25% 0.041075 270); +$textColour: oklch(100% 0 0); +$highlightColour: oklch(75% 0.292700 149.34); + +$achernarColour: #007B34; + +:root { + font-family: "Raleway", "sans-serif"; + + background-color: $backgroundColour; + color: $textColour; +} + +* { + margin: 0; + padding: 0; + + box-sizing: border-box; +} + +@import "navigationBar.scss"; +@import "frontPage.scss"; +@import "content.scss"; diff --git a/css/navigationBar.scss b/css/navigationBar.scss new file mode 100644 index 0000000..a8d6c10 --- /dev/null +++ b/css/navigationBar.scss @@ -0,0 +1,52 @@ +#navigationBar { + align-items: center; + backdrop-filter: blur(1rem); + background-color: $textColour; + background-color: color-mix(in srgb, $textColour, transparent 75%); + border-top-left-radius: 1rem; + border-top-right-radius: 1rem; + color: $backgroundColour; + display: flex; + gap: 0.25rem; + justify-content: center; + left: 50vw; + padding: 1rem; + position: fixed; + top: 100vh; + transform: translate(-50%, -1rem); + transition: 0.25s; + z-index: 1; + + &:hover { + background-color: $textColour; + transition: 0.25s; + transform: translate(-50%, -100%); + } + + a { + font-weight: bold; + text-decoration: none; + + &, &:visited { + color: $backgroundColour; + + &:first-of-type { + color: $achernarColour; + } + } + } + + .groupSeparator { + background-color: $backgroundColour; + border-radius: 0.25rem; + height: 0.25rem; + width: 0.75rem; + } + + .elementSeparator { + background-color: $backgroundColour; + border-radius: 100%; + height: 0.25rem; + width: 0.25rem; + } +}
\ No newline at end of file |