jekyll-theme-satellite 1.1.2 → 1.2.5

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.
data/_sass/sidebar.scss CHANGED
@@ -1,318 +1,317 @@
1
1
  .sidebar {
2
- z-index: 1;
3
- flex-wrap: wrap;
2
+ z-index:1;
3
+ flex-wrap:wrap;
4
4
 
5
- ul, li {
6
- list-style: none;
7
- }
5
+ ul, li {
6
+ list-style:none;
7
+ }
8
8
  }
9
9
 
10
10
  .sidebar-left {
11
- display: flex;
12
- background-color: $color-beige;
11
+ display:flex;
12
+ background-color:$color-beige;
13
13
  }
14
14
 
15
15
  .side-banner {
16
- width: 100%;
17
- text-align:center;
18
- box-shadow: 0px 4px 8px 0 #aaa;
19
-
20
- button {
21
- position: absolute;
22
- background-color: $color-beige;
23
- height: 100%;
24
- aspect-ratio: 1;
25
- top: 0;
26
-
27
- svg { width: 20px; }
28
-
29
- &:hover { background-color: rgba(212, 201, 191, 0.7); }
30
- }
31
-
32
- #btn-nav { right: 0; }
33
-
34
- #btn-search { right: 38px; }
35
-
36
- #btn-brightness { right: 76px; }
37
-
38
- .ico-dark {
39
- display: block;
40
-
41
- &.active{ display: none; }
42
- }
43
-
44
- .ico-light {
45
- display: none;
46
-
47
- &.active{ display: block; }
48
- }
16
+ width:100%;
17
+ text-align:center;
18
+ box-shadow:0px 4px 8px 0 #aaa;
19
+
20
+ button {
21
+ position:absolute;
22
+ background-color:$color-beige;
23
+ height:100%;
24
+ aspect-ratio:1;
25
+ top:0;
26
+
27
+ svg { width:20px; }
28
+
29
+ &:hover { background-color:rgba(212, 201, 191, 0.7); }
30
+ }
31
+ #btn-nav { right:0; }
32
+ #btn-search { right:38px; }
33
+ #btn-brightness { right:76px; }
34
+
35
+ .ico-dark {
36
+ display:block;
37
+ &.active{ display:none; }
38
+ }
39
+ .ico-light {
40
+ display:none;
41
+ &.active{ display:block; }
42
+ }
49
43
  }
50
44
 
