solar-flair 0.1.7

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.
Files changed (64) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +21 -0
  3. data/README.md +86 -0
  4. data/_includes/ad.html +5 -0
  5. data/_includes/contact.html +68 -0
  6. data/_includes/footer.html +155 -0
  7. data/_includes/head.html +92 -0
  8. data/_includes/header.html +47 -0
  9. data/_includes/resources.html +16 -0
  10. data/_layouts/blog.html +54 -0
  11. data/_layouts/default.html +22 -0
  12. data/_layouts/home.html +128 -0
  13. data/_layouts/page.html +55 -0
  14. data/_layouts/post.html +53 -0
  15. data/_sass/solar-flair.scss +200 -0
  16. data/_sass/solar-flair/_base.scss +164 -0
  17. data/_sass/solar-flair/_gradients.scss +47 -0
  18. data/_sass/solar-flair/_home.scss +161 -0
  19. data/_sass/solar-flair/_hr.scss +49 -0
  20. data/_sass/solar-flair/_layout.scss +250 -0
  21. data/_sass/solar-flair/_links.scss +111 -0
  22. data/_sass/solar-flair/_lists.scss +7 -0
  23. data/_sass/solar-flair/_promo.scss +0 -0
  24. data/_sass/solar-flair/_syntax-highlighting.scss +71 -0
  25. data/_sass/solar-flair/_typeography.scss +115 -0
  26. data/assets/fonts/Montserrat/Montserrat-Black.ttf +0 -0
  27. data/assets/fonts/Montserrat/Montserrat-BlackItalic.ttf +0 -0
  28. data/assets/fonts/Montserrat/Montserrat-Bold.ttf +0 -0
  29. data/assets/fonts/Montserrat/Montserrat-BoldItalic.ttf +0 -0
  30. data/assets/fonts/Montserrat/Montserrat-ExtraBold.ttf +0 -0
  31. data/assets/fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf +0 -0
  32. data/assets/fonts/Montserrat/Montserrat-ExtraLight.ttf +0 -0
  33. data/assets/fonts/Montserrat/Montserrat-ExtraLightItalic.ttf +0 -0
  34. data/assets/fonts/Montserrat/Montserrat-Italic.ttf +0 -0
  35. data/assets/fonts/Montserrat/Montserrat-Light.ttf +0 -0
  36. data/assets/fonts/Montserrat/Montserrat-LightItalic.ttf +0 -0
  37. data/assets/fonts/Montserrat/Montserrat-Medium.ttf +0 -0
  38. data/assets/fonts/Montserrat/Montserrat-MediumItalic.ttf +0 -0
  39. data/assets/fonts/Montserrat/Montserrat-Regular.ttf +0 -0
  40. data/assets/fonts/Montserrat/Montserrat-SemiBold.ttf +0 -0
  41. data/assets/fonts/Montserrat/Montserrat-SemiBoldItalic.ttf +0 -0
  42. data/assets/fonts/Montserrat/Montserrat-Thin.ttf +0 -0
  43. data/assets/fonts/Montserrat/Montserrat-ThinItalic.ttf +0 -0
  44. data/assets/fonts/Montserrat/OFL.txt +93 -0
  45. data/assets/fonts/Open_Sans/LICENSE.txt +202 -0
  46. data/assets/fonts/Open_Sans/OpenSans-Bold.ttf +0 -0
  47. data/assets/fonts/Open_Sans/OpenSans-BoldItalic.ttf +0 -0
  48. data/assets/fonts/Open_Sans/OpenSans-ExtraBold.ttf +0 -0
  49. data/assets/fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf +0 -0
  50. data/assets/fonts/Open_Sans/OpenSans-Italic.ttf +0 -0
  51. data/assets/fonts/Open_Sans/OpenSans-Light.ttf +0 -0
  52. data/assets/fonts/Open_Sans/OpenSans-LightItalic.ttf +0 -0
  53. data/assets/fonts/Open_Sans/OpenSans-Regular.ttf +0 -0
  54. data/assets/fonts/Open_Sans/OpenSans-SemiBold.ttf +0 -0
  55. data/assets/fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf +0 -0
  56. data/assets/images/canvas.jpg +0 -0
  57. data/assets/images/paisley.jpg +0 -0
  58. data/assets/images/pattern.svg +5715 -0
  59. data/assets/images/squares.jpg +0 -0
  60. data/assets/images/white-horizontal.svg +102 -0
  61. data/assets/main.scss +6 -0
  62. data/assets/solar-flair.js +100 -0
  63. data/assets/solar-flair.min.js +1 -0
  64. metadata +151 -0
