diff options
| author | Tolmachev Igor <me@igorek.dev> | 2025-08-21 19:31:02 +0900 |
|---|---|---|
| committer | Tolmachev Igor <me@igorek.dev> | 2025-08-21 19:31:02 +0900 |
| commit | 17408b76062ca7e9343ac5ea74b99a3374ea2352 (patch) | |
| tree | 0ab4c5839d4929c56110e4bac8931a63114c0a68 /style.css | |
| parent | 5ad9110667e50cbbb7ba093c6956001917e66baf (diff) | |
| download | pages-17408b76062ca7e9343ac5ea74b99a3374ea2352.tar.gz pages-17408b76062ca7e9343ac5ea74b99a3374ea2352.zip | |
Add projects and change course number
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 118 |
1 files changed, 55 insertions, 63 deletions
| @@ -1,119 +1,111 @@ | |||
| 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 | 2 | ||
| 3 | @media (prefers-color-scheme: light) { | 3 | @media (prefers-color-scheme: light) { |
| 4 | :root { | 4 | :root { |
| 5 | --color-primary: rgb(0 104 119); | 5 | --color-primary: rgb(0 104 119); |
| 6 | --color-on-primary: rgb(255 255 255); | 6 | --color-on-primary: rgb(255 255 255); |
| 7 | 7 | ||
| 8 | --color-secondary: rgb(74 98 104); | 8 | --color-secondary: rgb(74 98 104); |
| 9 | 9 | ||
| 10 | --color-surface: rgb(245 250 252); | 10 | --color-surface: rgb(245 250 252); |
| 11 | --color-surface-container: rgb(233 239 240); | 11 | --color-surface-container: rgb(233 239 240); |
| 12 | --color-on-surface: rgb(23 29 30); | 12 | --color-on-surface: rgb(23 29 30); |
| 13 | } | 13 | } |
| 14 | } | 14 | } |
| 15 | 15 | ||
| 16 | @media (prefers-color-scheme: dark) { | 16 | @media (prefers-color-scheme: dark) { |
| 17 | :root { | 17 | :root { |
| 18 | --color-primary: rgb(131 210 228); | 18 | --color-primary: rgb(131 210 228); |
| 19 | --color-on-primary: rgb(0 54 62); | 19 | --color-on-primary: rgb(0 54 62); |
| 20 | 20 | ||
| 21 | --color-secondary: rgb(178 203 209); | 21 | --color-secondary: rgb(178 203 209); |
| 22 | 22 | ||
| 23 | --color-surface: rgb(14 20 22); | 23 | --color-surface: rgb(14 20 22); |
| 24 | --color-surface-container: rgb(27 33 34); | 24 | --color-surface-container: rgb(27 33 34); |
| 25 | --color-on-surface: rgb(222 227 229); | 25 | --color-on-surface: rgb(222 227 229); |
| 26 | } | 26 | } |
| 27 | } | 27 | } |
| 28 | 28 | ||
| 29 | * { | 29 | * { |
| 30 | transition-duration: 0.5s; | 30 | transition-duration: 0.5s; |
| 31 | transition-property: background, color; | 31 | transition-property: background, color; |
| 32 | transition-timing-function: ease-in-out; | 32 | transition-timing-function: ease-in-out; |
| 33 | } | 33 | } |
| 34 | 34 | ||
| 35 | body { | 35 | body { |
| 36 | font-family: "Noto Sans", sans-serif; | 36 | font-family: "Noto Sans", sans-serif; |
| 37 | background-color: var(--color-surface); | 37 | background-color: var(--color-surface); |
| 38 | color: var(--color-on-surface); | 38 | color: var(--color-on-surface); |
| 39 | margin: 0 auto; | 39 | margin: 0 auto; |
| 40 | padding: 0 0.5em; | 40 | padding: 0 0.5rem; |
| 41 | 41 | ||
| 42 | max-width: 50em; | 42 | max-width: 50rem; |
| 43 | } | 43 | } |
| 44 | 44 | ||
| 45 | nav { | 45 | nav { |
| 46 | margin-top: 1em; | 46 | margin-top: 1rem; |
| 47 | 47 | ||
| 48 | display: flex; | 48 | display: flex; |
| 49 | gap: 0.5rem; | ||
| 49 | } | 50 | } |
| 50 | 51 | ||
| 51 | nav > * { | 52 | nav > * { |
| 52 | background-color: var(--color-surface-container); | 53 | background-color: var(--color-surface-container); |
| 53 | border-radius: 2em; | 54 | border-radius: 2rem; |
| 54 | 55 | ||
| 55 | margin: 0 0.5em; | 56 | padding: 0.5rem; |
| 56 | padding: 0.5em; | ||
| 57 | 57 | ||
| 58 | flex: 1; | 58 | flex: 1; |
| 59 | 59 | ||
| 60 | text-decoration: none; | 60 | text-decoration: none; |
| 61 | text-align: center; | 61 | text-align: center; |
| 62 | overflow: hidden; | 62 | overflow: hidden; |
| 63 | text-overflow: ellipsis; | 63 | text-overflow: ellipsis; |
| 64 | white-space: nowrap; | 64 | white-space: nowrap; |
| 65 | } | ||
| 66 | |||
| 67 | nav > *:first-child { | ||
| 68 | margin-left: 0; | ||
| 69 | } | ||
| 70 | |||
| 71 | nav > *:last-child { | ||
| 72 | margin-right: 0; | ||
| 73 | } | 65 | } |
| 74 | 66 | ||
| 75 | nav > .current { | 67 | nav > .current { |
| 76 | background-color: var(--color-primary); | 68 | background-color: var(--color-primary); |
| 77 | color: var(--color-on-primary); | 69 | color: var(--color-on-primary); |
| 78 | } | 70 | } |
| 79 | 71 | ||
| 80 | main { | 72 | main { |
| 81 | background-color: var(--color-surface-container); | 73 | background-color: var(--color-surface-container); |
| 82 | border-radius: 2em; | 74 | border-radius: 2rem; |
| 83 | 75 | ||
| 84 | margin: 1em 0 5em 0; | 76 | margin: 1rem 0 5rem 0; |
| 85 | padding: 1.5em; | 77 | padding: 1.5rem; |
| 86 | } | 78 | } |
| 87 | 79 | ||
| 88 | main > *:first-child { | 80 | main > *:first-child { |
| 89 | margin-top: 0; | 81 | margin-top: 0; |
| 90 | } | 82 | } |
| 91 | 83 | ||
| 92 | main > *:last-child { | 84 | main > *:last-child { |
| 93 | margin-bottom: 0; | 85 | margin-bottom: 0; |
| 94 | } | 86 | } |
| 95 | 87 | ||
| 96 | a, | 88 | a, |
| 97 | .copy { | 89 | .copy { |
| 98 | color: var(--color-primary); | 90 | color: var(--color-primary); |
| 99 | } | 91 | } |
| 100 | 92 | ||
| 101 | .copy:hover { | 93 | .copy:hover { |
| 102 | cursor: pointer; | 94 | cursor: pointer; |
| 103 | color: var(--color-secondary); | 95 | color: var(--color-secondary); |
| 104 | } | 96 | } |
| 105 | 97 | ||
| 106 | ul { | 98 | ul { |
| 107 | padding-left: 1.5em; | 99 | padding-left: 1.5rem; |
| 108 | } | 100 | } |
| 109 | 101 | ||
| 110 | input { | 102 | input { |
| 111 | background: none; | 103 | background: none; |
| 112 | color: var(--color-primary); | 104 | color: var(--color-primary); |
| 113 | border: none; | 105 | border: none; |
| 114 | 106 | ||
| 115 | width: 10rem; | 107 | width: 10rem; |
| 116 | 108 | ||
| 117 | border-bottom: 0.01em solid var(--color-primary); | 109 | border-bottom: 0.01rem solid var(--color-primary); |
| 118 | font-size: 1em; | 110 | font-size: 1rem; |
| 119 | } | 111 | } |
