Browse Source

Border consistency

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

+ 1
- 1
templates/components.html View File

@@ -73,7 +73,7 @@
73 73
     </div>
74 74
     <div class="form__field">
75 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 77
     </div>
78 78
   </form>
79 79
 {% endmacro %}

Loading…
Cancel
Save