Browse Source

Border consistency

master
Dylan Baker 3 years ago
parent
commit
b19973f1df
2 changed files with 17 additions and 7 deletions
  1. 16
    6
      static/style.css
  2. 1
    1
      templates/components.html

+ 16
- 6
static/style.css View File

6
 :root {
6
 :root {
7
   --background: #d1ddd0;
7
   --background: #d1ddd0;
8
   --foreground: #000000;
8
   --foreground: #000000;
9
-  --dark-accent: #383e38;
10
   --white: #ffffff;
9
   --white: #ffffff;
11
   --off-white: #f0f0f0;
10
   --off-white: #f0f0f0;
12
   --danger-red: #942626;
11
   --danger-red: #942626;
38
 .btn {
37
 .btn {
39
   cursor: pointer;
38
   cursor: pointer;
40
   background: var(--white);
39
   background: var(--white);
41
-  border: 1px solid var(--dark-accent);
40
+  border: 2px solid var(--foreground);
42
   border-radius: 0;
41
   border-radius: 0;
43
   font-family: inherit;
42
   font-family: inherit;
44
   font-size: inherit;
43
   font-size: inherit;
50
   background-color: var(--off-white);
49
   background-color: var(--off-white);
51
 }
50
 }
52
 
51
 
52
+.btn--green {
53
+  background-color: var(--success-green);
54
+  border: 2px solid var(--foreground);
55
+  color: white;
56
+}
57
+
58
+.btn--green:hover {
59
+  background-color: var(--success-green);
60
+  opacity: 0.8;
61
+}
62
+
53
 .btn--close {
63
 .btn--close {
54
   background-color: var(--danger-red);
64
   background-color: var(--danger-red);
55
   color: white;
65
   color: white;
108
 
118
 
109
 .form__textarea,
119
 .form__textarea,
110
 .form__text-field {
120
 .form__text-field {
111
-  border: 2px solid var(--dark-accent);
121
+  border: 2px solid var(--foreground);
112
   font-family: monospace;
122
   font-family: monospace;
113
   font-size: 16px;
123
   font-size: 16px;
114
   line-height: 1.4em;
124
   line-height: 1.4em;
128
 
138
 
129
 .post__heading {
139
 .post__heading {
130
   background: var(--white);
140
   background: var(--white);
131
-  border: 1px solid var(--dark-accent);
141
+  border: 2px solid var(--foreground);
132
   font-size: 16px;
142
   font-size: 16px;
133
   padding: 0.5em;
143
   padding: 0.5em;
134
 }
144
 }
173
 #preview pre,
183
 #preview pre,
174
 .post__body pre {
184
 .post__body pre {
175
   background: var(--off-white);
185
   background: var(--off-white);
176
-  border: 1px solid var(--dark-accent);
186
+  border: 2px solid var(--foreground);
177
   margin: 1em 0;
187
   margin: 1em 0;
178
   overflow: scroll;
188
   overflow: scroll;
179
   padding: 0.5em;
189
   padding: 0.5em;
180
 }
190
 }
181
 
191
 
182
 .message {
192
 .message {
183
-  border: 1px solid var(--dark-accent);
193
+  border: 2px solid var(--foreground);
184
   color: var(--white);
194
   color: var(--white);
185
   margin: 0.5em 0;
195
   margin: 0.5em 0;
186
   padding: 0.25em 1.5em;
196
   padding: 0.25em 1.5em;

+ 1
- 1
templates/components.html View File

73
     </div>
73
     </div>
74
     <div class="form__field">
74
     <div class="form__field">
75
       <a class="btn" href="#" data-preview>Preview</a>
75
       <a class="btn" href="#" data-preview>Preview</a>
76
-      <input class="btn" type="submit" value="Post" />
76
+      <input class="btn btn--green" type="submit" value="Post" />
77
     </div>
77
     </div>
78
   </form>
78
   </form>
79
 {% endmacro %}
79
 {% endmacro %}

Loading…
Cancel
Save