blog.sahithyen.com 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +48 -0
- data/_includes/footer.html +9 -0
- data/_includes/head.html +9 -0
- data/_includes/navigation.html +14 -0
- data/_includes/scripts.html +2 -0
- data/_layouts/default.html +21 -0
- data/_layouts/home.html +30 -0
- data/_layouts/page.html +17 -0
- data/_layouts/post.html +26 -0
- data/_sass/_skeleton.scss +27 -0
- data/_sass/_variables.scss +50 -0
- data/_sass/base/_base-styles.scss +37 -0
- data/_sass/base/_functions.scss +17 -0
- data/_sass/base/_normalize.scss +428 -0
- data/_sass/base/_typography.scss +29 -0
- data/_sass/base/_utils.scss +20 -0
- data/_sass/base/_variables.scss +32 -0
- data/_sass/modules/_buttons.scss +147 -0
- data/_sass/modules/_code.scss +18 -0
- data/_sass/modules/_forms.scss +81 -0
- data/_sass/modules/_grid.scss +116 -0
- data/_sass/modules/_lists.scss +32 -0
- data/_sass/modules/_media-queries.scss +22 -0
- data/_sass/modules/_spacing.scss +26 -0
- data/_sass/modules/_tables.scss +19 -0
- data/assets/dropcap.min.js +6 -0
- data/assets/script.js +39 -0
- data/assets/styles.scss +237 -0
- metadata +116 -0
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
// Typography
|
|
2
|
+
//––––––––––––––––––––––––––––––––––––––––––––––––––
|
|
3
|
+
|
|
4
|
+
h1, h2, h3, h4, h5, h6 {
|
|
5
|
+
margin-top: 0;
|
|
6
|
+
margin-bottom: 2rem;
|
|
7
|
+
font-weight: 300;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem; }
|
|
11
|
+
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
|
|
12
|
+
h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
|
|
13
|
+
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
|
|
14
|
+
h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
|
|
15
|
+
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
|
|
16
|
+
|
|
17
|
+
// Larger than phablet
|
|
18
|
+
@media (#{$bp-larger-than-phablet}) {
|
|
19
|
+
h1 { font-size: 5.0rem; }
|
|
20
|
+
h2 { font-size: 4.2rem; }
|
|
21
|
+
h3 { font-size: 3.6rem; }
|
|
22
|
+
h4 { font-size: 3.0rem; }
|
|
23
|
+
h5 { font-size: 2.4rem; }
|
|
24
|
+
h6 { font-size: 1.5rem; }
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
p {
|
|
28
|
+
margin-top: 0;
|
|
29
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// Utilities
|
|
2
|
+
//––––––––––––––––––––––––––––––––––––––––––––––––––
|
|
3
|
+
|
|
4
|
+
.u-full-width {
|
|
5
|
+
width: 100%;
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.u-max-full-width {
|
|
10
|
+
max-width: 100%;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.u-pull-right {
|
|
15
|
+
float: right;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.u-pull-left {
|
|
19
|
+
float: left;
|
|
20
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
// Variables
|
|
2
|
+
//––––––––––––––––––––––––––––––––––––––––––––––––––
|
|
3
|
+
|
|
4
|
+
// Breakpoints
|
|
5
|
+
$bp-larger-than-mobile : "min-width: 400px" !default;
|
|
6
|
+
$bp-larger-than-phablet : "min-width: 550px" !default;
|
|
7
|
+
$bp-larger-than-tablet : "min-width: 750px" !default;
|
|
8
|
+
$bp-larger-than-desktop : "min-width: 1000px" !default;
|
|
9
|
+
$bp-larger-than-desktophd : "min-width: 1200px" !default;
|
|
10
|
+
|
|
11
|
+
// Colors
|
|
12
|
+
$light-grey: #e1e1e1 !default;
|
|
13
|
+
$dark-grey: #333 !default;
|
|
14
|
+
$primary-color: #33c3f0 !default;
|
|
15
|
+
$secondary-color: lighten($dark-grey, 13.5%) !default;
|
|
16
|
+
$border-color: #bbb !default;
|
|
17
|
+
$link-color: #1eaedb !default;
|
|
18
|
+
$font-color: #222 !default;
|
|
19
|
+
|
|
20
|
+
// Typography
|
|
21
|
+
$font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
|
22
|
+
|
|
23
|
+
//Grid Variables
|
|
24
|
+
$container-width: 960px !default;
|
|
25
|
+
$container-width-larger-than-mobile: 85% !default;
|
|
26
|
+
$container-width-larger-than-phablet: 80% !default;
|
|
27
|
+
$total-columns: 12 !default;
|
|
28
|
+
$column-width: 100 / $total-columns !default; // calculates individual column width based off of # of columns
|
|
29
|
+
$column-margin: 4% !default; // space between columns
|
|
30
|
+
|
|
31
|
+
// Misc
|
|
32
|
+
$global-radius: 4px !default;
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
// Buttons
|
|
2
|
+
//––––––––––––––––––––––––––––––––––––––––––––––––––
|
|
3
|
+
|
|
4
|
+
.button,
|
|
5
|
+
button {
|
|
6
|
+
display: inline-block;
|
|
7
|
+
height: 38px;
|
|
8
|
+
padding: 0 30px;
|
|
9
|
+
color: $secondary-color;
|
|
10
|
+
text-align: center;
|
|
11
|
+
font-size: 11px;
|
|
12
|
+
font-weight: 600;
|
|
13
|
+
line-height: 38px;
|
|
14
|
+
letter-spacing: .1rem;
|
|
15
|
+
text-transform: uppercase;
|
|
16
|
+
text-decoration: none;
|
|
17
|
+
white-space: nowrap;
|
|
18
|
+
background-color: transparent;
|
|
19
|
+
border-radius: $global-radius;
|
|
20
|
+
border: 1px solid $border-color;
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
box-sizing: border-box;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
input {
|
|
26
|
+
&[type="submit"],
|
|
27
|
+
&[type="reset"],
|
|
28
|
+
&[type="button"] {
|
|
29
|
+
display: inline-block;
|
|
30
|
+
height: 38px;
|
|
31
|
+
padding: 0 30px;
|
|
32
|
+
color: $secondary-color;
|
|
33
|
+
text-align: center;
|
|
34
|
+
font-size: 11px;
|
|
35
|
+
font-weight: 600;
|
|
36
|
+
line-height: 38px;
|
|
37
|
+
letter-spacing: .1rem;
|
|
38
|
+
text-transform: uppercase;
|
|
39
|
+
text-decoration: none;
|
|
40
|
+
white-space: nowrap;
|
|
41
|
+
background-color: transparent;
|
|
42
|
+
border-radius: $global-radius;
|
|
43
|
+
border: 1px solid $border-color;
|
|
44
|
+
cursor: pointer;
|
|
45
|
+
box-sizing: border-box;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.button:hover,
|
|
50
|
+
button:hover {
|
|
51
|
+
color: $dark-grey;
|
|
52
|
+
border-color: lighten($dark-grey, 33.3%);
|
|
53
|
+
outline: 0;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
input {
|
|
57
|
+
&[type="submit"]:hover,
|
|
58
|
+
&[type="reset"]:hover,
|
|
59
|
+
&[type="button"]:hover {
|
|
60
|
+
color: $dark-grey;
|
|
61
|
+
border-color: lighten($dark-grey, 33.3%);
|
|
62
|
+
outline: 0;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.button:focus,
|
|
67
|
+
button:focus {
|
|
68
|
+
color: $dark-grey;
|
|
69
|
+
border-color: lighten($dark-grey, 33.3%);
|
|
70
|
+
outline: 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
input {
|
|
74
|
+
&[type="submit"]:focus,
|
|
75
|
+
&[type="reset"]:focus,
|
|
76
|
+
&[type="button"]:focus {
|
|
77
|
+
color: $dark-grey;
|
|
78
|
+
border-color: lighten($dark-grey, 33.3%);
|
|
79
|
+
outline: 0;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.button.button-primary,
|
|
84
|
+
button.button-primary {
|
|
85
|
+
color: #fff;
|
|
86
|
+
background-color: $primary-color;
|
|
87
|
+
border-color: $primary-color;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
input {
|
|
91
|
+
&[type="submit"].button-primary,
|
|
92
|
+
&[type="reset"].button-primary,
|
|
93
|
+
&[type="button"].button-primary {
|
|
94
|
+
color: #fff;
|
|
95
|
+
background-color: $primary-color;
|
|
96
|
+
border-color: $primary-color;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.button.button-primary:hover,
|
|
101
|
+
button.button-primary:hover {
|
|
102
|
+
color: #fff;
|
|
103
|
+
background-color: $link-color;
|
|
104
|
+
border-color: $link-color;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
input {
|
|
108
|
+
&[type="submit"].button-primary:hover,
|
|
109
|
+
&[type="reset"].button-primary:hover,
|
|
110
|
+
&[type="button"].button-primary:hover {
|
|
111
|
+
color: #fff;
|
|
112
|
+
background-color: $link-color;
|
|
113
|
+
border-color: $link-color;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.button.button-primary:focus,
|
|
118
|
+
button.button-primary:focus {
|
|
119
|
+
color: #fff;
|
|
120
|
+
background-color: $link-color;
|
|
121
|
+
border-color: $link-color;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
input {
|
|
125
|
+
&[type="submit"].button-primary:focus,
|
|
126
|
+
&[type="reset"].button-primary:focus,
|
|
127
|
+
&[type="button"].button-primary:focus {
|
|
128
|
+
color: #fff;
|
|
129
|
+
background-color: $link-color;
|
|
130
|
+
border-color: $link-color;
|
|
131
|
+
}
|
|
132
|
+
&[type="email"],
|
|
133
|
+
&[type="number"],
|
|
134
|
+
&[type="search"],
|
|
135
|
+
&[type="text"],
|
|
136
|
+
&[type="tel"],
|
|
137
|
+
&[type="url"],
|
|
138
|
+
&[type="password"] {
|
|
139
|
+
height: 38px;
|
|
140
|
+
padding: 6px 10px; // The 6px vertically centers text on FF, ignored by Webkit
|
|
141
|
+
background-color: #fff;
|
|
142
|
+
border: 1px solid lighten($border-color, 8.8%);
|
|
143
|
+
border-radius: $global-radius;
|
|
144
|
+
box-shadow: none;
|
|
145
|
+
box-sizing: border-box;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// Code
|
|
2
|
+
//––––––––––––––––––––––––––––––––––––––––––––––––––
|
|
3
|
+
|
|
4
|
+
code {
|
|
5
|
+
padding: .2rem .5rem;
|
|
6
|
+
margin: 0 .2rem;
|
|
7
|
+
font-size: 90%;
|
|
8
|
+
white-space: nowrap;
|
|
9
|
+
background: lighten($light-grey, 6.4%);
|
|
10
|
+
border: 1px solid $light-grey;
|
|
11
|
+
border-radius: $global-radius;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
pre > code {
|
|
15
|
+
display: block;
|
|
16
|
+
padding: 1rem 1.5rem;
|
|
17
|
+
white-space: pre;
|
|
18
|
+
}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
// Forms
|
|
2
|
+
//––––––––––––––––––––––––––––––––––––––––––––––––––
|
|
3
|
+
|
|
4
|
+
textarea,
|
|
5
|
+
select {
|
|
6
|
+
height: 38px;
|
|
7
|
+
padding: 6px 10px; // The 6px vertically centers text on FF, ignored by Webkit
|
|
8
|
+
background-color: #fff;
|
|
9
|
+
border: 1px solid lighten($border-color, 8.8%);
|
|
10
|
+
border-radius: $global-radius;
|
|
11
|
+
box-shadow: none;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// Removes awkward default styles on some inputs for iOS
|
|
16
|
+
input {
|
|
17
|
+
&[type="email"],
|
|
18
|
+
&[type="number"],
|
|
19
|
+
&[type="search"],
|
|
20
|
+
&[type="text"],
|
|
21
|
+
&[type="tel"],
|
|
22
|
+
&[type="url"],
|
|
23
|
+
&[type="password"] {
|
|
24
|
+
-webkit-appearance: none;
|
|
25
|
+
-moz-appearance: none;
|
|
26
|
+
appearance: none;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
textarea {
|
|
31
|
+
-webkit-appearance: none;
|
|
32
|
+
-moz-appearance: none;
|
|
33
|
+
appearance: none;
|
|
34
|
+
min-height: 65px;
|
|
35
|
+
padding-top: 6px;
|
|
36
|
+
padding-bottom: 6px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
input {
|
|
40
|
+
&[type="email"]:focus,
|
|
41
|
+
&[type="number"]:focus,
|
|
42
|
+
&[type="search"]:focus,
|
|
43
|
+
&[type="text"]:focus,
|
|
44
|
+
&[type="tel"]:focus,
|
|
45
|
+
&[type="url"]:focus,
|
|
46
|
+
&[type="password"]:focus {
|
|
47
|
+
border: 1px solid $primary-color;
|
|
48
|
+
outline: 0;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
textarea:focus,
|
|
53
|
+
select:focus {
|
|
54
|
+
border: 1px solid $primary-color;
|
|
55
|
+
outline: 0;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
label,
|
|
59
|
+
legend {
|
|
60
|
+
display: block;
|
|
61
|
+
margin-bottom: .5rem;
|
|
62
|
+
font-weight: 600;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
fieldset {
|
|
66
|
+
padding: 0;
|
|
67
|
+
border-width: 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
input {
|
|
71
|
+
&[type="checkbox"],
|
|
72
|
+
&[type="radio"] {
|
|
73
|
+
display: inline;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
label > .label-body {
|
|
78
|
+
display: inline-block;
|
|
79
|
+
margin-left: .5rem;
|
|
80
|
+
font-weight: normal;
|
|
81
|
+
}
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Skeleton V2.0.4
|
|
3
|
+
* Copyright 2014, Dave Gamache
|
|
4
|
+
* www.getskeleton.com
|
|
5
|
+
* Free to use under the MIT license.
|
|
6
|
+
* http://www.opensource.org/licenses/mit-license.php
|
|
7
|
+
* 12/9/2014
|
|
8
|
+
* Sass Version by Seth Coelen https://github.com/whatsnewsaes
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
.container {
|
|
12
|
+
position: relative;
|
|
13
|
+
width: 100%;
|
|
14
|
+
max-width: $container-width;
|
|
15
|
+
margin: 0 auto;
|
|
16
|
+
padding: 0 20px;
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.column,
|
|
21
|
+
.columns {
|
|
22
|
+
width: 100%;
|
|
23
|
+
float: left;
|
|
24
|
+
box-sizing: border-box;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// For devices larger than 400px
|
|
28
|
+
@media (#{$bp-larger-than-mobile}) {
|
|
29
|
+
.container {
|
|
30
|
+
width: $container-width-larger-than-mobile;
|
|
31
|
+
padding: 0;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// For devices larger than 550px
|
|
36
|
+
@media (#{$bp-larger-than-phablet}) {
|
|
37
|
+
.container {
|
|
38
|
+
width: $container-width-larger-than-phablet;
|
|
39
|
+
}
|
|
40
|
+
.column,
|
|
41
|
+
.columns {
|
|
42
|
+
margin-left: $column-margin;
|
|
43
|
+
}
|
|
44
|
+
.column:first-child,
|
|
45
|
+
.columns:first-child {
|
|
46
|
+
margin-left: 0;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.one.column,
|
|
50
|
+
.one.columns { width: grid-column-width(1); }
|
|
51
|
+
.two.columns { width: grid-column-width(2); }
|
|
52
|
+
.three.columns { width: grid-column-width(3); }
|
|
53
|
+
.four.columns { width: grid-column-width(4); }
|
|
54
|
+
.five.columns { width: grid-column-width(5); }
|
|
55
|
+
.six.columns { width: grid-column-width(6); }
|
|
56
|
+
.seven.columns { width: grid-column-width(7); }
|
|
57
|
+
.eight.columns { width: grid-column-width(8); }
|
|
58
|
+
.nine.columns { width: grid-column-width(9); }
|
|
59
|
+
.ten.columns { width: grid-column-width(10); }
|
|
60
|
+
.eleven.columns { width: grid-column-width(11); }
|
|
61
|
+
.twelve.columns { width: 100%; margin-left: 0; }
|
|
62
|
+
|
|
63
|
+
.one-third.column { width: grid-column-width(4); }
|
|
64
|
+
.two-thirds.column { width: grid-column-width(8); }
|
|
65
|
+
|
|
66
|
+
.one-half.column { width: grid-column-width(6); }
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
// Offsets
|
|
70
|
+
.offset-by-one.column,
|
|
71
|
+
.offset-by-one.columns { margin-left: grid-offset-length(1); }
|
|
72
|
+
.offset-by-two.column,
|
|
73
|
+
.offset-by-two.columns { margin-left: grid-offset-length(2); }
|
|
74
|
+
.offset-by-three.column,
|
|
75
|
+
.offset-by-three.columns { margin-left: grid-offset-length(3); }
|
|
76
|
+
.offset-by-four.column,
|
|
77
|
+
.offset-by-four.columns { margin-left: grid-offset-length(4); }
|
|
78
|
+
.offset-by-five.column,
|
|
79
|
+
.offset-by-five.columns { margin-left: grid-offset-length(5); }
|
|
80
|
+
.offset-by-six.column,
|
|
81
|
+
.offset-by-six.columns { margin-left: grid-offset-length(6); }
|
|
82
|
+
.offset-by-seven.column,
|
|
83
|
+
.offset-by-seven.columns { margin-left: grid-offset-length(7); }
|
|
84
|
+
.offset-by-eight.column,
|
|
85
|
+
.offset-by-eight.columns { margin-left: grid-offset-length(8); }
|
|
86
|
+
.offset-by-nine.column,
|
|
87
|
+
.offset-by-nine.columns { margin-left: grid-offset-length(9); }
|
|
88
|
+
.offset-by-ten.column,
|
|
89
|
+
.offset-by-ten.columns { margin-left: grid-offset-length(10); }
|
|
90
|
+
.offset-by-eleven.column,
|
|
91
|
+
.offset-by-eleven.columns { margin-left: grid-offset-length(11); }
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
.offset-by-one-third.column,
|
|
95
|
+
.offset-by-one-third.columns { margin-left: grid-offset-length(4); }
|
|
96
|
+
.offset-by-two-thirds.column,
|
|
97
|
+
.offset-by-two-thirds.columns { margin-left: grid-offset-length(8); }
|
|
98
|
+
|
|
99
|
+
.offset-by-one-half.column,
|
|
100
|
+
.offset-by-one-half.column { margin-left: grid-offset-length(6); }
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// Clearing
|
|
106
|
+
//––––––––––––––––––––––––––––––––––––––––––––––––––
|
|
107
|
+
|
|
108
|
+
// Self Clearing Goodness
|
|
109
|
+
|
|
110
|
+
.container:after,
|
|
111
|
+
.row:after,
|
|
112
|
+
.u-cf {
|
|
113
|
+
content: "";
|
|
114
|
+
display: table;
|
|
115
|
+
clear: both;
|
|
116
|
+
}
|