jekyll-theme-drop 0.1.1 → 0.1.2

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 (27) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/bouncing.svg +53 -0
  3. data/_layouts/default.html +2 -0
  4. data/_sass/base/_typography.scss +14 -14
  5. data/_sass/components/_box.scss +106 -10
  6. data/_sass/components/_button.scss +30 -14
  7. data/_sass/components/_container.scss +2 -3
  8. data/_sass/components/_form.scss +7 -7
  9. data/_sass/components/_table.scss +1 -1
  10. data/_sass/layout/_banner.scss +6 -6
  11. data/_sass/layout/_breakpoints.scss +5 -5
  12. data/_sass/layout/_footer.scss +9 -9
  13. data/_sass/layout/_header.scss +5 -5
  14. data/_sass/libs/_vars.scss +12 -0
  15. data/assets/css/images/arrow.svg +13 -7
  16. data/assets/css/images/banner.svg +206 -54
  17. data/assets/css/images/circles.svg +30 -0
  18. data/assets/css/images/falling.svg +37 -0
  19. data/assets/images/bg-1.jpg +0 -0
  20. data/assets/images/bouncing.svg +50 -0
  21. data/assets/images/favicon.ico +0 -0
  22. data/assets/images/logo.svg +21 -0
  23. data/assets/js/main.js +26 -25
  24. metadata +9 -5
  25. data/assets/images/drop.svg +0 -99
  26. data/assets/images/drop_background.svg +0 -110
  27. data/assets/images/drop_bouncing.svg +0 -125
data/_sass/components/_table.scss CHANGED
@@ -30,6 +30,6 @@ table {
30
30
  }
31
31
 
32
32
  thead {
33
- background: #f5f5f5;
33
+ background: _palette(bg);
34
34
  }
35
35
  }
data/_sass/layout/_banner.scss CHANGED
@@ -2,17 +2,17 @@
2
2
 
3
3
  #banner {
4
4
  position: relative;
5
- color: #fff;
5
+ color: _palette(fg);
6
6
  text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
7
7
  text-align: center;
8
- background: #35b88f url('images/banner.svg') bottom center no-repeat;
8
+ background: _palette(bg) url('images/banner.svg') bottom center no-repeat;
9
9
  padding: 5em 0 5em 0;
10
10
  margin: 0;
11
11
  background-size: 125% auto;
12
12
 
13
13
  .button {
14
- color: #35b882;
15
- text-shadow: 0 0 0.5px rgba(53, 184, 130, 0.25);
14
+ color: _palette(accent);
15
+ text-shadow: 0 0 0.5px _palette(bg-light);
16
16
  }
17
17
 
18
18
  header {
@@ -35,10 +35,10 @@
35
35
 
36
36
  a {
37
37
  color: inherit;
38
- border-bottom-color: rgba(255, 255, 255, 0.5);
38
+ border-bottom-color: _palette(border);
39
39
 
40
40
  &:hover {
41
- border-bottom-color: rgba(255, 255, 255, 0);
41
+ border-bottom-color: _palette(border-light);
42
42
  }
43
43
  }
44
44
  }
data/_sass/layout/_breakpoints.scss CHANGED
@@ -11,7 +11,7 @@
11
11
  /* Header */
12
12
 
13
13
  #header {
14
- padding: 10em 0 12em 0;
14
+ padding: 2em 0 12em 0;
15
15
  }
16
16
 
17
17
  }
@@ -30,7 +30,7 @@
30
30
  /* Header */
31
31
 
32
32
  #header {
33
- padding: 8em 0 10em 0;
33
+ padding: 2em 0 10em 0;
34
34
  }
35
35
 
36
36
  }
@@ -42,7 +42,7 @@
42
42
  /* Basic */
43
43
 
44
44
  body {
45
- background-color: #203936;
45
+ background-color: _palette(bg);
46
46
  background-image: url('images/overlay.png'), url('../images/bg-alt.jpg');
47
47
  background-repeat: repeat, no-repeat;
48
48
  background-size: auto, 100% auto;
@@ -110,7 +110,7 @@
110
110
  /* Header */
111
111
 
112
112
  #header {
113
- padding: 10em 0 12em 0;
113
+ padding: 2em 0 12em 0;
114
114
  }
