jekyll-theme-satellite 1.1.2 → 1.2.4

Sign up to get free protection for your applications and to get access to all the features.
data/_sass/layout.scss CHANGED
@@ -1,57 +1,57 @@
1
1
  @mixin mq($name) {
2
- // Retrieves the value from the key
3
- $value: map-get($mediawd, $name);
4
-
5
- // If the key exists in the map
6
- @if $value {
7
- // Prints a media query based on the value
8
- @media (min-width: $value) {
9
- @content;
10
- }
11
- } @else {
12
- @warn "No value could be retrieved from `#{$mediawd}`. Please make sure it is defined in `$mediawd` map.";
2
+ // Retrieves the value from the key
3
+ $value:map-get($mediawd, $name);
4
+
5
+ // If the key exists in the map
6
+ @if $value {
7
+ // Prints a media query based on the value
8
+ @media (min-width:$value) {
9
+ @content;
13
10
  }
11
+ } @else {
12
+ @warn "No value could be retrieved from `#{$mediawd}`. Please make sure it is defined in `$mediawd` map.";
13
+ }
14
14
  }
15
15
 
16
16
  #loading
17
17
  {
18
- width: 100%;
19
- height: 100%;
20
- top: 0;
21
- left: 0;
22
- position: fixed;
23
- display: flex;
24
- background: white;
25
- z-index: 999;
26
- text-align: center;
18
+ width:100%;
19
+ height:100%;
20
+ top:0;
21
+ left:0;
22
+ position:fixed;
23
+ display:flex;
24
+ background:white;
25
+ z-index:999;
26
+ text-align:center;
27
27
 
28
- .loading_box {
29
- margin: auto;
28
+ .loading_box {
29
+ margin:auto;
30
30
 
31
- img {
32
- width: 128px;
33
- height: 128px;
34
- }
31
+ img {
32
+ width:128px;
33
+ height:128px;
34
+ }
35
35
 
36
- p {
37
- margin: 2rem;
38
- font-size: 2.5rem;
39
- color: $color-wenge;
40
- font-weight: 600;
41
- font-family: Cambria, sans-serif;
42
- }
36
+ p {
37
+ margin:2rem;
38
+ font-size:2.5rem;
39
+ color:$color-wenge;
40
+ font-weight:600;
41
+ font-family:Cambria, sans-serif;
43
42
  }
43
+ }
44
44
  }
45
45
 
46
46
  #stars {
47
- display: none;
48
- position: fixed;
49
- width: 100%;
50
- height: 100vh;
51
- z-index: -1;
52
- background: none;
47
+ display:none;
48
+ position:fixed;
49
+ width:100%;
50
+ height:100vh;
51
+ z-index:-1;
52
+ background:none;
53
53
  }
54
54
 
55
55
  @include mq(desktop){
56
- #stars { display: block; }
56
+ #stars { display:block; }
57
57
  }
@@ -1,177 +1,172 @@
1
1
  #navigation {
2
- display: none;
3
- flex: 1 1 auto;
4
- width: 100%;
5
-
6
- &.nav-open {
7
- display: block;
8
- border-top: 1px solid dimgrey;
9
- }
2
+ display:none;
3
+ flex:1 1 auto;
4
+ width:100%;
5
+
6
+ &.nav-open {
7
+ display:block;
8
+ border-top:1px solid dimgrey;
9
+ }
10
10
  }
11
11
 
