aboutsummaryrefslogtreecommitdiffhomepage
path: root/style.css
diff options
context:
space:
mode:
authorTolmachev Igor <me@igorek.dev>2025-08-21 19:31:02 +0900
committerTolmachev Igor <me@igorek.dev>2025-08-21 19:31:02 +0900
commit17408b76062ca7e9343ac5ea74b99a3374ea2352 (patch)
tree0ab4c5839d4929c56110e4bac8931a63114c0a68 /style.css
parent5ad9110667e50cbbb7ba093c6956001917e66baf (diff)
downloadpages-17408b76062ca7e9343ac5ea74b99a3374ea2352.tar.gz
pages-17408b76062ca7e9343ac5ea74b99a3374ea2352.zip
Add projects and change course number
Diffstat (limited to 'style.css')
-rw-r--r--style.css118
1 files changed, 55 insertions, 63 deletions
diff --git a/style.css b/style.css
index f9c63dc..5223923 100644
--- a/style.css
+++ b/style.css
@@ -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
35body { 35body {
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
45nav { 45nav {
46 margin-top: 1em; 46 margin-top: 1rem;
47 47
48 display: flex; 48 display: flex;
49 gap: 0.5rem;
49} 50}
50 51
51nav > * { 52nav > * {
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
67nav > *:first-child {
68 margin-left: 0;
69}
70
71nav > *:last-child {
72 margin-right: 0;
73} 65}
74 66
75nav > .current { 67nav > .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
80main { 72main {
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
88main > *:first-child { 80main > *:first-child {
89 margin-top: 0; 81 margin-top: 0;
90} 82}
91 83
92main > *:last-child { 84main > *:last-child {
93 margin-bottom: 0; 85 margin-bottom: 0;
94} 86}
95 87
96a, 88a,
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
106ul { 98ul {
107 padding-left: 1.5em; 99 padding-left: 1.5rem;
108} 100}
109 101
110input { 102input {
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}