115
115
 
116
116
  /* Banner */
@@ -278,7 +278,7 @@
278
278
 
279
279
  /* Header */
280
280
  #header {
281
- padding: 6em 0 6em 0;
281
+ padding: 2em 0 6em 0;
282
282
 
283
283
  header {
284
284
  padding-left: 2em;
data/_sass/layout/_footer.scss CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  #footer {
4
4
  position: relative;
5
- color: #fff;
5
+ color: _palette(fg);
6
6
  text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
7
7
  text-align: center;
8
8
  margin: 4.5em 0 0 0;
@@ -14,25 +14,25 @@
14
14
  top: -4.5em;
15
15
  left: 50%;
16
16
  height: 4.5em;
17
- border-left: solid 1px #fff;
17
+ border-left: solid 1px _palette(accent);
18
18
  }
19
19
 
20
20
  a {
21
- color: #fff;
22
- text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
23
- border-bottom-color: rgba(255, 255, 255, 0.5);
21
+ color: _palette(accent-light);
22
+ text-shadow: 0 0 0.5px _palette(accent-light);
23
+ border-bottom-color: _palette(accent-light);
24
24
 
25
25
  &:hover {
26
- color: #35b88f;
27
- text-shadow: 0 0 0.5px rgba(69, 200, 159, 0.25);
28
- border-bottom-color: rgba(53, 184, 143, 0.5);
26
+ color: _palette(accent);
27
+ text-shadow: 0 0 0.5px _palette(accent);
28
+ border-bottom-color: _palette(accent);
29
29
  }
30
30
  }
31
31
 
32
32
  .icons {
33
33
  padding: 0.75em 2em 0.75em 2em;
34
34
  border-radius: 3em;
35
- border: solid 1px #fff;
35
+ border: solid 1px _palette(accent);
36
36
  display: inline-block;
37
37
  margin: 0 0 3em 0;
38
38
  }
data/_sass/layout/_header.scss CHANGED
@@ -3,11 +3,11 @@
3
3
  #header {
4
4
  @include vendor('transition', 'opacity 2s ease-in-out');
5
5
  position: relative;
6
- color: #fff;
6
+ color: _palette(fg);
7
7
  text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
8
8
  text-align: center;
9
9
  margin: 0;
10
- padding: 14em 0 14em 0;
10
+ padding: 2em 0 14em 0;
11
11
  cursor: default;
12
12
 
13
13
  header {
@@ -22,7 +22,7 @@
22
22
 
23
23
  p {
24
24
  border-top: solid 1px rgba(255, 255, 255, 0.5);
25
- color: rgba(255, 255, 255, 0.75);
25
+ color: _palette(fg-light);
26
26
  text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.1875);
27
27
  font-size: 1em;
28
28
  text-transform: uppercase;
@@ -57,7 +57,7 @@
57
57
  bottom: -9em;
58
58
  left: 50%;
59
59
  height: 9em;
60
- border-left: solid 1px #fff;
60
+ border-left: solid 1px _palette(accent);
61
61
  }
62
62
 
63
63
  &:before {
@@ -70,7 +70,7 @@
70
70
  bottom: -4.5em;
71
71
  margin-left: -45px;
72
72
  margin-bottom: -33px;
73
- background: url('images/arrow.svg') no-repeat;
73
+ background: url('images/circles.svg') no-repeat;
74
74
  }
75
75
  }
76
76
 
data/_sass/libs/_vars.scss CHANGED
@@ -19,4 +19,16 @@
19
19
 
20
20
  // Palette.
