Skip to content

Commit 730995b

Browse files
gregorydgarciaRick Kim
gregorydgarcia
authored and
Rick Kim
committed
Moved CSS Config to template.yml
CSS template files are now housed in _data/template.yml file instead of _congif.yml. This will allow users to tweak and experiment with template setting without having to restart server every time.
1 parent 343d0ea commit 730995b

File tree

3 files changed

+63
-57
lines changed

3 files changed

+63
-57
lines changed

‎_config.yml

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,6 @@ title: Awesome Title
66
email: your-email@domain.com
77
description: "Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description."
88

9-
# Color settings (hex-codes without the leading hash-tag)
10-
color:
11-
primary: fed136
12-
secondary: fec503
13-
secondary-dark: 333
149

1510
# Team names, titles and social links
1611
people:

‎_data/template.yml

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Color settings (hex-codes without the leading hash-tag)
2+
color:
3+
primary: fed136
4+
secondary: fec503
5+
secondary-dark: 333
6+
muted: 777
7+
8+
# Font Families
9+
font:
10+
primary: 'Montserrat, "Helvetica Neue",Helvetica,Arial,sans-serif'
11+
secondary: '"Droid Serif", "Helvetica Neue", Helvetica,Arial,sans-serif'

‎_includes/css/agency.css

Lines changed: 52 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77
body {
88
overflow-x: hidden;
99
font-family: "Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
10-
color: #{{ site.color.secondary-dark }};
10+
color: #{{ site.data.template.color.secondary-dark }};
1111
}
1212

1313
.text-muted {
14-
color: #777;
14+
#{{ site.data.template.color.muted }};
1515
}
1616

1717
.text-primary {
18-
color: #{{ site.color.primary }};
18+
color: #{{ site.data.template.color.primary }};
1919
}
2020

