forked from projects/thebadspace
ro
bce9a430aa
Changed the appeal process so that each request is tracked in the database to make reviewing and time limits easier to manage. An email is still sent but it's just a notifcation to let the admin know an appeal has been filed.
255 lines
3.7 KiB
CSS
255 lines
3.7 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;
|
|
}
|
|
|
|
textarea[name="appeal_description"] {
|
|
width: 300px;
|
|
height: 200px;
|
|
}
|
|
|
|
/* 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 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: 650px) {
|
|
header > div:nth-child(1) {
|
|
grid-template-columns: 150px 65% 1fr;
|
|
grid-template-rows: 75% 1fr;
|
|
height: auto;
|
|
gap: 15px;
|
|
}
|
|
|
|
header > div > div.header-left {
|
|
grid-row: 1/2;
|
|
position: relative;
|
|
width: 100px;
|
|
}
|
|
|
|
header > div > div.header-center {
|
|
grid-row: 2/3;
|
|
grid-column: 1/4;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 440px) {
|
|
header > div:nth-child(1) {
|
|
grid-template-columns: 150px 40% 1fr;
|
|
}
|
|
}
|