Browse code

Mostly colors in, still need to fix anchor svg color

Julio Biason authored on 20/05/2019 09:47:18
Showing 3 changed files

... ...
@@ -1,3 +1,5 @@
1
+@import "colors";
2
+
1 3
 :root {
2 4
   --screen-size-small: 30em; /* breakpoint reference only */
3 5
 }
... ...
@@ -10,7 +12,7 @@
10 12
   }
11 13
 }
12 14
 .muted {
13
-  color: rgba(255, 255, 255, 0.5);
15
+  color: $muted-color;
14 16
   margin-top: 5px;
15 17
 }
16 18
 .responsive-iframe {
... ...
@@ -49,7 +51,7 @@ blockquote cite::before {
49 51
    content: "\2014";
50 52
 }
51 53
 :target {
52
-  color: #fff;
54
+  color: $target;
53 55
 }
54 56
 /* hack.css overrides and enhancements */
55 57
 .hack li ul {
... ...
@@ -60,17 +62,18 @@ blockquote cite::before {
60 62
 }
61 63
 nav a.active {
62 64
   background-color: $anchor;
63
-  color: #fff;
65
+  color: $nav-active-color;
64 66
 }
65 67
 a[itemprop="url"] {
66
-  color: #ff9800;
68
+  color: $a-url;
67 69
 }
68 70
 a[itemprop="url"]:hover {
69
-  color: #fff;
71
+  color: $a-url-hover;
70 72
 }
71 73
 a[href*="://"]::after,
72 74
 a[rel*="external"] {
73 75
   content: " " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23ff9800'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E");
76
+  color: $anchor;
74 77
 }
75 78
 figure a[href*="://"]::after,
76 79
 figure a[rel*="external"] {
... ...
@@ -1,4 +1,4 @@
1
-@import "colors"
1
+@import "colors";
2 2
 
3 3
 html {
4 4
   font-size: 12px
... ...
@@ -13,8 +13,8 @@ body {
13 13
   font-size: 1rem;
14 14
   line-height: 1.5rem;
15 15
   margin: 0;
16
-  font-family: $font
17
-  word-wrap: break-word
16
+  font-family: $font;
17
+  word-wrap: break-word;
18 18
 }
19 19
 
20 20
 h1, h2, h3, h4, h5, h6 {
... ...
@@ -865,11 +865,11 @@ select.form-control {
865 865
 }
866 866
 
867 867
 .dark {
868
-  color: #ccc
868
+  color: $dark-color;
869 869
 }
870 870
 
871 871
 .dark, .dark pre {
872
-  background-color: #000
872
+  background-color: $dark-background;
873 873
 }
874 874
 
875 875
 .dark pre {
... ...
@@ -882,7 +882,7 @@ select.form-control {
882 882
 }
883 883
 
884 884
 .dark h1 a, .dark h2 a, .dark h3 a, .dark h4 a, .dark h5 a {
885
-  color: #ccc
885
+  color: $dark-header-color;
886 886
 }
887 887
 
888 888
 .dark code, .dark strong {
... ...
@@ -2,9 +2,15 @@ $font: Inconsolata, Courier;
2 2
 $pre-background: #fff;
3 3
 $pre-border: #ccc;
4 4
 
5
+$dark-background: #fff;
6
+$dark-header-color: #000;
7
+$dark-color: #333;
8
+
5 9
 $success: #4caf50;
10
+$warning: #ff9800;
6 11
 
7
-$anchor: #ff2e88;
12
+/* $anchor: #ff2e88; */
13
+$anchor: $success;
8 14
 $anchor-hover: #fff;
9 15
 
10 16
 $progressbar-color: #ccc;
... ...
@@ -26,7 +32,7 @@ $form-textarea-border: #ccc;
26 32
 $form-success-color: $success;
27 33
 $form-success-border: $form-success-color;
28 34
 
29
-$form-warning-color: #ff9800;
35
+$form-warning-color: $warning;
30 36
 $form-warning-border: $form-warning-color;
31 37
 
32 38
 $form-error-color: #f44336;
... ...
@@ -60,3 +66,10 @@ $button-success-ghost-border: $success;
60 66
 $button-success-ghost-color: $success;
61 67
 $button-success-ghost-focus-border: #388e3c;
62 68
 $button-success-ghost-focus-color: $button-success-ghost-focus-border;
69
+
70
+$muted-color: rgba(255, 255, 255, 0.5);
71
+$target: #fff;
72
+
73
+$nav-active-color: #fff;
74
+$a-url: $success;
75
+$a-url-hover: #fff;