blob: 2d15fb3cc61045410070e902a92b3c03bf2a5066 [file] [log] [blame]
bigbiffd006b302015-03-06 18:36:03 -05001/**
2 * Site header
3 */
4.site-header {
5 border-top: 5px solid $grey-color-dark;
6 border-bottom: 1px solid $grey-color-light;
7 min-height: 56px;
8
9 // Positioning context for the mobile navigation icon
10 position: relative;
11}
12
13.site-title {
14 font-size: 26px;
15 line-height: 56px;
16 letter-spacing: -1px;
17 margin-bottom: 0;
18 float: left;
19
20 &,
21 &:visited {
22 color: $grey-color-dark;
23 }
24}
25
26.site-nav {
27 float: right;
28 line-height: 56px;
29
30 .menu-icon {
31 display: none;
32 }
33
34 .page-link {
35 color: $text-color;
36 line-height: $base-line-height;
37
38 // Gaps between nav items, but not on the first one
39 &:not(:first-child) {
40 margin-left: 20px;
41 }
42 }
43
44 @include media-query($on-palm) {
45 position: absolute;
46 top: 9px;
47 right: 30px;
48 background-color: $background-color;
49 border: 1px solid $grey-color-light;
50 border-radius: 5px;
51 text-align: right;
easyaspi314 (Devin)0a716362016-02-07 16:48:06 -050052 z-index: 1;
bigbiffd006b302015-03-06 18:36:03 -050053
54 .menu-icon {
55 display: block;
56 float: right;
57 width: 36px;
58 height: 26px;
59 line-height: 0;
60 padding-top: 10px;
61 text-align: center;
62
63 > svg {
64 width: 18px;
65 height: 15px;
66
67 path {
68 fill: $grey-color-dark;
69 }
70 }
71 }
72
73 .trigger {
74 clear: both;
75 display: none;
76 }
77
78 &:hover .trigger {
79 display: block;
80 padding-bottom: 5px;
81 }
82
83 .page-link {
84 display: block;
85 padding: 5px 10px;
86 }
87 }
88}
89
90
91
92/**
93 * Site footer
94 */
95.site-footer {
96 border-top: 1px solid $grey-color-light;
97 padding: $spacing-unit 0;
98}
99
100.footer-heading {
101 font-size: 18px;
102 margin-bottom: $spacing-unit / 2;
103}
104
105.contact-list,
106.social-media-list {
107 list-style: none;
108 margin-left: 0;
109}
110
111.footer-col-wrapper {
112 font-size: 15px;
113 color: $grey-color;
114 margin-left: -$spacing-unit / 2;
115 @extend %clearfix;
116}
117
118.footer-col {
119 float: left;
120 margin-bottom: $spacing-unit / 2;
121 padding-left: $spacing-unit / 2;
122}
123
124.footer-col-1 {
125 width: -webkit-calc(35% - (#{$spacing-unit} / 2));
126 width: calc(35% - (#{$spacing-unit} / 2));
127}
128
129.footer-col-2 {
130 width: -webkit-calc(20% - (#{$spacing-unit} / 2));
131 width: calc(20% - (#{$spacing-unit} / 2));
132}
133
134.footer-col-3 {
135 width: -webkit-calc(45% - (#{$spacing-unit} / 2));
136 width: calc(45% - (#{$spacing-unit} / 2));
137}
138
139@include media-query($on-laptop) {
140 .footer-col-1,
141 .footer-col-2 {
142 width: -webkit-calc(50% - (#{$spacing-unit} / 2));
143 width: calc(50% - (#{$spacing-unit} / 2));
144 }
145
146 .footer-col-3 {
147 width: -webkit-calc(100% - (#{$spacing-unit} / 2));
148 width: calc(100% - (#{$spacing-unit} / 2));
149 }
150}
151
152@include media-query($on-palm) {
153 .footer-col {
154 float: none;
155 width: -webkit-calc(100% - (#{$spacing-unit} / 2));
156 width: calc(100% - (#{$spacing-unit} / 2));
157 }
158}
159
160
161
162/**
163 * Page content
164 */
165.page-content {
166 padding: $spacing-unit 0;
167}
168
169.page-heading {
170 font-size: 20px;
171}
172
173.post-list {
174 margin-left: 0;
175 list-style: none;
176
177 > li {
178 margin-bottom: $spacing-unit;
179 }
180}
181
182.post-meta {
183 font-size: $small-font-size;
184 color: $grey-color;
185}
186
187.post-link {
188 display: block;
189 font-size: 24px;
190}
191
192
193
194/**
195 * Posts
196 */
197.post-header {
198 margin-bottom: $spacing-unit;
199}
200
201.post-title {
202 font-size: 42px;
203 letter-spacing: -1px;
204 line-height: 1;
205
206 @include media-query($on-laptop) {
207 font-size: 36px;
208 }
209}
210
211.post-content {
212 margin-bottom: $spacing-unit;
213
214 h2 {
215 font-size: 32px;
216
217 @include media-query($on-laptop) {
218 font-size: 28px;
219 }
220 }
221
222 h3 {
223 font-size: 26px;
224
225 @include media-query($on-laptop) {
226 font-size: 22px;
227 }
228 }
229
230 h4 {
231 font-size: 20px;
232
233 @include media-query($on-laptop) {
234 font-size: 18px;
235 }
236 }
237}