瀏覽代碼

Use css vars

master
Dylan Baker 3 年之前
父節點
當前提交
64becdf70c
共有 1 個文件被更改,包括 19 次插入9 次删除
  1. 19
    9
      static/style.css

+ 19
- 9
static/style.css 查看文件

1
+:root {
2
+  --background: #aab5a9;
3
+  --foreground: #000000;
4
+  --dark-accent: #383e38;
5
+  --white: #ffffff;
6
+  --off-white: #f0f0f0;
7
+  --danger-red: #942626;
8
+  --success-green: #289426;
9
+}
10
+
1
 * {
11
 * {
2
   box-sizing: border-box;
12
   box-sizing: border-box;
3
   margin: 0;
13
   margin: 0;
21
 
31
 
22
 .btn {
32
 .btn {
23
   cursor: pointer;
33
   cursor: pointer;
24
-  background: #ffffff;
25
-  border: 1px solid #383e37;
34
+  background: var(--white);
35
+  border: 1px solid var(--dark-accent);
26
   border-radius: 0;
36
   border-radius: 0;
27
   padding: 0.15em 0.3em;
37
   padding: 0.15em 0.3em;
28
 }
38
 }
29
 
39
 
30
 .btn:hover {
40
 .btn:hover {
31
-  background-color: #f0f0f0;
41
+  background-color: var(--off-white);
32
 }
42
 }
33
 
43
 
34
 .danger {
44
 .danger {
35
-  color: #942626;
45
+  color: var(--danger-red);
36
 }
46
 }
37
 
47
 
38
 .container {
48
 .container {
92
 .post__heading {
102
 .post__heading {
93
   align-items: center;
103
   align-items: center;
94
   background: white;
104
   background: white;
95
-  border: 1px solid #383e37;
105
+  border: 1px solid var(--dark-accent);
96
   display: flex;
106
   display: flex;
97
   flex-wrap: wrap;
107
   flex-wrap: wrap;
98
   font-size: 12px;
108
   font-size: 12px;
130
 }
140
 }
131
 
141
 
132
 .message {
142
 .message {
133
-  border: 1px solid #383e37;
134
-  color: #fff;
143
+  border: 1px solid var(--dark-accent);
144
+  color: var(--white);
135
   margin: 0.5em 0;
145
   margin: 0.5em 0;
136
   padding: 0.25em 1.5em;
146
   padding: 0.25em 1.5em;
137
   text-align: center;
147
   text-align: center;
139
 }
149
 }
140
 
150
 
141
 .message--error {
151
 .message--error {
142
-  background-color: #942626;
152
+  background-color: var(--danger-red);
143
 }
153
 }
144
 
154
 
145
 .message--success {
155
 .message--success {
146
-  background-color: #289426;
156
+  background-color: var(--success-green);
147
 }
157
 }
148
 
158
 
149
 .error__heading {
159
 .error__heading {

Loading…
取消
儲存