2121
p {
@@ -36,14 +36,14 @@ a.active {
3636
}
3737

3838
a {
39-
color: #{{ site.color.primary }};
39+
color: #{{ site.data.template.color.primary }};
4040
}
4141

4242
a:hover,
4343
a:focus,
4444
a:active,
4545
a.active {
46-
color: #{{ site.color.secondary }};
46+
color: #{{ site.data.template.color.secondary }};
4747
}
4848

4949
h1,
@@ -53,7 +53,7 @@ h4,
5353
h5,
5454
h6 {
5555
text-transform: uppercase;
56-
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
56+
font-family: {{ site.data.template.font.primary }};
5757
font-weight: 700;
5858
}
5959

@@ -70,22 +70,22 @@ h6 {
7070
}
7171

7272
.btn-primary {
73-
border-color: #{{ site.color.primary }};
73+
border-color: #{{ site.data.template.color.primary }};
7474
text-transform: uppercase;
75-
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
75+
font-family: {{ site.data.template.font.primary }};
7676
font-weight: 700;
7777
color: #fff;
78-
background-color: #{{ site.color.primary }};
78+
background-color: #{{ site.data.template.color.primary }};
7979
}
8080

8181
.btn-primary:hover,
8282
.btn-primary:focus,
8383
.btn-primary:active,
8484
.btn-primary.active,
8585
.open .dropdown-toggle.btn-primary {
86-
border-color: #{{ site.color.primary }};
86+
border-color: #{{ site.data.template.color.primary }};
8787
color: #fff;
88-
background-color: #{{ site.color.secondary }};
88+
background-color: #{{ site.data.template.color.secondary }};
8989
}
9090

9191
.btn-primary:active,
@@ -109,35 +109,35 @@ fieldset[disabled] .btn-primary:active,
109109
.btn-primary.disabled.active,
110110
.btn-primary[disabled].active,
111111
fieldset[disabled] .btn-primary.active {
112-
border-color: #{{ site.color.primary }};
113-
background-color: #{{ site.color.primary }};
112+
border-color: #{{ site.data.template.color.primary }};
113+
background-color: #{{ site.data.template.color.primary }};
114114
}
115115

116116
.btn-primary .badge {
117-
color: #{{ site.color.primary }};
117+
color: #{{ site.data.template.color.primary }};
118118
background-color: #fff;
119119
}
120120

121121
.btn-xl {
122122
padding: 20px 40px;
123-
border-color: #{{ site.color.primary }};
123+
border-color: #{{ site.data.template.color.primary }};
124124
border-radius: 3px;
125125
text-transform: uppercase;
126-
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
126+
font-family: {{ site.data.template.font.primary }};
127127
font-size: 18px;
128128
font-weight: 700;
129129
color: #fff;
130-
background-color: #{{ site.color.primary }};
130+
background-color: #{{ site.data.template.color.primary }};
131131
}
132132

133133
.btn-xl:hover,
134134
.btn-xl:focus,
135135
.btn-xl:active,
136136
.btn-xl.active,
137137
.open .dropdown-toggle.btn-xl {
138-
border-color: #{{ site.color.primary }};
138+
border-color: #{{ site.data.template.color.primary }};
139139
color: #fff;
140-
background-color: #{{ site.color.secondary }};
140+
background-color: #{{ site.data.template.color.secondary }};
141141
}
142142

143143
.btn-xl:active,
@@ -161,12 +161,12 @@ fieldset[disabled] .btn-xl:active,
161161
.btn-xl.disabled.active,
162162
.btn-xl[disabled].active,
163163
fieldset[disabled] .btn-xl.active {
164-
border-color: #{{ site.color.primary }};
165-
background-color: #{{ site.color.primary }};
164+
border-color: #{{ site.data.template.color.primary }};
165+
background-color: #{{ site.data.template.color.primary }};
166166
}
167167

168168
.btn-xl .badge {
169-
color: #{{ site.color.primary }};
169+
color: #{{ site.data.template.color.primary }};
170170
background-color: #fff;
171171
}
172172

@@ -177,23 +177,23 @@ fieldset[disabled] .btn-xl.active {
177177

178178
.navbar-default .navbar-brand {
179179
font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive;
180-
color: #{{ site.color.primary }};
180+
color: #{{ site.data.template.color.primary }};
181181
}
182182

183183
.navbar-default .navbar-brand:hover,
184184
.navbar-default .navbar-brand:focus,
185185
.navbar-default .navbar-brand:active,
186186
.navbar-default .navbar-brand.active {
187-
color: #{{ site.color.secondary }};
187+
color: #{{ site.data.template.color.secondary }};
188188
}
189189

190190
.navbar-default .navbar-collapse {
191191
border-color: rgba(255,255,255,.02);
192192
}
193193

194194
.navbar-default .navbar-toggle {
195-
border-color: #{{ site.color.primary }};
196-
background-color: #{{ site.color.primary }};
195+
border-color: #{{ site.data.template.color.primary }};
196+
background-color: #{{ site.data.template.color.primary }};
197197
}
198198

199199
.navbar-default .navbar-toggle .icon-bar {
@@ -202,12 +202,12 @@ fieldset[disabled] .btn-xl.active {
202202

203203
.navbar-default .navbar-toggle:hover,
204204
.navbar-default .navbar-toggle:focus {
205-
background-color: #{{ site.color.primary }};
205+
background-color: #{{ site.data.template.color.primary }};
206206
}
207207

208208
.navbar-default .nav li a {
209209
text-transform: uppercase;
210-
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
210+
font-family: {{ site.data.template.font.primary }};
211211
font-weight: 400;
212212
letter-spacing: 1px;
213213
color: #fff;
@@ -216,19 +216,19 @@ fieldset[disabled] .btn-xl.active {
216216
.navbar-default .nav li a:hover,
217217
.navbar-default .nav li a:focus {
218218
outline: 0;
219-
color: #{{ site.color.primary }};
219+
color: #{{ site.data.template.color.primary }};
220220
}
221221

222222
.navbar-default .navbar-nav>.active>a {
223223
border-radius: 0;
224224
color: #fff;
225-
background-color: #{{ site.color.primary }};
225+
background-color: #{{ site.data.template.color.primary }};
226226
}
227227

228228
.navbar-default .navbar-nav>.active>a:hover,
229229
.navbar-default .navbar-nav>.active>a:focus {
230230
color: #fff;
231-
background-color: #{{ site.color.secondary }};
231+
background-color: #{{ site.data.template.color.secondary }};
232232
}
233233

234234
@media(min-width:768px) {
@@ -282,7 +282,7 @@ header .intro-text {
282282

283283
header .intro-text .intro-lead-in {
284284
margin-bottom: 25px;
285-
font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
285+
font-family: {{ site.data.template.font.secondary }};
286286
font-size: 22px;
287287
font-style: italic;
288288
line-height: 22px;
@@ -291,7 +291,7 @@ header .intro-text .intro-lead-in {
291291
header .intro-text .intro-heading {
292292
margin-bottom: 25px;
293293
text-transform: uppercase;
294-
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
294+
font-family: {{ site.data.template.font.primary }};
295295
font-size: 50px;
296296
font-weight: 700;
297297
line-height: 50px;
@@ -305,7 +305,7 @@ header .intro-text .intro-heading {
305305

306306
header .intro-text .intro-lead-in {
307307
margin-bottom: 25px;
308-
font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
308+
font-family: {{ site.data.template.font.secondary }};
309309
font-size: 40px;
310310
font-style: italic;
311311
line-height: 40px;
@@ -314,7 +314,7 @@ header .intro-text .intro-heading {
314314
header .intro-text .intro-heading {
315315
margin-bottom: 50px;
316316
text-transform: uppercase;
317-
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
317+
font-family: {{ site.data.template.font.primary }};
318318
font-size: 75px;
319319
font-weight: 700;
320320
line-height: 75px;
@@ -334,7 +334,7 @@ section h2.section-heading {
334334
section h3.section-subheading {
335335
margin-bottom: 75px;
336336
text-transform: none;
337-
font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
337+
font-family: {{ site.data.template.font.secondary }};
338338
font-size: 16px;
339339
font-style: italic;
340340
font-weight: 400;
@@ -372,7 +372,7 @@ section h3.section-subheading {
372372
-moz-transition: all ease .5s;
373373
transition: all ease .5s;
374374
background: rgba(254,209,54,.9); /* Fallback when no plugin support */
375-
background: rgba({{ site.color.primary | hex_to_rgb | join: ',' }}, .9);
375+
background: rgba({{ site.data.template.color.primary | hex_to_rgb | join: ',' }}, .9);
376376
}
377377

378378
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
@@ -414,7 +414,7 @@ section h3.section-subheading {
414414

415415
#portfolio .portfolio-item .portfolio-caption p {
416416
margin: 0;
417-
font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
417+
font-family: {{ site.data.template.font.secondary }};
418418
font-size: 16px;
419419
font-style: italic;
420420
}
@@ -495,7 +495,7 @@ section h3.section-subheading {
495495
border-radius: 100%;
496496
text-align: center;
497497
color: #fff;
498-
background-color: #{{ site.color.primary }};
498+
background-color: #{{ site.data.template.color.primary }};
499499
}
500500

501501
.timeline>li .timeline-image h4 {
@@ -682,34 +682,34 @@ section#contact .form-group textarea.form-control {
682682
}
683683

684684
section#contact .form-control:focus {
685-
border-color: #{{ site.color.primary }};
685+
border-color: #{{ site.data.template.color.primary }};
686686
box-shadow: none;
687687
}
688688

689689
section#contact::-webkit-input-placeholder {
690690
text-transform: uppercase;
691-
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
691+
font-family: {{ site.data.template.font.primary }};
692692
font-weight: 700;
693693
color: #bbb;
694694
}
695695

696696
section#contact:-moz-placeholder {
697697
text-transform: uppercase;
698-
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
698+
font-family: {{ site.data.template.font.primary }};
699699
font-weight: 700;
700700
color: #bbb;
701701
}
702702

703703
section#contact::-moz-placeholder {
704704
text-transform: uppercase;
705-
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
705+
font-family: {{ site.data.template.font.primary }};
706706
font-weight: 700;
707707
color: #bbb;
708708
}
709709

710710
section#contact:-ms-input-placeholder {
711711
text-transform: uppercase;
712-
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
712+
font-family: {{ site.data.template.font.primary }};
713713
font-weight: 700;
714714
color: #bbb;
715715
}
@@ -726,15 +726,15 @@ footer {
726726
footer span.copyright {
727727
text-transform: uppercase;
728728
text-transform: none;
729-
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
729+
font-family: {{ site.data.template.font.primary }};
730730
line-height: 40px;
731731
}
732732

733733
footer ul.quicklinks {
734734
margin-bottom: 0;
735735
text-transform: uppercase;
736736
text-transform: none;
737-
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
737+
font-family: {{ site.data.template.font.primary }};
738738
line-height: 40px;
739739
}
740740

@@ -760,7 +760,7 @@ ul.social-buttons li a {
760760
ul.social-buttons li a:hover,
761761
ul.social-buttons li a:focus,
762762
ul.social-buttons li a:active {
763-
background-color: #{{ site.color.primary }};
763+
background-color: #{{ site.data.template.color.primary }};
764764
}
765765

766766
.btn:focus,
@@ -792,7 +792,7 @@ ul.social-buttons li a:active {
792792

793793
.portfolio-modal .modal-content p.item-intro {
794794
margin: 20px 0 30px;
795-
font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
795+
font-family: {{ site.data.template.font.secondary }};
796796
font-size: 16px;
797797
font-style: italic;
798798
}
@@ -843,12 +843,12 @@ ul.social-buttons li a:active {
843843

844844
::-moz-selection {
845845
text-shadow: none;
846-
background: #{{ site.color.primary }};
846+
background: #{{ site.data.template.color.primary }};
847847
}
848848

849849
::selection {
850850
text-shadow: none;
851-
background: #{{ site.color.primary }};
851+
background: #{{ site.data.template.color.primary }};
852852
}
853853

854854
img::selection {
@@ -860,5 +860,5 @@ img::-moz-selection {
860860
}
861861

862862
body {
863-
webkit-tap-highlight-color: #{{ site.color.primary }};
864-
}
863+
webkit-tap-highlight-color: #{{ site.data.template.color.primary }};
864+
}

0 commit comments

Comments
 (0)