jekyll-theme-lycorma 0.1.2 → 0.2.1

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 (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
@@ -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