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

View File

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