balean-theme 0.0.3 → 0.1.0
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.
- checksums.yaml +4 -4
- data/README.md +33 -1
- data/_sass/_bootstrap.scss +13 -0
- data/_sass/balean/base/_base.scss +230 -0
- data/_sass/balean/base/_index.scss +1 -0
- data/_sass/balean/components/_buttons.scss +56 -0
- data/_sass/balean/components/_header.scss +394 -0
- data/_sass/balean/components/_index.scss +5 -0
- data/_sass/balean/components/_sections.scss +84 -0
- data/_sass/balean/settings/_balean-font.scss +9 -0
- data/_sass/balean/settings/_color-scheme.scss +71 -0
- data/_sass/balean/settings/_index.scss +2 -0
- data/_sass/balean/tools/_animate.scss +13 -0
- data/_sass/balean/tools/_grid.scss +131 -0
- data/_sass/balean/tools/_index.scss +7 -0
- data/_sass/balean/tools/_normalize.scss +341 -0
- data/_sass/balean/tools/_reset.scss +38 -0
- data/_sass/balean/tools/_shared.scss +32 -0
- data/_sass/balean/tools/_splide.scss +1 -0
- data/_sass/balean/tools/_syntax-highlighting.scss +73 -0
- data/_sass/balean/variables/_index.scss +73 -0
- data/assets/css/balean-theme.scss +8 -0
- data/assets/images/logo-yellow.svg +10 -17
- metadata +21 -4
- data/_sass/balean/_balean-font.scss +0 -13
- data/_sass/balean/_color-scheme.scss +0 -14
- data/_sass/balean-theme.scss +0 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d57bfed821855f6dce5761614e2fe554ef971ab5066915b68aa5ca7519fb9296
|
|
4
|
+
data.tar.gz: 5b1867a4fa53106154fd18b4fe198900dd333bba56a509d9ce4f5f7eae508aea
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 15e8158e28bfb00255620b11d9d3c53ef9c544184de789dc95c02d20c3ecc59408a04ad9472e3683c2f8589776e1a5c624969dc6d6ca5936073195e8d1067cad
|
|
7
|
+
data.tar.gz: 7136b875420dde2aa3da07208a0247a32867cbcba11ffbe024faf77b00ef74eb18c2b99a18c8321e32e450cf33398b06662e57b6b5af6d7b55da688b3e870655
|
data/README.md
CHANGED
|
@@ -1,3 +1,35 @@
|
|
|
1
1
|
# Balean Theme
|
|
2
2
|
|
|
3
|
-
The Balean theme is a set of SCSS files describing the Balean color-scheme and fonts.
|
|
3
|
+
The Balean theme is a set of SCSS files describing the Balean color-scheme and fonts.
|
|
4
|
+
|
|
5
|
+
## Local development
|
|
6
|
+
|
|
7
|
+
To test the theme locally, a Jekyll site can be build. To do this a docker-compose file is created to run Jekyll inside of docker.
|
|
8
|
+
The compose file uses the `bretfisher/jekyll-serve` container from docker-hub with the local project directory bound to `/site` in the container.
|
|
9
|
+
After running the file with `docker-compose up` the Jekyll site will be available at port 4000.
|
|
10
|
+
|
|
11
|
+
*docker-compose.yml:*
|
|
12
|
+
|
|
13
|
+
```yaml
|
|
14
|
+
services:
|
|
15
|
+
jekyll:
|
|
16
|
+
image: bretfisher/jekyll-serve
|
|
17
|
+
volumes:
|
|
18
|
+
- .:/site
|
|
19
|
+
ports:
|
|
20
|
+
- '4000:4000'
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Release gemfile
|
|
24
|
+
|
|
25
|
+
To build the gem locally, run the following command first:
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
gem build balean-theme.gemspec
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
When the gem file is created, you can push it to the rubygems repository via:
|
|
32
|
+
|
|
33
|
+
```
|
|
34
|
+
gem push <.gem file>
|
|
35
|
+
```
|
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
@use "balean/variables" as vars;
|
|
2
|
+
|
|
3
|
+
*, *::after, *::before {
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
body {
|
|
8
|
+
font-family: vars.$base-font-family;
|
|
9
|
+
font-size: vars.$base-font-size;
|
|
10
|
+
line-height: vars.$base-line-height;
|
|
11
|
+
overflow-x: hidden;
|
|
12
|
+
color: var(--text-color);
|
|
13
|
+
background-color: var(--background-color);
|
|
14
|
+
-webkit-font-smoothing: antialiased;
|
|
15
|
+
-moz-osx-font-smoothing: grayscale;
|
|
16
|
+
|
|
17
|
+
&.search-is-visible {
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
-webkit-overflow-scrolling: auto;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&.disable-animation {
|
|
23
|
+
*, *::after, *::before {
|
|
24
|
+
transition: none !important;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@media (max-width: vars.$desktop) {
|
|
29
|
+
font-size: 18px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@media (max-width: vars.$mobile) {
|
|
33
|
+
font-size: 16px;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.global-wrap {
|
|
38
|
+
&.is-active {
|
|
39
|
+
overflow-x: hidden;
|
|
40
|
+
overflow-y: scroll;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
h1,
|
|
45
|
+
h2,
|
|
46
|
+
h3,
|
|
47
|
+
h4,
|
|
48
|
+
h5,
|
|
49
|
+
h6 {
|
|
50
|
+
margin-bottom: 12px;
|
|
51
|
+
font-family: vars.$heading-font-family;
|
|
52
|
+
font-weight: vars.$heading-font-weight;
|
|
53
|
+
line-height: vars.$heading-line-height;
|
|
54
|
+
letter-spacing: vars.$heading-letter-spacing;
|
|
55
|
+
color: var(--heading-font-color);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
h1 {
|
|
59
|
+
font-size: vars.$font-size-h1;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
h2 {
|
|
63
|
+
font-size: vars.$font-size-h2;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
h3 {
|
|
67
|
+
font-size: vars.$font-size-h3;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
h4 {
|
|
71
|
+
font-size: vars.$font-size-h4;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
h5 {
|
|
75
|
+
font-size: vars.$font-size-h5;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
h6 {
|
|
79
|
+
font-size: vars.$font-size-h6;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
blockquote {
|
|
83
|
+
margin: 60px -260px 60px -260px;
|
|
84
|
+
font-family: vars.$heading-font-family;
|
|
85
|
+
font-size: 60px;
|
|
86
|
+
font-weight: 700;
|
|
87
|
+
line-height: 1.2;
|
|
88
|
+
text-align: center;
|
|
89
|
+
color: var(--heading-font-color);
|
|
90
|
+
|
|
91
|
+
p {
|
|
92
|
+
margin-bottom: 0;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
cite {
|
|
96
|
+
display: inline-block;
|
|
97
|
+
margin-top: 16px;
|
|
98
|
+
font-family: vars.$base-font-family;
|
|
99
|
+
font-size: 16px;
|
|
100
|
+
font-weight: 400;
|
|
101
|
+
font-style: normal;
|
|
102
|
+
color: var(--heading-font-color);
|
|
103
|
+
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
@media (max-width: vars.$wide) {
|
|
107
|
+
margin: 60px -80px 60px -80px;
|
|
108
|
+
font-size: 50px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
@media (max-width: vars.$desktop) {
|
|
112
|
+
margin: 40px 0;
|
|
113
|
+
font-size: 40px;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@media (max-width: vars.$tablet) {
|
|
117
|
+
font-size: 36px;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
@media (max-width: vars.$mobile) {
|
|
121
|
+
margin: 32px 0;
|
|
122
|
+
font-size: 28px;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
pre {
|
|
127
|
+
overflow: auto;
|
|
128
|
+
padding: 15px;
|
|
129
|
+
margin-bottom: 0;
|
|
130
|
+
font-size: 14px;
|
|
131
|
+
white-space: pre-wrap;
|
|
132
|
+
word-wrap: break-word;
|
|
133
|
+
word-break: break-all;
|
|
134
|
+
color: var(--heading-font-color);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
img,
|
|
138
|
+
.lightense-wrap {
|
|
139
|
+
max-width: 100%;
|
|
140
|
+
height: auto;
|
|
141
|
+
vertical-align: middle;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
img,
|
|
145
|
+
.lightense-wrap,
|
|
146
|
+
.gallery {
|
|
147
|
+
&+em {
|
|
148
|
+
display: block;
|
|
149
|
+
margin-top: 8px;
|
|
150
|
+
font-size: 14px;
|
|
151
|
+
font-style: normal;
|
|
152
|
+
font-weight: normal;
|
|
153
|
+
text-align: center;
|
|
154
|
+
|
|
155
|
+
@media (max-width: vars.$mobile) {
|
|
156
|
+
margin-top: 16px;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
a {
|
|
162
|
+
text-decoration: underline;
|
|
163
|
+
color: var(--link-color);
|
|
164
|
+
transition: vars.$global-transition;
|
|
165
|
+
|
|
166
|
+
&:hover {
|
|
167
|
+
color: var(--link-color-hover);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
hr {
|
|
172
|
+
width: 100%;
|
|
173
|
+
height: 1px;
|
|
174
|
+
margin: 60px 0;
|
|
175
|
+
border: 0;
|
|
176
|
+
background: var(--background-alt-color);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.table-container {
|
|
180
|
+
display: block;
|
|
181
|
+
max-width: 100%;
|
|
182
|
+
overflow-x: auto;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
table {
|
|
186
|
+
font-size: 12px;
|
|
187
|
+
color: var(--dark);
|
|
188
|
+
width: 100%;
|
|
189
|
+
border-width: 1px;
|
|
190
|
+
border-color: var(--background-alt-color);
|
|
191
|
+
border-collapse: collapse;
|
|
192
|
+
color: var(--heading-font-color);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
table th {
|
|
196
|
+
padding: 10px;
|
|
197
|
+
font-size: 16px;
|
|
198
|
+
text-align: left;
|
|
199
|
+
border: 1px solid var(--th-color);
|
|
200
|
+
color: var(--heading-font-color);
|
|
201
|
+
font-weight: 700;
|
|
202
|
+
background-color: var(--th-color);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
table tr {
|
|
206
|
+
background-color: var(--tr-color);
|
|
207
|
+
transition: all .2s ease;
|
|
208
|
+
&:nth-child(even) {
|
|
209
|
+
background-color: transparent;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
table td {
|
|
214
|
+
padding: 10px;
|
|
215
|
+
font-size: 14px;
|
|
216
|
+
border: 1px solid var(--background-alt-color);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.lazy {
|
|
220
|
+
opacity: 0;
|
|
221
|
+
transition: opacity .3s ease;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.lazy.loaded {
|
|
225
|
+
opacity: 1;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.lightense-backdrop {
|
|
229
|
+
background-color: var(--background-color) !important;
|
|
230
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@forward "base";
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
@use "balean/variables" as vars;
|
|
2
|
+
|
|
3
|
+
/* Buttons */
|
|
4
|
+
.button {
|
|
5
|
+
display: inline-block;
|
|
6
|
+
padding: 20px 40px;
|
|
7
|
+
font-size: 26px;
|
|
8
|
+
font-weight: 500;
|
|
9
|
+
line-height: 1;
|
|
10
|
+
text-decoration: none;
|
|
11
|
+
border-radius: 100px;
|
|
12
|
+
border: none;
|
|
13
|
+
outline: none;
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
transition: vars.$global-transition;
|
|
16
|
+
color: var(--button-color);
|
|
17
|
+
background: var(--primary-color);
|
|
18
|
+
|
|
19
|
+
&:hover {
|
|
20
|
+
color: var(--button-color);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&--primary {
|
|
24
|
+
color: var(--button-color);
|
|
25
|
+
background-color: var(--button-background-color);
|
|
26
|
+
|
|
27
|
+
&:hover {
|
|
28
|
+
background: var(--button-background-hover);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&--small {
|
|
33
|
+
padding: 20px 24px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&--x-small {
|
|
37
|
+
padding: 12px 24px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&--big {
|
|
41
|
+
display: block;
|
|
42
|
+
width: 100%;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@media (max-width: vars.$desktop) {
|
|
46
|
+
font-size: 22px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@media (max-width: vars.$tablet) {
|
|
50
|
+
font-size: 20px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@media (max-width: vars.$mobile) {
|
|
54
|
+
padding: 16px 32px;
|
|
55
|
+
}
|
|
56
|
+
}
|