45
+ .site-tab img { display: none; }
46
+
51
47
  .site-avatar {
52
- img {
53
- display: none;
54
- width: 9rem;
55
- aspect-ratio: 1;
56
- border-radius: 50%;
57
- outline: 4.5rem solid rgba(64,64,64,0.5);
58
- outline-offset: -4.5rem;
59
- transition: .3s;
60
-
61
- &:hover {
62
- outline: 4px solid orange;
63
- outline-offset: 8px;
64
- }
48
+ img {
49
+ display:none;
50
+ width:9rem;
51
+ aspect-ratio:1;
52
+ border-radius:50%;
53
+ outline:4.5rem solid rgba(64,64,64,0.5);
54
+ outline-offset:-4.5rem;
55
+ transition:.3s;
56
+
57
+ &:hover {
58
+ outline:4px solid orange;
59
+ outline-offset:8px;
65
60
  }
61
+ }
66
62
 
67
- img + img { border-radius: 50%; }
63
+ img + img { border-radius:50%; }
68
64
  }
69
65
 
70
- .site-name {
71
- padding: 0.5rem;
72
- font-size: 1rem;
73
- text-align: left;
74
- position: relative;
66
+ .site-tab {
67
+ padding:8px;
68
+ font-size:1rem;
69
+ text-align:left;
70
+ position:relative;
75
71
 
76
- a, span { letter-spacing: 2px; }
72
+ a, span { letter-spacing:2px; }
77
73
  }
78
74
 
79
75
  .side-info {
80
- position: relative;
81
- width: 100%;
76
+ position:relative;
77
+ width:100%;
82
78
  }
83
79
 
84
80
  #contact{
85
- display: none;
86
- position: relative;
87
- width: 75%;
88
- transform: translateX(12.5%);
89
- text-align: center;
90
- padding: 1rem 0;
91
-
92
- &.contact-open { display: block; }
93
-
94
- hr {
95
- border: 0;
96
- margin: 0;
97
- }
81
+ display:none;
82
+ position:relative;
83
+ width:75%;
84
+ transform:translateX(12.5%);
85
+ text-align:center;
86
+ padding:1rem 0;
98
87
 
99
- h3 { display: none; }
88
+ &.contact-open { display:block; }
100
89
 
101
- ul{
102
- text-align: center;
103
- padding: 0;
104
- margin: 0;
105
- overflow: hidden;
106
- white-space: nowrap;
107
- text-overflow: ellipsis;
90
+ hr {
91
+ border:0;
92
+ margin:0;
93
+ }
108
94
 
109
- li{
110
- display: inline-block;
111
- margin-top: 0.5rem;
95
+ h3 { display:none; }
112
96
 
113
- a {
114
- display: block;
115
- padding: 6px;
116
- transition: .3s;
117
-
118
- svg {
119
- width: 16px;
120
- fill: dimgrey;
121
- }
97
+ ul{
98
+ text-align:center;
99
+ padding:0;
100
+ margin:0;
101
+ overflow:hidden;
102
+ white-space:nowrap;
103
+ text-overflow:ellipsis;
104
+
105
+ li{
106
+ display:inline-block;
107
+ margin-top:8px;
108
+
109
+ a {
110
+ display:block;
111
+ padding:6px;
112
+ transition:.3s;
113
+
114
+ svg {
115
+ width:16px;
116
+ fill:dimgrey;
117
+ }
122
118
 
123
- &:hover{
124
- svg { fill: orange; }
119
+ &:hover{
120
+ svg { fill:orange; }
125
121
 
126
- transform: scale(1.5) translateY(-12.5%);
127
- }
128
- }
122
+ transform:scale(1.5) translateY(-12.5%);
129
123
  }
124
+ }
130
125
  }
126
+ }
131
127
 
132
- span { font-size: 0.875rem; }
133
-
134
- a { color: $color-darkorange; }
128
+ span { font-size:0.875rem; }
129
+ a { color:$color-darkorange; }
135
130
  }
136
131
 
137
- .sidebar-right{
138
- display: none;
139
- }
132
+ .sidebar-right{ display:none; }
140
133
 
141
134
  .tools {
142
- position: fixed;
143
- top: 1rem;
144
-
145
- button {
146
- width: 2.75rem;
147
- aspect-ratio: 1;
148
- text-align: center;
149
- background: #ffe390;
150
- border: none;
151
- border-radius: 50%;
152
- margin-left: 1rem;
153
- position: relative;
154
- vertical-align: top;
155
- cursor: pointer;
156
-
157
- &:hover {
158
- border: 2px solid midnightblue;
159
- animation: leaves .75s ease-in-out infinite alternate;
160
- }
161
- }
135
+ position:fixed;
136
+ top:1rem;
162
137
 
163
- @keyframes leaves {
164
- 0% {
165
- transform: scale(1.0);
166
- background: #ffe390;
167
- }
168
- 100% {
169
- transform: scale(1.25);
170
- background: #ffd044;
171
- }
138
+ button {
139
+ width:2.75rem;
140
+ aspect-ratio:1;
141
+ text-align:center;
142
+ background:#ffe390;
143
+ border:none;
144
+ border-radius:50%;
145
+ margin-left:1rem;
146
+ position:relative;
147
+ vertical-align:top;
148
+ cursor:pointer;
149
+
150
+ &:hover {
151
+ border:2px solid midnightblue;
152
+ animation:leaves .75s ease-in-out infinite alternate;
172
153
  }
154
+ }
173
155
 
174
- svg {
175
- fill: #3A241A !important;
176
- width: 24px;
177
- position: relative;
178
- transition: all .3s;
156
+ @keyframes leaves {
157
+ 0% {
158
+ transform:scale(1.0);
159
+ background:#ffe390;
179
160
  }
180
-
181
- .ico-dark, .ico-light {
182
- position: absolute;
183
- top: 50%;
184
- left: 50%;
185
- transform: translate(-50%, -50%);
161
+ 100% {
162
+ transform:scale(1.25);
163
+ background:#ffd044;
186
164
  }
165
+ }
166
+
167
+ svg {
168
+ fill:#3A241A !important;
169
+ width:24px;
170
+ position:relative;
171
+ transition:all .3s;
172
+ }
173
+ .ico-dark, .ico-light {
174
+ position:absolute;
175
+ top:50%;
176
+ left:50%;
177
+ transform:translate(-50%, -50%);
178
+ }
179
+ .ico-dark {
180
+ transform:translate(-50%, -50%) scale(1);
181
+ &.active{ transform:translate(-50%, -50%) scale(0); }
182
+ }
183
+ .ico-light {
184
+ transform:translate(-50%, -50%) scale(0);
185
+ &.active{ transform:translate(-50%, -50%) scale(1); }
186
+ }
187
+ }
187
188
 
188
- .ico-dark {
189
- transform: translate(-50%, -50%) scale(1);
190
-
191
- &.active{ transform: translate(-50%, -50%) scale(0); }
192
- }
189
+ @include mq(tablet){
193
190
 
194
- .ico-light {
195
- transform: translate(-50%, -50%) scale(0);
191
+ .side-banner {
192
+ button { font-size:1.75rem; }
193
+ #btn-search { right:60px; }
194
+ #btn-brightness { right:120px; }
195
+ }
196
196
 
197
- &.active{ transform: translate(-50%, -50%) scale(1); }
198
- }
197
+ .site-tab {
198
+ padding:1rem;
199
+ font-size:1.375rem;
199
200
  }
200
201
 
201
- @include mq(tablet){
202
- .side-banner {
203
- button { font-size: 1.75rem; }
202
+ #contact {
203
+ ul li a svg { width:18px; }
204
204
 
205
- #btn-search { right: 60px; }
205
+ span { font-size:1rem; }
206
+ }
206
207
 
207
- #btn-brightness { right: 120px; }
208
- }
209
-
210
- .site-name {
211
- padding: 1rem;
212
- font-size: 1.375rem;
213
- }
208
+ }
214
209
 
215
- #contact {
216
- ul li a svg { width: 18px; }
210
+ @include mq(desktop){
217
211
 
218
- span { font-size: 1rem; }
219
- }
212
+ .sidebar { position:fixed; }
213
+
214
+ .sidebar-left{
215
+ flex-flow:column nowrap;
216
+ width:#{$sidebarwd};
217
+ min-height:100%;
218
+ background:none;
219
+ align-items:flex-end;
220
220
  }
221
221
 
222
- @include mq(desktop){
223
- .sidebar { position: fixed; }
224
-
225
- .sidebar-left{
226
- flex-flow: column nowrap;
227
- width: #{$sidebarwd};
228
- min-height: 100%;
229
- background: none;
230
- align-items: flex-end;
231
- }
222
+ .side-banner{
223
+ width:#{$sidebarwd};
224
+ box-shadow:none !important;
232
225
 
233
- .side-banner{
234
- width: #{$sidebarwd};
235
- box-shadow: none !important;
226
+ button {
227
+ display:none;
228
+ font-size:1.5rem;
229
+ }
230
+ #btn-search { right:69px; }
231
+ #btn-brightness { right:138px; }
232
+ }
236
233
 
237
- button {
238
- display: none;
239
- font-size: 1.5rem;
240
- }
234
+ .site-avatar img { display:inline-block; }
241
235
 
242
- #btn-search { right: 69px; }
236
+ .site-tab {
237
+ font-size:1.375rem;
238
+ padding:1rem;
239
+ text-align:center;
240
+ position:relative;
241
+ }
243
242
 
244
- #btn-brightness { right: 138px; }
243
+ .site-name {
244
+ position:relative;
245
+
246
+ img, mark { transition:.5s ease; }
247
+ mark {
248
+ color:$color-wenge;
249
+ word-break:break-word;
250
+ }
251
+
252
+ img {
253
+ display:inline-block;
254
+ width:32px;
255
+ height:32px;
256
+ top:-4px;
257
+ left:0;
258
+ left:-40px;
259
+ position:absolute;
260
+ transform:rotateY(90deg);
261
+ }
262
+
263
+ &:hover {
264
+ mark {
265
+ color:$color-rose;
266
+ margin-left:40px;
245
267
  }
246
-
247
- .site-avatar img { display: inline-block; }
248
-
249
- .site-name {
250
- font-size: 1.375rem;
251
- padding: 1rem;
252
- text-align: center;
253
-
254
- .highlight {
255
- font-weight: 600;
256
- background-image: -webkit-linear-gradient(left, #a95770 25%, #ff4d7c 32.5%, #97d0ec 50%, #ff4d7c 67.5%, #a95770 75%);
257
- background-image: linear-gradient(90deg, #a95770 25%, #ff4d7c 32.5%, #97d0ec 50%, #ff4d7c 67.5%, #a95770 75%);
258
- background-position: right center;
259
- background-size: 400% auto;
260
- -webkit-background-clip: text;
261
- background-clip: text;
262
- -webkit-text-fill-color: transparent;
263
-
264
- &:hover {
265
- color: #ef9671;
266
- animation: slidetext 2s ease-in infinite;
267
- }
268
-
269
- @keyframes slidetext {
270
- 100% {
271
- background-position: left center;
272
- }
273
- }
274
- }
268
+ img {
269
+ left:0;
270
+ transform:rotateY(360deg);
275
271
  }
272
+ }
273
+ }
276
274
 
277
- .side-info {
278
- width: #{$sidebarwd};
279
- height: calc(100% - 14rem);
280
- display: contents;
281
- }
275
+ .side-info {
276
+ width:#{$sidebarwd};
277
+ height:calc(100% - 14rem);
278
+ display:contents;
279
+ }
282
280
 
283
- #contact{
284
- display: block;
285
- width: calc(#{$sidebarwd} - 4rem);
286
- margin-top: 2rem;
287
- padding: 1rem 2rem;
288
- transform: none;
281
+ #contact{
282
+ display:block;
283
+ width:calc(#{$sidebarwd} - 4rem);
284
+ margin-top:2rem;
285
+ padding:1rem 2rem;
286
+ transform:none;
287
+
288
+ hr {
289
+ border-top:1px solid lightgrey;
290
+ margin:8px;
291
+ }
292
+
293
+ h3{
294
+ display:block;
295
+ position:absolute;
296
+ margin:0;
297
+ top:14px;
298
+ font-size:1rem;
299
+ transform:translateX(-50%);
300
+ left:50%;
301
+ background-color:#fff;
302
+ }
303
+ }
289
304
 
290
- hr {
291
- border-top: 1px solid lightgrey;
292
- margin: 0.5rem;
293
- }
294
-
295
- h3{
296
- display: block;
297
- position: absolute;
298
- margin: 0;
299
- top: 14px;
300
- font-size: 1rem;
301
- transform: translateX(-50%);
302
- left: 50%;
303
- background-color: #fff;
304
- }
305
- }
306
305
  }
307
306
 
308
307
  @include mq(wide){
309
- .sidebar-left{ width: calc((100vw - #{$contentwd})/2); }
310
-
311
- .sidebar-right{
312
- display: flex;
313
- height: 100%;
314
- align-items: flex-end;
315
- width: calc((100vw - #{$contentwd})/2);
316
- margin-left: calc(#{$contentwd} + (100vw - #{$contentwd})/2);
317
- }
308
+
309
+ .sidebar-left{ width:calc((100vw - #{$contentwd})/2); }
310
+ .sidebar-right{
311
+ display:flex;
312
+ height:100%;
313
+ width:calc((100vw - #{$contentwd})/2);
314
+ margin-left:calc(#{$contentwd} + (100vw - #{$contentwd})/2);
315
+ }
316
+
318
317
  }
data/_sass/toc.scss CHANGED
@@ -1,58 +1,58 @@
1
1
  .toc {
2
- position: fixed;
3
- top: 6rem;
2
+ position:fixed;
3
+ top:6rem;
4
4
  }
5
5
 
6
6
  .toc-header {
7
- font-size: 1.25rem;
8
- font-weight: 600;
9
- padding-left: 0.75rem;
10
- padding-bottom: 4px;
11
- border-bottom: burlywood 2px solid;
12
-
13
- svg {
14
- width: 16px;
15
- display: inline-flex;
16
- transform: translateY(2px);
17
- }
7
+ font-size:1.25rem;
8
+ font-weight:600;
9
+ padding:0 0 4px 12px;
10
+ border-bottom:burlywood 2px solid;
11
+
12
+ svg {
13
+ width:16px;
14
+ display:inline-flex;
15
+ transform:translateY(2px);
16
+ }
18
17
  }
19
18
 
20
19
  .toc-board {
21
- max-width: #{$sidebarwd};
22
- margin: 0;
23
- margin-left: 2rem;
20
+ max-width:#{$sidebarwd};
21
+ margin: 1rem 0 1rem 2rem !important;
24
22
  }
25
23
 
26
- .toc-list {
27
- font-size: 1.125rem;
28
- padding: 0;
24
+ .toc-board, .toc-list {
25
+ font-size:1.125rem;
26
+ padding:0;
27
+ margin: 0 auto;
29
28
 
30
- li:last-child { margin-bottom: 0; }
29
+ li a { display:inline-block; }
30
+ li:last-child { margin-bottom:0; }
31
31
 
32
- li a { display:inline-block; }
32
+ .node-name--H1 { margin-top:8px; }
33
+ .node-name--H2 {
34
+ font-size:1rem;
35
+ margin-top:6px;
36
+ padding-left:16px;
37
+ }
33
38
 
34
- .node-name--H1 { margin-top: 0.5rem; }
39
+ .toc-list-item {
40
+ word-break:normal;
41
+ line-height:150%;
35
42
 
36
- .node-name--H2 {
37
- font-size: 1rem;
38
- margin-top: 0.375rem;
39
- padding-left: 0.5rem;
43
+ a {
44
+ animation:.5s ease-out 0s 1 slide;
45
+ cursor: pointer;
40
46
  }
41
47
 
42
- .toc-list-item {
43
- word-break: normal;
44
- display: block;
45
- line-height: 150%;
46
- animation: .5s ease-out 0s 1 slide;
47
-
48
- @keyframes slide {
49
- 0% { transform: scaleY(0); }
50
- 100% { transform: scaleY(1); }
51
- }
52
- }
53
-
54
- .is-active-link{
55
- color: indianred !important;
56
- font-weight:950;
48
+ @keyframes slide {
49
+ 0% { transform:scaleY(0); }
50
+ 100% { transform:scaleY(1); }
57
51
  }
52
+ }
53
+
54
+ .is-active-link{
55
+ color:indianred !important;
56
+ font-weight:950;
57
+ }
58
58
  }