@import “native.css”;
$green: #0f0; $black: #000; $white: fff;
body {
background-color: $black; color: $white; font-family: monospace; font-size: 16px; max-width: 100%; height: auto; img { height: auto; max-width: 100%; } .wrapper { margin: 0 auto; padding: 20px; overflow: hidden; a { color: #0f0; text-decoration: none; &:hover { background: $green; color: $black; } &.current { background: $green; color: $black; } } .blink { animation: blink-animation 1s steps(5, start) infinite; -webkit-animation: blink-animation 1s steps(5, start) infinite; } h1 { color: $black; background: $green; padding: 10px; width: -moz-fit-content; width: fit-content; // workaround for IE11 display: table; margin: auto; } .nav-wrapper { margin-top: 40px; display: flex; flex-wrap: wrap; align-content: space-between; justify-content: space-between; align-items: flex-end; flex-direction: row; .nav-bar { font-size: 1.2em; a { margin-right: 10px; padding: 5px 10px; } } #results-container { background-color: $black; border: 3px solid $green; position: absolute; padding-right: 10px; max-width: 220px; overflow: hidden; li { color: $green; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; } } .search { input, button { background-color: $black; color: $white; border: 1px solid $green; padding: 5px; font-family: monospace; font-size: 16px; outline-color: $green; } } } .blog { article { padding-bottom: 10px; border-bottom: 2px dashed $green; height: auto; // overflow: hidden; // height: 10em; margin-top: 1em; .post { overflow: hidden; } } h2 { margin-bottom: 10px; height: 2em; } .date { font-size: 1em; color: $white; display: block; height: 1em; } } .page { padding: 20px 0; } .line { color: $green; display: block; min-height: 1em; border-bottom: 2px dashed; overflow: hidden; margin-top: 10px; } } .pagination { margin-top: 20px; } table td, table th { padding: 5px; } .green { color: $green; } .highlight { margin: 0; }
}
@keyframes blink-animation {
to { visibility: hidden; }
} @-webkit-keyframes blink-animation {
to { visibility: hidden; }
}
@media all and (min-width: 1024px) {
.wrapper { max-width: 960px; }
}
@media all and (min-width: 768px) and (max-width: 1024px) {
.wrapper { max-width: 768px; }
}
@media all and (min-width: 660px) and (max-width: 768px) {
.wrapper { max-width: 660px; }
}
@media all and (min-width: 425px) and (max-width: 660px) {
.wrapper { max-width: 425px; }
}
@media all and (max-width: 425px) {
.wrapper { max-width: 375px; }
}
@media all and (max-width: 660px) {
.nav-bar, .search { width: 100%; display: block; margin: 5px 0; } body .nav-wrapper .nav-bar { &:first-child { a { padding: 0; } } }
}