solar-flair 0.1.7

Sign up to get free protection for your applications and to get access to all the features.
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
+ }