# HG changeset patch # User Paper # Date 1702684612 18000 # Node ID ff98f97603ca0b26f96b8c6a7b2cdb97766ece65 # Parent 597f956b8d3a0e56b3262f6cbd3d891cfe6b96c5 *: 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 diff -r 597f956b8d3a -r ff98f97603ca css/style.css --- a/css/style.css Sun Oct 01 04:06:23 2023 -0400 +++ b/css/style.css Fri Dec 15 18:56:52 2023 -0500 @@ -1,37 +1,49 @@ -.navbar { - text-align: left; /* Override body text align */ - box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); -} -.container { - width: 98%; - margin-top: 1%; -} +/* body-wide font choice and stuff */ body { color: white; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +.header { text-align: center; - text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.6); + justify-content: center; } -div.box { - background-color: rgba(0, 0, 0, 0.5); - box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5) inset; - color: white; + +.title { text-align: center; - margin: 1% auto; - padding: 15px; - max-width: 500px; + display: inline-block; + /* dumb little hack to get this to render properly on mobile */ + padding: 0 0.75em; +} + +.avatar { + display: inline-block; + + border: 4px solid black; + width: 200px; + height: auto; } -.center { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + +.content { + background-color: rgba(0, 0, 0, 0.5); + + /* essentially equivalent to `margin: auto;` + * except it has a minimum value of 1em to make it + * look nice on mobile + */ + margin-inline: max(1em, 50% - 46.88em/2); + + margin-top: 1em; + padding: 1em 1.5em; } -a:link, a:visited, a:hover, a:active { - color: #ff6600; + +/* generic drop shadows I heavily use these in... everything, + * so having them as their own classes is pretty nice :) +*/ +.drop-shadow-text { + text-shadow: 0.125em 0.125em 0.125em rgba(0, 0, 0, 0.5); } -/* Only in index.html */ -div.logos { - filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5)); - image-rendering: pixelated; + +.drop-shadow-box { + box-shadow: 0.125em 0.125em 0.625em rgba(0, 0, 0, 0.5); } diff -r 597f956b8d3a -r ff98f97603ca index.html --- a/index.html Sun Oct 01 04:06:23 2023 -0400 +++ b/index.html Fri Dec 15 18:56:52 2023 -0500 @@ -8,49 +8,80 @@ but we don't have anything that uses it anyway --> - + -