forked from projects/thebadspace
7151314122
Added additional pages About, Listings, and Location as well as implementing the corresponding functionality for those pages to be able to pull the data they need from the DB. Also continued layout clean up and adjusted some gloabal font sizing settings
156 lines
2.2 KiB
CSS
156 lines
2.2 KiB
CSS
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font: 400 1.6em/1.3em var(--base-type);
|
|
}
|
|
|
|
html body {
|
|
background: var(--primary);
|
|
color: var(--secondary);
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
a {
|
|
color: var(--highlight);
|
|
text-decoration: none;
|
|
|
|
/*
|
|
border-bottom: 1px solid var(--white);
|
|
transition: all 0.2s linear;
|
|
*/
|
|
}
|
|
|
|
header {
|
|
width: 100%;
|
|
color: var(--primary);
|
|
background: var(--secondary);
|
|
}
|
|
|
|
header > div:nth-child(1) {
|
|
display: grid;
|
|
grid-template-columns: 200px 50% 1fr;
|
|
padding: 10px;
|
|
gap: 10px;
|
|
height: 200px;
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
max-width: 1000px;
|
|
position: relative;
|
|
}
|
|
|
|
header > div span {
|
|
font-size: 3em;
|
|
font-weight: bold;
|
|
position: absolute;
|
|
bottom: 25px;
|
|
width: 50%;
|
|
line-height: 0.8em;
|
|
}
|
|
|
|
header > div img {
|
|
width: 100%;
|
|
}
|
|
|
|
header > div a {
|
|
color: var(--primary);
|
|
}
|
|
|
|
header > div i {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
header > div nav {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
right: 0;
|
|
}
|
|
|
|
div.system-notice-error {
|
|
background: var(--error);
|
|
color: var(--white);
|
|
padding: 10px;
|
|
}
|
|
|
|
div.system-notice-message {
|
|
background: var(--highlight);
|
|
color: var(--black);
|
|
padding: 10px;
|
|
}
|
|
|
|
main > section > article {
|
|
width: 80%;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
min-height: 400px;
|
|
}
|
|
|
|
/* GLOBALS */
|
|
|
|
a.nav-links {
|
|
padding: 7px;
|
|
border-bottom: none;
|
|
}
|
|
|
|
a:hover {
|
|
border-bottom: 1px solid var(--secondary);
|
|
}
|
|
|
|
pre {
|
|
white-space: pre;
|
|
background: var(--secondary);
|
|
}
|
|
|
|
code {
|
|
background: var(--secondary);
|
|
color: var(--primary);
|
|
padding: 3px;
|
|
}
|
|
|
|
sup {
|
|
background: var(--black);
|
|
color: var(--white);
|
|
padding: 2px;
|
|
border-radius: 3px;
|
|
vertical-align: baseline;
|
|
font-family: var(--mono-type);
|
|
}
|
|
|
|
.button-icon {
|
|
height: 90%;
|
|
padding-top: 3px;
|
|
}
|
|
|
|
.location-image {
|
|
height: 200px;
|
|
width: 200px;
|
|
display: inline-block;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* GLOBALS */
|
|
|
|
footer {
|
|
width: 100%;
|
|
color: var(--primary);
|
|
background: var(--secondary);
|
|
height: 200px;
|
|
}
|
|
|
|
footer > div:nth-child(1) {
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
padding: 10px;
|
|
gap: 10px;
|
|
height: 200px;
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
max-width: 1000px;
|
|
position: relative;
|
|
}
|