@@ -0,0 +1,16 @@
1
+ <sectionclass="container">
2
+ <div class="row">
3
+ <div class="col-12">
4
+
5
+ <h3 class=" text-left " style="color:#428e42 ;font-weight:500;">Resources</h3>
6
+ </div>
7
+ {% for doc in site.resources %}
8
+ {% if doc.path contains 'pdf' %}
9
+ <div class="col-12">
10
+ <a href="{{ doc.path }}" alt="{{ doc.title }}" style="color:#428e42"><i class="fa fa-file-pdf-o" aria-hidden="true"></i> {{ doc.title }}</a>
11
+ </div>
12
+ {% endif %}
13
+ {% endfor %}
14
+ </div>
15
+ </section>
16
+ <hr class="my-4" />
@@ -0,0 +1,54 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <div class="container" style="margin-top:66px">
6
+ <div class="row">
7
+ <div class="col-11">
8
+ <h1 class="display-1">{{ page.title }}</h1>
9
+ </div>
10
+ <a class="col-1 text-center my-auto" href="{{ "/feed.xml" | prepend: site.baseurl }}">
11
+ <i class="fa fa-rss-square fa-3x" aria-hidden="true"></i>
12
+ </a>
13
+ </div>
14
+ </div>
15
+
16
+ <div class="container">
17
+ <div class="row">
18
+ <div class="col">
19
+ <p>
20
+ {{ page.description }}
21
+ </p>
22
+ </div>
23
+ </div>
24
+ </div>
25
+
26
+ <div class="container">
27
+ <div class="row">
28
+
29
+
30
+
31
+
32
+ <div class="col-12 ">
33
+ <div id="news" class="container-fluid">
34
+
35
+
36
+
37
+ {% for post in site.posts %}
38
+ <a class="row" href="{{ post.url | prepend: site.baseurl }}">
39
+ <div class="col-3">
40
+ <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
41
+ </div>
42
+ <div class="col-9">
43
+ <h2>
44
+ {{ post.title }}
45
+ </h2>
46
+ </div>
47
+ </a>
48
+ {% endfor %}
49
+ </div>
50
+ </div>
51
+
52
+
53
+ </div>
54
+ </div>
@@ -0,0 +1,22 @@
1
+ <!DOCTYPE html>
2
+ <html lang="{{ page.lang | default: site.lang | default: "en" }}">
3
+
4
+ {% include head.html %}
5
+
6
+ {% assign color = page.color | default: site.theme_color %}
7
+ <body class="{{ color }}">
8
+ <!-- Google Tag Manager (noscript) -->
9
+ <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MCG4RJC" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
10
+ <!-- End Google Tag Manager (noscript) -->
11
+
12
+ {% include header.html %}
13
+
14
+
15
+ {{ content }}
16
+
17
+
18
+ {% include footer.html %}
19
+
20
+ </body>
21
+
22
+ </html>
@@ -0,0 +1,128 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+
6
+
7
+ <div class="jumbotron jumbotron-fluid eq-height {{ site.theme_color }}-home vh{{ site.vertical_height }}" >
8
+ <div class="container bottom text-center py-5">
9
+ <h1 class="display-3 mb-0 sr-contact">{{ site.title}}</h1>
10
+ <p class="lead p-1 bold sr-contact" >{{ site.slug }}</p>
11
+ <!-- <hr class="my-4"> -->
12
+ {% if site.cta_gs_url %}
13
+ {% if site.cta_gs_target == '_blank' %}
14
+ <!-- TODO: update to stable from alpha format -->
15
+ <button type="button" class="btn btn-primary sr-button" onclick="window.open('{{ site.cta_gs_url }}', '_blank');" >Get Started</button>
16
+ {% else %}
17
+ <button type="button" class="btn btn-primary sr-button" onclick="location.href = '{{ site.cta_gs_url }}';" >Get Started</button>
18
+ {% endif %}
19
+ {% endif %}
20
+
21
+ <button type="button" class="btn btn-outline-light page-scroll sr-button" href="#content">Learn More</button>
22
+
23
+ </div>
24
+ </div>
25
+
26
+
27
+ <section id="content" class="mt-10">
28
+ <div class="container-fluid whatare">
29
+ <div class="container" >
30
+ <div class="row h-100 py-5" style="margin:3% 0px;">
31
+ <div class="col-12 col-md-6 my-auto">
32
+ <h2>What is Solar Flair</h2>
33
+ <p>Solar Flair is an open source project and the <a href="https://jekyllrb.com/" target="_blank">Jekyll</a> theme that <a href="https://solarinnovations.com" target="_blank">Solar Innovations</a> uses accross their <a href="https://planning.solar" target="_blank">Planning.Solar</a> websites.</p>
34
+ <p>The theme is designed to have 4 primary branding colors that can be toggled on/off through the config file.</p>
35
+ <p>This demo site shows all four different theme styles.</p>
36
+ </div>
37
+ <div class="col-12 col-md-6 my-auto text-center ">
38
+
39
+ <span class="fa-stack fa-9x sr-icons">
40
+ <i class="far fa-sun fa-stack-2x orange-text orange-text-l10" ></i>
41
+ <i class="fas fa-circle fa-stack-1x orange-text orange-text-d10" ></i>
42
+ <!-- <i class="fas fa-sun fa-stack-1x fa-inverse orange-text-d10" ></i> -->
43
+ </span>
44
+
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ <div class="container-fluid" >
50
+ <div class="row justify-content-center mt-5 ">
51
+ <div class="col-12">
52
+ <h2 class="text-center display-3">Goals of Solar Flair</h2>
53
+ </div>
54
+ <div class="text-center col-6 mb-3">
55
+ <p class="lead">
56
+ Solar Flair strives to meet and exceed standards in speed, responsive design, and accessibility.
57
+ </p>
58
+
59
+ </div>
60
+ </div>
61
+
62
+ <div class="row">
63
+ <div class="col-12" >
64
+ <div class="container">
65
+ <div class="row py-4" >
66
+ <div class="col-12 order-2 col-lg-7 order-lg-1 my-auto text-center">
67
+ <i class="align-middle pr-5 fas fa-fighter-jet fa-3x text-l20-purple sr-easeInOut" ></i>
68
+ <i class="align-middle pr-5 fas fa-fighter-jet fa-7x purple-text sr-easeInOut" ></i>
69
+ <i class="align-middle pr-5 fas fa-fighter-jet fa-10x text-d20-purple sr-easeInOut" ></i>
70
+ </div>
71
+ <div class="col-12 order-1 col-lg-5 order-lg-2 my-auto text-center p-5 blue">
72
+ <div class="purple-text promo">
73
+ <h3 class="text-d10-purple">Fast</h3>
74
+ <p>Using Jekyll with Solar Flair allows our sites to achieve a loadtime of under 500ms</p>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ <div class="col-12 py-4" >
82
+ <div class="container">
83
+ <div class="row justify-content-end">
84
+ <div class="col-12 col-lg-5 my-auto text-center p-5">
85
+ <div class="green-text promo">
86
+ <h3 class="text-d10-green">Responsive</h3>
87
+ <p>The theme will adjust to whatever device users view it on: mobile, tablet, or desktop and laptop computers</p>
88
+ </div>
89
+ </div>
90
+ <div class="col-12 col-lg-7 my-auto text-center">
91
+ <i class="align-middle pr-5 fas fa-mobile-alt fa-5x green-text-d10 sr-pop-a" ></i>
92
+ <i class="align-middle pr-5 fas fa-tablet-alt fa-5x green-text-d10 sr-pop-b" ></i>
93
+ <i class="align-middle pr-5 fas fa-laptop fa-5x green-text-d10 sr-pop-c" ></i>
94
+ <i class="align-middle pr-5 fas fa-desktop fa-5x green-text-d10 sr-pop-d" ></i>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+
100
+ <div class="col-12 py-4" >
101
+ <div class="container">
102
+ <div class="row ">
103
+ <div class="col-12 order-2 col-lg-3 order-lg-1 my-auto text-center">
104
+ <i class="align-middle fas fa-universal-access fa-10x blue-text-d10 sr-easeInOut" ></i>
105
+ </div>
106
+ <div class="col-12 order-1 col-lg-6 order-lg-2 my-auto text-center p-5">
107
+ <div class="blue-text promo">
108
+ <h3 class="text-d10-blue">Accessible</h3>
109
+ <p>One of Solar Flair's piorities is enabling any user the ability to use sites</p>
110
+ </div>
111
+ </div>
112
+ <div class="col-12 order-2 col-lg-3 order-lg-3 my-auto text-center">
113
+ <i class="align-middle fab fa-accessible-icon fa-10x blue-text-d10 sr-easeInOut" ></i>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </section>
121
+
122
+ {{ content }}
123
+
124
+
125
+
126
+
127
+
128
+
@@ -0,0 +1,55 @@
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
+ {% if content %}
30
+ <div class="col-12">
31
+
32
+ {{ content }}
33
+ </div>
34
+ {% endif %}
35
+
36
+
37
+ {% if page.toc %}
38
+ <div class="col-12 col-md-4">
39
+ <h4>Contents</h4>
40
+ {{ content | toc_only }}
41
+
42
+ {% include ad.html %}
43
+ </div>
44
+ {% endif %}
45
+
46
+ <!-- <header class="col-12">
47
+ <h1 class="page-title">{{ page.title | escape }}</h1>
48
+ </header> -->
49
+
50
+
51
+
52
+ </article>
53
+
54
+ </main>
55
+
@@ -0,0 +1,53 @@
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
+ </div>
12
+ </div>
13
+ </div>
14
+ </div>
15
+ {% endif %}
16
+
17
+ <main class="container mt-10" aria-label="Content" itemscope itemtype="http://schema.org/BlogPosting">
18
+
19
+ <article class="row">
20
+
21
+ {% if page.cover == null %}
22
+ <div class="col-12">
23
+ <h1 class="display-5 text-uppercase">{{ page.title | escape }}</h1>
24
+ <p class="lead" style="font-weight:400; padding:1% 0;">{{ page.description }}</p>
25
+ </div>
26
+ {% endif %}
27
+
28
+ {% if content %}
29
+ <div class="col-12">
30
+
31
+ {{ content }}
32
+ </div>
33
+ {% endif %}
34
+
35
+
36
+ {% if page.toc %}
37
+ <div class="col-12 col-md-4">
38
+ <h4>Contents</h4>
39
+ {{ content | toc_only }}
40
+
41
+ {% include ad.html %}
42
+ </div>
43
+ {% endif %}
44
+
45
+ <!-- <header class="col-12">
46
+ <h1 class="page-title">{{ page.title | escape }}</h1>
47
+ </header> -->
48
+
49
+
50
+
51
+ </article>
52
+
53
+ </main>
@@ -0,0 +1,200 @@
1
+ @charset "utf-8";
2
+
3
+ // Google Font
4
+ @import url('https://fonts.googleapis.com/css?family=Montserrat:300,500,700|Open+Sans:300,600');
5
+
6
+ // Define defaults for each variable.
7
+
8
+ $base-font-family: 'Open Sans', sans-serif !default;
9
+ $base-font-size: 16px !default;
10
+ $base-font-weight: 400 !default;
11
+ $small-font-size: $base-font-size * 0.875 !default;
12
+ $base-line-height: 1.5 !default;
13
+
14
+ $spacing-unit: 30px !default;
15
+
16
+ $text-color: #111 !default;
17
+ $background-color: #fdfdfd !default;
18
+ // $brand-color: #F47B28 !default;
19
+ $orange-color: #F47B28 !default;
20
+ $green-color: #428E42 !default;
21
+ $blue-color: #14A1AF !default;
22
+ $purple-color: #9E1D58 !default;
23
+ $grey-color: #828282 !default;
24
+ $grey-color-light: lighten($grey-color, 40%) !default;
25
+ $grey-color-dark: darken($grey-color, 25%) !default;
26
+
27
+ // Width of the content area
28
+ $content-width: 800px !default;
29
+
30
+ $on-palm: 600px !default;
31
+ $on-laptop: 800px !default;
32
+
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
+ @mixin relative-font-size($ratio) {
47
+ font-size: $base-font-size * $ratio;
48
+ }
49
+
50
+ // Import partials.
51
+ @import
52
+ "solar-flair/base",
53
+ "solar-flair/links",
54
+ "solar-flair/gradients",
55
+ "solar-flair/hr",
56
+ "solar-flair/typeography",
57
+ "solar-flair/lists",
58
+ "solar-flair/home"
59
+ // "solar-flair/layout",
60
+ // "solar-flair/syntax-highlighting"
61
+ ;
62
+
63
+
64
+
65
+ body{
66
+ font-family:'Open Sans', sans-serif;
67
+ line-height: 1.5;
68
+ }
69
+ p{
70
+ font-size: 1.1em;
71
+ }
72
+ nav{
73
+ font-family: 'Montserrat', sans-serif;
74
+ }
75
+
76
+ main.page-content{
77
+ padding-top: 69px;
78
+ }
79
+
80
+ .sitename{
81
+ font-weight: 300;
82
+ font-size: 150%;
83
+ padding-left: 0px;
84
+ }
85
+
86
+
87
+ .bold{
88
+ font-weight: 500;
89
+ }
90
+
91
+
92
+
93
+ .site-header{
94
+ border-top:none;
95
+ }
96
+
97
+ .eq-height {
98
+ display: -webkit-box;
99
+ display: -webkit-flex;
100
+ display: -ms-flexbox;
101
+ display: flex;
102
+ }
103
+
104
+ body{
105
+ background:
106
+ linear-gradient(
107
+ rgba(255, 255, 255, 0.95),
108
+ rgba(255, 255, 255, 0.95)
109
+ ),
110
+ url('/assets/images/canvas.jpg');
111
+ }
112
+
113
+
114
+ .requestquote{
115
+ border-top: #428e42 solid 50px;
116
+ // border-right:none;
117
+ // border-left:none;
118
+ background:white;
119
+ }
120
+
121
+
122
+
123
+ .footer{
124
+ background-size:cover;background-position:center;
125
+ }
126
+
127
+ .btn:hover{
128
+ cursor: pointer;
129
+ }
130
+
131
+ .mt-10{
132
+ margin-top: 6rem!important;
133
+
134
+ }
135
+
136
+
137
+ body{
138
+ font-family:'Open Sans', sans-serif;
139
+ line-height: 1.5;
140
+ }
141
+ p{
142
+ font-size: 1.1em;
143
+ }
144
+ nav{
145
+ font-family: 'Montserrat', sans-serif;
146
+ }
147
+ main.page-content{
148
+ padding-top: 69px;
149
+ }
150
+
151
+ #navbar > ul.navbar-nav.mr-auto > li > a{
152
+ color: #F47B28;
153
+ }
154
+
155
+
156
+
157
+ .site-header{
158
+ border-top:none;
159
+ }
160
+
161
+ .eq-height {
162
+ display: -webkit-box;
163
+ display: -webkit-flex;
164
+ display: -ms-flexbox;
165
+ display: flex;
166
+ }
167
+
168
+ body{
169
+ background:
170
+ linear-gradient(
171
+ rgba(255, 255, 255, 0.95),
172
+ rgba(255, 255, 255, 0.95)
173
+ ),
174
+ url('/assets/images/canvas.jpg');
175
+
176
+ }
177
+
178
+
179
+ .requestquote{
180
+ border-top: #428e42 solid 50px;
181
+ // border-right:none;
182
+ // border-left:none;
183
+ background:white;
184
+ }
185
+
186
+
187
+ .btn:hover{
188
+ cursor: pointer;
189
+ }
190
+
191
+ .mt-10{
192
+ margin-top: 6rem!important;
193
+
194
+ }
195
+
196
+
197
+
198
+ nav{
199
+ background:rgba(255,255,255,.9)
200
+ }