CSS refactoring and scaling

master
Dessa Simpson 2020-09-13 11:12:52 -07:00
parent bd8bcc369b
commit b1d44d3af3
2 changed files with 22 additions and 19 deletions

View File

@ -1,4 +1,5 @@
body {
font-size: 150%;
margin: 3em 0.5em 0em 0.5em;
text-align: center;
background-color: #444;
@ -6,6 +7,11 @@ body {
color: #ddd;
}
/* why are you like this CSS */
button, input, select {
font-size: 100%;
}
a {
color: #ddd;
}
@ -21,7 +27,7 @@ a:hover {
background-color: #f00c;
}
#topbar {
#navbar {
padding: 0.25em 0.5em;
position: absolute;
box-sizing: border-box;
@ -35,12 +41,12 @@ a:hover {
height: 2.5em;
}
#topbar div {
#navbar div {
margin-left: 5px;
margin-right: 5px;
}
#topbar a {
#navbar a {
text-decoration: none;
}
@ -53,27 +59,24 @@ div#nav-login {
margin-left: auto;
}
div#nav-streamerpic, div#nav-userpic {
margin-right: -5px;
height: 2.5em;
}
div#nav-userpic {
margin-left: auto;
margin-right: -5px;
height: 2.5em;
}
#nav-userpic img {
#nav-streamerpic img, #nav-userpic img {
height: 80%;
margin-top: 0.25em;
margin-bottom: 0.25em;
}
div#nav-streamerpic {
margin-right: -5px;
height: 2.5em;
}
#nav-streamerpic img {
height: 80%;
margin-top: 0.25em;
margin-bottom: 0.25em;
#nav-streamerpic img, #nav-userpic img, .table-userpic {
border-radius: 9000px;
margin-right: 5px;
}
#main {
@ -89,12 +92,12 @@ div#nav-streamerpic {
text-align: left;
}
#requests table, th, td {
#requests table, #requests th, #requests td {
border: 2px solid #aaa;
border-collapse: collapse;
}
#requests th, td {
#requests th, #requests td {
padding: 5px;
}
@ -122,7 +125,7 @@ div#nav-streamerpic {
padding: 1em;
margin: 2em;
width: 100%;
max-width: 480px;
max-width: 30em;
background-color: #444;
box-shadow: 0px 5px 20px black;
}

View File

@ -7,7 +7,7 @@
<script src="main.js" defer></script>
</head>
<body>
<div id="topbar">
<div id="navbar">
<div id="nav-streamerpic"><img src="<%= it.streamerProfilePicture %>" /></div>
<div id="nav-title"><%= it.streamerName %>'s Learn Request Queue</div>
<div id="nav-requests"><a href="/">Requests</a></div>