21
21
  $palette: (
22
+ bg: rgba(25,45,60,1),
23
+ bg-alt: rgba(245,245,245,1),
24
+ bg-light: rgba(25,45,60,0.5),
25
+ bg-dark: rgba(5,20,25,1),
26
+ fg: rgba(255,255,255,1),
27
+ fg-bold: rgba(255,255,255,1),
28
+ fg-light: rgba(255,255,255,1),
29
+ border: rgba(40,60,70,0.75),
30
+ border-bg: rgba(40,60,70,1),
31
+ border-light: rgba(40,60,70,0.5),
32
+ accent: rgba(0,255,255,1),
33
+ accent-light: rgba(165,255,255,1)
22
34
  );
data/assets/css/images/arrow.svg CHANGED
@@ -1,11 +1,17 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="90px" height="66px" viewBox="0 0 90 66" zoomAndPan="disable">
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
2
+ width="90px"
3
+ height="66px"
4
+ viewBox="0 0 90 66"
5
+ zoomAndPan="disable"
6
+ stroke="#00ffff"
7
+ stroke-width="1">
2
8
 
3
- <line x1="1" y1="1" x2="90" y2="1" style="stroke:#fff;stroke-width:1" />
4
- <line x1="1" y1="1" x2="45.5" y2="46" style="stroke:#fff;stroke-width:1" />
5
- <line x1="90" y1="1" x2="45.5" y2="46" style="stroke:#fff;stroke-width:1" />
9
+ <line x1="1" y1="1" x2="90" y2="1"/>
10
+ <line x1="1" y1="1" x2="45.5" y2="46"/>
11
+ <line x1="90" y1="1" x2="45.5" y2="46"/>
6
12
 
7
- <line x1="1" y1="21" x2="90" y2="21" style="stroke:#fff;stroke-width:1" />
8
- <line x1="1" y1="21" x2="45.5" y2="66" style="stroke:#fff;stroke-width:1" />
9
- <line x1="90" y1="21" x2="45.5" y2="66" style="stroke:#fff;stroke-width:1" />
13
+ <line x1="1" y1="21" x2="90" y2="21"/>
14
+ <line x1="1" y1="21" x2="45.5" y2="66"/>
15
+ <line x1="90" y1="21" x2="45.5" y2="66"/>
10
16
 
11
17
  </svg>
