Redesign site.
This commit is contained in:
Bob Nystrom
+228
-115
@@ -2,17 +2,40 @@ $header: "Dosis", helvetica, arial, sans-serif;
|
||||
$body: "Source Sans Pro", georgia, serif;
|
||||
$code: "Source Code Pro", Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
$primary: hsl(30, 40%, 65%);
|
||||
$link: hsl(195, 60%, 50%);
|
||||
$link-hover: hsl(195, 100%, 30%);
|
||||
$link-glow: hsla(195, 100%, 60%, 0.2);
|
||||
$dark: hsl(200, 30%, 20%);
|
||||
$light: hsl(30, 20%, 92%);
|
||||
$gray-10: mix($dark, $light, 10%);
|
||||
$gray-20: mix($dark, $light, 20%);
|
||||
$gray-30: mix($dark, $light, 30%);
|
||||
$gray-40: mix($dark, $light, 40%);
|
||||
$gray-50: mix($dark, $light, 50%);
|
||||
$gray-60: mix($dark, $light, 60%);
|
||||
$gray-80: mix($dark, $light, 80%);
|
||||
|
||||
$secondary-hue: 195;
|
||||
$text: hsl(30, 10%, 40%);
|
||||
|
||||
$light-gray: hsl(195, 10%, 80%);
|
||||
$lighter-gray: hsl(195, 10%, 93%);
|
||||
$code-color: hsl(30, 5%, 55%);
|
||||
$code-bg: mix($light, #fff, 50%);
|
||||
|
||||
$blue: hsl(200, 60%, 50%);
|
||||
$blue-hover: hsl(200, 100%, 80%);
|
||||
$blue-dark: hsl(200, 80%, 30%);
|
||||
$blue-glow: hsla(200, 100%, 50%, 0.4);
|
||||
|
||||
// TODO: Green is not currently used.
|
||||
$green: hsl(100, 70%, 35%);
|
||||
$green-light: hsl(100, 70%, 45%);
|
||||
$green-hover: hsl(100, 80%, 70%);
|
||||
$green-dark: hsl(100, 70%, 20%);
|
||||
$green-glow: hsla(100, 70%, 50%, 0.5);
|
||||
|
||||
$gold: hsl(40, 70%, 50%);
|
||||
$gold-hover: hsl(40, 70%, 80%);
|
||||
$gold-dark: hsl(40, 80%, 30%);
|
||||
$gold-glow: hsla(40, 70%, 50%, 0.4);
|
||||
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -22,102 +45,43 @@ body, code, h1, h2, h3, p, pre, tt {
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
background: #fff;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font: 36px/40px $header;
|
||||
margin: 50px 0 0 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font: normal 24px $header;
|
||||
margin: 24px 0 0 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font: normal 20px $header;
|
||||
margin: 24px 0 0 0;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: $primary;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s, text-shadow 0.3s;
|
||||
}
|
||||
|
||||
.header-anchor {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h2:hover > .header-anchor,
|
||||
h3:hover > .header-anchor {
|
||||
display: inline;
|
||||
color: $lighter-gray;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
h2:hover > .header-anchor:hover,
|
||||
h3:hover > .header-anchor:hover {
|
||||
color: $link-hover;
|
||||
text-shadow: 0 0 6px $link-glow;
|
||||
}
|
||||
|
||||
p, li {
|
||||
background: $light;
|
||||
color: hsl(40, 10%, 40%);
|
||||
font: 17px/26px $body;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
code, pre {
|
||||
color: hsl($secondary-hue, 20%, 40%);
|
||||
font: 14px $code;
|
||||
background: hsl($secondary-hue, 40%, 98%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 1px 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 10px 0;
|
||||
line-height: 20px;
|
||||
padding: 10px;
|
||||
|
||||
// Scroll horizontally if not wide enough.
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
max-width: 840px;
|
||||
width: 800px;
|
||||
|
||||
// Clear contents.
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.left-1 { float: left; width: 240px; }
|
||||
.left-2 { float: left; width: 520px; }
|
||||
.right-1 { float: right; width: 240px; }
|
||||
.right-2 { float: right; width: 520px; }
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
border-bottom: solid 1px $lighter-gray;
|
||||
.page {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
background: $dark;
|
||||
|
||||
h1 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
font: 64px $header;
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
@@ -125,25 +89,68 @@ header {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 11px;
|
||||
color: $light-gray;
|
||||
padding: 0;
|
||||
font: 18px $header;
|
||||
font-weight: 300;
|
||||
letter-spacing: 1px;
|
||||
color: hsl(200, 30%, 40%);
|
||||
}
|
||||
|
||||
a {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $blue-hover;
|
||||
text-shadow: 0 0 6px $blue-glow;
|
||||
}
|
||||
|
||||
ul {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
right: 0;
|
||||
bottom: 8px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 0 5px;
|
||||
|
||||
font: 18px $header;
|
||||
font-weight: 300;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
margin-left: 220px;
|
||||
.header-bar {
|
||||
height: 100px;
|
||||
background: $gray-10;
|
||||
border-top: solid 1px $gray-20;
|
||||
border-bottom: solid 1px white;
|
||||
|
||||
h1 {
|
||||
padding-top: 30px;
|
||||
font: 48px/60px $header;
|
||||
font-weight: 400;
|
||||
color: $gray-60;
|
||||
|
||||
small {
|
||||
font-size: 36px;
|
||||
font-weight: 400;
|
||||
color: $gray-40;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 140px;
|
||||
margin-top: 102px;
|
||||
padding-top: 20px;
|
||||
|
||||
h2 {
|
||||
color: $light-gray;
|
||||
color: $gray-30;
|
||||
font: normal 18px $header;
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
@@ -163,31 +170,136 @@ nav {
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: $light-gray;
|
||||
h2 {
|
||||
font: normal 24px $header;
|
||||
margin: 24px 0 0 0;
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font: normal 20px $header;
|
||||
margin: 24px 0 0 0;
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $blue;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s, text-shadow 0.2s;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $blue-dark;
|
||||
}
|
||||
|
||||
.header-anchor {
|
||||
color: $light;
|
||||
}
|
||||
|
||||
h2:hover > .header-anchor,
|
||||
h3:hover > .header-anchor {
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
h2:hover > .header-anchor:hover,
|
||||
h3:hover > .header-anchor:hover {
|
||||
color: $blue-dark;
|
||||
}
|
||||
|
||||
p, li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
code, pre {
|
||||
color: $code-color;
|
||||
font: 14px $code;
|
||||
background: $code-bg;
|
||||
border-radius: 4px;
|
||||
border-bottom: solid 1px $gray-10;
|
||||
border-top: solid 1px #fff;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 1px 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 10px 0;
|
||||
line-height: 20px;
|
||||
padding: 10px;
|
||||
|
||||
// Scroll horizontally if not wide enough.
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 20px;
|
||||
padding: 20px 0 40px 0;
|
||||
font: 14px $body;
|
||||
text-align: center;
|
||||
margin: 30px 0 40px 0;
|
||||
background: hsl(40, 5%, 60%);
|
||||
color: hsl(40, 15%, 85%);
|
||||
}
|
||||
|
||||
// Syntax highlighting.
|
||||
.codehilite pre span.c1 { color: hsl($secondary-hue, 20%, 65%); } /* line comment */
|
||||
.codehilite pre span.cm { color: hsl($secondary-hue, 20%, 65%); } /* block comment */
|
||||
.codehilite pre span.vg { color: #5d3a85; } /* global variable */
|
||||
.codehilite pre span.vi { color: #784bab; } /* instance variable */
|
||||
.codehilite pre span.k { color: hsl($secondary-hue, 100%, 40%); } /* keyword message */
|
||||
.codehilite pre span.kd { color: hsl($secondary-hue, 100%, 40%); } /* keyword decl */
|
||||
.codehilite pre span.p { color: #777; } /* punctuation ()[]{} */
|
||||
.codehilite pre span.s { color: hsl(30, 40%, 55%); } /* string */
|
||||
.codehilite pre span.s2 { color: hsl(30, 40%, 55%); } /* string escape */
|
||||
.codehilite pre span.se { color: hsl(30, 90%, 45%); } /* string escape */
|
||||
.codehilite pre span.nb { color: #30a138; } /* built-in name: self undefined */
|
||||
.codehilite pre span.o { color: hsl($secondary-hue, 100%, 35%); } /* operator */
|
||||
.codehilite pre span.nv { color: #24a36a; } /* argument name */
|
||||
.codehilite pre span.ow { color: #30a186; } /* user-defined operator */
|
||||
.codehilite pre span.mi { } /* number */
|
||||
.codehilite pre span.n { } /* name */
|
||||
.codehilite pre {
|
||||
// Comments.
|
||||
span.c1, span.cm { color: mix($code-color, $code-bg, 60%); }
|
||||
|
||||
// Keywords.
|
||||
span.k, span.kd, span.kc { color: $blue; }
|
||||
|
||||
// Numbers.
|
||||
span.m, span.mi { color: $green; }
|
||||
|
||||
// Strings.
|
||||
span.s, span.s2 { color: $gold; }
|
||||
span.se { color: mix($gold, $gold-dark, 50%); }
|
||||
}
|
||||
|
||||
// Category colors.
|
||||
body.reference {
|
||||
a {
|
||||
color: $gold;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $gold-dark;
|
||||
}
|
||||
|
||||
header {
|
||||
a:hover {
|
||||
color: $gold-hover;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
h2, h3 {
|
||||
color: $gold;
|
||||
}
|
||||
|
||||
.header-anchor {
|
||||
color: $light;
|
||||
}
|
||||
|
||||
h2:hover > .header-anchor,
|
||||
h3:hover > .header-anchor {
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
h2:hover > .header-anchor:hover,
|
||||
h3:hover > .header-anchor:hover {
|
||||
color: $gold-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
@media only screen and (max-width: 639px) {
|
||||
// Shrink the window padding.
|
||||
body {
|
||||
@@ -228,3 +340,4 @@ nav {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
*/
|
||||
Reference in New Issue
Block a user