Teascade.net/scss/main.scss

193 lines
3.4 KiB
SCSS

$pink: #ff0091;
$regular: #fff;
$dark: #1f1f1f;
body, html {
background-color: $dark;
font-family: helvetica, sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
@media (max-width: 800px) {
.cont {
display: block !important;
width: 100%;
.teacup {
height: auto !important;
img {
margin-right: 20%;
width: 40% !important;
height: auto !important;
padding-top: 1em;
padding-bottom: 1em;
}
}
.stuffarea {
margin-left: 10%;
padding-right: 0 !important;
width: 80% !important;
height: auto !important;
ul.navbar {
padding: 0 !important;
padding-left: 0.5em !important;
}
}
}
}
.cont {
display: inline-flex;
flex-direction: row;
width: 100%;
height: 100%;
.teacup {
flex: auto;
height: 100%;
text-align: center;
display:flex;
justify-content:center;
align-items:center;
background-color: $dark - #040404;
img {
width: 75%;
max-height: 100%;
height: auto;
}
}
.stuffarea {
width: 45%;
height: 100%;
padding-left: 5%;
padding-right: 5%;
margin-bottom: 10%;
overflow-y: auto;
.hiddenarea {
visibility: hidden;
height: 0;
width: 0;
overflow: hidden;
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 0;
padding-bottom: 15%;
}
@for $i from 1 through 6 {
h#{$i} {
margin: 0;
color: $pink;
}
}
h2.blogtitle {
padding: 0.5em;
color: $pink;
transition: 0.2s;
margin: 0;
}
h2.blogtitle:hover {
cursor: pointer;
background-color: $dark - #060606;
transition: 0.2s;
}
a {
color: $pink;
}
.timestamp {
color: $dark + #444;
vertical-align: middle;
font-size: 15px;
}
p {
color: $regular;
}
li {
color: $regular;
}
ul.navbar {
padding-left: 1em;
list-style: none;
white-space: nowrap;
padding-bottom: 1em;
a:focus {
outline: none;
font-style: none;
border: none;
}
li {
display: inline-block;
padding: 0.5em;
background-color: $dark;
margin: -3px;
transition: 0.2s;
color: $regular - #222;
border-right: 2px solid $dark + #111;
transform: skewX(-20deg);
.button {
transform: skewX(20deg);
}
}
li:first-of-type {
border-left: 2px solid $dark + #111;
}
li:hover {
background-color: $dark + #111;
transition: 0.2s;
cursor: pointer;
}
li.active {
background-color: $dark + #060606;
}
li.active:hover {
background-color: $dark + #060606 + #111;
}
}
iframe.itch-embedded {
width: 100%;
max-width: 700px;
}
.js-link {
text-decoration: underline;
}
.js-link:hover {
cursor: pointer;
}
}
}
noscript {
color: $regular;
}