]> git.r.bdr.sh - rbdr/blog/blame_incremental - static/css/style.css
Update the blog style
[rbdr/blog] / static / css / style.css
... / ...
CommitLineData
1* {
2 margin: 0;
3 padding: 0;
4}
5
6body {
7 background-image: url('/images/header_background.png');
8 background-size: auto 300px;
9 background-attachment: fixed;
10 line-height: 1.45em;
11
12 font-family: Times, 'Times New Roman', serif;
13}
14
15header {
16 background-image: url('/images/header_foreground.png');
17 background-repeat: no-repeat;
18 background-size: auto 300px;
19 height: 300px;
20}
21
22header a {
23 color: transparent;
24 display: block;
25 max-height: 500px;
26}
27
28main {
29 background-color: white;
30 padding: 1.414em 4.53em;
31 display: flex;
32 flex-flow: column;
33 align-items: center;
34}
35
36h1, h2, h3 {
37 font-weight: 400;
38 width: 100%;
39}
40h1 {
41 font-size: 2rem;
42 line-height: 1.05em;
43 max-width: 30rem;
44 margin: 0.5em 0 0.5em;
45 text-transform: uppercase;
46}
47h2, h3 {
48 max-width: 30rem;
49 font-size: 1rem;
50 margin: 2em 0;
51}
52
53h2 { font-variant: small-caps; }
54h3 { font-style: italic; }
55
56ul, ol, img {
57 width: 100%;
58 margin: 1.414em 0;
59 max-width: 30em;
60}
61
62p {
63 max-width: 30em;
64 text-align: justify;
65 text-indent: 1.5em;
66}
67
68hr + p,
69h1 + p,
70h2 + p,
71h3 + p {
72 text-indent: 0;
73}
74
75ul, ol { margin-left: 1.414em; }
76
77code {
78 background-color: whitesmoke;
79 padding: 0.2em 0.5em;
80}
81
82pre {
83 background-color: whitesmoke;
84 padding: 1em;
85 font-size: 1.231em;
86 max-width: 30em;
87 margin: 1.414em 0 1.414em -1em;
88}
89
90hr {
91 border: 0;
92 border-bottom: 1px solid #666;
93 width: 30em;
94 margin: 1.414em 0;
95}
96
97hr.separator {
98 width: 100%;
99 border-bottom: 10px solid #666;
100}
101
102footer,
103footer a {
104 color: #fff;
105 background-color: blue;
106}
107footer p {
108 font-family: arial, sans-serif;
109 text-align: left;
110 text-indent: 0;
111 padding: 1.414em;
112}
113
114/* Image and caption sttyles */
115
116p img {
117 margin-left: -1.125em;
118}
119
120hr + p img,
121h1 + p img,
122h2 + p img,
123h3 + p img {
124 margin-left: 0;
125}
126
127img {
128 width: 100%;
129 max-width: 30em;
130}
131
132img + em {
133 color: #999;
134 display: block;
135 margin: -1.414em 0 1.414em;
136 text-align: right;
137}
138
139/* Dark Mode Support */
140
141@media (prefers-color-scheme: dark) {
142 main {
143 background-color: black;
144 color: white;
145 }
146
147 code,
148 pre {
149 background-color: #444;
150 }
151
152 a {
153 color: #53FFFF;
154 }
155
156 a:visited {
157 color: #FF55FF;
158 }
159
160 hr.separator {
161 border-bottom: 10px solid #999;
162 }
163}