Mercurial > web

comparison css/style.css @ 72:ff98f97603ca

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
*: 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
comparison
equal deleted inserted replaced
71:597f956b8d3a 72:ff98f97603ca
1 .navbar { 1 /* body-wide font choice and stuff */
2 text-align: left; /* Override body text align */
3 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
4 }
5 .container {
6 width: 98%;
7 margin-top: 1%;
8 }
9 body { 2 body {
10 color: white; 3 color: white;
11 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 4 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
5 }
6
7 .header {
12 text-align: center; 8 text-align: center;
13 text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.6); 9 justify-content: center;
14 } 10 }
15 div.box { 11
12 .title {
13 text-align: center;
14 display: inline-block;
15 /* dumb little hack to get this to render properly on mobile */
16 padding: 0 0.75em;
17 }
18
19 .avatar {
20 display: inline-block;
21
22 border: 4px solid black;
23 width: 200px;
24 height: auto;
25 }
26
27 .content {
16 background-color: rgba(0, 0, 0, 0.5); 28 background-color: rgba(0, 0, 0, 0.5);
17 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5) inset; 29
18 color: white; 30 /* essentially equivalent to `margin: auto;`
19 text-align: center; 31 * except it has a minimum value of 1em to make it
20 margin: 1% auto; 32 * look nice on mobile
21 padding: 15px; 33 */
22 max-width: 500px; 34 margin-inline: max(1em, 50% - 46.88em/2);
35
36 margin-top: 1em;
37 padding: 1em 1.5em;
23 } 38 }
24 .center { 39
25 position: absolute; 40 /* generic drop shadows I heavily use these in... everything,
26 top: 50%; 41 * so having them as their own classes is pretty nice :)
27 left: 50%; 42 */
28 transform: translate(-50%, -50%); 43 .drop-shadow-text {
44 text-shadow: 0.125em 0.125em 0.125em rgba(0, 0, 0, 0.5);
29 } 45 }
30 a:link, a:visited, a:hover, a:active { 46
31 color: #ff6600; 47 .drop-shadow-box {
48 box-shadow: 0.125em 0.125em 0.625em rgba(0, 0, 0, 0.5);
32 } 49 }
33 /* Only in index.html */
34 div.logos {
35 filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
36 image-rendering: pixelated;
37 }