diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/footer.scss | 22 | ||||
| -rw-r--r-- | css/header.scss | 4 | ||||
| -rw-r--r-- | css/main.scss | 9 | ||||
| -rw-r--r-- | css/navBar.scss | 3 | ||||
| -rw-r--r-- | css/page.scss | 14 | ||||
| -rw-r--r-- | css/sideMenu.scss | 8 |
6 files changed, 47 insertions, 13 deletions
diff --git a/css/footer.scss b/css/footer.scss index 9015abd..514db19 100644 --- a/css/footer.scss +++ b/css/footer.scss @@ -49,10 +49,28 @@ font-weight: bold; gap: 1rem; margin: auto; + margin-top: 1rem; width: fit-content; - @media (orientation: portrait) { - flex-direction: column; + a { + aspect-ratio: 1; + background-color: var(--textColour); + display: block; + image-rendering: pixelated; + mask-size: cover; + width: 2rem; + + &.instagram { + mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAX0lEQVQ4y8VTQQ6AMAiDhfT/7+0FLy6ZBnWMLPYILYQCKicAuCRAUmVVfNFkxSMfgLcV8VjEZjr1mUkqAP+cPxW7J948ibhNivi/QNlEezrTaI0R16ZufasH1WfS6jsfuEMzS24xXK8AAAAASUVORK5CYII"); + } + + &.threads { + mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAeElEQVQ4y6VTMQ4AIQgDcun/38viTRolRTEyGVtogaBCAkBj/+6usgsALUs+4qfkLa+azPhf1l8sOOPurgNnytFR5hBAk6r1rIDJYyiAxva7c7bwKzOIvPltJRWC9SK2rKSgGMMYqavPrTzfQWnIN/cw1nhzzmzAP95rU0FdYvnBAAAAAElFTkSuQmCC"); + } + + &.x { + mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAY0lEQVQ4y62SOw5AIQgEgWLvf14aX2WiPuQTpFOzm8kgAxhkjKoyObPlAIz14jxb4fkuVJwZ/BFmKCIyt+QWlhZ2laIkKltS3sJzCg5/2SLPkikt4xF2Sahn2iuRLjZnwze6D+xmTvrTiNc4AAAAAElFTkSuQmCC"); + } } } } diff --git a/css/header.scss b/css/header.scss index 61f0ffd..a90ff5d 100644 --- a/css/header.scss +++ b/css/header.scss @@ -5,8 +5,8 @@ background-color: var(--backgroundColour); background-size: cover; - border-bottom-left-radius: 1rem; - border-bottom-right-radius: 1rem; + border-bottom-left-radius: var(--padding); + border-bottom-right-radius: var(--padding); height: fit-content; image-rendering: pixelated; overflow: hidden; diff --git a/css/main.scss b/css/main.scss index 8e5960f..d408d19 100644 --- a/css/main.scss +++ b/css/main.scss @@ -21,11 +21,16 @@ body { --foregroundColour: oklch( 25% 0.029600 253.71); --textColour: oklch(100% 0 0); + --padding: 1rem; + background-color: var(--backgroundColour); color: var(--textColour); - font-size: 1.25em; z-index: -1; + @media (pointer: coarse) { + --padding: 2rem; + } + &.light { --backgroundColour: oklch(96.875% 0 0); --foregroundColour: oklch(93.750% 0 0); @@ -45,7 +50,7 @@ ul { list-style: none; li p::before { - content: "\2014\0020"; + content: "\2022\0020"; } } diff --git a/css/navBar.scss b/css/navBar.scss index 32ec7bd..60f4d8d 100644 --- a/css/navBar.scss +++ b/css/navBar.scss @@ -1,9 +1,8 @@ #navBar { align-items: center; display: flex; - height: calc(2rem + $hamburgerHeight); justify-content: space-between; - padding: $gap; + padding: var(--padding); position: absolute; top: 0; width: 100%; diff --git a/css/page.scss b/css/page.scss index a087cab..6033f34 100644 --- a/css/page.scss +++ b/css/page.scss @@ -1,5 +1,5 @@ #page { - $padding: 1rem; + $padding: var(--padding); margin: auto; max-width: $contentWidth; @@ -33,6 +33,7 @@ } section { + font-family: "Montserrat"; line-height: 2em; max-width: calc($contentWidth / 2 - $padding); text-align: justify; @@ -81,8 +82,19 @@ background-color: var(--foregroundColour); border-radius: 1rem; padding: 1rem; + text-align: left; width: 100%; } + + div.codeblock { + background-color: var(--textColour); + border-radius: 1rem; + color: var(--backgroundColour); + font-family: $monospaceFont; + line-height: normal; + padding: 1rem; + white-space: preserve; + } } x-image { diff --git a/css/sideMenu.scss b/css/sideMenu.scss index 68e0804..7fea9f2 100644 --- a/css/sideMenu.scss +++ b/css/sideMenu.scss @@ -3,13 +3,13 @@ background-color: var(--backgroundColour); display: flex; flex-direction: column; - gap: 1rem; + gap: $separatorWidth; justify-content: space-between; left: 100vw; - min-height: calc(100vh + 1rem); + min-height: calc(100vh + var(--padding)); padding: 1rem; padding-bottom: 2rem; - padding-top: calc($hamburgerHeight + $gap * 2); + padding-top: calc($hamburgerHeight + var(--padding) * 2); position: relative; width: 100%; z-index: 127; @@ -29,7 +29,7 @@ section.links { display: flex; - gap: $gap; + gap: $separatorWidth; justify-content: end; max-width: $contentWidth; padding: 0 1rem; |