diff options
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 40 |
1 files changed, 26 insertions, 14 deletions
| @@ -1,4 +1,5 @@ | |||
| 1 | @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap"); | 1 | @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap"); |
| 2 | @import "https://www.nerdfonts.com/assets/css/webfont.css"; | ||
| 2 | 3 | ||
| 3 | @media (prefers-color-scheme: light) { | 4 | @media (prefers-color-scheme: light) { |
| 4 | :root { | 5 | :root { |
| @@ -65,23 +66,28 @@ nav > * { | |||
| 65 | } | 66 | } |
| 66 | 67 | ||
| 67 | nav > .current { | 68 | nav > .current { |
| 68 | background-color: var(--color-primary); | 69 | outline: 0.1rem solid var(--color-primary); |
| 69 | color: var(--color-on-primary); | ||
| 70 | } | 70 | } |
| 71 | 71 | ||
| 72 | main { | 72 | main, |
| 73 | section, | ||
| 74 | footer { | ||
| 73 | background-color: var(--color-surface-container); | 75 | background-color: var(--color-surface-container); |
| 74 | border-radius: 2rem; | 76 | border-radius: 2rem; |
| 75 | 77 | ||
| 76 | margin: 1rem 0 5rem 0; | 78 | margin: 1rem 0; |
| 77 | padding: 1.5rem; | 79 | padding: 1.5rem; |
| 78 | } | 80 | } |
| 79 | 81 | ||
| 80 | main > *:first-child { | 82 | main > :first-child, |
| 83 | section > :first-child, | ||
| 84 | footer > :first-child { | ||
| 81 | margin-top: 0; | 85 | margin-top: 0; |
| 82 | } | 86 | } |
| 83 | 87 | ||
| 84 | main > *:last-child { | 88 | main > :last-child, |
| 89 | section > :last-child, | ||
| 90 | footer > :last-child { | ||
| 85 | margin-bottom: 0; | 91 | margin-bottom: 0; |
| 86 | } | 92 | } |
| 87 | 93 | ||
| @@ -96,16 +102,22 @@ a, | |||
| 96 | } | 102 | } |
| 97 | 103 | ||
| 98 | ul { | 104 | ul { |
| 99 | padding-left: 1.5rem; | 105 | list-style: none; |
| 106 | padding-left: 0; | ||
| 100 | } | 107 | } |
| 101 | 108 | ||
| 102 | input { | 109 | .links { |
| 103 | background: none; | 110 | display: flex; |
| 104 | color: var(--color-primary); | 111 | gap: 1rem; |
| 105 | border: none; | 112 | } |
| 106 | 113 | ||
| 107 | width: 10rem; | 114 | .links > a { |
| 115 | flex: 1; | ||
| 116 | |||
| 117 | text-align: center; | ||
| 118 | margin-top: 1rem; | ||
| 119 | padding: 0.25rem; | ||
| 108 | 120 | ||
| 109 | border-bottom: 0.01rem solid var(--color-primary); | 121 | border: 0.1rem solid var(--color-primary); |
| 110 | font-size: 1rem; | 122 | border-radius: 1rem; |
| 111 | } | 123 | } |
