]> git.r.bdr.sh - rbdr/blog/blob - static/css/style.css
2a35a63cfbcdfa3da0eecf2843b53f74a1ef99d4
[rbdr/blog] / static / css / style.css
1 * {
2 margin: 0;
3 padding: 0;
4 }
5
6 body {
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
15 header {
16 background-image: url('/images/header_foreground.png');
17 background-repeat: no-repeat;
18 background-size: auto 300px;
19 height: 300px;
20 }
21
22 header a {
23 color: transparent;
24 display: block;
25 max-height: 500px;
26 }
27
28 main {
29 background-color: white;
30 padding: 1.414em 4.53em;
31 display: flex;
32 flex-flow: column;
33 align-items: center;
34 }
35
36 h1, h2, h3 {
37 font-weight: 400;
38 width: 100%;
39 }
40 h1 {
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 }
47 h2, h3 {
48 max-width: 30rem;
49 font-size: 1rem;
50 margin: 2em 0;
51 }
52
53 h2 { font-variant: small-caps; }
54 h3 { font-style: italic; }
55
56 ul, ol, img {
57 width: 100%;
58 margin: 1.414em 0;
59 max-width: 30em;
60 }
61
62 p {
63 max-width: 30em;
64 text-align: justify;
65 text-indent: 1.5em;
66 }
67
68 hr + p,
69 h1 + p,
70 h2 + p,
71 h3 + p {
72 text-indent: 0;
73 }
74
75 ul, ol { margin-left: 1.414em; }
76
77 code {
78 background-color: whitesmoke;
79 padding: 0.2em 0.5em;
80 }
81
82 pre {
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
90 hr {
91 border: 0;
92 border-bottom: 1px solid #666;
93 width: 30em;
94 margin: 1.414em 0;
95 }
96
97 hr.separator {
98 width: 100%;
99 border-bottom: 10px solid #666;
100 }
101
102 footer,
103 footer a {
104 color: #fff;
105 background-color: blue;
106 }
107 footer 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
116 p img {
117 margin-left: -1.125em;
118 }
119
120 hr + p img,
121 h1 + p img,
122 h2 + p img,
123 h3 + p img {
124 margin-left: 0;
125 }
126
127 img {
128 width: 100%;
129 max-width: 30em;
130 }
131
132 img + 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 }