diff options
Diffstat (limited to 'old/style.css')
| -rw-r--r-- | old/style.css | 155 |
1 files changed, 155 insertions, 0 deletions
diff --git a/old/style.css b/old/style.css new file mode 100644 index 0000000..b91b3d9 --- /dev/null +++ b/old/style.css | |||
| @@ -0,0 +1,155 @@ | |||
| 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 | |||
| 3 | @media (prefers-color-scheme: light) { | ||
| 4 | :root { | ||
| 5 | --color-primary: rgb(0 104 119); | ||
| 6 | --color-on-primary: rgb(255 255 255); | ||
| 7 | |||
| 8 | --color-secondary: rgb(74 98 104); | ||
| 9 | |||
| 10 | --color-surface: rgb(245 250 252); | ||
| 11 | --color-surface-container: rgb(233 239 240); | ||
| 12 | --color-on-surface: rgb(23 29 30); | ||
| 13 | } | ||
| 14 | } | ||
| 15 | |||
| 16 | @media (prefers-color-scheme: dark) { | ||
| 17 | :root { | ||
| 18 | --color-primary: rgb(131 210 228); | ||
| 19 | --color-on-primary: rgb(0 54 62); | ||
| 20 | |||
| 21 | --color-secondary: rgb(178 203 209); | ||
| 22 | |||
| 23 | --color-surface: rgb(14 20 22); | ||
| 24 | --color-surface-container: rgb(27 33 34); | ||
| 25 | --color-on-surface: rgb(222 227 229); | ||
| 26 | } | ||
| 27 | } | ||
| 28 | |||
| 29 | * { | ||
| 30 | transition-duration: 0.5s; | ||
| 31 | transition-property: background, color; | ||
| 32 | transition-timing-function: ease-in-out; | ||
| 33 | } | ||
| 34 | |||
| 35 | body { | ||
| 36 | font-family: "Noto Sans", sans-serif; | ||
| 37 | background-color: var(--color-surface); | ||
| 38 | color: var(--color-on-surface); | ||
| 39 | margin: 0 auto; | ||
| 40 | padding: 0 0.5em; | ||
| 41 | |||
| 42 | max-width: 50em; | ||
| 43 | } | ||
| 44 | |||
| 45 | main { | ||
| 46 | background-color: var(--color-surface-container); | ||
| 47 | border-radius: 2em; | ||
| 48 | |||
| 49 | margin: 1em 0 5em 0; | ||
| 50 | padding: 1.5em; | ||
| 51 | } | ||
| 52 | |||
| 53 | main > *:first-child { | ||
| 54 | margin-top: 0; | ||
| 55 | } | ||
| 56 | |||
| 57 | main > *:last-child { | ||
| 58 | margin-bottom: 0; | ||
| 59 | } | ||
| 60 | |||
| 61 | footer { | ||
| 62 | background-color: var(--color-surface-container); | ||
| 63 | border-radius: 2em 2em 0 0; | ||
| 64 | |||
| 65 | display: flex; | ||
| 66 | flex-wrap: wrap; | ||
| 67 | |||
| 68 | padding: 1.5em; | ||
| 69 | } | ||
| 70 | |||
| 71 | footer > * { | ||
| 72 | margin-bottom: 1em; | ||
| 73 | margin-right: 1em; | ||
| 74 | } | ||
| 75 | |||
| 76 | footer > *:last-child { | ||
| 77 | margin-right: 0; | ||
| 78 | margin-bottom: 0; | ||
| 79 | } | ||
| 80 | |||
| 81 | h1, | ||
| 82 | h2 { | ||
| 83 | color: var(--color-primary); | ||
| 84 | } | ||
| 85 | |||
| 86 | h4 { | ||
| 87 | margin: 0; | ||
| 88 | margin-bottom: 0.5em; | ||
| 89 | } | ||
| 90 | |||
| 91 | b { | ||
| 92 | color: var(--color-secondary); | ||
| 93 | } | ||
| 94 | |||
| 95 | ul, | ||
| 96 | ol { | ||
| 97 | padding-left: 1.5em; | ||
| 98 | } | ||
| 99 | |||
| 100 | li { | ||
| 101 | padding-bottom: 1em; | ||
| 102 | } | ||
| 103 | |||
| 104 | li:last-child { | ||
| 105 | padding-bottom: 0; | ||
| 106 | } | ||
| 107 | |||
| 108 | a { | ||
| 109 | color: var(--color-primary); | ||
| 110 | } | ||
| 111 | |||
| 112 | img { | ||
| 113 | width: 100%; | ||
| 114 | max-height: 15em; | ||
| 115 | object-fit: cover; | ||
| 116 | border-radius: 1em; | ||
| 117 | } | ||
| 118 | |||
| 119 | @keyframes button { | ||
| 120 | 0% { | ||
| 121 | transform: scale(1); | ||
| 122 | } | ||
| 123 | 50% { | ||
| 124 | transform: scale(1.15); | ||
| 125 | } | ||
| 126 | |||
| 127 | 100% { | ||
| 128 | transform: scale(1); | ||
| 129 | } | ||
| 130 | } | ||
| 131 | |||
| 132 | .button { | ||
| 133 | background-color: var(--color-primary); | ||
| 134 | color: var(--color-on-primary); | ||
| 135 | |||
| 136 | border-radius: 1em; | ||
| 137 | padding: 1em; | ||
| 138 | margin: 1em 2.5em; | ||
| 139 | font-size: medium; | ||
| 140 | animation: button infinite 1s; | ||
| 141 | |||
| 142 | text-decoration: none; | ||
| 143 | text-align: center; | ||
| 144 | display: block; | ||
| 145 | } | ||
| 146 | |||
| 147 | .sponsors { | ||
| 148 | display: flex; | ||
| 149 | flex-wrap: wrap; | ||
| 150 | } | ||
| 151 | |||
| 152 | .sponsors > * { | ||
| 153 | flex: 1 1 150px; | ||
| 154 | text-wrap: nowrap; | ||
| 155 | } | ||
