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,116 @@
1
+ /* FORM INPUTS
2
+ =========================================================================================*/
3
+
4
+ // Default inputs
5
+ input, textarea, select {
6
+ width: 100%;
7
+ padding: (($spacer / 4) * 3) $spacer;
8
+ border-radius: $border-radius / 2;
9
+ border: 1px solid rgba($dark, 0.25);
10
+ font-size: $base-font-size * 1.1;
11
+ font-weight: bold;
12
+ outline: none;
13
+ box-sizing: border-box;
14
+ font-family: $font-family;
15
+ margin-bottom: $spacer;
16
+ background: $white;
17
+ &:not(:disabled):focus, &.focus {
18
+ border-color: $accent;
19
+ transition: border-color 0.3s, box-shadow 0.3s;
20
+ box-shadow: inset 0 0 0 1px $accent;
21
+ }
22
+ &:disabled, &.disabled {
23
+ cursor: not-allowed;
24
+ background: $light;
25
+ }
26
+ }
27
+
28
+ // Placeholder
29
+ ::placeholder, .select-placeholder {
30
+ color: rgba($dark, 0.3);
31
+ font-weight: normal;
32
+ }
33
+
34
+ // Select field
35
+ .select-field {
36
+ select {
37
+ appearance: none;
38
+ }
39
+ position: relative;
40
+ svg {
41
+ position: absolute;
42
+ right: 20px;
43
+ top: 17px;
44
+ opacity: 0.5;
45
+ }
46
+ }
47
+
48
+ // Checkbox & Radio
49
+ .checkbox {
50
+ position: relative;
51
+ padding-left: 30px;
52
+ margin-bottom: 10px;
53
+ display: block;
54
+ line-height: 20px;
55
+ cursor: pointer;
56
+ font-size: 18px;
57
+ -webkit-user-select: none;
58
+ -moz-user-select: none;
59
+ -ms-user-select: none;
60
+ user-select: none;
61
+ input {
62
+ position: absolute;
63
+ opacity: 0;
64
+ cursor: pointer;
65
+ height: 0;
66
+ width: 0;
67
+ &:checked ~ .checkmark {
68
+ background-color: $accent;
69
+ border: 0 !important;
70
+ &:after {
71
+ display: block;
72
+ }
73
+ }
74
+ }
75
+ .checkmark {
76
+ position: absolute;
77
+ top: 0;
78
+ left: 0;
79
+ height: 20px;
80
+ width: 20px;
81
+ border-radius: $border-radius / 2;
82
+ background: $white;
83
+ border: 1px solid rgba($dark, 0.25);
84
+ &:after {
85
+ content: "";
86
+ position: absolute;
87
+ display: none;
88
+ left: 7px;
89
+ top: 2px;
90
+ width: 5px;
91
+ height: 10px;
92
+ border: solid $white;
93
+ border-width: 0 2px 2px 0;
94
+ -webkit-transform: rotate(45deg);
95
+ -ms-transform: rotate(45deg);
96
+ transform: rotate(45deg);
97
+ }
98
+ }
99
+ &.radio {
100
+ line-height: 23px;
101
+ .checkmark {
102
+ border-radius: 50%;
103
+ width: 22px;
104
+ height: 22px;
105
+ &:after {
106
+ top: 6px;
107
+ left: 6px;
108
+ width: 8px;
109
+ height: 8px;
110
+ border-radius: 50%;
111
+ background: $white;
112
+ }
113
+ }
114
+ }
115
+ }
116
+
@@ -0,0 +1,67 @@
1
+ /* IMAGE & LIGHTBOX
2
+ =========================================================================================*/
3
+
4
+ // Image
5
+ img {
6
+ display: block;
7
+ width: 100%;
8
+ margin-bottom: $spacer;
9
+ border-radius: $border-radius;
10
+ box-shadow: 0 0 80px rgba($dark, 0.2);
11
+ &.allow-lightbox {
12
+ cursor: pointer;
13
+ }
14
+ }
15
+
16
+ // Lightbox
17
+ .lightbox {
18
+ position: fixed;
19
+ left: 0;
20
+ top: 0;
21
+ display: none;
22
+ justify-content: center;
23
+ align-items: center;
24
+ width: 100%;
25
+ height: 100%;
26
+ background-color: rgba($dark, 0.85);
27
+ z-index: 1000;
28
+ > div {
29
+ padding: 5%;
30
+ }
31
+ .close {
32
+ background: transparent;
33
+ width: 40px;
34
+ height: 40px;
35
+ position: absolute;
36
+ right: 15px;
37
+ top: 15px;
38
+ z-index: 1002;
39
+ cursor: pointer;
40
+ transition: opacity 0.25s;
41
+ opacity: 0.8;
42
+ font-size: 24px;
43
+ color: $white;
44
+ &:hover {
45
+ opacity: 1;
46
+ transition: opacity 0.2s;
47
+ }
48
+ }
49
+ img {
50
+ max-height: 90vh;
51
+ }
52
+ @media (max-width: $breakpoint-sm) {
53
+ display: none !important;
54
+ }
55
+ }
56
+
57
+ .lightbox-opened {
58
+ @media (min-width: $breakpoint-sm) {
59
+ overflow-y: hidden;
60
+ }
61
+ }
62
+
63
+ // Exclude from lightbpx
64
+ .no-lightbox {
65
+ cursor: default;
66
+ pointer-events: none;
67
+ }
data/_sass/_lists.scss ADDED
@@ -0,0 +1,94 @@
1
+ /* LISTINGS
2
+ =========================================================================================*/
3
+
4
+ // Unordered list
5
+ ul {
6
+ margin-bottom: $spacer;
7
+ &:not(.check-list):not(.icon-list) {
8
+ list-style: disc;
9
+ padding-left: $spacer;
10
+ li {
11
+ &:not(:last-child) {
12
+ margin-bottom: ($spacer / 4) * 3;
13
+ }
14
+ }
15
+ }
16
+ }
17
+
18
+ // Ordered list
19
+ ol {
20
+ list-style: none;
21
+ counter-reset: my-counter;
22
+ padding-left: 25px;
23
+ margin-bottom: $spacer;
24
+ li {
25
+ counter-increment: my-counter;
26
+ &:not(:last-child) {
27
+ margin-bottom: ($spacer / 4) * 3;
28
+ }
29
+ text-indent: -30px;
30
+ &:before {
31
+ content: counter(my-counter)'.';
32
+ width: 24px;
33
+ color: $dark;
34
+ font-weight: bold;
35
+ height: 24px;
36
+ line-height: 24px;
37
+ text-align: center;
38
+ display: inline-block;
39
+ margin-right: 5px;
40
+ text-indent: 0;
41
+ }
42
+ }
43
+ }
44
+
45
+ // Check list
46
+ .check-list {
47
+ padding-left: 35px;
48
+ li {
49
+ text-indent: -32px;
50
+ &:not(:last-child) {
51
+ margin-bottom: ($spacer / 4) * 3;
52
+ }
53
+ &:before {
54
+ content: "\e92b";
55
+ font-family: 'Feather';
56
+ line-height: 1;
57
+ width: 24px;
58
+ height: 24px;
59
+ padding: 4px;
60
+ border-radius: 50%;
61
+ background: $accent;
62
+ color: $white;
63
+ margin-right: $spacer / 2.5;
64
+ }
65
+ }
66
+ }
67
+
68
+ // Number list
69
+ .number-list {
70
+ list-style: none;
71
+ counter-reset: my-counter;
72
+ padding-left: 35px;
73
+ li {
74
+ counter-increment: my-counter;
75
+ &:not(:last-child) {
76
+ margin-bottom: ($spacer / 4) * 3;
77
+ }
78
+ text-indent: -35px;
79
+ &:before {
80
+ content: counter(my-counter);
81
+ color: $white;
82
+ width: 24px;
83
+ height: 24px;
84
+ line-height: 24px;
85
+ text-align: center;
86
+ display: inline-block;
87
+ background: $accent;
88
+ font-weight: normal;
89
+ border-radius: 100%;
90
+ margin-right: 10px;
91
+ text-indent: 0;
92
+ }
93
+ }
94
+ }
@@ -0,0 +1,53 @@
1
+ /* PAGE LOADER EFFECT
2
+ =========================================================================================*/
3
+
4
+ // Page loaderr
5
+ .loader {
6
+ position: fixed !important;
7
+ display: block;
8
+ line-height: 110vh;
9
+ width: 100% !important;
10
+ height: 100% !important;
11
+ top: 0;
12
+ left: 0;
13
+ text-align: center;
14
+ background-color: #fff;
15
+ z-index: 9999;
16
+ .lds-ring {
17
+ display: inline-block;
18
+ position: relative;
19
+ width: 80px;
20
+ height: 80px;
21
+ div {
22
+ box-sizing: border-box;
23
+ display: block;
24
+ position: absolute;
25
+ width: 50px;
26
+ height: 50px;
27
+ margin: 8px;
28
+ border: 4px solid $accent;
29
+ border-radius: 50%;
30
+ animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
31
+ border-color: $accent transparent transparent transparent;
32
+ &:nth-child(1) {
33
+ animation-delay: -0.45s;
34
+ }
35
+ &:nth-child(2) {
36
+ animation-delay: -0.3s;
37
+ }
38
+ &:nth-child(3) {
39
+ animation-delay: -0.15s;
40
+ }
41
+ }
42
+ }
43
+ }
44
+
45
+ // The animation
46
+ @keyframes lds-ring {
47
+ 0% {
48
+ transform: rotate(0deg);
49
+ }
50
+ 100% {
51
+ transform: rotate(360deg);
52
+ }
53
+ }
@@ -0,0 +1,60 @@
1
+ /* TYPOGRAPHY
2
+ =========================================================================================*/
3
+
4
+ // Base
5
+ body {
6
+ font-family: $font-family;
7
+ line-height: 1.6;
8
+ color: rgba($dark,0.75);
9
+ }
10
+
11
+ // Paragraphs
12
+ p {
13
+ margin-bottom: $spacer;
14
+ font-size: $base-font-size * 1.25;
15
+ @media (max-width: $breakpoint-sm) {
16
+ font-size: $base-font-size * 1.1;
17
+ }
18
+ @media (max-width: $breakpoint-xs) {
19
+ font-size: $base-font-size;
20
+ }
21
+ code {
22
+ background: $light;
23
+ padding: 2px 8px;
24
+ border-radius: $border-radius / 2;
25
+ color: #E2577A;
26
+ }
27
+ }
28
+
29
+ // Text selection
30
+ ::selection {
31
+ background: $accent;
32
+ color: $white;
33
+ }
34
+
35
+ // Small
36
+ small {
37
+ font-size: $base-font-size;
38
+ }
39
+
40
+ // Bold
41
+ b, strong {
42
+ color: $dark;
43
+ font-weight: bold;
44
+ }
45
+
46
+ // Link
47
+ a {
48
+ color: $accent;
49
+ text-decoration: underline;
50
+ &:hover {
51
+ text-decoration: none;
52
+ color: $accent-hover;
53
+ }
54
+ }
55
+
56
+
57
+ // Divider
58
+ hr {
59
+ margin: 50px 0;
60
+ }
data/_sass/_reset.scss ADDED
@@ -0,0 +1,50 @@
1
+ /* CSS RESET
2
+ =========================================================================================*/
3
+ html, body, div, span, applet, object, iframe,
4
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
5
+ a, abbr, acronym, address, big, cite, code,
6
+ del, dfn, em, img, ins, kbd, q, s, samp,
7
+ small, strike, strong, sub, sup, tt, var,
8
+ b, u, i, center,
9
+ dl, dt, dd, ol, ul, li,
10
+ fieldset, form, label, legend,
11
+ table, caption, tbody, tfoot, thead, tr, th, td,
12
+ article, aside, canvas, details, embed,
13
+ figure, figcaption, footer, header, hgroup,
14
+ menu, nav, output, ruby, section, summary,
15
+ time, mark, audio, video {
16
+ margin: 0;
17
+ padding: 0;
18
+ border: 0;
19
+ font-size: 100%;
20
+ font: inherit;
21
+ vertical-align: baseline;
22
+ }
23
+
24
+ // HTML5 display-role reset for older browsers
25
+ article, aside, details, figcaption, figure,
26
+ footer, header, hgroup, menu, nav, section {
27
+ display: block;
28
+ }
29
+ body {
30
+ line-height: 1;
31
+ }
32
+ ol, ul {
33
+ list-style: none;
34
+ }
35
+ blockquote, q {
36
+ quotes: none;
37
+ }
38
+ blockquote:before, blockquote:after,
39
+ q:before, q:after {
40
+ content: '';
41
+ content: none;
42
+ }
43
+ table {
44
+ border-collapse: collapse;
45
+ border-spacing: 0;
46
+ }
47
+ html {
48
+ width: 100vw;
49
+ overflow-x: hidden;
50
+ }
data/_sass/_tags.scss ADDED
@@ -0,0 +1,21 @@
1
+ /* TAGS
2
+ =========================================================================================*/
3
+
4
+ .tag-cloud {
5
+ a {
6
+ background-color: $accent;
7
+ border-radius: $border-radius / 2;
8
+ margin: 0 2px 6px 0;
9
+ display: inline-block;
10
+ padding: 0 ($spacer / 2);
11
+ font-size: $base-font-size;
12
+ text-transform: lowercase;
13
+ color: $white;
14
+ text-decoration: none;
15
+ transition: background-color 0.25s;
16
+ &:hover {
17
+ background: $accent-hover;
18
+ transition: background-color 0.3s;
19
+ }
20
+ }
21
+ }
@@ -0,0 +1,56 @@
1
+ /* TOOLTIPS
2
+ =========================================================================================*/
3
+
4
+ /**
5
+ * Simpletooltip is a JQuery plugin, thought to insert short tooltips to any element of your website more easily
6
+ * v1.3.0
7
+ *
8
+ * 2014 Carlos Sanz Garcia
9
+ * Distributed under GPL-3.0 license
10
+ *
11
+ * http://not-only-code.github.com/Simpletooltip
12
+ */
13
+ .simpletooltip {
14
+ cursor: pointer;
15
+ }
16
+ .simple-tooltip {
17
+ position: absolute;
18
+ display: block;
19
+ width: auto;
20
+ max-width: 200px;
21
+ height: auto;
22
+ padding: 6px 8px;
23
+ color: #cccccc;
24
+ font: normal 13px/1.3em 'Helvetica', 'Arial', 'Sans-serif';
25
+ border: solid 2px #111111;
26
+ background-color: #222222;
27
+ margin-bottom: 30px;
28
+ -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
29
+ -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
30
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
31
+ -webkit-border-radius: 5px;
32
+ -moz-border-radius: 5px;
33
+ border-radius: 5px;
34
+ z-index: 9999;
35
+ }
36
+ .simple-tooltip .arrow {
37
+ display: block;
38
+ width: 0;
39
+ height: 0;
40
+ position: absolute;
41
+ border-width: 6px;
42
+ border-style: solid;
43
+ border-color: transparent;
44
+ }
45
+ .simple-tooltip.top .arrow {
46
+ left: 50%;
47
+ }
48
+ .simple-tooltip.left .arrow {
49
+ top: 50%;
50
+ }
51
+ .simple-tooltip.bottom .arrow {
52
+ left: 50%;
53
+ }
54
+ .simple-tooltip.right .arrow {
55
+ top: 50%;
56
+ }
@@ -0,0 +1,30 @@
1
+ // Colors
2
+ $accent: #2AAC7B;
3
+ $dark: #171010;
4
+ $light: #F6F5F5;
5
+ $white: #ffffff;
6
+ $accent-hover: darken($accent, 5%);
7
+
8
+ // Fonts
9
+ $font-family: -apple-system, sans-serif;
10
+ $base-font-size: 16px;
11
+
12
+ // Headings
13
+ $font-size:(
14
+ h1 : 72px,
15
+ h2 : 48px,
16
+ h3 : 36px,
17
+ h4 : 32px,
18
+ h5 : 24px
19
+ );
20
+
21
+ // Radius
22
+ $border-radius: 8px;
23
+
24
+ // Breakpoints
25
+ $breakpoint-sm: 768px;
26
+ $breakpoint-xs: 450px;
27
+ $breakpoint-xxs: 320px;
28
+
29
+ // Spacing
30
+ $spacer: 20px;
data/_sass/main.scss ADDED
@@ -0,0 +1,21 @@
1
+ // Imports
2
+ @import "variables";
3
+ @import "loader";
4
+ @import "helpers";
5
+ @import "reset";
6
+ @import "header";
7
+ @import "content";
8
+ @import "columns";
9
+ @import "paragraphs";
10
+ @import "headings";
11
+ @import "colors";
12
+ @import "lists";
13
+ @import "tags";
14
+ @import "buttons";
15
+ @import "inputs";
16
+ @import "lightbox";
17
+ @import "codes";
18
+ @import "blockquotes";
19
+ @import "tooltips";
20
+ @import "icons";
21
+ @import "footer";
@@ -0,0 +1,4 @@
1
+ ---
2
+ ---
3
+
4
+ @import "main";