jekyll-sharp-styleguide 0.1.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.
Files changed (67) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +21 -0
  3. data/README.md +382 -0
  4. data/_includes/blockquotes.html +4 -0
  5. data/_includes/buttons.html +16 -0
  6. data/_includes/codes.html +64 -0
  7. data/_includes/colors.html +36 -0
  8. data/_includes/columns.html +10 -0
  9. data/_includes/favicons.html +9 -0
  10. data/_includes/footer.html +7 -0
  11. data/_includes/header.html +10 -0
  12. data/_includes/headings.html +10 -0
  13. data/_includes/icons.html +1068 -0
  14. data/_includes/image.html +4 -0
  15. data/_includes/inputs.html +50 -0
  16. data/_includes/lightbox.html +8 -0
  17. data/_includes/lists.html +44 -0
  18. data/_includes/loader.html +5 -0
  19. data/_includes/paragraphs.html +7 -0
  20. data/_includes/scripts.html +5 -0
  21. data/_includes/tags.html +23 -0
  22. data/_layouts/default.html +1 -0
  23. data/_layouts/page.html +5 -0
  24. data/_layouts/post.html +5 -0
  25. data/_sass/_blockquotes.scss +15 -0
  26. data/_sass/_buttons.scss +37 -0
  27. data/_sass/_codes.scss +253 -0
  28. data/_sass/_colors.scss +24 -0
  29. data/_sass/_columns.scss +42 -0
  30. data/_sass/_content.scss +26 -0
  31. data/_sass/_footer.scss +7 -0
  32. data/_sass/_header.scss +37 -0
  33. data/_sass/_headings.scss +66 -0
  34. data/_sass/_helpers.scss +85 -0
  35. data/_sass/_icons.scss +865 -0
  36. data/_sass/_inputs.scss +116 -0
  37. data/_sass/_lightbox.scss +67 -0
  38. data/_sass/_lists.scss +94 -0
  39. data/_sass/_loader.scss +53 -0
  40. data/_sass/_paragraphs.scss +60 -0
  41. data/_sass/_reset.scss +50 -0
  42. data/_sass/_tags.scss +21 -0
  43. data/_sass/_tooltips.scss +56 -0
  44. data/_sass/_variables.scss +30 -0
  45. data/_sass/main.scss +21 -0
  46. data/assets/css/main.scss +4 -0
  47. data/assets/fonts/Feather.svg +276 -0
  48. data/assets/fonts/Feather.ttf +0 -0
  49. data/assets/fonts/Feather.woff +0 -0
  50. data/assets/img/favicons/android-chrome-192x192.png +0 -0
  51. data/assets/img/favicons/android-chrome-512x512.png +0 -0
  52. data/assets/img/favicons/apple-touch-icon.png +0 -0
  53. data/assets/img/favicons/browserconfig.xml +9 -0
  54. data/assets/img/favicons/favicon-16x16.png +0 -0
  55. data/assets/img/favicons/favicon-32x32.png +0 -0
  56. data/assets/img/favicons/favicon.ico +0 -0
  57. data/assets/img/favicons/mstile-150x150.png +0 -0
  58. data/assets/img/favicons/safari-pinned-tab.svg +25 -0
  59. data/assets/img/favicons/site.webmanifest +19 -0
  60. data/assets/img/header_bg.webp +0 -0
  61. data/assets/img/lightbox.jpg +0 -0
  62. data/assets/img/logo.png +0 -0
  63. data/assets/js/copycode.js +49 -0
  64. data/assets/js/loader.js +11 -0
  65. data/assets/js/main.js +60 -0
  66. data/assets/js/tooltip.js +492 -0
  67. metadata +123 -0
