diff options
Diffstat (limited to 'src/scss/main.scss')
| -rw-r--r-- | src/scss/main.scss | 328 |
1 files changed, 328 insertions, 0 deletions
diff --git a/src/scss/main.scss b/src/scss/main.scss new file mode 100644 index 0000000..d18cdc0 --- /dev/null +++ b/src/scss/main.scss @@ -0,0 +1,328 @@ +@import "./variables"; +@import "./mixins"; + +@include box-sizing; +@include font-face("FontStuck-Extended"); +@include font-face("CourierNew"); + +@include keyframes(shake) { + 0% { @include transform(translate(1px, 1px) rotate(0deg)); } + 10% { @include transform(translate(-1px, -2px) rotate(-1deg)); } + 20% { @include transform(translate(-3px, 0px) rotate(1deg)); } + 30% { @include transform(translate(3px, 2px) rotate(0deg)); } + 40% { @include transform(translate(1px, -1px) rotate(1deg)); } + 50% { @include transform(translate(-1px, 2px) rotate(-1deg)); } + 60% { @include transform(translate(-3px, 1px) rotate(0deg)); } + 70% { @include transform(translate(3px, 1px) rotate(-1deg)); } + 80% { @include transform(translate(-1px, -1px) rotate(1deg)); } + 90% { @include transform(translate(1px, 2px) rotate(0deg)); } + 100% { @include transform(translate(1px, -2px) rotate(-1deg)); } +} + +img:hover { + @include animation(shake 0.5s linear infinite); +} + +@media (prefers-reduced-motion) { + img:hover { + @include animation(none !important); + } +} + +* { + scrollbar-color: $blue transparent; +} + +h1 { + font-family: $header-font; + font-size: 325%; + line-height: 100%; + margin: 15px 0; +} + +h2 { + font-family: $header-font; + font-size: 200%; + line-height: 100%; + margin: 12px 0; +} + +h3 { + font-family: $header-font; + font-size: 150%; + line-height: 100%; + margin: 5px 0; +} + +h4 { + font-family: $header-font; + font-size: 130%; + line-height: 100%; + margin: 2px 0; +} + +a, +a:visited { + color: $yellow; + @include text-decoration(underline); +} + +a:hover { + color: $yellow-alt; + @include text-decoration(underline); +} + +html { + color: $white; + font-family: $font; + font-size: 120%; + background: #181818; + background-image: url("../img/background.jpg?ref=2"); + background-repeat: repeat; + background-size: 512px; +} + +html, +body, +#container { + width: 100%; + margin: 0; + padding: 0; +} + +body { + padding: $inner-gap; + min-height: 100%; + + .center { + display: table; + margin: 0 auto; + } +} + +#header, +#main, +#footer, +#container { + @include border-radius($outer-radius); + width: $page-width; + text-align: left; +} + +@media (max-width: ($page-width + $outer-gap * 2)) { + body, #header, + #main, #footer, + #container { + width: 100%; + min-width: 250px; + } +} + +#header, +#footer { + display: block; + @include section; +} + +#header { + $logo-size: 200px; + height: #{$logo-size + $inner-gap * 2 + 10px}; + padding: $inner-gap; + + img { + @include border-radius($inner-radius); + float: left; + height: $logo-size; + width: $logo-size; + } + + .content { + padding-top: 30px; + padding-left: $logo-size; + + .logo-text { + margin: 0; + text-align: center; + text-shadow: 3px 3px $white-alt; + } + + #nav { + margin: 0; + padding: 0; + list-style-type: none; + margin: 0 auto; + @include display-table($inner-gap); + + li { + @include display-table-cell; + float: left; + padding: $inner-gap; + + a { + @include text-decoration(none); + + &:hover, + &:active { + color: $yellow; + @include text-decoration(underline); + } + + h2 { + margin: 0; + text-shadow: 3px 3px $yellow-alt; + } + } + } + } + } +} + +@media (max-width: 800px) { + #header { + display: block; + height: auto; + + img { + float: none; + display: block; + margin: 0 auto; + } + + .content { + padding-top: 0; + padding-left: 0; + + #nav { + text-align: center; + } + } + } +} + +@media (max-width: 550px) { + #header .content #nav { + li { + float: none; + display: block; + } + } +} + +#footer { + padding: $inner-gap; + + .footer-text { + display: block; + margin: 10px 0; + } + + .bucket { + margin-top: $inner-gap; + width: 100%; + height: 40px; + border: none; + } + + .john { + display: block; + max-width: 732px; + height: 94px; + width: 100%; + border: none; + + @media(max-width: 732px) { + height: 12vw; + } + } + + .buttons { + a, img { + height: 30px; + } + } +} + +#main .section { + @include section; + + .heading { + @include linear-gradient(to bottom, $blue, $black); + margin: 0; + padding-left: $inner-gap; + @include border-radius($inner-radius $inner-radius 0 0); + } + + h1, h2, h3, h4, h5, + span, pre { + margin-left: $inner-gap; + } + + p { + padding: 0 $inner-gap; + } + + blockquote p { + border-left: 5px solid $blue; + } + + pre { + background: black; + margin-right: $inner-gap; + @include border-radius($outer-radius); + padding: $inner-gap; + } + + code { + font-family: $font; + color: $green; + } + + pre code { + color: $white; + } + + table { + width: 100%; + + th, td { + padding: $outer-radius; + font-family: $header-font; + font-size: 120%; + line-height: 120%; + + @media (max-width: 400px) { + font-size: 100%; + line-height: 100%; + } + + @media (max-width: 360px) { + font-size: 90%; + line-height: 90%; + } + + @media (max-width: 320px) { + font-size: 80%; + line-height: 80%; + } + + } + + td { + background: $blue-alt; + } + + th { + background: $blue; + text-align: left; + } + + tr:last-child { + th { + @include border-radius(0 0 0 $inner-radius); + } + tr { + @include border-radius(0 0 $inner-radius 0); + } + } + } +} |