12
12
  .nav-list {
13
- padding: 0;
14
- margin: 0 auto;
15
-
16
- li {
17
- font-size: 1rem;
13
+ padding:0;
14
+ margin:0 auto;
15
+
16
+ li {
17
+ font-size:1rem;
18
+
19
+ > .nav-list {
20
+ padding-left:18px;
21
+ background:#eee;
22
+
23
+ transition:max-height .5s ease-in-out, opacity .3s;
24
+ opacity:0;
25
+ max-height:0;
18
26
 
19
- > .nav-list {
20
- padding-left: 1.125rem;
21
- background: #eee;
22
-
23
- transition: max-height .5s ease-in-out, opacity .3s;
24
- opacity: 0;
25
- max-height: 0;
26
-
27
- li { position: relative; }
28
- }
29
-
30
- &.active {
31
- > .nav-item .nav-list-expander svg { transform: rotate(180deg); }
32
-
33
- > .nav-list {
34
- opacity: 1;
35
- max-height: 768px;
36
- }
37
- }
27
+ li { position:relative; }
38
28
  }
39
29
 
40
- svg {
41
- margin-right: 0.5rem;
42
- display: inline-block;
43
- vertical-align: middle;
30
+ &.active {
31
+ > .nav-item .nav-list-expander svg { transform:rotate(180deg); }
32
+
33
+ > .nav-list {
34
+ opacity:1;
35
+ max-height:768px;
36
+ }
44
37
  }
38
+ }
39
+
40
+ svg {
41
+ margin-right:8px;
42
+ display:inline-block;
43
+ vertical-align:middle;
44
+ }
45
45
  }
46
46
 
47
47
  .nav-item {
48
- position: relative;
49
- padding: 0.75rem;
50
- border-bottom: 1px solid #aaa;
51
-
52
- &.selected {
53
- span {
54
- font-weight: 600;
55
- text-decoration: underline;
56
- }
48
+ position:relative;
49
+ padding:12px;
50
+ border-bottom:1px solid #aaa;
51
+
52
+ &.selected {
53
+ span {
54
+ font-weight:600;
55
+ text-decoration:underline;
57
56
  }
57
+ }
58
58
 
59
- a { font-weight: 400; }
59
+ a { font-weight:400; }
60
60
  }
61
61
 
62
62
  .nav-list-link {
63
- position: relative;
64
- transition: .2s ease;
63
+ position:relative;
64
+ transition:.2s ease;
65
65
 
66
- span { position: relative; }
66
+ span { position:relative; }
67
67
  }
68
68
 
69
- .nav-lh svg {
70
- margin-left: -0.25rem;
71
- position: relative;
72
- fill: $color-darkorange;
73
- transform: translateY(-2px);
69
+ .nav-list-expander {
70
+ position:absolute;
71
+ height:100%;
72
+ aspect-ratio:1;
73
+ top:0;
74
+ right:8px;
75
+ cursor:pointer;
76
+
77
+ &, svg { transition:.3s; }
78
+ svg { width:18px; }
79
+
80
+ &:hover {
81
+ transform:scale(1.25);
82
+ svg { fill:$color-darkorange; }
83
+ }
74
84
  }
75
85
 
76
- .nav-sh svg {
77
- width: 14px;
78
- margin-left: 0;
86
+ .nav-lh svg {
87
+ margin-left:-0.25rem;
88
+ position:relative;
89
+ fill:$color-darkorange;
90
+ transform:translateY(-2px);
79
91
  }
80
-
81
- .nav-list-expander {
82
- position: absolute;
83
- height: 100%;
84
- aspect-ratio: 1;
85
- top: 0;
86
- right: 8px;
87
- cursor: pointer;
88
-
89
- &, svg { transition: .3s; }
90
-
91
- svg { width: 18px; }
92
-
93
- &:hover {
94
- transform: scale(1.25);
95
- svg { fill: $color-darkorange; }
96
- }
92
+ .nav-sh svg {
93
+ width:14px;
94
+ margin-left:0;
97
95
  }
98
96
 
99
97
  @include mq(tablet) {
100
- .nav-list-link { min-height: 2rem; }
101
-
102
- .nav-list li { font-size: 1.125rem; }
103
98
 
104
- .nav-sh svg { width: 16px; }
99
+ .nav-list-link { min-height:2rem; }
100
+ .nav-list li { font-size:1.125rem; }
101
+ .nav-list-expander svg { width:20px; }
105
102
 
106
- .nav-lh svg { width: 18px; }
103
+ .nav-sh svg { width:16px; }
104
+ .nav-lh svg { width:18px; }
107
105
 
108
- .nav-list-expander svg { width: 20px; }
109
106
  }
110
107
 
111
108
  @include mq(desktop){
112
- #navigation {
113
- width: calc(#{$sidebarwd} - 2.5rem);
114
- display: block;
115
- max-height: calc(100vh - 26rem);
116
- padding: 0 1.25rem;
117
- overflow-y: auto;
118
- overflow-x: hidden;
119
- margin-top: 2rem;
120
-
121
- &.nav-open { border: none; }
122
-
123
- &::-webkit-scrollbar {
124
- width: 4px;
125
- background-color: #aaa;
126
- }
127
-
128
- &::-webkit-scrollbar-thumb { background-color: rosybrown; }
129
- }
130
-
131
- .nav-list { position: relative; }
132
109
 
133
- .nav-list li > .nav-list { background: none; }
134
-
135
- .nav-lh svg { transform: none; }
110
+ #navigation {
111
+ width:calc(#{$sidebarwd} - 2.5rem);
112
+ display:block;
113
+ max-height:calc(100vh - 26rem);
114
+ padding:0 20px;
115
+ overflow-y:auto;
116
+ overflow-x:hidden;
117
+ margin-top:2rem;
118
+
119
+ &.nav-open { border:none; }
120
+
121
+ &::-webkit-scrollbar {
122
+ width:4px;
123
+ background-color:#aaa;
124
+ }
125
+ &::-webkit-scrollbar-thumb { background-color:rosybrown; }
126
+ }
136
127
 
137
- .nav-item { border: none; }
128
+ .nav-item { border:none; }
138
129
 
139
- .nav-list-link {
140
- display: flex;
141
- width: 95%;
142
- align-items: center;
130
+ .nav-list { position:relative; }
131
+ .nav-list li > .nav-list { background:none; }
132
+ .nav-list-link {
133
+ display:flex;
134
+ width:95%;
135
+ align-items:center;
136
+
137
+ &:hover {
138
+ span {
139
+ font-weight:600;
140
+ text-decoration:underline;
141
+ }
143
142
 
144
- &:hover {
145
- span {
146
- font-weight: 600;
147
- text-decoration: underline;
148
- }
143
+ transform:scale(.9);
144
+ }
145
+ }
149
146
 
150
- transform: scale(.9);
151
- }
152
- }
147
+ .nav-lh {
148
+ &:before {
149
+ content:"";
150
+ position:absolute;
151
+ display:block;
152
+ left:0;
153
+ border-radius:1.5rem;
154
+ background:rgba(gold, .375);
155
+ width:3rem;
156
+ height:3rem;
157
+ transition:.3s;
158
+ }
159
+ &:hover:before {
160
+ width:105%;
161
+ background:gold;
162
+ }
163
+
164
+ svg { transform:none; }
165
+ }
153
166
 
154
- .nav-lh {
155
- &:before {
156
- content: "";
157
- position: absolute;
158
- display: block;
159
- left: 0;
160
- border-radius: 1.5rem;
161
- background: rgba(gold, .375);
162
- width: 3rem;
163
- height: 3rem;
164
- transition: .3s;
165
- }
166
-
167
- &:hover:before {
168
- width: 105%;
169
- background: gold;
170
- }
171
- }
167
+ .nav-list-expander {
168
+ background-color:transparent;
169
+ right:-16px;
170
+ }
172
171
 
173
- .nav-list-expander {
174
- background-color: transparent;
175
- right: -16px;
176
- }
177
172
  }