Mercurial > web
diff css/style.css @ 75:d69f3fe99911
*: remove bootstrap, add projects page, use custom navbar
the bootstrap navbar was a bit too bloated for something
like this anyway.
P.S.: you can see some fun stupid tricks in `projects/index.html`,
I had to hack around to make the background work how I wanted
author | Paper <paper@paper.us.eu.org> |
---|---|
date | Fri, 22 Mar 2024 21:42:50 -0400 |
parents | c8ea71d9d102 |
children | 5fdf5f346b92 |
line wrap: on
line diff
--- a/css/style.css Mon Dec 18 00:26:00 2023 -0500 +++ b/css/style.css Fri Mar 22 21:42:50 2024 -0400 @@ -1,40 +1,54 @@ -/* body-wide font choice and stuff */ -body { - color: white; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +/* remove stupid default margin */ +html, body { + margin: 0px; + padding: 0px; } -.header { - text-align: center; - justify-content: center; +/* body-wide font choice */ +body { + color: white; + font-family: sans-serif; } -.title { - text-align: center; - display: inline-block; - /* dumb little hack to get this to render properly on mobile */ - padding: 0 0.75em; +/* make links not look like pure shite */ +a.prettylink:link, a.prettylink:visited { + color: #3395ff; + text-decoration: none; +} + +a.prettylink:link:hover { + text-decoration: underline; } -.avatar { - display: inline-block; +/* navbar */ +.navbar { + display: flex; - border: 4px solid black; - width: 200px; - height: auto; + background-color: rgba(0, 0, 0, 0.6); + color: white; + + padding: 5px; +} + +.navbar-item { + color: gray; } -.content { - background-color: rgba(0, 0, 0, 0.5); +.navbar-item-active { + color: white; +} - /* 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); +.navbar-item, +.navbar-item-active { + text-decoration: none; + margin-left: 5px; + margin-right: 5px; +} - margin-top: 1em; - padding: 1em 1.5em; +.navbar-item:hover, +.navbar-item-active:hover { + text-decoration: underline; + color: white; } /* generic drop shadows that I heavily use in... everything, @@ -47,3 +61,63 @@ .drop-shadow-box { box-shadow: 0.125em 0.125em 0.625em rgba(0, 0, 0, 0.5); } + +/* fuck off */ +h1, h2 { + margin: 0; +} + +/* creates a box to store text or whatever in */ +.content { + background-color: rgba(0, 0, 0, 0.6); + margin-inline: max(1em, 50% - 46.88em/2); + + /* essentially equivalent to `margin: auto;` + * except it has a minimum value of 1em to make it + * look nice on mobile + */ + padding: 1em; +} + +/* headers */ +.header { + display: flex; + flex-wrap: wrap; /* wrap text, useful on mobile */ + + align-items: center; + + text-align: center; + justify-content: center; +} + +/* projects/index.html */ +.project-title { + font-weight: bold; +} + +.project-separator { + margin: 1px 0px; +} + +.index-socials-list, /* woah! */ +.project-downloads { + margin: 0px; + list-style: square; +} + +/* index.html */ +.title { + display: inline-block; + vertical-align: middle; + + /* 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; +}