forked from projects/thebadspace
ro
c13f144e20
Added some preliminary Bad Spade stats to the index to set up a space
for additional information to be shared in the future. Starting with an
accurate display of locations tracked, Current Sources count and
last update date
229 lines
3.2 KiB
CSS
229 lines
3.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(--white);
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
a {
|
|
color: var(--highlight);
|
|
text-decoration: none;
|
|
transition: all 0.2s linear;
|
|
/*
|
|
border-bottom: 1px solid var(--white);
|
|
|
|
*/
|
|
}
|
|
|
|
strong {
|
|
color: var(--secondary);
|
|
}
|
|
|
|
header {
|
|
width: 100%;
|
|
color: var(--primary);
|
|
background: var(--secondary);
|
|
}
|
|
|
|
header > div:nth-child(1) {
|
|
display: grid;
|
|
grid-template-columns: 200px 1fr 40px;
|
|
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 {
|
|
background: var(--black);
|
|
position: relative;
|
|
}
|
|
|
|
.header-right {
|
|
text-align: right;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
/* NAV */
|
|
|
|
#main-nav {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--black);
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
label[for="element-toggle"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#element-toggle {
|
|
display: none;
|
|
}
|
|
|
|
#element-toggle:not(:checked) ~ #main-nav {
|
|
display: none;
|
|
}
|
|
|
|
a.nav-links {
|
|
border-bottom: none;
|
|
font-size: 40px;
|
|
color: var(--highlight);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* GLOBALS */
|
|
|
|
a:hover {
|
|
/*
|
|
border-bottom: 1px solid var(--secondary);
|
|
*/
|
|
color: var(--white);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.menu-icon {
|
|
width: 40px;
|
|
}
|
|
|
|
.location-title {
|
|
display: none;
|
|
}
|
|
|
|
.location-image {
|
|
height: 200px;
|
|
width: 200px;
|
|
display: inline-block;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
footer {
|
|
width: 100%;
|
|
color: var(--primary);
|
|
background: var(--secondary);
|
|
height: 200px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
/*
|
|
responsive
|
|
*/
|
|
|
|
@media only screen and (max-width: 960px) {
|
|
header > div:nth-child(1) {
|
|
}
|
|
|
|
header > div nav {
|
|
bottom: 17px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 960px) {
|
|
header > div:nth-child(1) {
|
|
grid-template-columns: 150px 65% 1fr;
|
|
height: 150px;
|
|
}
|
|
|
|
header > div nav {
|
|
bottom: 17px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
}
|