moth/www/res/style.css

130 lines
2.3 KiB
CSS

@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(Lato-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(Lato-Bold.ttf) format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url(Lato-Italic.ttf) format('truetype');
}
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url(Inconsolata-Regular.ttf) format('truetype');
}
html {
background: rgba(61, 50, 44, 0) url(brown-lines.jpg) no-repeat center center fixed;
background-size: cover;
color: #ccb;
height: 100%;
font-family: Lato, sans-serif;
}
body {
margin: 0;
height: 100%
}
pre, tt {
font-family: Inconsolata, monospace;
background-color: rgba(0, 0, 0, 0.3);
}
.terminal {
background: rgba(80, 70, 60, 0.96);
display: inline-block;
margin: 1%;
border: solid black 0.2em;
border-radius: 1em 1em 0.5em 1em;
overflow: auto;
}
.terminal p {
padding: 0.25em 0.5em;
}
#preview {
background-image: url(preview.png);
background-size: contain;
max-width: 40em;
display: block;
margin: 1% auto;
}
#overview, #messages {
width: 47%;
height: 20%;
}
#puzzles {
width: 24%;
height: 70%;
}
#main {
width: 70%;
height: 70%;
}
h1 {
text-align: center;
font-size: 120%;
}
a:link, .link {
color: #13a5de;
cursor: pointer;
}
a:visited {
color: #999999;
}
.category h2 {
margin: 0;
font-size: 100%;
}
.category ul {
margin: 0;
padding-left: 1em;
font-size: 90%;
}
.category li {
display: inline;
}
.category li + li:before {
content: " ";
}
@media (max-width: 52em) {
#overview, #messages, #puzzles, #main {
width: 96%;
}
}
::-webkit-scrollbar {
width: 0.7em;
}
::-webkit-scrollbar-track {
/* -webkit-box-shadow: inset 0 0 0.5em rgba(200, 200, 200, 0.3); */
background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 1em;
}