data/assets/css/images/banner.svg CHANGED
@@ -1,54 +1,206 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1800px" height="900px" viewBox="0 0 1800 900" zoomAndPan="disable">
2
-
3
- <style type="text/css"><![CDATA[
4
- line
5
- {
6
- stroke: rgba(255,255,255,0.125);
7
- stroke-width: 0.85px;
8
- }
9
-
10
- polygon
11
- {
12
- fill: rgba(255,255,255,0.075);
13
- }
14
- ]]></style>
15
-
16
- <!-- Middle line -->
17
- <line x1="900" y1="0" x2="900" y2="900" />
18
-
19
- <!-- Lines -->
20
- <line x1="0" y1="0" x2="900" y2="900" />
21
- <line x1="100" y1="0" x2="900" y2="800" />
22
- <line x1="200" y1="0" x2="900" y2="700" />
23
- <line x1="300" y1="0" x2="900" y2="600" />
24
- <line x1="400" y1="0" x2="900" y2="500" />
25
- <line x1="300" y1="900" x2="600" y2="600" />
26
- <line x1="400" y1="900" x2="700" y2="600" />
27
- <line x1="500" y1="900" x2="800" y2="600" />
28
- <line x1="600" y1="900" x2="900" y2="600" />
29
- <line x1="700" y1="900" x2="900" y2="700" />
30
- <line x1="800" y1="900" x2="900" y2="800" />
31
-
32
- <line x1="1800" y1="0" x2="900" y2="900" />
33
- <line x1="1700" y1="0" x2="900" y2="800" />
34
- <line x1="1600" y1="0" x2="900" y2="700" />
35
- <line x1="1500" y1="0" x2="900" y2="600" />
36
- <line x1="1400" y1="0" x2="900" y2="500" />
37
- <line x1="1500" y1="900" x2="1200" y2="600" />
38
- <line x1="1400" y1="900" x2="1100" y2="600" />
39
- <line x1="1300" y1="900" x2="1000" y2="600" />
40
- <line x1="1200" y1="900" x2="900" y2="600" />
41
- <line x1="1100" y1="900" x2="900" y2="700" />
42
- <line x1="1000" y1="900" x2="900" y2="800" />
43
-
44
- <!-- Fills -->
45
- <polygon points="300,900 600,600 650,650 700,600 750,650 800,600 850,650 900,600 900,900 900,600 950,650 1000,600 1050,650 1100,600 1150,650 1200,600 1500,900" />
46
- <polygon points="350,950 650,650 700,700 750,650 800,700 850,650 900,700 900,900 900,700 950,650 1000,700 1050,650 1100,700 1150,650 1450,950" />
47
-
48
- <polygon points="400,1000 700,700 750,750 800,700 850,750 900,700 900,900 900,700 950,750 1000,700 1050,750 1100,700 1300,900" />
49
-
50
- <polygon points="450,1050 750,750 800,800 850,750 900,800 900,900 900,800 950,750 1000,800 1050,750 1350,1050" />
51
- <polygon points="500,1100 800,800 850,850 900,800 900,900 900,800 950,850 1000,800 1300,1100" />
52
- <polygon points="550,1150 850,850 900,900 950,850 1250,1150" />
53
-
54
- </svg>
1
+ <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+ <svg
3
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
4
+ xmlns:cc="http://creativecommons.org/ns#"
5
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
6
+ xmlns:svg="http://www.w3.org/2000/svg"
7
+ xmlns="http://www.w3.org/2000/svg"
8
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
9
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
10
+ width="1800px"
11
+ height="900px"
12
+ viewBox="0 0 1800 900"
13
+ zoomAndPan="disable"
14
+ version="1.1"
15
+ id="svg4545"
16
+ sodipodi:docname="banner.svg"
17
+ inkscape:version="0.92.1 r15371">
18
+ <metadata
19
+ id="metadata4551">
20
+ <rdf:RDF>
21
+ <cc:Work
22
+ rdf:about="">
23
+ <dc:format>image/svg+xml</dc:format>
24
+ <dc:type
25
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
26
+ <dc:title></dc:title>
27
+ </cc:Work>
28
+ </rdf:RDF>
29
+ </metadata>
30
+ <defs
31
+ id="defs4549" />
32
+ <sodipodi:namedview
33
+ pagecolor="#ffffff"
34
+ bordercolor="#666666"
35
+ borderopacity="1"
36
+ objecttolerance="10"
37
+ gridtolerance="10"
38
+ guidetolerance="10"
39
+ inkscape:pageopacity="0"
40
+ inkscape:pageshadow="2"
41
+ inkscape:window-width="1920"
42
+ inkscape:window-height="1080"
43
+ id="namedview4547"
44
+ showgrid="false"
45
+ inkscape:pagecheckerboard="true"
46
+ inkscape:zoom="0.78"
47
+ inkscape:cx="764.58368"
48
+ inkscape:cy="193.22501"
49
+ inkscape:window-x="1366"
50
+ inkscape:window-y="-16"
51
+ inkscape:window-maximized="1"
52
+ inkscape:current-layer="layer1" />
53
+ <style
54
+ type="text/css"
55
+ id="style4485"><![CDATA[
56
+ line
57
+ {
58
+ stroke: rgba(255,255,255,0.125);
59
+ stroke-width: 0.85px;
60
+ }
61
+
62
+ polygon
63
+ {
64
+ fill: rgba(255,255,255,0.075);
65
+ }
66
+ ]]></style>
67
+ <!-- Middle line -->
68
+ <!-- Lines -->
69
+ <!-- Fills -->
70
+ <g
71
+ inkscape:groupmode="layer"
72
+ id="layer1"
73
+ inkscape:label="up"
74
+ style="display:inline">
75
+ <ellipse
76
+ style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.85047138;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;opacity:0.1"
77
+ id="path4553"
78
+ cx="900"
79
+ cy="-49.999996"
80
+ rx="299.57477"
81
+ ry="149.57477" />
82
+ <ellipse
83
+ ry="199.57454"
84
+ rx="399.57455"
85
+ cy="1.1622907e-06"
86
+ cx="900"
87
+ id="ellipse4555"
88
+ style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.85092378;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;opacity:0.1" />
89
+ <ellipse
90
+ ry="99.575211"
91
+ rx="199.57521"
92
+ cy="-99.999992"
93
+ cx="900"
94
+ id="ellipse4557"
95
+ style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.84956795;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;opacity:0.1" />
96
+ <ellipse
97
+ style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.85119545;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;opacity:0.1"
98
+ id="ellipse4559"
99
+ cx="900"
100
+ cy="50"
101
+ rx="499.5744"
102
+ ry="249.5744" />
103
+ <ellipse
104
+ ry="299.57431"
105
+ rx="599.57428"
106
+ cy="99.999985"
107
+ cx="900"
108
+ id="ellipse4561"
109
+ style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.85137665;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;opacity:0.1" />
110
+ <ellipse
111
+ style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.85150611;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;opacity:0.1"
112
+ id="ellipse4601"
113
+ cx="900"
114
+ cy="150"
115
+ rx="699.57428"
116
+ ry="349.57425" />
117
+ <ellipse
118
+ ry="399.51343"
119
+ rx="799.51343"
120
+ cy="200"
121
+ cx="900"
122
+ id="ellipse4603"
123
+ style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.97314984;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;opacity:0.1" />
124
+ <ellipse
125
+ style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.09479356;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;opacity:0.1"
126
+ id="ellipse4605"
127
+ cx="900"
128
+ cy="250"
129
+ rx="899.45264"
130
+ ry="449.45261" />
131
+ <ellipse
132
+ ry="499.39178"
133
+ rx="999.39172"
134
+ cy="300"
135
+ cx="900"
136
+ id="ellipse4607"
137
+ style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.21643722;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;opacity:0.1" />
138
+ <ellipse
139
+ style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.338081;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;opacity:0.1"
140
+ id="ellipse4609"
141
+ cx="900"
142
+ cy="350.00003"
143
+ rx="1099.3309"
144
+ ry="549.33093" />
145
+ <ellipse
146
+ ry="599.27014"
147
+ rx="1199.2701"
148
+ cy="400.00003"
149
+ cx="900"
150
+ id="ellipse4611"
151
+ style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.45972478;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;opacity:0.1" />
152
+ <ellipse
153
+ style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.58136857;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;opacity:0.1"
154
+ id="ellipse4613"
155
+ cx="900"
156
+ cy="450"
157
+ rx="1299.2094"
158
+ ry="649.20929" />
159
+ </g>
160
+ <g
161
+ inkscape:groupmode="layer"
162
+ id="layer2"
163
+ inkscape:label="down"
164
+ style="display:inline;opacity:1">
165
+ <ellipse
166
+ style="opacity:0.1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.85228378;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
167
+ id="ellipse4633"
168
+ cx="900"
169
+ cy="-1000"
170
+ rx="200"
171
+ ry="100"
172
+ transform="scale(1,-1)" />
173
+ <ellipse
174
+ transform="scale(1,-1)"
175
+ ry="150"
176
+ rx="300"
177
+ cy="-950"
178
+ cx="900"
179
+ id="ellipse4695"
180
+ style="opacity:0.1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.27842557;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
181
+ <ellipse
182
+ style="opacity:0.1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.70456743;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
183
+ id="ellipse4699"
184
+ cx="900"
185
+ cy="-900"
186
+ rx="400"
187
+ ry="200"
188
+ transform="scale(1,-1)" />
189
+ <ellipse
190
+ transform="scale(1,-1)"
191
+ ry="250"
192
+ rx="500"
193
+ cy="-850"
194
+ cx="900"
195
+ id="ellipse4701"
196
+ style="opacity:0.1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.13070941;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
197
+ <ellipse
198
+ style="opacity:0.1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.55685139;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
199
+ id="ellipse4703"
200
+ cx="900"
201
+ cy="-800"
202
+ rx="600"
203
+ ry="300"
204
+ transform="scale(1,-1)" />
205
+ </g>
206
+ </svg>