Update CSS for Bootstrap 3
This commit is contained in:
Seth Vargo
parent
b732c5a24c
commit
d5dc27ce72
|
|
@ -0,0 +1,52 @@
|
|||
@mixin button {
|
||||
font-family: $mono;
|
||||
height: $button-height;
|
||||
line-height: $button-height;
|
||||
background-color: transparent;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
display: block;
|
||||
padding: 0 30px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
@include rounded(5px);
|
||||
|
||||
&.spaced {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
color: $green;
|
||||
border-color: $green;
|
||||
|
||||
&:hover {
|
||||
background-color: transparentize($green, .7);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: transparentize($green, .5);
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: $black;
|
||||
border-color: $black;
|
||||
|
||||
&:hover {
|
||||
background-color: transparentize($black, .9);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: transparentize($black, .7);
|
||||
}
|
||||
}
|
||||
|
||||
&.inline {
|
||||
margin: auto $baseline;
|
||||
@include respond-to(mobile) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: $baseline 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
.container-xs-height {
|
||||
display:table;
|
||||
padding-left:0px;
|
||||
padding-right:0px;
|
||||
}
|
||||
|
||||
|
||||
.col-xs-height {
|
||||
display:table-cell;
|
||||
float:none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container-sm-height {
|
||||
display:table;
|
||||
padding-left:0px;
|
||||
padding-right:0px;
|
||||
}
|
||||
|
||||
.col-sm-height {
|
||||
display:table-cell;
|
||||
float:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.container-md-height {
|
||||
display:table;
|
||||
padding-left:0px;
|
||||
padding-right:0px;
|
||||
}
|
||||
|
||||
.col-md-height {
|
||||
display:table-cell;
|
||||
float:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container-lg-height {
|
||||
display:table;
|
||||
padding-left:0px;
|
||||
padding-right:0px;
|
||||
}
|
||||
|
||||
.col-lg-height {
|
||||
display:table-cell;
|
||||
float:none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,323 +1,332 @@
|
|||
header .header {
|
||||
height: 200px;
|
||||
background: #000000;
|
||||
height: 200px;
|
||||
background: #000000;
|
||||
|
||||
h1 {
|
||||
margin-bottom: -8px;
|
||||
margin-top: 60px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: -8px;
|
||||
margin-top: 60px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 20px;
|
||||
}
|
||||
span {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
height: $hero-height + 100px;
|
||||
background: #000000 image-url('hero_image.jpg') no-repeat;
|
||||
background-position: 35px -40px;
|
||||
background-size: 100%;
|
||||
|
||||
h2 {
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
@media (max-width: $screen-md-max) {
|
||||
height: $hero-height;
|
||||
background: #000000 image-url('hero_image.jpg') no-repeat 35px -40px;
|
||||
background-size: 960px 467px;
|
||||
|
||||
h2 {
|
||||
margin-top: 70px;
|
||||
font-size: 2.1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $screen-sm-max) {
|
||||
height: auto;
|
||||
background: none;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.belt {
|
||||
&.download {
|
||||
background-color: $white;
|
||||
@extend .padded-sm;
|
||||
&.download {
|
||||
background-color: $white;
|
||||
@extend .padded-sm;
|
||||
}
|
||||
|
||||
.download-container {
|
||||
background: image-url('down_arrow.png') no-repeat top left;
|
||||
display: inline-block;
|
||||
min-height: 73px;
|
||||
margin: 0 auto;
|
||||
padding-left: 100px;
|
||||
|
||||
@media (max-width: $screen-sm) {
|
||||
background: none;
|
||||
font-size: 75%;
|
||||
min-height: 50px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.download-container {
|
||||
background: image-url('down_arrow.png') no-repeat top left;
|
||||
display: inline-block;
|
||||
min-height: 73px;
|
||||
margin: 0 auto;
|
||||
padding-left: 100px;
|
||||
.download-row {
|
||||
text-align: center;
|
||||
|
||||
.small {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.download-row {
|
||||
text-align: center;
|
||||
h2 {
|
||||
font-family: $serif;
|
||||
font-size: 44px;
|
||||
color: #7bc6b1;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 3px;
|
||||
line-height: 1.0;
|
||||
white-space: nowrap;
|
||||
|
||||
.small {
|
||||
text-align: left;
|
||||
}
|
||||
&:hover {
|
||||
color: $dark-background;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: $serif;
|
||||
font-size: 44px;
|
||||
color: #7bc6b1;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 3px;
|
||||
line-height: 1.0;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: $dark-background;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: $gray-dark;
|
||||
}
|
||||
span {
|
||||
color: $gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.downloads {
|
||||
margin-top: 20px;
|
||||
|
||||
.description {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.download {
|
||||
border-bottom: 1px solid #b2b2b2;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.details {
|
||||
padding-left: 95px;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
&:after {
|
||||
content: " | ";
|
||||
}
|
||||
|
||||
&:last-child:after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 22px;
|
||||
color: darken($green, 15%);
|
||||
|
||||
&:hover {
|
||||
color: darken($green, 30%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: darken($green, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
img {
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
.os-name {
|
||||
font-size: 40px;
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.poweredby {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.description {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.download {
|
||||
border-bottom: 1px solid #b2b2b2;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.details {
|
||||
padding-left: 95px;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
&:after {
|
||||
content: " | ";
|
||||
}
|
||||
|
||||
&:last-child:after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 22px;
|
||||
color: darken($green, 15%);
|
||||
|
||||
&:hover {
|
||||
color: darken($green, 30%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: darken($green, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
img {
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
.os-name {
|
||||
font-size: 40px;
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.poweredby {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 122px;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 122px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.marketting {
|
||||
p {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
text-align: justify;
|
||||
}
|
||||
p {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-wrapper {
|
||||
clear: right;
|
||||
.docs-body {
|
||||
@extend .white-background;
|
||||
|
||||
.docs-body {
|
||||
float: left;
|
||||
width: 70%;
|
||||
max-width: 760px;
|
||||
display: block;
|
||||
@extend .white-background;
|
||||
.docs-content {
|
||||
padding: $docs-top-margin 80px;
|
||||
max-width: 960px;
|
||||
display: block;
|
||||
|
||||
.docs-content {
|
||||
padding: $docs-top-margin 80px;
|
||||
display: block;
|
||||
code {
|
||||
background-color: #000;
|
||||
border: 0;
|
||||
color: #b1d631;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #000;
|
||||
border: 0;
|
||||
color: #b1d631;
|
||||
font-size: 14px;
|
||||
}
|
||||
a {
|
||||
color: darken($green, 15%);
|
||||
|
||||
a {
|
||||
color: darken($green, 15%);
|
||||
|
||||
&:hover {
|
||||
color: darken($green, 30%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: darken($green, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style-position: inside;
|
||||
margin-top: $baseline;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
|
||||
li {
|
||||
font-family: $serif;
|
||||
font-size: 17px;
|
||||
line-height: (30/17) !important;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
div.alert {
|
||||
font-family: $serif;
|
||||
font-size: 17px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 1px;
|
||||
margin-left: -80px;
|
||||
margin-right: -80px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
padding-left: 80px;
|
||||
padding-right: 80px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
margin-left: -80px;
|
||||
margin-right: -80px;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
padding-left: 80px;
|
||||
padding-right: 80px;
|
||||
border-radius: 0;
|
||||
}
|
||||
&:hover {
|
||||
color: darken($green, 30%);
|
||||
}
|
||||
|
||||
.docs-background {
|
||||
@extend .white-background;
|
||||
height: 100%;
|
||||
width: 70%;
|
||||
max-width: 760px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: $sidebar-width;
|
||||
z-index: -9999;
|
||||
&:active {
|
||||
color: darken($green, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top: $docs-top-margin;
|
||||
}
|
||||
ul, ol {
|
||||
list-style-position: inside;
|
||||
margin-top: $baseline;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
line-height: (25/20);
|
||||
text-transform: uppercase;
|
||||
li {
|
||||
font-family: $serif;
|
||||
font-size: 17px;
|
||||
line-height: (30/17) !important;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: $baseline * 2;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
ul {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: $baseline;
|
||||
text-transform: capitalize;
|
||||
font-size: 26px;
|
||||
}
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
div.alert {
|
||||
font-family: $serif;
|
||||
font-size: 17px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 1px;
|
||||
margin-left: -95px;
|
||||
margin-right: -95px;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
padding-left: 80px;
|
||||
padding-right: 80px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
margin-left: -95px;
|
||||
margin-right: -95px;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
padding-left: 80px;
|
||||
padding-right: 80px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top: $docs-top-margin;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
line-height: (25/20);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: $baseline * 2;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: $baseline;
|
||||
text-transform: capitalize;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
$border: 1px solid $gray-mid;
|
||||
$border: 1px solid $gray-mid;
|
||||
height: $nav-height;
|
||||
border-top: $border;
|
||||
font-size: 20px;
|
||||
margin: 0 -15px -40px -15px;
|
||||
display: block;
|
||||
|
||||
h4 {
|
||||
display: inline-block;
|
||||
margin-top: ($baseline * 1.7);
|
||||
margin-left: $baseline;
|
||||
|
||||
@include respond-to(mobile) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@include respond-to(mobile) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.previous-section,
|
||||
.next-section {
|
||||
height: $nav-height;
|
||||
border-top: $border;
|
||||
font-size: 20px;
|
||||
margin: 0px;
|
||||
display: block;
|
||||
|
||||
h4 {
|
||||
display: inline-block;
|
||||
margin-top: ($baseline * 1.7);
|
||||
margin-left: $baseline;
|
||||
|
||||
@include respond-to(mobile) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: transparentize($gray-light, .7);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
|
||||
@include respond-to(mobile) {
|
||||
display: block;
|
||||
}
|
||||
.previous-section {
|
||||
width: $nav-height;
|
||||
border-right: $border;
|
||||
float: left;
|
||||
background: $white image-url('arrow-left.png') no-repeat center center;
|
||||
@include respond-to(mobile) {
|
||||
width: 50%;
|
||||
background-position: left center;
|
||||
}
|
||||
}
|
||||
|
||||
.previous-section,
|
||||
.next-section {
|
||||
height: $nav-height;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
background-color: transparentize($gray-light, .7);
|
||||
}
|
||||
}
|
||||
|
||||
.previous-section {
|
||||
width: $nav-height;
|
||||
border-right: $border;
|
||||
float: left;
|
||||
background: $white image-url('arrow-left.png') no-repeat center center;
|
||||
@include respond-to(mobile) {
|
||||
width: 50%;
|
||||
background-position: left center;
|
||||
}
|
||||
}
|
||||
|
||||
.next-section {
|
||||
background: $white image-url('arrow-right.png') no-repeat center right;
|
||||
}
|
||||
.next-section {
|
||||
background: $white image-url('arrow-right.png') no-repeat center right;
|
||||
}
|
||||
}
|
||||
|
||||
.people {
|
||||
margin-top: 30px;
|
||||
margin-top: 30px;
|
||||
|
||||
.person {
|
||||
margin-bottom: 30px;
|
||||
.person {
|
||||
margin-bottom: 30px;
|
||||
|
||||
h3 {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.bio {
|
||||
padding-left: 150px;
|
||||
}
|
||||
h3 {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.bio {
|
||||
padding-left: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,72 +1,70 @@
|
|||
footer {
|
||||
height: $nav-height;
|
||||
max-height: $nav-height;
|
||||
background-color: $black !important;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
color: $white;
|
||||
font-family: $sans;
|
||||
@include respond-to(mobile) {
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
height: $nav-height;
|
||||
max-height: $nav-height;
|
||||
background-color: $black !important;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
color: $white;
|
||||
font-family: $sans;
|
||||
@include respond-to(mobile) {
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 40px;
|
||||
@include respond-to(mobile) {
|
||||
margin-left: $baseline;
|
||||
margin-top: $baseline;
|
||||
}
|
||||
margin-top: 40px;
|
||||
@include respond-to(mobile) {
|
||||
margin-left: $baseline;
|
||||
margin-top: $baseline;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
margin-right: 50px;
|
||||
@include respond-to(mobile) {
|
||||
margin-right: 20px;
|
||||
display: list-item;
|
||||
}
|
||||
}
|
||||
display: inline;
|
||||
margin-right: 50px;
|
||||
@include respond-to(mobile) {
|
||||
margin-right: 20px;
|
||||
display: list-item;
|
||||
}
|
||||
}
|
||||
|
||||
.hashi-logo {
|
||||
background: image-url('logo_footer.png') no-repeat center top;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background-size: 37px 40px;
|
||||
text-indent: -999999px;
|
||||
display: inline-block;
|
||||
margin-top: -10px;
|
||||
margin-right: 0;
|
||||
@include respond-to(mobile) {
|
||||
margin-top: -50px;
|
||||
margin-right: $baseline;
|
||||
}
|
||||
background: image-url('logo_footer.png') no-repeat center top;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background-size: 37px 40px;
|
||||
text-indent: -999999px;
|
||||
display: inline-block;
|
||||
margin-top: -10px;
|
||||
margin-right: 0;
|
||||
@include respond-to(mobile) {
|
||||
margin-top: -50px;
|
||||
margin-right: $baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: $green;
|
||||
color: $green;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.page-wrap {
|
||||
min-height: 100%;
|
||||
/* equal to footer height */
|
||||
margin-bottom: -($nav-height);
|
||||
min-height: 100%;
|
||||
/* equal to footer height */
|
||||
margin-bottom: -($nav-height);
|
||||
}
|
||||
|
||||
.page-wrap:after {
|
||||
content: "";
|
||||
display: block;
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-wrap:after {
|
||||
/* .push must be the same height as footer */
|
||||
height: $nav-height;
|
||||
/* .push must be the same height as footer */
|
||||
height: $nav-height;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ $base-line-height: 20px;
|
|||
$button-height: 60px;
|
||||
|
||||
.center {
|
||||
margin: 0 auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.padded-lg {padding: ($baseline * 2) 0;}
|
||||
|
|
@ -44,17 +44,17 @@ $serif: 'myriad-pro', helvetica, Georgia, serif;
|
|||
$sans: 'HeimatStencil-SemiBold', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
$mono: 'Inconsolata', 'courier new', courier, mono-space;
|
||||
|
||||
.serif {font-family: $serif;}
|
||||
.sans {font-family: $sans;}
|
||||
.mono {font-family: $mono;}
|
||||
.serif { font-family: $serif; }
|
||||
.sans { font-family: $sans; }
|
||||
.mono { font-family: $mono; }
|
||||
|
||||
.text-center {text-align: center !important;}
|
||||
.text-left {text-align: left !important;}
|
||||
.text-right {text-align: right !important;}
|
||||
.text-center { text-align: center !important; }
|
||||
.text-left { text-align: left !important; }
|
||||
.text-right { text-align: right !important; }
|
||||
|
||||
.text-green {color: $green;}
|
||||
.text-green { color: $green; }
|
||||
|
||||
.uppercase {text-transform: uppercase !important;}
|
||||
.uppercase { text-transform: uppercase !important; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'HeimatStencil-SemiBold';
|
||||
|
|
@ -65,47 +65,45 @@ $mono: 'Inconsolata', 'courier new', courier, mono-space;
|
|||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
//color
|
||||
.dark-background {
|
||||
background-color: #000;
|
||||
color: $white;
|
||||
background-color: #000;
|
||||
color: $white;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
&:hover {
|
||||
color: $green;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: darken($green, 30%);
|
||||
color: darken($green, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.white-background {
|
||||
background-color: $white;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
|
||||
//elements
|
||||
.divider {
|
||||
background: image-url('divider.png') no-repeat center bottom;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
background-size: 70px 70px;
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: image-url('divider.png') no-repeat center bottom;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
background-size: 70px 70px;
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.packer {
|
||||
color: $orange;
|
||||
font-size: 20px;
|
||||
color: $orange;
|
||||
font-size: 20px;
|
||||
|
||||
a:hover,
|
||||
a:active,
|
||||
a:visited {
|
||||
color: inherit;
|
||||
a:hover, a:active, a:visited {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -141,39 +139,39 @@ $break-lg: 980px;
|
|||
|
||||
/* utlities */
|
||||
.d {
|
||||
border-bottom: 1px solid $red;
|
||||
border-top: 1px solid $red;
|
||||
background-color: transparentize($red, .9);
|
||||
border-bottom: 1px solid $red;
|
||||
border-top: 1px solid $red;
|
||||
background-color: transparentize($red, .9);
|
||||
}
|
||||
|
||||
.hyphenate {
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
.add-transition {
|
||||
transition: all .1s ease-in-out;
|
||||
-moz-transition: all .1s ease-in-out;
|
||||
-webkit-transition: all .1s ease-in-out;
|
||||
-o-transition: all .1s ease-in-out;
|
||||
-webkit-transition: all .1s ease-in-out;
|
||||
-moz-transition: all .1s ease-in-out;
|
||||
-o-transition: all .1s ease-in-out;
|
||||
transition: all .1s ease-in-out;
|
||||
}
|
||||
|
||||
@mixin opacity($opacity) {
|
||||
-khtml-opacity: $opacity;
|
||||
-moz-opacity: $opacity;
|
||||
opacity: $opacity;
|
||||
-khtml-opacity: $opacity;
|
||||
-moz-opacity: $opacity;
|
||||
opacity: $opacity;
|
||||
}
|
||||
|
||||
@mixin transform-scale($value) {
|
||||
-moz-transform: scale($value);
|
||||
-webkit-transform: scale($value);
|
||||
transform: scale($value);
|
||||
-webkit-transform: scale($value);
|
||||
-moz-transform: scale($value);
|
||||
transform: scale($value);
|
||||
}
|
||||
|
||||
@mixin transition($type, $speed, $easing) {
|
||||
|
|
@ -184,8 +182,8 @@ opacity: $opacity;
|
|||
}
|
||||
|
||||
@mixin rounded($radius) {
|
||||
-moz-border-radius: $radius;
|
||||
-webkit-border-radius: $radius;
|
||||
-khtml-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
-khtml-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,70 @@
|
|||
nav {
|
||||
height: $nav-height;
|
||||
padding: $baseline 0;
|
||||
height: $nav-height;
|
||||
height: $nav-height;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-width: 940px;
|
||||
text-transform: uppercase;
|
||||
color: $white;
|
||||
font-family: $sans;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid $border-dark;
|
||||
|
||||
ul {
|
||||
margin-top: ($baseline * 2);
|
||||
margin-left: $nav-height;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.packer-logo {
|
||||
background: image-url('logo_nav.png') no-repeat center top;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background-size: 34px 50px;
|
||||
text-indent: -999999px;
|
||||
display: inline-block;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-md-min) {
|
||||
ul {
|
||||
li {
|
||||
&.featured {
|
||||
margin: -20px 0 0 10px;
|
||||
float: right;
|
||||
|
||||
a {
|
||||
@include button;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $screen-sm-max) {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-width: 940px;
|
||||
text-transform: uppercase;
|
||||
color: $white;
|
||||
font-family: $sans;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid $border-dark;
|
||||
min-width: auto;
|
||||
|
||||
ul {
|
||||
margin-top: ($baseline * 2);
|
||||
margin-left: $nav-height;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 50px;
|
||||
}
|
||||
margin: 1em 0 1em 80px;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.packer-logo {
|
||||
background: image-url('logo_nav.png') no-repeat center top;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background-size: 34px 50px;
|
||||
text-indent: -999999px;
|
||||
display: inline-block;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
@media (max-width: $screen-xs-max) {
|
||||
button {
|
||||
margin-top: $baseline;
|
||||
}
|
||||
|
||||
} //nav
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,23 @@
|
|||
form,
|
||||
input,
|
||||
textarea,
|
||||
button {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
-khtml-border-radius: 0;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
font-family: $mono;
|
||||
font-size: $base-font-size;
|
||||
line-height: 1.0;
|
||||
color: inherit;
|
||||
form, input, textarea, button {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
-khtml-border-radius: 0;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
font-family: $mono;
|
||||
font-size: $base-font-size;
|
||||
line-height: 1.0;
|
||||
color: inherit;
|
||||
|
||||
&:focus {
|
||||
line-height: 1.0;
|
||||
box-shadow: none !important;
|
||||
outline: none;
|
||||
vertical-align: middle;
|
||||
|
||||
line-height: 1.0;
|
||||
box-shadow: none !important;
|
||||
outline: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,49 +1,37 @@
|
|||
.sidebar {
|
||||
$border: 1px solid $gray-dark;
|
||||
font-size: 16px;
|
||||
font-family: $mono;
|
||||
color: $gray-light;
|
||||
width: $sidebar-width;
|
||||
float: left;
|
||||
background-color: $sidebar-background-color;
|
||||
height: 100%;
|
||||
$border: 1px solid $gray-dark;
|
||||
font-size: 16px;
|
||||
font-family: $mono;
|
||||
color: $gray-light;
|
||||
background-color: $sidebar-background-color;
|
||||
min-height: 100%;
|
||||
|
||||
h2 {
|
||||
color: $green;
|
||||
text-transform: uppercase;
|
||||
padding: $docs-top-margin 20px 0;
|
||||
h2 {
|
||||
color: $green;
|
||||
text-transform: uppercase;
|
||||
padding: $docs-top-margin 20px 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: $white;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
ul {
|
||||
@extend .padded-sm;
|
||||
|
||||
li {
|
||||
border-bottom: $border;
|
||||
padding: 15px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: $white;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
ul {
|
||||
@extend .padded-sm;
|
||||
|
||||
li {
|
||||
border-bottom: $border;
|
||||
padding: 15px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
li > * {
|
||||
padding: auto 20px;
|
||||
margin-left: 20px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-background {
|
||||
background-color: $sidebar-background-color;
|
||||
height: 100%;
|
||||
width: $sidebar-width;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -9999;
|
||||
li > * {
|
||||
padding: auto 20px;
|
||||
margin-left: 20px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,241 +1,173 @@
|
|||
* {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $background;
|
||||
font-family: $sans;
|
||||
letter-spacing: 1px;
|
||||
font-size: $base-font-size;
|
||||
line-height: $base-line-height;
|
||||
background-color: $background;
|
||||
font-family: $sans;
|
||||
letter-spacing: 1px;
|
||||
font-size: $base-font-size;
|
||||
line-height: $base-line-height;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
letter-spacing: 2px;
|
||||
font-weight: normal;
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
letter-spacing: 2px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: $sans;
|
||||
font-size: 70px;
|
||||
line-height: (80/70);
|
||||
@include respond-to(mobile) {
|
||||
font-size: 50px;
|
||||
line-height: (50/45);
|
||||
}
|
||||
font-family: $sans;
|
||||
font-size: 70px;
|
||||
line-height: (80/70);
|
||||
@include respond-to(mobile) {
|
||||
font-size: 50px;
|
||||
line-height: (50/45);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: $sans;
|
||||
font-size: 40px;
|
||||
line-height: (50/40);
|
||||
font-family: $sans;
|
||||
font-size: 40px;
|
||||
line-height: (50/40);
|
||||
|
||||
&.has-dividers {
|
||||
//overflow: auto !important;
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
@include respond-to(mobile) {
|
||||
display: block;
|
||||
}
|
||||
&.has-dividers {
|
||||
//overflow: auto !important;
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
@include respond-to(mobile) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: $sans;
|
||||
font-size: 20px;
|
||||
line-height: (30/20);
|
||||
font-family: $sans;
|
||||
font-size: 20px;
|
||||
line-height: (30/20);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: $mono;
|
||||
font-size: 20px;
|
||||
line-height: (30/20);
|
||||
font-family: $mono;
|
||||
font-size: 20px;
|
||||
line-height: (30/20);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: $sans;
|
||||
font-size: 16px;
|
||||
line-height: (22/16);
|
||||
font-family: $sans;
|
||||
font-size: 16px;
|
||||
line-height: (22/16);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-family: $mono;
|
||||
font-size: 16px;
|
||||
line-height: (22/16);
|
||||
font-family: $mono;
|
||||
font-size: 16px;
|
||||
line-height: (22/16);
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: $serif;
|
||||
font-size: 17px;
|
||||
line-height: (30/17);
|
||||
letter-spacing: 1px;
|
||||
font-family: $serif;
|
||||
font-size: 17px;
|
||||
line-height: (30/17);
|
||||
letter-spacing: 1px;
|
||||
|
||||
&.large-text {
|
||||
font-size: 20px;
|
||||
line-height: (35/20);
|
||||
}
|
||||
&.large-text {
|
||||
font-size: 20px;
|
||||
line-height: (35/20);
|
||||
}
|
||||
|
||||
a {
|
||||
color: $green;
|
||||
&:hover {
|
||||
color: darken($green, 30%);
|
||||
}
|
||||
&:active {
|
||||
color: darken($green, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
a {
|
||||
color: $green;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
|
||||
color: darken($green, 30%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
color: darken($green, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
font-size: 18px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
dd {
|
||||
font-family: $serif;
|
||||
font-size: 17px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 30px;
|
||||
font-family: $serif;
|
||||
font-size: 17px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
ul, ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: 13px;
|
||||
small, .small {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: ($baseline * 2) 0;
|
||||
border-color: $gray-mid;
|
||||
border-bottom: 0;
|
||||
margin: ($baseline * 2) 0;
|
||||
border-color: $gray-mid;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
margin: $baseline 0;
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
margin: $baseline 0;
|
||||
}
|
||||
|
||||
table {
|
||||
font-family: $mono;
|
||||
margin: ($baseline * 2) 0;
|
||||
color: $gray-dark;
|
||||
font-family: $mono;
|
||||
margin: ($baseline * 2) 0;
|
||||
color: $gray-dark;
|
||||
|
||||
th {
|
||||
color: $black;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
th {
|
||||
color: $black;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #ffff00; /* Safari */
|
||||
color: $black;
|
||||
background: #ffff00; /* Safari */
|
||||
color: $black;
|
||||
}
|
||||
::-moz-selection {
|
||||
background: #ffff00; /* Firefox */
|
||||
color: $black;
|
||||
}
|
||||
|
||||
input {
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
height: $button-height;
|
||||
background-color: transparent;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
padding: 0 30px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
@include rounded(5px);
|
||||
|
||||
&.spaced {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
color: $green;
|
||||
border-color: $green;
|
||||
|
||||
&:hover {
|
||||
background-color: transparentize($green, .7);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: transparentize($green, .5);
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: $black;
|
||||
border-color: $black;
|
||||
|
||||
&:hover {
|
||||
background-color: transparentize($black, .9);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: transparentize($black, .7);
|
||||
}
|
||||
}
|
||||
|
||||
&.inline {
|
||||
margin: auto $baseline;
|
||||
@include respond-to(mobile) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: $baseline 0;
|
||||
}
|
||||
}
|
||||
background: #ffff00; /* Firefox */
|
||||
color: $black;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
@import "bootstrap-sprockets";
|
||||
@import "bootstrap";
|
||||
|
||||
@import url("http://fonts.googleapis.com/css?family=Inconsolata");
|
||||
|
||||
@import "_helpers";
|
||||
@import "_reset";
|
||||
|
||||
@import "_columns";
|
||||
@import "_buttons";
|
||||
@import "_styles";
|
||||
@import "_nav";
|
||||
@import "_footer";
|
||||
@import "_components";
|
||||
@import "_sidebar";
|
||||
Loading…
Reference in New Issue