iSharkFly-Docs/packer-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update CSS for Bootstrap 3

Browse Source
This commit is contained in:
Seth Vargo 2014-10-20 13:55:50 -04:00
parent b732c5a24c
commit d5dc27ce72
11 changed files with 692 additions and 626 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
website/source/assets/javascripts/.keep Normal file
View File

52
website/source/assets/stylesheets/_buttons.scss Normal file
View File

@ -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;
}
}
}

50
website/source/assets/stylesheets/_columns.scss Normal file
View File

@ -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;
}
}

533
website/source/assets/stylesheets/_components.scss
View File

@ -1,323 +1,332 @@
header .header { header .header {
height: 200px; height: 200px;
background: #000000; background: #000000;
h1 { h1 {
margin-bottom: -8px; margin-bottom: -8px;
margin-top: 60px; margin-top: 60px;
text-transform: uppercase; text-transform: uppercase;
} }
span { span {
font-size: 20px; font-size: 20px;
} }
} }
.hero { .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; height: $hero-height;
background: #000000 image-url('hero_image.jpg') no-repeat 35px -40px;
background-size: 960px 467px;
h2 { h2 {
margin-top: 70px; font-size: 2.1em;
} }
}
@media (max-width: $screen-sm-max) {
height: auto;
background: none;
h2 {
margin: 0;
padding: 1em;
}
}
} }
.belt { .belt {
&.download { &.download {
background-color: $white; background-color: $white;
@extend .padded-sm; @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 { .download-row {
background: image-url('down_arrow.png') no-repeat top left; text-align: center;
display: inline-block;
min-height: 73px; .small {
margin: 0 auto; text-align: left;
padding-left: 100px;
} }
}
.download-row { h2 {
text-align: center; 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 { &:hover {
text-align: left; color: $dark-background;
}
} }
}
h2 { span {
font-family: $serif; color: $gray-dark;
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;
}
} }
.downloads { .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-top: 20px;
margin-bottom: 20px;
.description { img {
margin-bottom: 20px; display: block;
} margin: 0 auto;
width: 122px;
.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;
}
} }
}
} }
.marketting { .marketting {
p { p {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
text-align: justify; text-align: justify;
} }
} }
.docs-wrapper { .docs-wrapper {
clear: right; .docs-body {
@extend .white-background;
.docs-body { .docs-content {
float: left; padding: $docs-top-margin 80px;
width: 70%; max-width: 960px;
max-width: 760px; display: block;
display: block;
@extend .white-background;
.docs-content { code {
padding: $docs-top-margin 80px; background-color: #000;
display: block; border: 0;
color: #b1d631;
font-size: 14px;
}
code { a {
background-color: #000; color: darken($green, 15%);
border: 0;
color: #b1d631;
font-size: 14px;
}
a { &:hover {
color: darken($green, 15%); color: darken($green, 30%);
&: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;
}
} }
.docs-background { &:active {
@extend .white-background; color: darken($green, 50%);
height: 100%;
width: 70%;
max-width: 760px;
position: fixed;
top: 0;
left: $sidebar-width;
z-index: -9999;
} }
}
section { ul, ol {
margin-top: $docs-top-margin; list-style-position: inside;
} margin-top: $baseline;
margin-left: 20px;
margin-right: 20px;
h1 { li {
font-size: 40px; font-family: $serif;
line-height: (25/20); font-size: 17px;
text-transform: uppercase; line-height: (30/17) !important;
margin-bottom: $baseline;
} }
}
h2 { ul {
margin-top: $baseline * 2; list-style-type: circle;
text-transform: capitalize; }
}
h3 { ol {
margin-top: $baseline; list-style-type: decimal;
text-transform: capitalize; }
font-size: 26px;
} 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 { .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; height: $nav-height;
border-top: $border; display: block;
font-size: 20px;
margin: 0px;
h4 { &:hover {
display: inline-block; background-color: transparentize($gray-light, .7);
margin-top: ($baseline * 1.7);
margin-left: $baseline;
@include respond-to(mobile) {
margin-top: 10px;
}
} }
}
span { .previous-section {
width: $nav-height;
@include respond-to(mobile) { border-right: $border;
display: block; 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 {
.next-section { background: $white image-url('arrow-right.png') no-repeat center right;
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;
}
} }
.people { .people {
margin-top: 30px; margin-top: 30px;
.person { .person {
margin-bottom: 30px; margin-bottom: 30px;
h3 { h3 {
text-transform: none; text-transform: none;
}
.bio {
padding-left: 150px;
}
} }
.bio {
padding-left: 150px;
}
}
} }

92
website/source/assets/stylesheets/_footer.scss
View File

@ -1,72 +1,70 @@
footer { footer {
height: $nav-height; height: $nav-height;
max-height: $nav-height; max-height: $nav-height;
background-color: $black !important; background-color: $black !important;
padding: 0; padding: 0;
margin: 0; margin: 0;
text-transform: uppercase; text-transform: uppercase;
color: $white; color: $white;
font-family: $sans; font-family: $sans;
@include respond-to(mobile) { @include respond-to(mobile) {
margin-right: -20px; margin-right: -20px;
margin-left: -20px; margin-left: -20px;
} }
ul { ul {
margin-top: 40px; margin-top: 40px;
@include respond-to(mobile) { @include respond-to(mobile) {
margin-left: $baseline; margin-left: $baseline;
margin-top: $baseline; margin-top: $baseline;
} }
li { li {
display: inline; display: inline;
margin-right: 50px; margin-right: 50px;
@include respond-to(mobile) { @include respond-to(mobile) {
margin-right: 20px; margin-right: 20px;
display: list-item; display: list-item;
} }
} }
.hashi-logo { .hashi-logo {
background: image-url('logo_footer.png') no-repeat center top; background: image-url('logo_footer.png') no-repeat center top;
height: 40px; height: 40px;
width: 40px; width: 40px;
background-size: 37px 40px; background-size: 37px 40px;
text-indent: -999999px; text-indent: -999999px;
display: inline-block; display: inline-block;
margin-top: -10px; margin-top: -10px;
margin-right: 0; margin-right: 0;
@include respond-to(mobile) { @include respond-to(mobile) {
margin-top: -50px; margin-top: -50px;
margin-right: $baseline; margin-right: $baseline;
} }
} }
} }
.active { .active {
color: $green; color: $green;
} }
button { button {
margin-top: 20px; margin-top: 20px;
} }
} }
.page-wrap { .page-wrap {
min-height: 100%; min-height: 100%;
/* equal to footer height */ /* equal to footer height */
margin-bottom: -($nav-height); margin-bottom: -($nav-height);
} }
.page-wrap:after { .page-wrap:after {
content: ""; content: "";
display: block; display: block;
} }
.page-wrap:after { .page-wrap:after {
/* .push must be the same height as footer */ /* .push must be the same height as footer */
height: $nav-height; height: $nav-height;
} }

104
website/source/assets/stylesheets/_helpers.scss
View File

@ -23,7 +23,7 @@ $base-line-height: 20px;
$button-height: 60px; $button-height: 60px;
.center { .center {
margin: 0 auto; margin: 0 auto;
} }
.padded-lg {padding: ($baseline * 2) 0;} .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; $sans: 'HeimatStencil-SemiBold', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$mono: 'Inconsolata', 'courier new', courier, mono-space; $mono: 'Inconsolata', 'courier new', courier, mono-space;
.serif {font-family: $serif;} .serif { font-family: $serif; }
.sans {font-family: $sans;} .sans { font-family: $sans; }
.mono {font-family: $mono;} .mono { font-family: $mono; }
.text-center {text-align: center !important;} .text-center { text-align: center !important; }
.text-left {text-align: left !important;} .text-left { text-align: left !important; }
.text-right {text-align: right !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-face {
font-family: 'HeimatStencil-SemiBold'; font-family: 'HeimatStencil-SemiBold';
@ -65,47 +65,45 @@ $mono: 'Inconsolata', 'courier new', courier, mono-space;
font-style: normal; font-style: normal;
} }
//color //color
.dark-background { .dark-background {
background-color: #000; background-color: #000;
color: $white; color: $white;
a { a {
color: inherit; color: inherit;
&:hover {
color: $green; &:hover {
color: $green;
} }
&:active { &:active {
color: darken($green, 30%); color: darken($green, 30%);
} }
} }
} }
.white-background { .white-background {
background-color: $white; background-color: $white;
} }
//elements //elements
.divider { .divider {
background: image-url('divider.png') no-repeat center bottom; background: image-url('divider.png') no-repeat center bottom;
height: 70px; height: 70px;
width: 70px; width: 70px;
background-size: 70px 70px; background-size: 70px 70px;
display: table-cell; display: table-cell;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }
.packer { .packer {
color: $orange; color: $orange;
font-size: 20px; font-size: 20px;
a:hover, a:hover, a:active, a:visited {
a:active, color: inherit;
a:visited {
color: inherit;
} }
} }
@ -141,39 +139,39 @@ $break-lg: 980px;
/* utlities */ /* utlities */
.d { .d {
border-bottom: 1px solid $red; border-bottom: 1px solid $red;
border-top: 1px solid $red; border-top: 1px solid $red;
background-color: transparentize($red, .9); background-color: transparentize($red, .9);
} }
.hyphenate { .hyphenate {
-webkit-hyphens: auto; -webkit-hyphens: auto;
-moz-hyphens: auto; -moz-hyphens: auto;
hyphens: auto; hyphens: auto;
} }
.full-width { .full-width {
margin-right: -20px; margin-right: -20px;
margin-left: -20px; margin-left: -20px;
} }
.add-transition { .add-transition {
transition: all .1s ease-in-out; -webkit-transition: all .1s ease-in-out;
-moz-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;
-o-transition: all .1s ease-in-out; transition: all .1s ease-in-out;
} }
@mixin opacity($opacity) { @mixin opacity($opacity) {
-khtml-opacity: $opacity; -khtml-opacity: $opacity;
-moz-opacity: $opacity; -moz-opacity: $opacity;
opacity: $opacity; opacity: $opacity;
} }
@mixin transform-scale($value) { @mixin transform-scale($value) {
-moz-transform: scale($value); -webkit-transform: scale($value);
-webkit-transform: scale($value); -moz-transform: scale($value);
transform: scale($value); transform: scale($value);
} }
@mixin transition($type, $speed, $easing) { @mixin transition($type, $speed, $easing) {
@ -184,8 +182,8 @@ opacity: $opacity;
} }
@mixin rounded($radius) { @mixin rounded($radius) {
-moz-border-radius: $radius; -webkit-border-radius: $radius;
-webkit-border-radius: $radius; -moz-border-radius: $radius;
-khtml-border-radius: $radius; -khtml-border-radius: $radius;
border-radius: $radius; border-radius: $radius;
} }

94
website/source/assets/stylesheets/_nav.scss
View File

@ -1,42 +1,70 @@
nav { nav {
height: $nav-height; height: $nav-height;
padding: $baseline 0; 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; padding: 0;
margin: 0; min-width: auto;
min-width: 940px;
text-transform: uppercase;
color: $white;
font-family: $sans;
font-size: 16px;
border-bottom: 1px solid $border-dark;
ul { ul {
margin-top: ($baseline * 2); margin: 1em 0 1em 80px;
margin-left: $nav-height;
li {
display: inline-block;
margin-right: 50px;
}
li {
display: block;
margin: 0;
padding: 1em;
}
} }
}
.packer-logo { @media (max-width: $screen-xs-max) {
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;
}
button { button {
margin-top: $baseline;
}
} //nav }
}
}

44
website/source/assets/stylesheets/_reset.scss
View File

@ -1,27 +1,23 @@
form, form, input, textarea, button {
input, padding: 0;
textarea, margin: 0;
button { vertical-align: middle;
padding: 0; border: 0;
margin: 0; box-shadow: none;
vertical-align: middle; -moz-border-radius: 0;
border: 0; -webkit-border-radius: 0;
box-shadow: none; -khtml-border-radius: 0;
-moz-border-radius: 0; border-radius: 0;
-webkit-border-radius: 0; background-color: transparent;
-khtml-border-radius: 0; font-family: $mono;
border-radius: 0; font-size: $base-font-size;
background-color: transparent; line-height: 1.0;
font-family: $mono; color: inherit;
font-size: $base-font-size;
line-height: 1.0;
color: inherit;
&:focus { &:focus {
line-height: 1.0; line-height: 1.0;
box-shadow: none !important; box-shadow: none !important;
outline: none; outline: none;
vertical-align: middle; vertical-align: middle;
} }
} }

74
website/source/assets/stylesheets/_sidebar.scss
View File

@ -1,49 +1,37 @@
.sidebar { .sidebar {
$border: 1px solid $gray-dark; $border: 1px solid $gray-dark;
font-size: 16px; font-size: 16px;
font-family: $mono; font-family: $mono;
color: $gray-light; color: $gray-light;
width: $sidebar-width; background-color: $sidebar-background-color;
float: left; min-height: 100%;
background-color: $sidebar-background-color;
height: 100%;
h2 { h2 {
color: $green; color: $green;
text-transform: uppercase; text-transform: uppercase;
padding: $docs-top-margin 20px 0; 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 { li > * {
color: $white; padding: auto 20px;
text-transform: uppercase; margin-left: 20px;
margin-bottom: -10px; display: block;
} width: 100%;
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;
} }
}
} }

260
website/source/assets/stylesheets/_styles.scss
View File

@ -1,241 +1,173 @@
* { * {
margin: 0; margin: 0;
} }
html, html,
body { body {
margin: 0; margin: 0;
height: 100%; height: 100%;
} }
html { html {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
body { body {
background-color: $background; background-color: $background;
font-family: $sans; font-family: $sans;
letter-spacing: 1px; letter-spacing: 1px;
font-size: $base-font-size; font-size: $base-font-size;
line-height: $base-line-height; line-height: $base-line-height;
} }
h1, h1, h2, h3, h4, h5, h6 {
h2, letter-spacing: 2px;
h3, font-weight: normal;
h4,
h5,
h6 {
letter-spacing: 2px;
font-weight: normal;
} }
h1 { h1 {
font-family: $sans; font-family: $sans;
font-size: 70px; font-size: 70px;
line-height: (80/70); line-height: (80/70);
@include respond-to(mobile) { @include respond-to(mobile) {
font-size: 50px; font-size: 50px;
line-height: (50/45); line-height: (50/45);
} }
} }
h2 { h2 {
font-family: $sans; font-family: $sans;
font-size: 40px; font-size: 40px;
line-height: (50/40); line-height: (50/40);
&.has-dividers { &.has-dividers {
//overflow: auto !important; //overflow: auto !important;
display: table-cell; display: table-cell;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
@include respond-to(mobile) { @include respond-to(mobile) {
display: block; display: block;
}
} }
}
} }
h3 { h3 {
font-family: $sans; font-family: $sans;
font-size: 20px; font-size: 20px;
line-height: (30/20); line-height: (30/20);
} }
h4 { h4 {
font-family: $mono; font-family: $mono;
font-size: 20px; font-size: 20px;
line-height: (30/20); line-height: (30/20);
} }
h5 { h5 {
font-family: $sans; font-family: $sans;
font-size: 16px; font-size: 16px;
line-height: (22/16); line-height: (22/16);
} }
h6 { h6 {
font-family: $mono; font-family: $mono;
font-size: 16px; font-size: 16px;
line-height: (22/16); line-height: (22/16);
} }
p { p {
font-family: $serif; font-family: $serif;
font-size: 17px; font-size: 17px;
line-height: (30/17); line-height: (30/17);
letter-spacing: 1px; letter-spacing: 1px;
&.large-text { &.large-text {
font-size: 20px; font-size: 20px;
line-height: (35/20); line-height: (35/20);
} }
a { a {
color: $green; color: $green;
&:hover {
color: darken($green, 30%);
}
&:active {
color: darken($green, 50%);
}
}
}
a {
color: inherit;
text-decoration: none;
&:hover { &:hover {
color: inherit; color: darken($green, 30%);
text-decoration: none;
}
&:visited {
} }
&:active { &:active {
color: darken($green, 50%);
} }
}
}
a {
color: inherit;
text-decoration: none;
&:hover {
color: inherit;
text-decoration: none;
}
} }
dt { dt {
font-size: 18px; font-size: 18px;
} }
dd { dd {
font-family: $serif; font-family: $serif;
font-size: 17px; font-size: 17px;
line-height: 1.5; line-height: 1.5;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 30px; margin-bottom: 30px;
} }
ul, ul, ol {
ol { margin: 0;
margin: 0; padding: 0;
padding: 0; list-style-type: none;
list-style-type: none;
} }
em { em {
font-style: italic; font-style: italic;
} }
strong { strong {
font-weight: bold; font-weight: bold;
} }
small, small, .small {
.small { font-size: 13px;
font-size: 13px;
} }
hr { hr {
margin: ($baseline * 2) 0; margin: ($baseline * 2) 0;
border-color: $gray-mid; border-color: $gray-mid;
border-bottom: 0; border-bottom: 0;
} }
pre { pre {
background-color: $black; background-color: $black;
color: $white; color: $white;
margin: $baseline 0; margin: $baseline 0;
} }
table { table {
font-family: $mono; font-family: $mono;
margin: ($baseline * 2) 0; margin: ($baseline * 2) 0;
color: $gray-dark; color: $gray-dark;
th { th {
color: $black; color: $black;
font-weight: normal !important; font-weight: normal !important;
} }
} }
::selection { ::selection {
background: #ffff00; /* Safari */ background: #ffff00; /* Safari */
color: $black; color: $black;
} }
::-moz-selection { ::-moz-selection {
background: #ffff00; /* Firefox */ background: #ffff00; /* Firefox */
color: $black; 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;
}
}
} }

15
website/source/assets/stylesheets/application.scss Normal file
View File

@ -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";