jekyll-theme-lycorma 0.1.2 → 0.2.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (4) hide show
  1. checksums.yaml +4 -4
  2. data/_layouts/default.html +2 -1
  3. data/assets/main.scss +136 -29
  4. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 971dc11bdf11e28e96614460d0c7e449281c0c8ff65744f70ed6a00e6bf7ebe5
4
- data.tar.gz: 8eda105217aae8cfd6cc02012ad83b4c89b416564e16c49db4795f6854d7057b
3
+ metadata.gz: 881388038a6da95ac38c33b0d2465750b19604c801ad91a53c22d703e6783aac
4
+ data.tar.gz: cd1e8564e675b9247e8f41b8a2c50d5d038733f09fe6cc795b844284d0b17d13
5
5
  SHA512:
6
- metadata.gz: 0c14a1e0d68c0f8fb89a4ed5f9fa4cec4fa08c2395457281bd130384cebf482c723d6d788b82d07149376d45c33270295e02cb52ff019866549e9a4e2bfeb2a2
7
- data.tar.gz: 363830891a61267aae8d3b416dfb2c14b74dc57fa224d76c6e382e3b735407808bc548a89c0d815e5fc472f173e71417705db0c4872d246d946885454c6d2f21
6
+ metadata.gz: 2b78e4910896088128a45f16d63d99b12c374ec7b9b110dd542bea2c581c8372d437218f1590159c9e25ffd50231a03a9c11bf6cc6e00f234b580adb59e2f3e7
7
+ data.tar.gz: 7b02d7b423503c551bf28b2632f4862a3e3d6aa9c208cf78328de7d1b0a41da229cfc049d23ce110408c66c08842556e4f49c9fd44a98bb1c08dea0ae5f4cac7
data/_layouts/default.html CHANGED
@@ -11,7 +11,8 @@
11
11
  </head>
12
12
 
13
13
  <body>
14
-
14
+ <div id="sidebarbackground">
15
+ </div>
15
16
  <!-- HEADER START -->
16
17
  {% include header.html %}
17
18
  <!-- HEADER END -->
data/assets/main.scss CHANGED
@@ -13,6 +13,8 @@ $color-accent: #9E9E9E;
13
13
  $color-text-normal: #212121;
14
14
  $color-text-alt: #757575;
15
15
  $color-divider: #BDBDBD;
16
+ $information-phone: "only screen and (max-width : 639px)";
17
+ $information-comp: "only screen and (min-width: 640px)";
16
18
 
17
19
  @import "reset";
18
20
 
@@ -24,12 +26,34 @@ body {
24
26
 
25
27
 
26
28
  // HEADER SIDEBAR
29
+ #sidebarbackground {
30
+ @media #{$information-comp} {
31
+ position: fixed;
32
+ top: 0;
33
+ bottom: 0;
34
+ width: 25%;
35
+ max-width: 16em;
36
+ border-right: 2px solid $color-divider;
37
+ background-color: $color-main-normal;
38
+ margin-right: 2em;
39
+ }
40
+ }
41
+
27
42
  header {
28
- position: fixed;
29
- height: 100%;
30
- width: 25%;
31
- min-width: 10em;
32
- margin-right: 2em;
43
+
44
+ @media #{$information-phone} {
45
+ width: 100%;
46
+ color: $color-text-normal;
47
+ }
48
+
49
+ @media #{$information-comp} {
50
+ position: absolute;
51
+ top: 0;
52
+ bottom: 0;
53
+ width: 25%;
54
+ max-width: 16em;
55
+ margin-right: 2em;
56
+ }
33
57
  background-color: $color-main-normal;
34
58
  padding: 0;
35
59
  text-align: center;
@@ -46,12 +70,20 @@ body {
46
70
  }
47
71
 
48
72
  p {
73
+
74
+ @media #{$information-phone} {
75
+ padding-bottom: 1em;
76
+ }
77
+
78
+ @media #{$information-comp} {
79
+ padding-bottom: 2em;
80
+ padding-right: 25%;
81
+ padding-left: 25%;
82
+ }
83
+
49
84
  font-family: $font-body;
50
85
  color: $color-text-alt;
51
86
  background-color: $color-main-dark;
52
- padding-bottom: 2em;
53
- padding-right: 25%;
54
- padding-left: 25%;
55
87
  text-align: center;
56
88
  }
57
89
 
@@ -63,28 +95,53 @@ body {
63
95
  }
64
96
 
65
97
  nav {
66
- margin-top: 1em;
98
+ @media #{$information-phone} {
99
+ padding: 0.5em;
100
+ }
101
+ @media #{$information-comp} {
102
+ margin-top: 1em;
103
+ }
67
104
  font-size: large;
