mirror of
https://github.com/rmaake1/httpstatuses.git
synced 2024-10-06 08:07:21 +02:00
213 lines
3.0 KiB
SCSS
213 lines
3.0 KiB
SCSS
$container-width: 528px;
|
|
|
|
@import "../node_modules/skeleton-scss/scss/skeleton.scss";
|
|
|
|
@font-face {
|
|
font-family: 'Open Sans';
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
src: url('open-sans-regular.woff') format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
src: url('source-code-pro-700.woff') format('woff');
|
|
}
|
|
|
|
.container {
|
|
margin: auto;
|
|
max-width: $container-width;
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
.container {
|
|
width: 80%;
|
|
}
|
|
}
|
|
|
|
body {
|
|
color: #556270;
|
|
font-family: 'Open Sans', sans-serif;
|
|
font-weight: normal;
|
|
margin: 0px;
|
|
}
|
|
|
|
a {
|
|
color: #d6156d;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: #fd55a2;
|
|
}
|
|
}
|
|
|
|
a[href^='https://www.runscope.com'] {
|
|
color: #1b70e0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: #333;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-bottom: 8px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
p {
|
|
font-size: 14px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
code {
|
|
background-color: #fff;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.hero {
|
|
@extend .u-full-width;
|
|
padding: 25px 0px 10px 0px;
|
|
}
|
|
|
|
.banner {
|
|
@extend .u-full-width;
|
|
padding: 14px 0px;
|
|
border-bottom: 1px solid #eee;
|
|
|
|
p {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
a {
|
|
color: #1b70e0;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.share {
|
|
@extend .u-full-width;
|
|
padding: 14px 0px;
|
|
background-color: #f9f9f9;
|
|
margin-bottom: 20px;
|
|
|
|
a {
|
|
color: #556270;
|
|
margin-right: 10px;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
|
|
&:hover {
|
|
color: #fd55a2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.codes {
|
|
margin-bottom: 40px;
|
|
|
|
ul {
|
|
font-family: 'Open Sans', sans-serif;
|
|
font-size: 14px;
|
|
letter-spacing: 0.5px;
|
|
list-style-type: none;
|
|
margin-bottom: 10px;
|
|
|
|
h2 {
|
|
font-family: 'Open Sans', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 0px;
|
|
|
|
a {
|
|
color: #556270;
|
|
font-weight: normal;
|
|
|
|
&:hover {
|
|
color: #d6156d;
|
|
}
|
|
|
|
span {
|
|
color: #d6156d;
|
|
font-family: 'Source Code Pro';
|
|
font-weight: bold;
|
|
width: 34px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.code {
|
|
margin: 25px auto;
|
|
|
|
> p:first-of-type {
|
|
font-size: 18px;
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Source Code Pro';
|
|
text-transform: uppercase;
|
|
|
|
span {
|
|
color: #d6156d;
|
|
}
|
|
|
|
&.section {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
color: #bbb;
|
|
font-family: 'Source Code Pro';
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
ul {
|
|
font-size: 14px;
|
|
list-style-position: outside;
|
|
list-style-type: disc;
|
|
margin: 0px 0px 10px 20px;
|
|
|
|
li {
|
|
margin: 2px 0 0 0;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: circle;
|
|
margin: 5px 0 0 10px;
|
|
}
|
|
}
|
|
|
|
hr {
|
|
border-top: 1px solid #eee;
|
|
margin: 10px 0px;
|
|
}
|
|
|
|
hr ~ ul {
|
|
font-size: 12px;
|
|
list-style-type: none;
|
|
margin: 0px;
|
|
|
|
li {
|
|
margin: 0px;
|
|
|
|
span:target {
|
|
background-color: #f9f9f9;
|
|
color: #222;
|
|
}
|
|
|
|
&:last-of-type {
|
|
margin-top: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|