website: lots of tweaking around code styling
This commit is contained in:
Mitchell Hashimoto
parent
40a9356b9f
commit
dcf34b6578
|
|
@ -1,10 +1,10 @@
|
||||||
.hero {
|
.hero {
|
||||||
height: $hero-height;
|
height: $hero-height;
|
||||||
background: #000000 url(/images/hero_image.jpg) no-repeat 35px -50px;
|
background: #000000 url(/images/hero_image.jpg) no-repeat 35px -40px;
|
||||||
background-size: 960px 467px;
|
background-size: 960px 467px;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin-top: 60px;
|
margin-top: 70px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -125,10 +125,6 @@
|
||||||
|
|
||||||
.docs-wrapper {
|
.docs-wrapper {
|
||||||
clear: right;
|
clear: right;
|
||||||
@include respond-to(mobile) {
|
|
||||||
margin-right: -20px;
|
|
||||||
margin-left: -20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.docs-body {
|
.docs-body {
|
||||||
float: left;
|
float: left;
|
||||||
|
|
@ -136,25 +132,27 @@
|
||||||
max-width: 760px;
|
max-width: 760px;
|
||||||
display: block;
|
display: block;
|
||||||
@extend .white-background;
|
@extend .white-background;
|
||||||
@include respond-to(mobile) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.docs-content {
|
.docs-content {
|
||||||
max-width: 600px;
|
|
||||||
padding: $docs-top-margin 80px;
|
padding: $docs-top-margin 80px;
|
||||||
display: block;
|
display: block;
|
||||||
@include respond-to(mobile) {
|
|
||||||
padding: 0;
|
pre {
|
||||||
width: 91%;
|
margin-left: -80px;
|
||||||
margin-left: 5%;
|
margin-right: -80px;
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
padding-left: 80px;
|
||||||
|
padding-right: 80px;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs-background {
|
.docs-background {
|
||||||
@extend .white-background;
|
@extend .white-background;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 760px;
|
width: 70%;
|
||||||
|
max-width: 760px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: $sidebar-width;
|
left: $sidebar-width;
|
||||||
|
|
@ -165,17 +163,6 @@
|
||||||
margin-top: $docs-top-margin;
|
margin-top: $docs-top-margin;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
p {
|
|
||||||
@include respond-to(mobile) {
|
|
||||||
-webkit-hyphens: auto;
|
|
||||||
-moz-hyphens: auto;
|
|
||||||
hyphens: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
line-height: (25/20);
|
line-height: (25/20);
|
||||||
|
|
@ -192,18 +179,6 @@
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
|
||||||
@include respond-to(mobile) {
|
|
||||||
margin: $baseline 0 $baseline 0;
|
|
||||||
padding: $baseline 0 0 $baseline;
|
|
||||||
width: 80%;
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
color: $black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
|
|
|
||||||
|
|
@ -33,14 +33,14 @@ $button-height: 60px;
|
||||||
|
|
||||||
// components
|
// components
|
||||||
$nav-height: 100px;
|
$nav-height: 100px;
|
||||||
$hero-height: 440px;
|
$hero-height: 460px;
|
||||||
$docs-top-margin: 60px;
|
$docs-top-margin: 60px;
|
||||||
$sidebar-background-color: $dark-background;
|
$sidebar-background-color: $dark-background;
|
||||||
$sidebar-width: 250px;
|
$sidebar-width: 250px;
|
||||||
|
|
||||||
|
|
||||||
//typography
|
//typography
|
||||||
$serif: 'tk-ff-tisa-web-pro', 'ff-tisa-web-pro-1', 'ff-tisa-web-pro-2', 'tisa ot', helvetica, Georgia, serif;
|
$serif: 'prenton', 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;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,18 +7,11 @@
|
||||||
float: left;
|
float: left;
|
||||||
background-color: $sidebar-background-color;
|
background-color: $sidebar-background-color;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@include respond-to(mobile) {
|
|
||||||
width: 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;
|
||||||
@include respond-to(mobile) {
|
|
||||||
padding: $baseline;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
|
|
@ -28,7 +21,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
|
|
||||||
@extend .padded-sm;
|
@extend .padded-sm;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
|
@ -43,9 +35,6 @@
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-background {
|
.sidebar-background {
|
||||||
|
|
@ -57,5 +46,4 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: -9999;
|
z-index: -9999;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,24 @@
|
||||||
* {
|
* {
|
||||||
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,
|
||||||
|
|
@ -27,122 +27,122 @@ h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
font-weight: normal;
|
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 {
|
&:hover {
|
||||||
color: darken($green, 30%);
|
color: darken($green, 30%);
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
color: darken($green, 50%);
|
color: darken($green, 50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:visited {
|
&:visited {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ul,
|
ul,
|
||||||
ol {
|
ol {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
ol {
|
ol {
|
||||||
list-style-type: circle;
|
list-style-type: circle;
|
||||||
list-style-position: inside;
|
list-style-position: inside;
|
||||||
margin-top: $baseline * 2;
|
margin-top: $baseline * 2;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
font-family: $serif;
|
font-family: $serif;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
line-height: (30/17) !important;
|
line-height: (30/17) !important;
|
||||||
margin-bottom: $baseline;
|
margin-bottom: $baseline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
|
@ -154,48 +154,53 @@ blockquote {
|
||||||
}
|
}
|
||||||
|
|
||||||
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 * 2) 0;
|
margin: ($baseline * 2) 0;
|
||||||
padding-top: $baseline;
|
margin-left: -80px;
|
||||||
padding-bottom: 0;
|
margin-right: -80px;
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
padding-left: 80px;
|
||||||
|
padding-right: 80px;
|
||||||
|
border-radius: 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 */
|
||||||
}
|
}
|
||||||
::-moz-selection {
|
::-moz-selection {
|
||||||
background: #ffff00; /* Firefox */
|
background: #ffff00; /* Firefox */
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
|
|
@ -203,47 +208,47 @@ input {
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
height: $button-height;
|
height: $button-height;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
padding: 0 30px;
|
padding: 0 30px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
@include rounded(5px);
|
@include rounded(5px);
|
||||||
|
|
||||||
&.primary {
|
&.primary {
|
||||||
color: $green;
|
color: $green;
|
||||||
border-color: $green;
|
border-color: $green;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: transparentize($green, .7);
|
background-color: transparentize($green, .7);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: transparentize($green, .5);
|
background-color: transparentize($green, .5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.secondary {
|
&.secondary {
|
||||||
color: $black;
|
color: $black;
|
||||||
border-color: $black;
|
border-color: $black;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: transparentize($black, .9);
|
background-color: transparentize($black, .9);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: transparentize($black, .7);
|
background-color: transparentize($black, .7);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.inline {
|
&.inline {
|
||||||
margin: auto $baseline;
|
margin: auto $baseline;
|
||||||
@include respond-to(mobile) {
|
@include respond-to(mobile) {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: $baseline 0;
|
margin: $baseline 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue