annotate css/style.css @ 72:ff98f97603ca

*: giant redesign I decided to go from a largely carrd-inspired design to something more deserving of the title "website". I also removed much of the old, very crusty HTML and CSS that I had written almost 2 years ago now O_o
author Paper <mrpapersonic@gmail.com>
date Fri, 15 Dec 2023 18:56:52 -0500
parents 2e645b936727
children c8ea71d9d102
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
72
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
1 /* body-wide font choice and stuff */
69
2e645b936727 *: huge overhaul
Paper <mrpapersonic@gmail.com>
parents:
diff changeset
2 body {
2e645b936727 *: huge overhaul
Paper <mrpapersonic@gmail.com>
parents:
diff changeset
3 color: white;
2e645b936727 *: huge overhaul
Paper <mrpapersonic@gmail.com>
parents:
diff changeset
4 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
72
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
5 }
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
6
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
7 .header {
69
2e645b936727 *: huge overhaul
Paper <mrpapersonic@gmail.com>
parents:
diff changeset
8 text-align: center;
72
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
9 justify-content: center;
69
2e645b936727 *: huge overhaul
Paper <mrpapersonic@gmail.com>
parents:
diff changeset
10 }
72
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
11
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
12 .title {
69
2e645b936727 *: huge overhaul
Paper <mrpapersonic@gmail.com>
parents:
diff changeset
13 text-align: center;
72
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
14 display: inline-block;
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
15 /* dumb little hack to get this to render properly on mobile */
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
16 padding: 0 0.75em;
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
17 }
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
18
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
19 .avatar {
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
20 display: inline-block;
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
21
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
22 border: 4px solid black;
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
23 width: 200px;
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
24 height: auto;
69
2e645b936727 *: huge overhaul
Paper <mrpapersonic@gmail.com>
parents:
diff changeset
25 }
72
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
26
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
27 .content {
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
28 background-color: rgba(0, 0, 0, 0.5);
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
29
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
30 /* essentially equivalent to `margin: auto;`
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
31 * except it has a minimum value of 1em to make it
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
32 * look nice on mobile
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
33 */
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
34 margin-inline: max(1em, 50% - 46.88em/2);
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
35
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
36 margin-top: 1em;
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
37 padding: 1em 1.5em;
69
2e645b936727 *: huge overhaul
Paper <mrpapersonic@gmail.com>
parents:
diff changeset
38 }
72
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
39
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
40 /* generic drop shadows I heavily use these in... everything,
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
41 * so having them as their own classes is pretty nice :)
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
42 */
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
43 .drop-shadow-text {
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
44 text-shadow: 0.125em 0.125em 0.125em rgba(0, 0, 0, 0.5);
69
2e645b936727 *: huge overhaul
Paper <mrpapersonic@gmail.com>
parents:
diff changeset
45 }
72
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
46
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
47 .drop-shadow-box {
ff98f97603ca *: giant redesign
Paper <mrpapersonic@gmail.com>
parents: 69
diff changeset
48 box-shadow: 0.125em 0.125em 0.625em rgba(0, 0, 0, 0.5);
69
2e645b936727 *: huge overhaul
Paper <mrpapersonic@gmail.com>
parents:
diff changeset
49 }