a49d1bbaa3b19b5f78d7384a8fef0e6a681318df
[styx.blog] / core / templates / core / style.css
1 html {
2   height: 100%;
3   font-family: "Lucida Grande", Verdana, Arial, sans-serif;
4 }
5
6 header, main, footer, p {
7   margin: 0;
8   padding: 0;
9 }
10
11 h1, h2, h3, h4, h5, h6 {
12   margin: 0;
13   font-family: Palatino, serif;
14 }
15
16 time {
17   font-family: Verdana, sans-serif;
18 }
19
20 p {
21   line-height: 1.8;
22   margin-bottom: 1.2rem;
23 }
24
25 p:last-child {
26   margin-bottom: 0;
27 }
28
29 body {
30   display: flex;
31   flex-direction: column;
32   align-items: center;
33
34   margin: 0;
35   min-height: 100%;
36 }
37
38 body > header {
39   margin: 5rem 0;
40 }
41
42 body > header > h1 {
43   font-family: Geneva, sans-serif;
44   font-weight: 100;
45   font-size: 5rem;
46 }
47
48 body > nav {
49   margin-bottom: 4rem;
50 }
51
52 body > main {
53   width: calc(100% - 4rem);
54   max-width: 40rem;
55   min-height: 100%;
56 }
57
58 body > footer {
59   display: flex;
60   flex-direction: column;
61   align-items: center;
62
63   margin: 5rem 0;
64 }
65
66 body > footer .licenses {
67   display: flex;
68   flex-direction: row;
69   align-items: center;
70   margin-top: 1rem;
71 }
72
73 body > footer .licenses > div {
74   display: flex;
75   flex-direction: column;
76   align-items: flex-start;
77
78   margin-left: 1rem;
79 }
80
81 body > footer .licenses > div > span:not(:first-child) {
82   margin-top: 1rem;
83 }
84
85 article {
86   display: flex;
87   flex-direction: column;
88
89   margin-top: 2.75rem;
90 }
91
92 article:first-of-type {
93   margin-top: 0;
94 }
95
96 article:not(:first-of-type) {
97   border-top: 1px solid black;
98   padding-top: 2rem;
99 }
100
101 article > header h1 a,
102 article > header h1 a:visited {
103   text-decoration: none;
104 }
105
106 article > header h1 a:hover,
107 article > header h1 a:active{
108   text-decoration: underline;
109 }
110
111 article > header h1 {
112   font-size: 2rem;
113 }
114
115 article > main {
116   margin: 1.6rem 0;
117 }
118
119 article > main:last-child {
120   margin-bottom: 0;
121 }
122
123 nav.pagination:first-child {
124   margin-bottom: 3rem;
125 }
126
127 nav.pagination:last-child {
128   margin-top: 3rem;
129 }
130
131 @media (prefers-color-scheme: dark) {
132   html {
133     color: #dfdede;
134     background: #121212;
135   }
136
137   a {
138     color: #dfdede;
139   }
140
141   article:not(:first-of-type) {
142     border-top: 1px solid #dfdddd;
143   }
144 }