diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/fonts.scss | 11 | ||||
| -rw-r--r-- | css/footer.scss | 59 | ||||
| -rw-r--r-- | css/header.scss (renamed from css/frontPage.scss) | 40 | ||||
| -rw-r--r-- | css/main.scss | 6 | ||||
| -rw-r--r-- | css/navBar.scss | 44 | ||||
| -rw-r--r-- | css/page.scss (renamed from css/content.scss) | 63 |
6 files changed, 137 insertions, 86 deletions
diff --git a/css/fonts.scss b/css/fonts.scss index db20257..33f1cee 100644 --- a/css/fonts.scss +++ b/css/fonts.scss @@ -45,17 +45,6 @@ } @font-face { - font-family: "Play"; - src: url("/font/Play-Regular.ttf"); -} - -@font-face { - font-family: "Play"; - font-weight: bold; - src: url("/font/Play-Bold.ttf"); -} - -@font-face { font-family: "Playfair Display"; src: url("/font/PlayfairDisplay-Regular.ttf"); } diff --git a/css/footer.scss b/css/footer.scss new file mode 100644 index 0000000..a8a389f --- /dev/null +++ b/css/footer.scss @@ -0,0 +1,59 @@ +#footer { + background-color: var(--foregroundColour); + border-radius: 1rem; + font-family: "Martian Mono", "monospace"; + font-size: 0.75em; + line-height: 1em; + margin-top: 1rem; + padding: 1rem; + + .separator { + background-color: var(--textColour); + border-radius: 0.125rem; + height: 0.25rem; + margin: 1rem auto; + width: 100%; + } + + #footerHeading { + font-size: 2em; + font-weight: bold; + } + + .obfuscatedText { + background-color: var(--textColour); + height: 1rem; + image-rendering: pixelated; + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; + width: 100%; + } + + img { + display: block; + margin: auto; + } + + table { + border-collapse: collapse; + + tr { + th, td { + line-height: 2em; + } + + th { + text-align: left; + + &::before { + content: "\00B7\0020"; + } + } + + td { + padding-left: 2rem; + } + } + } +} diff --git a/css/frontPage.scss b/css/header.scss index 9ed00f4..44b18a0 100644 --- a/css/frontPage.scss +++ b/css/header.scss @@ -1,4 +1,4 @@ -#frontPage { +#header { border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; box-shadow: $shadow; @@ -135,7 +135,6 @@ aspect-ratio: 1; background-color: var(--pageHighlightColour); cursor: pointer; - left: 1rem; mask-image: url("/svg/hamburger.svg"); mask-position: center; mask-repeat: no-repeat; @@ -143,7 +142,6 @@ position: absolute; top: 1rem; transition: background-color $navBarSlideDuration; - width: 2rem; z-index: 255; &[data-navBarState = "Visible"] { @@ -151,6 +149,17 @@ } } + #clickMe { + background-color: var(--pageHighlightColour); + height: 2rem; + mask-image: url("/image/clickMe.webp"); + mask-position: center; + mask-repeat: no-repeat; + mask-size: cover; + position: absolute; + width: 16rem; + } + @import "navBar"; #glyph { @@ -173,4 +182,29 @@ font-size: 4em; font-weight: bold; } + + @media (pointer: fine) { + #hamburger { + left: 1rem; + width: 2rem; + } + + #clickMe { + left: 4rem; + top: 1rem; + } + } + + @media (pointer: coarse) { + #hamburger { + left: 50%; + transform: translateX(-50%); + width: 4rem; + } + + #clickMe { + left: calc(50% + 3rem); + top: 2rem; + } + } } diff --git a/css/main.scss b/css/main.scss index 983c4ad..31312e4 100644 --- a/css/main.scss +++ b/css/main.scss @@ -2,7 +2,7 @@ $achernarColour: #007B34; -$frontPageHeight: calc(100vh + 1rem); +$headerHeight: calc(100vh + 1rem); $navBarSlideDuration: 0.5s; $shadow: 0 0 1rem color-mix(in srgb, black, transparent 75%);; @@ -44,5 +44,5 @@ li p::before { content: "\2014\0020"; } -@import "frontPage.scss"; -@import "content.scss"; +@import "header.scss"; +@import "page.scss"; diff --git a/css/navBar.scss b/css/navBar.scss index a915415..1ab49bd 100644 --- a/css/navBar.scss +++ b/css/navBar.scss @@ -1,6 +1,4 @@ #navBar { - backdrop-filter: blur(1rem); - background-color: color-mix(in srgb, var(--backgroundColour), transparent 50%); box-shadow: $shadow; color: var(--textColour); display: flex; @@ -8,11 +6,9 @@ left: 0; min-height: calc(100vh + 1rem); padding: 1rem; - padding-top: 4rem; position: absolute; transform: translateX(-100%); transition: transform $navBarSlideDuration; - width: 50%; z-index: 127; &[data-state = "Visible"] { @@ -60,12 +56,42 @@ transform: translateX(-50%); } - @media (orientation: landscape) { - border-bottom-right-radius: 1rem; - border-top-right-radius: 1rem; + @media (pointer: fine) { + backdrop-filter: blur(1rem); + background-color: color-mix(in srgb, var(--backgroundColour), transparent 50%); + padding-top: 4rem; + + @media (orientation: landscape) { + border-bottom-right-radius: 1rem; + border-top-right-radius: 1rem; + width: 50%; + } + + @media (orientation: portrait) { + width: 100%; + } } - @media (orientation: portrait) { - width: 100%; + @media (pointer: coarse) { + background-color: var(--backgroundColour); + flex-direction: column; + font-size: 4rem; + padding-top: 6rem; + width: 100%; + + + p.clickable, a { + text-align: center; + } + + p.heading::before { + background-color: var(--textColour); + border-radius: 0.25rem; + content: ""; + display: block; + height: 0.25rem; + margin-bottom: 0.5rem; + width: 100%; + } } } diff --git a/css/content.scss b/css/page.scss index c6aa6b3..5017dcc 100644 --- a/css/content.scss +++ b/css/page.scss @@ -1,8 +1,8 @@ -#content { +#page { margin: auto; max-width: 72rem; padding: 1rem; - padding-top: calc($frontPageHeight + 1rem); + padding-top: calc($headerHeight + 1rem); p:not(.heading, #contentHeading, #cloneNotice p) { line-height: 2em; @@ -116,62 +116,5 @@ } } - #footer { - background-color: var(--foregroundColour); - border-radius: 1rem; - font-family: "Martian Mono", "monospace"; - font-size: 0.75em; - image-rendering: pixelated; - margin-top: 1rem; - padding: 1rem; - - .separator { - background-color: var(--textColour); - border-radius: 0.125rem; - height: 0.25rem; - margin: 1rem auto; - width: 100%; - } - - #footerHeading { - font-size: 2em; - font-weight: bold; - } - - .obfuscatedText { - background-color: var(--textColour); - height: 1rem; - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - width: 100%; - } - - img { - display: block; - margin: auto; - } - - table { - border-collapse: collapse; - - tr { - th, td { - line-height: 2em; - } - - th { - text-align: left; - - &::before { - content: "\00B7\0020"; - } - } - - td { - padding-left: 2rem; - } - } - } - } + @import "footer"; }
\ No newline at end of file |