Mercurial > web

comparison css/style.css @ 75:d69f3fe99911

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
*: 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
comparison
equal deleted inserted replaced
74:c8ea71d9d102 75:d69f3fe99911
1 /* body-wide font choice and stuff */ 1 /* remove stupid default margin */
2 html, body {
3 margin: 0px;
4 padding: 0px;
5 }
6
7 /* body-wide font choice */
2 body { 8 body {
3 color: white; 9 color: white;
4 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 10 font-family: sans-serif;
5 } 11 }
6 12
7 .header { 13 /* make links not look like pure shite */
8 text-align: center; 14 a.prettylink:link, a.prettylink:visited {
9 justify-content: center; 15 color: #3395ff;
16 text-decoration: none;
10 } 17 }
11 18
12 .title { 19 a.prettylink:link:hover {
13 text-align: center; 20 text-decoration: underline;
14 display: inline-block;
15 /* dumb little hack to get this to render properly on mobile */
16 padding: 0 0.75em;
17 } 21 }
18 22
19 .avatar { 23 /* navbar */
20 display: inline-block; 24 .navbar {
25 display: flex;
21 26
22 border: 4px solid black; 27 background-color: rgba(0, 0, 0, 0.6);
23 width: 200px; 28 color: white;
24 height: auto; 29
30 padding: 5px;
25 } 31 }
26 32
27 .content { 33 .navbar-item {
28 background-color: rgba(0, 0, 0, 0.5); 34 color: gray;
35 }
29 36
30 /* essentially equivalent to `margin: auto;` 37 .navbar-item-active {
31 * except it has a minimum value of 1em to make it 38 color: white;
32 * look nice on mobile 39 }
33 */
34 margin-inline: max(1em, 50% - 46.88em/2);
35 40
36 margin-top: 1em; 41 .navbar-item,
37 padding: 1em 1.5em; 42 .navbar-item-active {
43 text-decoration: none;
44 margin-left: 5px;
45 margin-right: 5px;
46 }
47
48 .navbar-item:hover,
49 .navbar-item-active:hover {
50 text-decoration: underline;
51 color: white;
38 } 52 }
39 53
40 /* generic drop shadows that I heavily use in... everything, 54 /* generic drop shadows that I heavily use in... everything,
41 * so having them as their own classes is pretty nice :) 55 * so having them as their own classes is pretty nice :)
42 */ 56 */
45 } 59 }
46 60
47 .drop-shadow-box { 61 .drop-shadow-box {
48 box-shadow: 0.125em 0.125em 0.625em rgba(0, 0, 0, 0.5); 62 box-shadow: 0.125em 0.125em 0.625em rgba(0, 0, 0, 0.5);
49 } 63 }
64
65 /* fuck off */
66 h1, h2 {
67 margin: 0;
68 }
69
70 /* creates a box to store text or whatever in */
71 .content {
72 background-color: rgba(0, 0, 0, 0.6);
73 margin-inline: max(1em, 50% - 46.88em/2);
74
75 /* essentially equivalent to `margin: auto;`
76 * except it has a minimum value of 1em to make it
77 * look nice on mobile
78 */
79 padding: 1em;
80 }
81
82 /* headers */
83 .header {
84 display: flex;
85 flex-wrap: wrap; /* wrap text, useful on mobile */
86
87 align-items: center;
88
89 text-align: center;
90 justify-content: center;
91 }
92
93 /* projects/index.html */
94 .project-title {
95 font-weight: bold;
96 }
97
98 .project-separator {
99 margin: 1px 0px;
100 }
101
102 .index-socials-list, /* woah! */
103 .project-downloads {
104 margin: 0px;
105 list-style: square;
106 }
107
108 /* index.html */
109 .title {
110 display: inline-block;
111 vertical-align: middle;
112
113 /* dumb little hack to get this to render properly on mobile */
114 padding: 0 0.75em;
115 }
116
117 .avatar {
118 display: inline-block;
119
120 border: 4px solid black;
121 width: 200px;
122 height: auto;
123 }