@@ -0,0 +1,4 @@
1
+ <h3>Lightbox</h3>
2
+
3
+ <h6>Click to open lightbox</h6>
4
+ <img class="allow-lightbox" src="assets/img/lightbox.jpg">
@@ -0,0 +1,50 @@
1
+ <h3>Inputs</h3>
2
+
3
+ <div class="row md-3">
4
+ <div class="col">
5
+ <h6>Default state</h6>
6
+ <input type="text" placeholder="Placeholder text">
7
+ </div>
8
+ <div class="col">
9
+ <h6>Focus state</h6>
10
+ <input class="focus" type="text" placeholder="Placeholder text">
11
+ </div>
12
+ <div class="col">
13
+ <h6>Disabled state</h6>
14
+ <input type="text" placeholder="Placeholder text" disabled>
15
+ </div>
16
+ </div>
17
+
18
+ <h6>Textarea</h6>
19
+ <textarea rows="5" placeholder="Add your comment here"></textarea>
20
+
21
+ <div class="row md-2">
22
+ <div class="col">
23
+ <h6>Select field</h6>
24
+ <div class="select-field">
25
+ <select class="select-box">
26
+ <option value="">Select an option</option>
27
+ <option value="opt-1">Option 1</option>
28
+ <option value="opt-2">Option 2</option>
29
+ <option value="opt-3">Option 3</option>
30
+ </select>
31
+ <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 1792 1792" width="16"><path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"/></svg>
32
+ </div>
33
+ </div>
34
+ <div class="col">
35
+ <h6>Checkbox & radio</h6>
36
+ <label class="checkbox d-inline-block">
37
+ <input type="checkbox">
38
+ <span class="checkmark"></span>
39
+ Checkbox &nbsp;
40
+ </label>
41
+ <label class="checkbox radio d-inline-block">
42
+ <input type="radio">
43
+ <span class="checkmark"></span>
44
+ Radio button
45
+ </label>
46
+ </div>
47
+ </div>
48
+
49
+
50
+
@@ -0,0 +1,8 @@
1
+ <div id="lightbox" class="lightbox">
2
+ <button class="close" type="button">
3
+ <i class="feather-x"></i>
4
+ </button>
5
+ <div>
6
+ <img src="/assets/img/lightbox.jpg">
7
+ </div>
8
+ </div>
@@ -0,0 +1,44 @@
1
+ <h3>Lists</h3>
2
+
3
+ <div class="row md-4 sm-2 xs-1">
4
+ <div class="col">
5
+ <h6>Unordered list</h6>
6
+ <ul>
7
+ <li>List item 1</li>
8
+ <li>List item 2</li>
9
+ <li>List item 3</li>
10
+ <li>List item 4</li>
11
+ <li>List item 5</li>
12
+ </ul>
13
+ </div>
14
+ <div class="col">
15
+ <h6>Ordered list</h6>
16
+ <ol>
17
+ <li>List item 1</li>
18
+ <li>List item 2</li>
19
+ <li>List item 3</li>
20
+ <li>List item 4</li>
21
+ <li>List item 5</li>
22
+ </ol>
23
+ </div>
24
+ <div class="col">
25
+ <h6>Check list</h6>
26
+ <ul class="check-list">
27
+ <li>List item 1</li>
28
+ <li>List item 2</li>
29
+ <li>List item 3</li>
30
+ <li>List item 4</li>
31
+ <li>List item 5</li>
32
+ </ul>
33
+ </div>
34
+ <div class="col">
35
+ <h6>Number list</h6>
36
+ <ol class="number-list">
37
+ <li>List item 1</li>
38
+ <li>List item 2</li>
39
+ <li>List item 3</li>
40
+ <li>List item 4</li>
41
+ <li>List item 5</li>
42
+ </ol>
43
+ </div>
44
+ </div>
@@ -0,0 +1,5 @@
1
+ <div id="loader" class="loader">
2
+ <div class="lds-ring">
3
+ <div></div><div></div><div></div><div></div>
4
+ </div>
5
+ </div>
@@ -0,0 +1,7 @@
1
+ <h3>Paragraphs</h3>
2
+
3
+ <h6>Body copy</h6>
4
+ <p>Sed elementum vel sapien in ultricies. Sed a dui dui. Fusce <code>commodo</code> esta faucibus lobortis. <b>Nulla facilisi</b>. Fusce sagittis, massa ut faucibus feugiat, velit neque pharetra enim, aliquet mollis <a href="#">lectus tellus quis</a> odio. Sed a ante sed nibh iaculis scelerisque. Vestibulum a magna nunc.</p>
5
+
6
+ <h6>Small text</h6>
7
+ <p><small>Sed elementum vel sapien in ultricies. Sed a dui dui. Fusce commodo esta faucibus lobortis. Nulla facilisi. Fusce sagittis, massa ut faucibus feugiat, velit neque pharetra enim, aliquet mollis.</small></p>
@@ -0,0 +1,5 @@
1
+ <script src="assets/js/loader.js"></script>
2
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
3
+ <script src="assets/js/copycode.js"></script>
4
+ <script src="assets/js/tooltip.js"></script>
5
+ <script src="assets/js/main.js"></script>
@@ -0,0 +1,23 @@
1
+ <h3>Tags</h3>
2
+
3
+ <h6>Tagcloud</h6>
4
+ <div class="tag-cloud">
5
+ <a href="#">html</a>
6
+ <a href="#">css</a>
7
+ <a href="#">jquery</a>
8
+ <a href="#">javascript</a>
9
+ <a href="#">jekyll</a>
10
+ <a href="#">php</a>
11
+ <a href="#">design</a>
12
+ <a href="#">gulp</a>
13
+ <a href="#">ui</a>
14
+ <a href="#">node</a>
15
+ <a href="#">article</a>
16
+ <a href="#">basic note</a>
17
+ <a href="#">ruby</a>
18
+ <a href="#">python</a>
19
+ <a href="#">wordpress</a>
20
+ <a href="#">addon</a>
21
+ <a href="#">plugin</a>
22
+ <a href="#">photoshop</a>
23
+ </div>
@@ -0,0 +1 @@
1
+ {{ content }}
@@ -0,0 +1,5 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ {{ content }}
@@ -0,0 +1,5 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ {{ content }}
@@ -0,0 +1,15 @@
1
+ /* BLOCKQUOTES
2
+ =========================================================================================*/
3
+
4
+ blockquote {
5
+ padding: $spacer (($spacer / 2) * 3);
6
+ background: $light;
7
+ border-left: 5px solid $accent;
8
+ margin-bottom: $spacer;
9
+ border-radius: $border-radius / 2;
10
+ display: block;
11
+ &.accent {
12
+ background-color: $accent;
13
+ opacity: 0.3;
14
+ }
15
+ }
@@ -0,0 +1,37 @@
1
+ /* BUTTONS
2
+ =========================================================================================*/
3
+
4
+ // Basic button
5
+ button {
6
+ outline: none;
7
+ border: 0;
8
+ }
9
+
10
+ // Theme button
11
+ .btn {
12
+ background: $accent;
13
+ color: $white;
14
+ font-weight: bold;
15
+ padding: (($spacer / 4) * 3) (($spacer / 4) * 5);
16
+ border: 0;
17
+ display: inline-block;
18
+ box-shadow: none;
19
+ font-size: $base-font-size * 1.1;
20
+ border-radius: $border-radius / 2;
21
+ margin-bottom: $spacer;
22
+ text-align: center;
23
+ text-decoration: none;
24
+ cursor: pointer;
25
+ &:not(.disabled):hover, &.hover {
26
+ background: $accent-hover;
27
+ transition: background-color 0.3s;
28
+ color: $white;
29
+ }
30
+ &:disabled, &.disabled {
31
+ opacity: 0.5;
32
+ cursor: not-allowed;
33
+ }
34
+ @media (max-width: $breakpoint-xs) {
35
+ display: block;
36
+ }
37
+ }
data/_sass/_codes.scss ADDED
@@ -0,0 +1,253 @@
1
+ /* CODES & HIGHLIGHTS
2
+ =========================================================================================*/
3
+
4
+ // Code block
5
+ .highlight {
6
+ background-color: $light;
7
+ margin-bottom: $spacer;
8
+ padding: $spacer;
9
+ border-radius: $border-radius;
10
+ max-height: 450px;
11
+ overflow: auto;
12
+ }
13
+
14
+ // Copy code button
15
+ pre {
16
+ position: relative;
17
+ button {
18
+ position: absolute;
19
+ right: -5px;
20
+ top: -5px;
21
+ border: 0;
22
+ background: #e7e7e7;
23
+ padding: 3px 6px;
24
+ border-radius: $border-radius / 2;
25
+ font-size: 13px;
26
+ color: #666;
27
+ opacity: 0;
28
+ cursor: pointer;
29
+ &:hover {
30
+ background: #d5dae2;
31
+ color: black;
32
+ transition: background-color 0.2s;
33
+ }
34
+ }
35
+ &:hover {
36
+ button {
37
+ opacity: 1;
38
+ transition: opacity 0.3s;
39
+ }
40
+ }
41
+ }
42
+
43
+ // Rouge github theme syntax highlight
44
+ .highlight table td { padding: 5px; }
45
+ .highlight table pre { margin: 0; }
46
+ .highlight .cm {
47
+ color: #999988;
48
+ font-style: italic;
49
+ }
50
+ .highlight .cp {
51
+ color: #999999;
52
+ font-weight: bold;
53
+ }
54
+ .highlight .c1 {
55
+ color: #999988;
56
+ font-style: italic;
57
+ }
58
+ .highlight .cs {
59
+ color: #999999;
60
+ font-weight: bold;
61
+ font-style: italic;
62
+ }
63
+ .highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
64
+ color: #999988;
65
+ font-style: italic;
66
+ }
67
+ .highlight .err {
68
+ color: #a61717;
69
+ background-color: #e3d2d2;
70
+ }
71
+ .highlight .gd {
72
+ color: #000000;
73
+ background-color: #ffdddd;
74
+ }
75
+ .highlight .ge {
76
+ color: #000000;
77
+ font-style: italic;
78
+ }
79
+ .highlight .gr {
80
+ color: #aa0000;
81
+ }
82
+ .highlight .gh {
83
+ color: #999999;
84
+ }
85
+ .highlight .gi {
86
+ color: #000000;
87
+ background-color: #ddffdd;
88
+ }
89
+ .highlight .go {
90
+ color: #888888;
91
+ }
92
+ .highlight .gp {
93
+ color: #555555;
94
+ }
95
+ .highlight .gs {
96
+ font-weight: bold;
97
+ }
98
+ .highlight .gu {
99
+ color: #aaaaaa;
100
+ }
101
+ .highlight .gt {
102
+ color: #aa0000;
103
+ }
104
+ .highlight .kc {
105
+ color: #000000;
106
+ font-weight: bold;
107
+ }
108
+ .highlight .kd {
109
+ color: #000000;
110
+ font-weight: bold;
111
+ }
112
+ .highlight .kn {
113
+ color: #000000;
114
+ font-weight: bold;
115
+ }
116
+ .highlight .kp {
117
+ color: #000000;
118
+ font-weight: bold;
119
+ }
120
+ .highlight .kr {
121
+ color: #000000;
122
+ font-weight: bold;
123
+ }
124
+ .highlight .kt {
125
+ color: #445588;
126
+ font-weight: bold;
127
+ }
128
+ .highlight .k, .highlight .kv {
129
+ color: #000000;
130
+ font-weight: bold;
131
+ }
132
+ .highlight .mf {
133
+ color: #009999;
134
+ }
135
+ .highlight .mh {
136
+ color: #009999;
137
+ }
138
+ .highlight .il {
139
+ color: #009999;
140
+ }
141
+ .highlight .mi {
142
+ color: #009999;
143
+ }
144
+ .highlight .mo {
145
+ color: #009999;
146
+ }
147
+ .highlight .m, .highlight .mb, .highlight .mx {
148
+ color: #009999;
149
+ }
150
+ .highlight .sa {
151
+ color: #000000;
152
+ font-weight: bold;
153
+ }
154
+ .highlight .sb {
155
+ color: #d14;
156
+ }
157
+ .highlight .sc {
158
+ color: #d14;
159
+ }
160
+ .highlight .sd {
161
+ color: #d14;
162
+ }
163
+ .highlight .s2 {
164
+ color: #d14;
165
+ }
166
+ .highlight .se {
167
+ color: #d14;
168
+ }
169
+ .highlight .sh {
170
+ color: #d14;
171
+ }
172
+ .highlight .si {
173
+ color: #d14;
174
+ }
175
+ .highlight .sx {
176
+ color: #d14;
177
+ }
178
+ .highlight .sr {
179
+ color: #009926;
180
+ }
181
+ .highlight .s1 {
182
+ color: #d14;
183
+ }
184
+ .highlight .ss {
185
+ color: #990073;
186
+ }
187
+ .highlight .s, .highlight .dl {
188
+ color: #d14;
189
+ }
190
+ .highlight .na {
191
+ color: #008080;
192
+ }
193
+ .highlight .bp {
194
+ color: #999999;
195
+ }
196
+ .highlight .nb {
197
+ color: #0086B3;
198
+ }
199
+ .highlight .nc {
200
+ color: #445588;
201
+ font-weight: bold;
202
+ }
203
+ .highlight .no {
204
+ color: #008080;
205
+ }
206
+ .highlight .nd {
207
+ color: #3c5d5d;
208
+ font-weight: bold;
209
+ }
210
+ .highlight .ni {
211
+ color: #800080;
212
+ }
213
+ .highlight .ne {
214
+ color: #990000;
215
+ font-weight: bold;
216
+ }
217
+ .highlight .nf, .highlight .fm {
218
+ color: #990000;
219
+ font-weight: bold;
220
+ }
221
+ .highlight .nl {
222
+ color: #990000;
223
+ font-weight: bold;
224
+ }
225
+ .highlight .nn {
226
+ color: #555555;
227
+ }
228
+ .highlight .nt {
229
+ color: #000080;
230
+ }
231
+ .highlight .vc {
232
+ color: #008080;
233
+ }
234
+ .highlight .vg {
235
+ color: #008080;
236
+ }
237
+ .highlight .vi {
238
+ color: #008080;
239
+ }
240
+ .highlight .nv, .highlight .vm {
241
+ color: #008080;
242
+ }
243
+ .highlight .ow {
244
+ color: #000000;
245
+ font-weight: bold;
246
+ }
247
+ .highlight .o {
248
+ color: #000000;
249
+ font-weight: bold;
250
+ }
251
+ .highlight .w {
252
+ color: #bbbbbb;
253
+ }
@@ -0,0 +1,24 @@
1
+ /* COLOR SWATCHES
2
+ =========================================================================================*/
3
+
4
+ // Swatch
5
+ .color-item {
6
+ margin-bottom: $spacer;
7
+ figure {
8
+ height: 150px;
9
+ border-radius: $border-radius;
10
+ line-height: 150px;
11
+ text-align: center;
12
+ @media (max-width: $breakpoint-sm) {
13
+ height: 200px;
14
+ line-height: 200px;
15
+ }
16
+ @media (max-width: $breakpoint-xs) {
17
+ height: 100px;
18
+ line-height: 100px;
19
+ }
20
+ }
21
+ p {
22
+ margin-bottom: 0;
23
+ }
24
+ }
@@ -0,0 +1,42 @@
1
+ /* COLUMNS LAYOUT
2
+ =========================================================================================*/
3
+
4
+ // Generate MD columns
5
+ @for $i from 1 through 6 {
6
+ @media (min-width: $breakpoint-sm) {
7
+ .md-#{$i} {
8
+ column-count: $i;
9
+ }
10
+ }
11
+ }
12
+
13
+ // Generate SM columns
14
+ @for $i from 1 through 6 {
15
+ @media (max-width: $breakpoint-sm) {
16
+ .sm-#{$i} {
17
+ column-count: $i;
18
+ }
19
+ }
20
+ }
21
+
22
+ // Generate XS columns
23
+ @for $i from 1 through 6 {
24
+ @media (max-width: $breakpoint-xs) {
25
+ .xs-#{$i} {
26
+ column-count: $i;
27
+ }
28
+ }
29
+ }
30
+
31
+ // Styleguide columns
32
+ .row-columns {
33
+ .col {
34
+ height: 300px;
35
+ @media (max-width: $breakpoint-xs) {
36
+ height: 300px;
37
+ &:nth-child(4), &:nth-child(5), &:nth-child(6) {
38
+ display: none;
39
+ }
40
+ }
41
+ }
42
+ }
@@ -0,0 +1,26 @@
1
+ /* THE CONTENT
2
+ =========================================================================================*/
3
+
4
+ main {
5
+ padding: 100px 0;
6
+ @media (max-width: $breakpoint-sm) {
7
+ padding: 75px 0;
8
+ }
9
+ @media (max-width: $breakpoint-xs) {
10
+ padding: 50px 0;
11
+ }
12
+ }
13
+
14
+ .container {
15
+ max-width: 680px;
16
+ margin: 0 auto;
17
+ padding: 0 $spacer;
18
+ }
19
+
20
+ .row {
21
+ gap: $spacer;
22
+ }
23
+
24
+ .col {
25
+ width: 100%;
26
+ }
@@ -0,0 +1,7 @@
1
+ /* FOOTER
2
+ =========================================================================================*/
3
+
4
+ footer {
5
+ padding: $spacer 0;
6
+ background-color: $light;
7
+ }
@@ -0,0 +1,37 @@
1
+ /* HEADER
2
+ =========================================================================================*/
3
+
4
+ // Header base
5
+ header {
6
+ background-color: $dark;
7
+ background-image: url('../img/header_bg.webp');
8
+ background-size: cover;
9
+ background-position: center;
10
+ min-height: 550px;
11
+ padding-top: 50px;
12
+ display: flex;
13
+ align-items: center;
14
+ h1, h2, h3 {
15
+ color: $white;
16
+ }
17
+ @media (max-width: $breakpoint-sm) {
18
+ min-height: 450px;
19
+ }
20
+ }
21
+
22
+ // Branding logo
23
+ .site-logo {
24
+ position: absolute;
25
+ top: $spacer;
26
+ img {
27
+ width: 80px;
28
+ height: auto;
29
+ opacity: 0.9;
30
+ }
31
+ &:hover {
32
+ img {
33
+ opacity: 1;
34
+ transition: opacity 0.3s;
35
+ }
36
+ }
37
+ }
@@ -0,0 +1,66 @@
1
+ /* HEADINGS
2
+ =========================================================================================*/
3
+
4
+ // All headings
5
+ h1, h2, h3, h4, h5, h6 {
6
+ font-weight: bold;
7
+ margin-bottom: $spacer;
8
+ line-height: 1;
9
+ color: $dark;
10
+ }
11
+
12
+ // Anchor links
13
+ h2, h3, h4 {
14
+ .anchor {
15
+ float: left;
16
+ margin-left: -25px;
17
+ line-height: 1;
18
+ opacity: 0;
19
+ padding-right: 5px;
20
+ cursor: pointer;
21
+ i {
22
+ font-size: 18px;
23
+ color: $dark;
24
+ position: relative;
25
+ top: -3px;
26
+ }
27
+ &:hover {
28
+ opacity: 1;
29
+ }
30
+ }
31
+ &:hover {
32
+ .anchor {
33
+ text-decoration: none;
34
+ opacity: 0.4;
35
+ &:hover {
36
+ opacity: 0.7;
37
+ }
38
+ }
39
+ }
40
+ }
41
+
42
+ // Generate responsive headings
43
+ @each $heading, $size in $font-size {
44
+ #{$heading}{
45
+ font-size: $size;
46
+ letter-spacing: -($size / 35);
47
+ @media (max-width: $breakpoint-sm) {
48
+ font-size: $size * 0.8;
49
+ }
50
+ @media (max-width: $breakpoint-xs) {
51
+ font-size: $size * 0.6;
52
+ letter-spacing: -($size / 55);
53
+ }
54
+ }
55
+ }
56
+
57
+ // H6 styling
58
+ h6 {
59
+ font-size: 16px;
60
+ @media (max-width: $breakpoint-sm) {
61
+ font-size: 14px;
62
+ }
63
+ @media (max-width: $breakpoint-xxs) {
64
+ font-size: 12px;
65
+ }
66
+ }