solar-flair 0.1.10 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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);
|