diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/footer.scss | 20 | ||||
| -rw-r--r-- | css/header.scss | 27 | ||||
| -rw-r--r-- | css/main.scss | 9 | ||||
| -rw-r--r-- | css/navBar.scss | 16 | ||||
| -rw-r--r-- | css/overview.scss | 4 | ||||
| -rw-r--r-- | css/page.scss | 20 |
6 files changed, 50 insertions, 46 deletions
diff --git a/css/footer.scss b/css/footer.scss index 06fa011..edd15c2 100644 --- a/css/footer.scss +++ b/css/footer.scss @@ -2,8 +2,8 @@ #footer { background-color: var(--foregroundColour); - border-top-left-radius: $padding; - border-top-right-radius: $padding; + border-top-left-radius: calc($padding / 2); + border-top-right-radius: calc($padding / 2); font-family: $monospaceFont; margin: auto; max-width: calc($contentWidth + $padding * 2); @@ -28,11 +28,17 @@ } #starDescription { - font-style: italic; - margin: $padding auto; - max-width: calc($contentWidth / 2); - text-align: justify; - text-align-last: center; + $width: calc($contentWidth / 2); + + margin: auto; + max-width: $width; + text-align: left; + + &::before, &::after { + @include separator($width); + + margin: $padding 0; + } } #cvrNumber { diff --git a/css/header.scss b/css/header.scss index 561aab8..7218670 100644 --- a/css/header.scss +++ b/css/header.scss @@ -3,21 +3,18 @@ --foregroundColour: var(--backgroundColour); - align-items: center; - background-color: var(--backgroundColour); - background-size: cover; - border-bottom-left-radius: $padding; - border-bottom-right-radius: $padding; - box-shadow: 0 0 calc($padding / 2) $shadowColour; - display: flex; - height: calc(100vh + $padding); - image-rendering: pixelated; - justify-content: center; - overflow: hidden; - padding-bottom: $padding; - position: relative; - user-select: none; - width: 100%; + align-items: center; + background-color: var(--backgroundColour); + background-size: cover; + box-shadow: 0 0 calc($padding / 2) $shadowColour; + display: flex; + height: 100vh; + image-rendering: pixelated; + justify-content: center; + overflow: hidden; + position: relative; + user-select: none; + width: 100%; #glyph { aspect-ratio: 1; diff --git a/css/main.scss b/css/main.scss index 7687479..878b2d1 100644 --- a/css/main.scss +++ b/css/main.scss @@ -6,6 +6,15 @@ $separatorWidth: 0.25rem; $shadowColour: color-mix(in srgb, black, transparent 50%); +@mixin separator($width) { + background-color: var(--textColour); + border-radius: calc($separatorWidth / 3); + content: ""; + display: block; + height: $separatorWidth; + width: $width; +} + :root { font-family: "Raleway", "sans-serif"; diff --git a/css/navBar.scss b/css/navBar.scss index 2ef4d3a..4c33e35 100644 --- a/css/navBar.scss +++ b/css/navBar.scss @@ -35,16 +35,12 @@ text-decoration-color: #00000000; &[aria-current = "page"]::after { - background-color: var(--textColour); - border-radius: $separatorWidth; - content: ""; - display: block; - height: $separatorWidth; - left: 50%; - position: absolute; - top: calc(100% + $separatorWidth); - transform: translateX(-50%); - width: 100%; + @include separator(100%); + + left: 50%; + position: absolute; + top: calc(100% + $separatorWidth); + transform: translateX(-50%); } @media not (prefers-reduced-motion) { diff --git a/css/overview.scss b/css/overview.scss index 3623478..d67bd4b 100644 --- a/css/overview.scss +++ b/css/overview.scss @@ -3,7 +3,7 @@ align-items: center; background-color: var(--foregroundColour); - border-radius: $padding; + border-radius: calc($padding / 2); display: flex; flex-wrap: wrap; gap: $padding; @@ -17,7 +17,7 @@ align-items: center; aspect-ratio: 1; background-color: var(--backgroundColour); - border-radius: $padding; + border-radius: calc($padding / 2); display: flex; flex-basis: calc((100% - $padding * ($cardsPerRow - 1)) / $cardsPerRow); justify-content: center; diff --git a/css/page.scss b/css/page.scss index 3ede81a..ee53182 100644 --- a/css/page.scss +++ b/css/page.scss @@ -18,13 +18,9 @@ } &::after { - background-color: var(--textColour); - border-radius: $separatorWidth; - content: ""; - display: block; - height: $separatorWidth; - margin-top: $separatorWidth; - width: 100%; + @include separator(100%); + + margin-top: $separatorWidth; } a.anchor { @@ -57,7 +53,7 @@ p.codeblock { background-color: var(--textColour); - border-radius: $padding; + border-radius: calc($padding / 2); color: var(--backgroundColour); font-family: $monospaceFont; line-height: normal; @@ -82,13 +78,13 @@ $padding: 0.25rem; background-color: var(--foregroundColour); - border-radius: $padding; + border-radius: calc($padding / 2); padding: $padding; } ul { background-color: var(--foregroundColour); - border-radius: $padding; + border-radius: calc($padding / 2); display: block; padding: $padding; text-align: left; @@ -101,13 +97,13 @@ width: 100%; a { - border-radius: $padding; + border-radius: calc($padding / 2); display: block; position: relative; } img { - border-radius: $padding; + border-radius: calc($padding / 2); display: block; width: 100%; |