mirror of
https://github.com/casjaysdevdocker/bind
synced 2024-11-26 17:23:10 -05:00
338 lines
4.3 KiB
CSS
338 lines
4.3 KiB
CSS
|
@import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap');
|
||
|
|
||
|
body {
|
||
|
padding: 50px;
|
||
|
font: 14px/1.5 Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||
|
color: #777;
|
||
|
font-weight: 300;
|
||
|
padding: 1.5em 0;
|
||
|
}
|
||
|
|
||
|
/* Layout */
|
||
|
.jumbotron {
|
||
|
line-height: 2.1428571435;
|
||
|
color: inherit;
|
||
|
padding: 10px 0px;
|
||
|
}
|
||
|
|
||
|
/* Main marketing message and sign up button */
|
||
|
.jumbotron {
|
||
|
text-align: center;
|
||
|
background-color: transparent;
|
||
|
}
|
||
|
|
||
|
.jumbotron .btn {
|
||
|
font-size: 21px;
|
||
|
padding: 1.5em 2em;
|
||
|
}
|
||
|
|
||
|
/* Everything but the jumbotron gets side spacing for mobile-first views */
|
||
|
.masthead,
|
||
|
.body-content {
|
||
|
padding: 0 15px;
|
||
|
}
|
||
|
|
||
|
/* Colors */
|
||
|
.green {
|
||
|
color: green;
|
||
|
}
|
||
|
|
||
|
.orange {
|
||
|
color: orange;
|
||
|
}
|
||
|
|
||
|
.red {
|
||
|
color: red;
|
||
|
}
|
||
|
|
||
|
.blue {
|
||
|
color: blue;
|
||
|
}
|
||
|
|
||
|
.yellow {
|
||
|
color: yellow;
|
||
|
}
|
||
|
|
||
|
h2,
|
||
|
h3,
|
||
|
h4,
|
||
|
h5,
|
||
|
h6 {
|
||
|
color: #222;
|
||
|
margin: 0 0 40px;
|
||
|
}
|
||
|
|
||
|
p,
|
||
|
ul,
|
||
|
ol,
|
||
|
table,
|
||
|
pre,
|
||
|
dl {
|
||
|
margin: 0 0 20px;
|
||
|
}
|
||
|
|
||
|
h2,
|
||
|
h3 {
|
||
|
line-height: 1.1;
|
||
|
}
|
||
|
|
||
|
h1 {
|
||
|
line-height: 1.1;
|
||
|
text-align: center;
|
||
|
font: Lato;
|
||
|
font-size: 80px;
|
||
|
color: #222;
|
||
|
margin: 0 0 40px;
|
||
|
}
|
||
|
|
||
|
h2 {
|
||
|
color: #393939;
|
||
|
}
|
||
|
|
||
|
h3,
|
||
|
h4,
|
||
|
h5,
|
||
|
h6 {
|
||
|
color: #494949;
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
color: #39c;
|
||
|
font-weight: 400;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
a small {
|
||
|
font-size: 11px;
|
||
|
color: #777;
|
||
|
margin-top: -0.6em;
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
.wrapper {
|
||
|
width: 860px;
|
||
|
margin: 0 auto;
|
||
|
}
|
||
|
|
||
|
blockquote {
|
||
|
border-left: 1px solid #e5e5e5;
|
||
|
margin: 0;
|
||
|
padding: 0 0 0 20px;
|
||
|
font-style: italic;
|
||
|
}
|
||
|
|
||
|
.btn-block {
|
||
|
width: 40%;
|
||
|
text-align: center;
|
||
|
display: block;
|
||
|
margin: 0 auto;
|
||
|
}
|
||
|
|
||
|
code,
|
||
|
pre {
|
||
|
font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
|
||
|
color: #333;
|
||
|
font-size: 12px;
|
||
|
}
|
||
|
|
||
|
pre {
|
||
|
padding: 8px 15px;
|
||
|
background: #f8f8f8;
|
||
|
border-radius: 5px;
|
||
|
border: 1px solid #e5e5e5;
|
||
|
overflow-x: auto;
|
||
|
}
|
||
|
|
||
|
table {
|
||
|
width: 100%;
|
||
|
border-collapse: collapse;
|
||
|
}
|
||
|
|
||
|
th,
|
||
|
td {
|
||
|
text-align: left;
|
||
|
padding: 5px 10px;
|
||
|
border-bottom: 1px solid #e5e5e5;
|
||
|
}
|
||
|
|
||
|
dt {
|
||
|
color: #444;
|
||
|
font-weight: 700;
|
||
|
}
|
||
|
|
||
|
th {
|
||
|
color: #444;
|
||
|
}
|
||
|
|
||
|
img {
|
||
|
max-width: 100%;
|
||
|
}
|
||
|
|
||
|
header {
|
||
|
width: 270px;
|
||
|
float: left;
|
||
|
position: fixed;
|
||
|
}
|
||
|
|
||
|
header ul {
|
||
|
list-style: none;
|
||
|
height: 40px;
|
||
|
|
||
|
padding: 0;
|
||
|
|
||
|
background: #eee;
|
||
|
background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
|
||
|
background: -webkit-gradient(
|
||
|
linear,
|
||
|
left top,
|
||
|
left bottom,
|
||
|
color-stop(0%, #f8f8f8),
|
||
|
color-stop(100%, #dddddd)
|
||
|
);
|
||
|
background: -webkit-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
|
||
|
background: -o-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
|
||
|
background: -ms-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
|
||
|
background: linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
|
||
|
|
||
|
border-radius: 5px;
|
||
|
border: 1px solid #d2d2d2;
|
||
|
box-shadow: inset #fff 0 1px 0, inset rgba(0, 0, 0, 0.03) 0 -1px 0;
|
||
|
width: 270px;
|
||
|
}
|
||
|
|
||
|
header li {
|
||
|
width: 89px;
|
||
|
float: left;
|
||
|
border-right: 1px solid #d2d2d2;
|
||
|
height: 40px;
|
||
|
}
|
||
|
|
||
|
header ul a {
|
||
|
line-height: 1;
|
||
|
font-size: 11px;
|
||
|
color: #999;
|
||
|
display: block;
|
||
|
text-align: center;
|
||
|
padding-top: 6px;
|
||
|
height: 40px;
|
||
|
}
|
||
|
|
||
|
strong {
|
||
|
color: #222;
|
||
|
font-weight: 700;
|
||
|
}
|
||
|
|
||
|
header ul li + li {
|
||
|
width: 88px;
|
||
|
border-left: 1px solid #fff;
|
||
|
}
|
||
|
|
||
|
header ul li + li + li {
|
||
|
border-right: none;
|
||
|
width: 89px;
|
||
|
}
|
||
|
|
||
|
header ul a strong {
|
||
|
font-size: 14px;
|
||
|
display: block;
|
||
|
color: #222;
|
||
|
}
|
||
|
|
||
|
section {
|
||
|
width: 500px;
|
||
|
float: right;
|
||
|
padding-bottom: 50px;
|
||
|
}
|
||
|
|
||
|
small {
|
||
|
font-size: 11px;
|
||
|
}
|
||
|
|
||
|
hr {
|
||
|
border: 0;
|
||
|
background: #e5e5e5;
|
||
|
height: 1px;
|
||
|
margin: 0 0 20px;
|
||
|
}
|
||
|
|
||
|
footer {
|
||
|
width: 270px;
|
||
|
float: left;
|
||
|
position: fixed;
|
||
|
bottom: 50px;
|
||
|
}
|
||
|
|
||
|
@media print, screen and (max-width: 960px) {
|
||
|
div.wrapper {
|
||
|
width: auto;
|
||
|
margin: 0;
|
||
|
}
|
||
|
|
||
|
header,
|
||
|
section,
|
||
|
footer {
|
||
|
float: none;
|
||
|
position: static;
|
||
|
width: auto;
|
||
|
}
|
||
|
|
||
|
header {
|
||
|
padding-right: 320px;
|
||
|
}
|
||
|
|
||
|
section {
|
||
|
border: 1px solid #e5e5e5;
|
||
|
border-width: 1px 0;
|
||
|
padding: 20px 0;
|
||
|
margin: 0 0 20px;
|
||
|
}
|
||
|
|
||
|
header a small {
|
||
|
display: inline;
|
||
|
}
|
||
|
|
||
|
header ul {
|
||
|
position: absolute;
|
||
|
right: 50px;
|
||
|
top: 52px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media print, screen and (max-width: 720px) {
|
||
|
body {
|
||
|
word-wrap: break-word;
|
||
|
}
|
||
|
|
||
|
header {
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
header ul,
|
||
|
header p.view {
|
||
|
position: static;
|
||
|
}
|
||
|
|
||
|
pre,
|
||
|
code {
|
||
|
word-wrap: normal;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media print, screen and (max-width: 480px) {
|
||
|
body {
|
||
|
padding: 15px;
|
||
|
}
|
||
|
|
||
|
header ul {
|
||
|
display: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media print {
|
||
|
body {
|
||
|
padding: 0.4in;
|
||
|
font-size: 12pt;
|
||
|
color: #444;
|
||
|
}
|
||
|
}
|