aboutsummaryrefslogtreecommitdiffhomepage
path: root/app.css
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2019-10-01 21:35:51 -0700
committerBastien Wirtz <bastien.wirtz@gmail.com>2019-10-01 21:40:45 -0700
commit5323df4a32ca9b81fa598c0ca988596d93afe713 (patch)
treef6a7caacb2b44621839265ffa5edc9ec7dc9c952 /app.css
parentbf35e3391223659f5ad8f56dc406b85289e915ce (diff)
downloadhomer-5323df4a32ca9b81fa598c0ca988596d93afe713.tar.gz
homer-5323df4a32ca9b81fa598c0ca988596d93afe713.tar.zst
homer-5323df4a32ca9b81fa598c0ca988596d93afe713.zip
Implementing dark mode
Diffstat (limited to 'app.css')
-rw-r--r--app.css90
1 files changed, 83 insertions, 7 deletions
diff --git a/app.css b/app.css
index 846b54b..8a97742 100644
--- a/app.css
+++ b/app.css
@@ -3,8 +3,86 @@ html {
3 3
4body { 4body {
5 font-family: 'Raleway', sans-serif; 5 font-family: 'Raleway', sans-serif;
6 background-color: #F5F5F5; 6 height: 100%; }
7 min-height: 100%; } 7 body #app {
8 min-height: 100%;
9 transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
10 background-color: #f5f5f5;
11 color: #363636; }
12 body #app .title {
13 color: #303030; }
14 body #app .subtitle {
15 color: #424242; }
16 body #app .card {
17 background-color: #ffffff;
18 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
19 body #app .card:hover {
20 background-color: #ffffff; }
21 body #app .footer {
22 background-color: #ffffff;
23 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
24 @media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
25 body #app {
26 background-color: #f5f5f5;
27 color: #363636; }
28 body #app .title {
29 color: #303030; }
30 body #app .subtitle {
31 color: #424242; }
32 body #app .card {
33 background-color: #ffffff;
34 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
35 body #app .card:hover {
36 background-color: #ffffff; }
37 body #app .footer {
38 background-color: #ffffff;
39 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); } }
40 @media (prefers-color-scheme: dark) {
41 body #app {
42 background-color: #131313;
43 color: #eaeaea; }
44 body #app .title {
45 color: #fafafa; }
46 body #app .subtitle {
47 color: #f5f5f5; }
48 body #app .card {
49 background-color: #2b2b2b;
50 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); }
51 body #app .card:hover {
52 background-color: #2b2b2b; }
53 body #app .footer {
54 background-color: #2b2b2b;
55 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); } }
56 body #app.is-light {
57 background-color: #f5f5f5;
58 color: #363636; }
59 body #app.is-light .title {
60 color: #303030; }
61 body #app.is-light .subtitle {
62 color: #424242; }
63 body #app.is-light .card {
64 background-color: #ffffff;
65 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
66 body #app.is-light .card:hover {
67 background-color: #ffffff; }
68 body #app.is-light .footer {
69 background-color: #ffffff;
70 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
71 body #app.is-dark {
72 background-color: #131313;
73 color: #eaeaea; }
74 body #app.is-dark .title {
75 color: #fafafa; }
76 body #app.is-dark .subtitle {
77 color: #f5f5f5; }
78 body #app.is-dark .card {
79 background-color: #2b2b2b;
80 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); }
81 body #app.is-dark .card:hover {
82 background-color: #2b2b2b; }
83 body #app.is-dark .footer {
84 background-color: #2b2b2b;
85 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); }
8 body h1, body h2, body h3, body h4, body h5, body h6 { 86 body h1, body h2, body h3, body h4, body h5, body h6 {
9 font-family: 'Lato', sans-serif; } 87 font-family: 'Lato', sans-serif; }
10 body h1 { 88 body h1 {
@@ -54,7 +132,7 @@ body {
54 body #bighead .navbar a:hover { 132 body #bighead .navbar a:hover {
55 background-color: #5a95f5; } 133 background-color: #5a95f5; }
56 body #main-section { 134 body #main-section {
57 margin-bottom: 3rem; 135 margin-bottom: 2rem;
58 padding: 0; } 136 padding: 0; }
59 body #main-section h2 { 137 body #main-section h2 {
60 border-bottom: 1px dashed #ccc; 138 border-bottom: 1px dashed #ccc;
@@ -95,7 +173,6 @@ body {
95 body .card a { 173 body .card a {
96 outline: none; } 174 outline: none; }
97 body .card:hover { 175 body .card:hover {
98 background-color: #FFFFFF;
99 transform: translate(0, -3px); } 176 transform: translate(0, -3px); }
100 body .card:hover .tag { 177 body .card:hover .tag {
101 width: auto; 178 width: auto;
@@ -117,10 +194,9 @@ body {
117 bottom: 0; 194 bottom: 0;
118 padding: 0.5rem; 195 padding: 0.5rem;
119 text-align: left; 196 text-align: left;
120 background-color: #fafafa;
121 border-top: 1px solid #F5F5F5;
122 color: #676767; 197 color: #676767;
123 font-size: 0.85rem; } 198 font-size: 0.85rem;
199 transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; }
124 body .search-bar { 200 body .search-bar {
125 position: relative; 201 position: relative;
126 display: inline-block; } 202 display: inline-block; }