site/style.css

155 lines
2.2 KiB
CSS

/* {font-size:13pt;font-weight:normal;} */
@media (min-width: 64em) {
.row {
display: flex;
flex-wrap: nowrap;
flex-direction: row-reverse;
}
.col { flex-grow: 1; }
}
.grid {
border-collapse: collapse;
}
.col {
border: 6px double #fb5;
padding: 1em;
}
.user-list {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
list-style-type: none;
padding: 0;
}
.user-list li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 10em;
}
.user-list::after {
content: "";
}
body {
margin: auto;
padding: 1em;
max-width: 64em;
font-family: "courier new", monospace;
color: #fb5;
background: #111;
word-wrap: break-word;
}
a {
text-decoration: none;
color: #f70;
font-weight: bold;
padding-right: 0.25em;
}
a:hover {color: #f20;}
hr {
border-color: #fb5;
}
.text-center {
text-align: center
}
.advisory {
background: #fc4;
color: #222;
font-weight: bold;
padding: 1em;
border-radius: 0.25em;
}
h1 {
text-transform: uppercase;
color: #fb5;
font-family: monospace;
}
/* THEGOODS */
#fancyboi::before {
content: "$ ";
}
@media (prefers-reduced-motion: no-preference) {
@keyframes flash {
50% { opacity: 0; }
}
@keyframes reveal {
from { width: 2em; } /* Width of ::before */
to { width: 100%; }
}
#fancyboi {
overflow: hidden;
white-space: nowrap;
animation: reveal 4s linear;
text-overflow: "█";
}
#fancyboi::after {
content: "█";
animation: flash 0.5s step-end infinite;
}
}
/* SDOOGEHT */
.sourceCode {
color:#008000;
}
code > span.fl {
color: #008000;
}
/* Style the navbar */
#navbar {
overflow: hidden;
background-color: #fb5;
color: #222;
z-index: 99;
position: relative;
top: 0;
left: 0;
width: 100%;
border-radius: 0.25em;
}
#navbar a:hover {
background-color: #f93;
}
/* Navbar links */
#navbar a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
}
/* Page content */
.content {
padding-top: 5px;
}
input[type="text"],
textarea {
background-color: #333;
color: darkorange;
}
div.alert-warning {
background-color: darkred;
}
div.alert-success {
background-color: darkgreen;
}
/* Mobile */
@media (max-width: 768px) {
td {
display: block;
}
}