solar-flair 0.1.10 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/_includes/footer.html +1 -1
- data/_includes/head.html +3 -2
- data/_includes/header.html +6 -4
- data/_layouts/blog.html +1 -1
- data/_layouts/default.html +3 -1
- data/_layouts/home.html +21 -20
- data/_layouts/styleguide.html +80 -0
- data/_layouts/teaser.html +2 -2
- data/_sass/solar-flair.scss +32 -42
- data/_sass/solar-flair/_base.scss +2 -24
- data/_sass/solar-flair/_gradients.scss +22 -19
- data/_sass/solar-flair/_home.scss +26 -93
- data/_sass/solar-flair/_hr.scss +114 -8
- data/_sass/solar-flair/_layout.scss +56 -56
- data/_sass/solar-flair/_links.scss +38 -30
- data/_sass/solar-flair/_typeography.scss +211 -85
- data/assets/main.scss +30 -0
- metadata +4 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
|
-
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 3f10c89de636b8e938c72c680eacd8658e3044b3
|
4
|
+
data.tar.gz: 30f662acf3c6c474f7f4322ec06ec990cfc71ebe
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 46a75ae8d9c8c49885c19777ce77ca3d4b38ae4f0a9c4bfacdb9d6db211329078bb3938e42cfc9f3366982ca004a6361843565da6e3bb63a1dac75fb4d191b29
|
7
|
+
data.tar.gz: 1419794a3d5e0dd4b2d48e385eb2df9a5f50e6d1f260b9a9cfa79161e437cfe1c53ad13246ba37e01344bd08258d1852882301b50079199b75006570df445840
|
data/_includes/footer.html
CHANGED
data/_includes/head.html
CHANGED
@@ -1,5 +1,6 @@
|
|
1
1
|
<head>
|
2
|
-
{% assign color = page.
|
2
|
+
{% assign color = page.theme_style | default: site.theme_style %}
|
3
|
+
{% assign favicon = site.data.theme[color].favicon %}
|
3
4
|
|
4
5
|
{% if site.gtm_id %}
|
5
6
|
<!-- Google Tag Manager -->
|
@@ -23,7 +24,7 @@
|
|
23
24
|
<!-- Meta Tags -->
|
24
25
|
<title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
|
25
26
|
<meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
|
26
|
-
<link rel="icon" href="
|
27
|
+
<link rel="icon" href="{{ favicon }}">
|
27
28
|
|
28
29
|
<!-- Open Graph Tags -->
|
29
30
|
<meta content="{{ site.title }}" property="og:site_name">
|
data/_includes/header.html
CHANGED
@@ -2,13 +2,15 @@
|
|
2
2
|
{% assign pages = site.pages | sort: 'weight' %}
|
3
3
|
{% assign default_paths = pages | map: "path" %}
|
4
4
|
{% assign page_paths = site.header_pages | default: default_paths %}
|
5
|
-
|
6
|
-
|
5
|
+
|
6
|
+
{% assign color = page.theme_style | default: site.theme_style %}
|
7
|
+
{% assign favicon = site.data.theme[color].favicon %}
|
8
|
+
|
7
9
|
{% if page_paths %}
|
8
10
|
|
9
11
|
<nav id="mainNav" class="navbar navbar-expand-lg justify-content-between navbar-light fixed-top">
|
10
12
|
<a class="navbar-brand" href="{{ site.brand_url }}">
|
11
|
-
<img src="
|
13
|
+
<img src="{{ favicon }}" height="30" alt=""></a>
|
12
14
|
{% if site.title_1 && site.title_2 %}
|
13
15
|
<a class="nav-link sitename" href="/"><span class="bold {{ color }} ">{{ site.title_1 }}</span> <span class="grey">{{ site.title_2 }}</span> <span class="sr-only">(current)</span>
|
14
16
|
{% else %}
|
@@ -22,7 +24,7 @@
|
|
22
24
|
<div class="collapse navbar-collapse " id="navbar">
|
23
25
|
|
24
26
|
<ul class="navbar-nav ml-auto">
|
25
|
-
|
27
|
+
|
26
28
|
{% for path in page_paths %}
|
27
29
|
{% assign my_page = site.pages | where: "path", path | first %}
|
28
30
|
{% if my_page.title %}
|
data/_layouts/blog.html
CHANGED
data/_layouts/default.html
CHANGED
@@ -1,9 +1,11 @@
|
|
1
1
|
<!DOCTYPE html>
|
2
|
+
|
3
|
+
{% assign color = page.theme_style | default: site.theme_style %}
|
4
|
+
|
2
5
|
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
|
3
6
|
|
4
7
|
{% include head.html %}
|
5
8
|
|
6
|
-
{% assign color = page.color | default: site.theme_color %}
|
7
9
|
<body class="{{ color }}">
|
8
10
|
{% if site.gtm_id %}
|
9
11
|
<!-- Google Tag Manager (noscript) -->
|
data/_layouts/home.html
CHANGED
@@ -2,10 +2,11 @@
|
|
2
2
|
layout: default
|
3
3
|
---
|
4
4
|
|
5
|
-
{% assign color = page.
|
5
|
+
{% assign color = page.theme_style | default: site.theme_style %}
|
6
|
+
{% assign favicon = site.data.theme[color].favicon %}
|
6
7
|
|
7
8
|
|
8
|
-
<div class="jumbotron jumbotron-fluid eq-height {{ color }}
|
9
|
+
<div class="jumbotron jumbotron-fluid eq-height home-{{ color }} vh{{ site.vertical_height }}" >
|
9
10
|
<div class="container bottom text-center py-5">
|
10
11
|
<h1 class="display-3 mb-0 sr-contact">{{ site.title}}</h1>
|
11
12
|
<p class="lead p-1 bold sr-contact" >{{ site.slug }}</p>
|
@@ -38,8 +39,8 @@ layout: default
|
|
38
39
|
<div class="col-12 col-md-6 my-auto text-center ">
|
39
40
|
|
40
41
|
<span class="fa-stack fa-9x sr-icons">
|
41
|
-
<i class="far fa-sun fa-stack-2x orange-text
|
42
|
-
<i class="fas fa-circle fa-stack-1x orange-text
|
42
|
+
<i class="far fa-sun fa-stack-2x orange-text text-l10-two" ></i>
|
43
|
+
<i class="fas fa-circle fa-stack-1x orange-text text-d10-two" ></i>
|
43
44
|
<!-- <i class="fas fa-sun fa-stack-1x fa-inverse orange-text-d10" ></i> -->
|
44
45
|
</span>
|
45
46
|
|
@@ -65,13 +66,13 @@ layout: default
|
|
65
66
|
<div class="container">
|
66
67
|
<div class="row py-4" >
|
67
68
|
<div class="col-12 order-2 col-lg-7 order-lg-1 my-auto text-center">
|
68
|
-
<i class="align-middle pr-5 fas fa-fighter-jet fa-3x text-l20-
|
69
|
-
<i class="align-middle pr-5 fas fa-fighter-jet fa-7x
|
70
|
-
<i class="align-middle pr-5 fas fa-fighter-jet fa-10x text-d20-
|
69
|
+
<i class="align-middle pr-5 fas fa-fighter-jet fa-3x text-l20-four sr-easeInOut" ></i>
|
70
|
+
<i class="align-middle pr-5 fas fa-fighter-jet fa-7x text-four sr-easeInOut" ></i>
|
71
|
+
<i class="align-middle pr-5 fas fa-fighter-jet fa-10x text-d20-four sr-easeInOut" ></i>
|
71
72
|
</div>
|
72
|
-
<div class="col-12 order-1 col-lg-5 order-lg-2 my-auto text-center p-5
|
73
|
-
<div class="
|
74
|
-
<h3 class="text-d10-
|
73
|
+
<div class="col-12 order-1 col-lg-5 order-lg-2 my-auto text-center p-5">
|
74
|
+
<div class="text-four promo">
|
75
|
+
<h3 class="text-d10-four">Fast</h3>
|
75
76
|
<p>Using Jekyll with Solar Flair allows our sites to achieve a loadtime of under 500ms</p>
|
76
77
|
</div>
|
77
78
|
</div>
|
@@ -83,16 +84,16 @@ layout: default
|
|
83
84
|
<div class="container">
|
84
85
|
<div class="row justify-content-end">
|
85
86
|
<div class="col-12 col-lg-5 my-auto text-center p-5">
|
86
|
-
<div class="
|
87
|
-
<h3 class="text-d10-
|
87
|
+
<div class="text-one promo">
|
88
|
+
<h3 class="text-d10-one">Responsive</h3>
|
88
89
|
<p>The theme will adjust to whatever device users view it on: mobile, tablet, or desktop and laptop computers</p>
|
89
90
|
</div>
|
90
91
|
</div>
|
91
92
|
<div class="col-12 col-lg-7 my-auto text-center">
|
92
|
-
<i class="align-middle pr-5 fas fa-mobile-alt fa-5x
|
93
|
-
<i class="align-middle pr-5 fas fa-tablet-alt fa-5x
|
94
|
-
<i class="align-middle pr-5 fas fa-laptop fa-5x
|
95
|
-
<i class="align-middle pr-5 fas fa-desktop fa-5x
|
93
|
+
<i class="align-middle pr-5 fas fa-mobile-alt fa-5x text-d10-one sr-pop-a" ></i>
|
94
|
+
<i class="align-middle pr-5 fas fa-tablet-alt fa-5x text-d10-one sr-pop-b" ></i>
|
95
|
+
<i class="align-middle pr-5 fas fa-laptop fa-5x text-d10-one sr-pop-c" ></i>
|
96
|
+
<i class="align-middle pr-5 fas fa-desktop fa-5x text-d10-one sr-pop-d" ></i>
|
96
97
|
</div>
|
97
98
|
</div>
|
98
99
|
</div>
|
@@ -102,16 +103,16 @@ layout: default
|
|
102
103
|
<div class="container">
|
103
104
|
<div class="row ">
|
104
105
|
<div class="col-12 order-2 col-lg-3 order-lg-1 my-auto text-center">
|
105
|
-
<i class="align-middle fas fa-universal-access fa-10x
|
106
|
+
<i class="align-middle fas fa-universal-access fa-10x text-d10-three sr-easeInOut" ></i>
|
106
107
|
</div>
|
107
108
|
<div class="col-12 order-1 col-lg-6 order-lg-2 my-auto text-center p-5">
|
108
|
-
<div class="
|
109
|
-
<h3 class="text-d10-
|
109
|
+
<div class="text-three promo">
|
110
|
+
<h3 class="text-d10-three">Accessible</h3>
|
110
111
|
<p>One of Solar Flair's piorities is enabling any user the ability to use sites</p>
|
111
112
|
</div>
|
112
113
|
</div>
|
113
114
|
<div class="col-12 order-2 col-lg-3 order-lg-3 my-auto text-center">
|
114
|
-
<i class="align-middle fab fa-accessible-icon fa-10x
|
115
|
+
<i class="align-middle fab fa-accessible-icon fa-10x text-d10-three sr-easeInOut" ></i>
|
115
116
|
</div>
|
116
117
|
</div>
|
117
118
|
</div>
|
@@ -0,0 +1,80 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
---
|
4
|
+
|
5
|
+
{% if page.cover %}
|
6
|
+
<div class="jumbotron jumbotron-fluid mb-5" style="position:relative;background-image:url('{{ page.cover }}');background-size:cover;background-position:center; height: 65vh; color:white;">
|
7
|
+
<div class="container" style="position: absolute; bottom: 0;background:rgba(0,0,0,.7); width:100%; max-width:none; text-shadow: rgb(0, 0, 0) 1px 2px;">
|
8
|
+
<div class="row">
|
9
|
+
<div class="offset-1 col-11">
|
10
|
+
<h1 class="display-3 text-uppercase">{{ page.long_title | escape }}</h1>
|
11
|
+
<p class="lead" style="font-weight:400; padding:1% 0;">{{ page.description }}</p>
|
12
|
+
</div>
|
13
|
+
</div>
|
14
|
+
</div>
|
15
|
+
</div>
|
16
|
+
{% endif %}
|
17
|
+
|
18
|
+
<main class="container mt-10" aria-label="Content">
|
19
|
+
|
20
|
+
<article class="row">
|
21
|
+
|
22
|
+
{% if page.cover == null %}
|
23
|
+
<div class="col-12">
|
24
|
+
<h1 class="display-3 text-uppercase">{{ page.long_title | escape }}</h1>
|
25
|
+
<p class="lead" style="font-weight:400; padding:1% 0;">{{ page.description }}</p>
|
26
|
+
</div>
|
27
|
+
{% endif %}
|
28
|
+
|
29
|
+
<table class="table">
|
30
|
+
<tr>
|
31
|
+
<th class="text-center"><small><strong>Lighten 30%</strong></small></th>
|
32
|
+
<th class="text-center"><small><strong>Lighten 20%</strong></small></th>
|
33
|
+
<th class="text-center"><small><strong>Lighten 10%</strong></small></th>
|
34
|
+
<th class="text-center">Primary</th>
|
35
|
+
<th class="text-center"><small><strong>Darken 10%</strong></small></th>
|
36
|
+
<th class="text-center"><small><strong>Darken 20%</strong></small></th>
|
37
|
+
<th class="text-center"><small><strong>Darken 30%</strong></small></th>
|
38
|
+
</tr>
|
39
|
+
|
40
|
+
{% for theme in site.data.theme %}
|
41
|
+
<tr>
|
42
|
+
<td class="text-center text-l30-{{ theme[0] }}">
|
43
|
+
<i class="fas fa-square fa-4x "></i><br><code class="output"></code>
|
44
|
+
</td>
|
45
|
+
<td class="text-center text-l20-{{ theme[0] }}">
|
46
|
+
<i class="fas fa-square fa-4x "></i><br><code class="output"></code>
|
47
|
+
</td>
|
48
|
+
<td class="text-center text-l10-{{ theme[0] }}">
|
49
|
+
<i class="fas fa-square fa-4x "></i><br><code class="output"></code>
|
50
|
+
</td>
|
51
|
+
<td class="text-center text-{{ theme[0] }}">
|
52
|
+
<i class="fas fa-square fa-4x "></i><br><code class="output"></code>
|
53
|
+
</td>
|
54
|
+
<td class="text-center text-d10-{{ theme[0] }}">
|
55
|
+
<i class="fas fa-square fa-4x "></i><br><code class="output"></code>
|
56
|
+
</td>
|
57
|
+
<td class="text-center text-d20-{{ theme[0] }}">
|
58
|
+
<i class="fas fa-square fa-4x "></i><br><code class="output"></code>
|
59
|
+
</td>
|
60
|
+
<td class="text-center text-d30-{{ theme[0] }}">
|
61
|
+
<i class="fas fa-square fa-4x "></i><br><code class="output"></code>
|
62
|
+
</td>
|
63
|
+
</tr>
|
64
|
+
{% endfor %}
|
65
|
+
</table>
|
66
|
+
|
67
|
+
{% if content %}
|
68
|
+
<div class="col">
|
69
|
+
|
70
|
+
{{ content | inject_anchors }}
|
71
|
+
</div>
|
72
|
+
{% endif %}
|
73
|
+
|
74
|
+
|
75
|
+
|
76
|
+
|
77
|
+
</article>
|
78
|
+
|
79
|
+
</main>
|
80
|
+
|
data/_layouts/teaser.html
CHANGED
@@ -1,11 +1,11 @@
|
|
1
1
|
---
|
2
2
|
layout: default
|
3
3
|
---
|
4
|
-
{% assign color = page.
|
4
|
+
{% assign color = page.theme_style | default: site.theme_style %}
|
5
5
|
{% assign slug = page.slug | default: site.slug %}
|
6
6
|
|
7
7
|
|
8
|
-
<div class="jumbotron jumbotron-fluid eq-height {{ color }}
|
8
|
+
<div class="jumbotron jumbotron-fluid eq-height home-{{ color }} vh{{ site.vertical_height }} mb-0" >
|
9
9
|
<div class="container bottom text-center py-5">
|
10
10
|
<h1 class="display-3 mb-0 sr-contact">{{ site.title}}</h1>
|
11
11
|
<p class="lead p-1 bold sr-contact" >{{ slug }}</p>
|
data/_sass/solar-flair.scss
CHANGED
@@ -15,14 +15,22 @@ $spacing-unit: 30px !default;
|
|
15
15
|
|
16
16
|
$text-color: #111 !default;
|
17
17
|
$background-color: #fdfdfd !default;
|
18
|
-
|
19
|
-
|
20
|
-
$
|
21
|
-
$
|
22
|
-
$
|
23
|
-
$
|
24
|
-
$
|
25
|
-
|
18
|
+
|
19
|
+
|
20
|
+
$color-one: #428E42 !default;
|
21
|
+
$color-two: #F47B28 !default;
|
22
|
+
$color-three: #14A1AF !default;
|
23
|
+
$color-four: #9E1D58 !default;
|
24
|
+
$color-grey: #828282 !default;
|
25
|
+
|
26
|
+
$green-color: #428E42 ;
|
27
|
+
$blue-color: #14A1AF;
|
28
|
+
// $orange-color: $color-two;
|
29
|
+
// $purple-color: $color-four;
|
30
|
+
// $grey-color: $color-grey;
|
31
|
+
|
32
|
+
$grey-color-light: lighten($color-grey, 40%) !default;
|
33
|
+
$grey-color-dark: darken($color-grey, 25%) !default;
|
26
34
|
|
27
35
|
// Width of the content area
|
28
36
|
$content-width: 800px !default;
|
@@ -30,19 +38,6 @@ $content-width: 800px !default;
|
|
30
38
|
$on-palm: 600px !default;
|
31
39
|
$on-laptop: 800px !default;
|
32
40
|
|
33
|
-
// Use media queries like this:
|
34
|
-
// @include media-query($on-palm) {
|
35
|
-
// .wrapper {
|
36
|
-
// padding-right: $spacing-unit / 2;
|
37
|
-
// padding-left: $spacing-unit / 2;
|
38
|
-
// }
|
39
|
-
// }
|
40
|
-
@mixin media-query($device) {
|
41
|
-
@media screen and (max-width: $device) {
|
42
|
-
@content;
|
43
|
-
}
|
44
|
-
}
|
45
|
-
|
46
41
|
@mixin relative-font-size($ratio) {
|
47
42
|
font-size: $base-font-size * $ratio;
|
48
43
|
}
|
@@ -61,7 +56,6 @@ $on-laptop: 800px !default;
|
|
61
56
|
;
|
62
57
|
|
63
58
|
|
64
|
-
|
65
59
|
body{
|
66
60
|
font-family:'Open Sans', sans-serif;
|
67
61
|
line-height: 1.5;
|
@@ -112,24 +106,24 @@ body{
|
|
112
106
|
|
113
107
|
|
114
108
|
.requestquote{
|
115
|
-
border-top: #428e42 solid 50px;
|
116
|
-
// border-right:none;
|
117
|
-
// border-left:none;
|
118
|
-
background:white;
|
109
|
+
border-top: #428e42 solid 50px;
|
110
|
+
// border-right:none;
|
111
|
+
// border-left:none;
|
112
|
+
background:white;
|
119
113
|
}
|
120
114
|
|
121
115
|
|
122
116
|
|
123
117
|
.footer{
|
124
|
-
background-size:cover;background-position:center;
|
118
|
+
background-size:cover;background-position:center;
|
125
119
|
}
|
126
120
|
|
127
121
|
.btn:hover{
|
128
|
-
cursor: pointer;
|
122
|
+
cursor: pointer;
|
129
123
|
}
|
130
124
|
|
131
125
|
.mt-10{
|
132
|
-
margin-top: 6rem!important;
|
126
|
+
margin-top: 6rem!important;
|
133
127
|
|
134
128
|
}
|
135
129
|
|
@@ -139,17 +133,13 @@ body{
|
|
139
133
|
line-height: 1.5;
|
140
134
|
}
|
141
135
|
p{
|
142
|
-
font-size: 1.1em;
|
136
|
+
font-size: 1.1em;
|
143
137
|
}
|
144
138
|
nav{
|
145
|
-
font-family: 'Montserrat', sans-serif;
|
139
|
+
font-family: 'Montserrat', sans-serif;
|
146
140
|
}
|
147
141
|
main.page-content{
|
148
|
-
padding-top: 69px;
|
149
|
-
}
|
150
|
-
|
151
|
-
#navbar > ul.navbar-nav.mr-auto > li > a{
|
152
|
-
color: #F47B28;
|
142
|
+
padding-top: 69px;
|
153
143
|
}
|
154
144
|
|
155
145
|
|
@@ -177,19 +167,19 @@ body{
|
|
177
167
|
|
178
168
|
|
179
169
|
.requestquote{
|
180
|
-
border-top: #428e42 solid 50px;
|
181
|
-
// border-right:none;
|
182
|
-
// border-left:none;
|
183
|
-
background:white;
|
170
|
+
border-top: #428e42 solid 50px;
|
171
|
+
// border-right:none;
|
172
|
+
// border-left:none;
|
173
|
+
background:white;
|
184
174
|
}
|
185
175
|
|
186
176
|
|
187
177
|
.btn:hover{
|
188
|
-
cursor: pointer;
|
178
|
+
cursor: pointer;
|
189
179
|
}
|
190
180
|
|
191
181
|
.mt-10{
|
192
|
-
margin-top: 6rem!important;
|
182
|
+
margin-top: 6rem!important;
|
193
183
|
|
194
184
|
}
|
195
185
|
|
@@ -85,40 +85,18 @@ h1, h2, h3, h4, h5, h6 {
|
|
85
85
|
font-weight: $base-font-weight;
|
86
86
|
}
|
87
87
|
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
.greenLink{
|
93
|
-
color: $green-color!important;
|
94
|
-
}
|
95
|
-
.orangeLink{
|
96
|
-
color: $orange-color!important;
|
97
|
-
}
|
98
|
-
.greyLink{
|
99
|
-
color:#7F7F7F;
|
100
|
-
}
|
101
|
-
|
102
|
-
|
103
|
-
|
104
88
|
div.promo{
|
105
89
|
h3{
|
106
90
|
font-size: 3.5rem;
|
107
91
|
}
|
108
92
|
}
|
109
93
|
|
110
|
-
|
111
|
-
color: $green-color;
|
112
|
-
&:hover{
|
113
|
-
color: darken($green-color, 25%);
|
114
|
-
text-decoration: underline;
|
115
|
-
}
|
116
|
-
}
|
94
|
+
|
117
95
|
/**
|
118
96
|
* Blockquotes
|
119
97
|
*/
|
120
98
|
blockquote {
|
121
|
-
color: $grey
|
99
|
+
color: $color-grey;
|
122
100
|
border-left: 4px solid $grey-color-light;
|
123
101
|
padding-left: $spacing-unit / 2;
|
124
102
|
@include relative-font-size(1.125);
|