68
-
69
105
  li {
70
- padding: 1em;
71
- letter-spacing: 0.5em;
72
- margin-bottom: 2em;
106
+ @media #{$information-phone} {
107
+ display: inline;
108
+ padding: 1em;
109
+ line-height: 1.5em;
110
+ }
111
+ @media #{$information-comp} {
112
+ padding: 1em;
113
+ letter-spacing: 0.5em;
114
+ margin-bottom: 2em;
115
+ }
116
+ }
117
+ li:hover {
118
+ color: $color-accent;
73
119
  }
74
120
  }
75
121
  }
76
122
 
77
123
  // ACTUAL CONTENT
78
124
  .content {
79
- width: 60%;
80
- min-width: 20em;
81
- margin-left: 28%;
82
- margin-right: 1em;
83
- padding: 2em;
125
+
126
+ @media #{$information-phone} {
127
+ max-width: 90vw;
128
+ margin-left: 5vw;
129
+ margin-right: 5vw;
130
+ }
131
+
132
+ @media #{$information-comp} {
133
+ width: 60%;
134
+ min-width: 20em;
135
+ margin-left: 28%;
136
+ margin-right: 1em;
137
+ padding: 2em;
138
+ }
84
139
 
85
140
  background-color: $color-bg;
86
141
 
87
142
  h1,h2,h3,h4,h5 {
143
+
144
+ padding-left: 0.5em;
88
145
  letter-spacing: 0.5em;
89
146
  color: $color-text-normal;
90
147
  font-family: $font-body;
@@ -93,19 +150,47 @@ body {
93
150
  text-align: center;
94
151
  }
95
152
  h1 {
96
- font-size: xx-large;
153
+ @media #{$information-phone} {
154
+ font-size: 10vw;
155
+ }
156
+ @media #{$information-comp} {
157
+ font-size: xx-large;
158
+ }
97
159
  }
98
160
  h2 {
99
- font-size: x-large;
161
+ @media #{$information-phone} {
162
+ margin-left: 20vw;
163
+ margin-right: 20vw;
164
+ font-size: 6vw;
165
+ }
166
+ @media #{$information-comp} {
167
+ font-size: x-large;
168
+ }
169
+
100
170
  }
101
171
  h3 {
102
- font-size: large;
172
+ @media #{$information-phone} {
173
+ font-size: 10vw;
174
+ }
175
+ @media #{$information-comp} {
176
+ font-size: large;
177
+ }
103
178
  }
104
179
  h4 {
105
- font-size: normal;
180
+ @media #{$information-phone} {
181
+ font-size: 10vw;
182
+ }
183
+ @media #{$information-comp} {
184
+ font-size: normal;
185
+ }
106
186
  }
107
187
  h5 {
108
- font-size: small;
188
+ @media #{$information-phone} {
189
+ font-size: 10vw;
190
+ }
191
+ @media #{$information-comp} {
192
+ font-size: small;
193
+ }
109
194
  }
110
195
  hr {
111
196
  margin-top: 2em;
@@ -123,8 +208,11 @@ body {
123
208
  }
124
209
 
125
210
  p {
126
- width: 100%;
211
+ @media #{$information-comp} {
127
212
  margin: 1em;
213
+ }
214
+ width: 100%;
215
+ max-width: 80em;
128
216
  }
129
217
  code {
130
218
  background-color: $color-bg;
@@ -145,9 +233,15 @@ body {
145
233
  }
146
234
 
147
235
  table {
236
+ @media #{$information-phone} {
237
+
238
+ }
239
+
240
+ @media #{$information-comp} {
241
+ margin-left: auto;
242
+ margin-right: auto;
243
+ }
148
244
  text-align: center;
149
- margin-left: auto;
150
- margin-right: auto;
151
245
  border: 1px solid $color-accent;
152
246
  border-collapse: collapse;
153
247
 
@@ -198,16 +292,29 @@ body {
198
292
  font-style: bold;
199
293
  }
200
294
  pre {
295
+ @media #{$information-phone} {
296
+ font-size: 3.5vw;
297
+ }
201
298
  margin: 1em;
202
299
  text-align: center;
203
300
  }
204
301
  .synopsis {
302
+
303
+ @media #{$information-phone} {
304
+ padding: 0;
305
+ width: 98vw;
306
+ margin-left: -4vw;
307
+ margin-right: 1vw;
308
+ }
309
+
310
+ @media #{$information-comp} {
311
+ padding: 1em;
312
+ width: 65%;
313
+ margin: auto;
314
+ }
205
315
  text-align: center;
206
- margin: auto;
207
- width: 65%;
208
316
  font-size: small;
209
317
  font-style: italic;
210
- padding: 1em;
211
318
  border: 1px solid $color-accent;
212
319
  background-color: $color-divider;
213
320
  }
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-theme-lycorma
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.2
4
+ version: 0.2.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Christopher Rodriguez
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2018-02-26 00:00:00.000000000 Z
11
+ date: 2018-02-27 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll