jekyll-theme-doodle 4.4.0 → 4.4.2

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 (34) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +17 -2
  3. data/_sass/minima/_base.scss +32 -581
  4. data/_sass/minima/_fonts.scss +20 -0
  5. data/_sass/minima/_footer.scss +79 -0
  6. data/_sass/minima/_header.scss +29 -0
  7. data/_sass/minima/_navigation-bar.scss +128 -0
  8. data/_sass/minima/_page.scss +10 -0
  9. data/_sass/minima/_pinned-post.scss +99 -0
  10. data/_sass/minima/_posts.scss +107 -0
  11. data/_sass/minima/_theme-selector.scss +41 -0
  12. data/_sass/minima/_theme.scss +283 -0
  13. data/_sass/minima.scss +17 -17
  14. data/assets/theme-assets/theme-images/box-filled-2.svg +10 -0
  15. data/assets/theme-assets/theme-images/box-filled.svg +19 -0
  16. metadata +14 -21
  17. data/_data/images.json +0 -3
  18. data/_sass/minima/_layout.scss +0 -277
  19. data/_sass/minima/_mysass.scss +0 -289
  20. data/assets/theme-assets/material-theme/colors.module.css +0 -294
  21. data/assets/theme-assets/material-theme/theme.css +0 -5
  22. data/assets/theme-assets/material-theme/theme.dark.css +0 -51
  23. data/assets/theme-assets/material-theme/theme.light.css +0 -51
  24. data/assets/theme-assets/material-theme/tokens.css +0 -303
  25. data/assets/theme-assets/material-theme/typography.module.css +0 -150
  26. data/assets/theme-assets/theme-fonts/CascadiaCode-Regular.woff2 +0 -0
  27. data/assets/theme-assets/theme-fonts/ComicShanns-Regular.woff2 +0 -0
  28. data/assets/theme-assets/theme-fonts/LilitaOne-Regular.ttf +0 -0
  29. data/assets/theme-assets/theme-fonts/Virgil-Regular.woff2 +0 -0
  30. data/assets/theme-assets/theme-fonts/Virgil.woff2 +0 -0
  31. data/assets/theme-assets/theme-images/comp.png +0 -0
  32. data/assets/theme-assets/theme-images/comp.svg +0 -10
  33. data/assets/theme-assets/theme-images/logo.png +0 -0
  34. data/assets/theme-assets/theme-images/logo.svg +0 -10
@@ -1,277 +0,0 @@
1
- /**
2
- * Site header
3
- */
4
-
5
- .site-header {
6
- min-height: $spacing-unit * 1.865;
7
- position: relative;
8
-
9
- }
10
-
11
- .site-title {
12
- @include relative-font-size(1.625);
13
- font-family: Excalifont;
14
- font-weight: 300;
15
- text-align: center;
16
- letter-spacing: -1px;
17
- margin-bottom: 0;
18
- font-size: 64px;
19
- padding: 24px;
20
-
21
- @include media-query($on-palm) {
22
- font-size: 46px;
23
- }
24
- }
25
-
26
- #pink-theme {
27
- background-color: #f0b3e7;
28
- }
29
- #green-theme {
30
- background-color: #b1d18a;
31
- }
32
- #yellow-theme {
33
- background-color: #dbc66e;
34
- }
35
- #blue-theme {
36
- background-color: #aac7ff;
37
- }
38
- #cyan-theme {
39
- background-color: #81d5cd;
40
- }
41
- .site-nav {
42
- line-height: $base-line-height * $base-font-size * 2.25;
43
-
44
- .nav-trigger {
45
- display: none;
46
- }
47
-
48
- .menu-icon {
49
- display: none;
50
- }
51
- .trigger {
52
- display: none;
53
- justify-content: center;
54
- border-radius: 999px;
55
- }
56
- .page-link {
57
- color: var(--md-sys-color-on-surface);
58
- min-width: 60px;
59
- text-align: center;
60
- border-radius: 999px;
61
- padding: 0 20px 0 20px;
62
- &:not(:last-child) {
63
- margin-right: 20px;
64
- }
65
- }
66
-
67
- @include media-query($on-palm) {
68
- position: absolute;
69
- top: 12px;
70
- left: 12px;
71
- background-color: var(--md-sys-color-surface-container);
72
- backdrop-filter: blur(8px);
73
- border-radius: 8px;
74
- text-align: right;
75
- padding-bottom: 3px;
76
- padding-left: 2px;
77
- padding-right: 2px;
78
-
79
- label[for="nav-trigger"] {
80
- display: block;
81
- width: 36px;
82
- height: 36px;
83
- z-index: 2;
84
- cursor: pointer;
85
- }
86
-
87
- .menu-icon {
88
- display: block;
89
- float: right;
90
- width: 36px;
91
- height: 26px;
92
- line-height: 0;
93
- padding-top: 10px;
94
- text-align: center;
95
-
96
- > svg {
97
- fill: $grey-color-dark;
98
- }
99
- }
100
-
101
- input ~ .trigger {
102
- clear: both;
103
- display: none;
104
- }
105
-
106
- input:checked ~ .trigger {
107
- display: block;
108
- padding-bottom: 5px;
109
- }
110
-
111
- .page-link {
112
- display: block;
113
- padding: 5px 10px;
114
-
115
- &:not(:last-child) {
116
- margin-right: 0;
117
- }
118
- margin-left: 20px;
119
- }
120
- }
121
- }
122
-
123
- /**
124
- * Site footer
125
- */
126
- .site-footer {
127
- padding: $spacing-unit 0;
128
- @include media-query($on-palm) {
129
- padding-bottom: 100px;
130
- }
131
- }
132
-
133
- .footer-heading {
134
- @include relative-font-size(1.125);
135
- margin-bottom: $spacing-unit / 2;
136
- }
137
-
138
- .contact-list,
139
- .social-media-list {
140
- list-style: none;
141
- margin-left: 0;
142
- }
143
-
144
- .footer-col-wrapper {
145
- @include relative-font-size(0.9375);
146
- color: $grey-color;
147
- margin-left: -$spacing-unit / 2;
148
- @extend %clearfix;
149
- }
150
-
151
- .footer-col {
152
- float: left;
153
- margin-bottom: $spacing-unit / 2;
154
- padding-left: $spacing-unit / 2;
155
- }
156
-
157
- .footer-col-1 {
158
- width: -webkit-calc(35% - (#{$spacing-unit} / 2));
159
- width: calc(35% - (#{$spacing-unit} / 2));
160
- }
161
-
162
- .footer-col-2 {
163
- width: -webkit-calc(20% - (#{$spacing-unit} / 2));
164
- width: calc(20% - (#{$spacing-unit} / 2));
165
- }
166
-
167
- .footer-col-3 {
168
- width: -webkit-calc(45% - (#{$spacing-unit} / 2));
169
- width: calc(45% - (#{$spacing-unit} / 2));
170
- }
171
-
172
- @include media-query($on-laptop) {
173
- .footer-col-1,
174
- .footer-col-2 {
175
- width: -webkit-calc(50% - (#{$spacing-unit} / 2));
176
- width: calc(50% - (#{$spacing-unit} / 2));
177
- }
178
-
179
- .footer-col-3 {
180
- width: -webkit-calc(100% - (#{$spacing-unit} / 2));
181
- width: calc(100% - (#{$spacing-unit} / 2));
182
- }
183
- }
184
-
185
- @include media-query($on-palm) {
186
- .footer-col {
187
- float: none;
188
- width: -webkit-calc(100% - (#{$spacing-unit} / 2));
189
- width: calc(100% - (#{$spacing-unit} / 2));
190
- }
191
- }
192
-
193
- /**
194
- * Page content
195
- */
196
- .page-content {
197
- padding: $spacing-unit 0;
198
- flex: 1;
199
- }
200
-
201
- .page-heading {
202
- @include relative-font-size(2);
203
- }
204
-
205
- .post-meta {
206
- font-size: $small-font-size;
207
- color: $grey-color;
208
- }
209
- .post-image {
210
- height: 200px;
211
- width: 100%;
212
- }
213
- .featured-image {
214
- height: 300px;
215
- width: 100%;
216
- object-fit: contain;
217
- }
218
- .post-excerpt {
219
- font-size: $small-font-size;
220
- color: $grey-color;
221
- }
222
- .post-link {
223
- display: block;
224
- @include relative-font-size(1.5);
225
- }
226
-
227
- /**
228
- * Posts
229
- */
230
- .post-header {
231
- margin-bottom: $spacing-unit;
232
- }
233
-
234
- .post-title {
235
- @include relative-font-size(2.625);
236
- letter-spacing: -1px;
237
- line-height: 1;
238
- margin: 20px;
239
-
240
- @include media-query($on-laptop) {
241
- @include relative-font-size(2.25);
242
- }
243
- }
244
-
245
- .post-content {
246
- margin-bottom: $spacing-unit;
247
- // text-align: justify;
248
- p{
249
- text-align: justify;
250
-
251
- }
252
-
253
-
254
- h2 {
255
- @include relative-font-size(2);
256
-
257
- @include media-query($on-laptop) {
258
- @include relative-font-size(1.75);
259
- }
260
- }
261
-
262
- h3 {
263
- @include relative-font-size(1.625);
264
-
265
- @include media-query($on-laptop) {
266
- @include relative-font-size(1.375);
267
- }
268
- }
269
-
270
- h4 {
271
- @include relative-font-size(1.25);
272
-
273
- @include media-query($on-laptop) {
274
- @include relative-font-size(1.125);
275
- }
276
- }
277
- }
@@ -1,289 +0,0 @@
1
- .theme-picker {
2
- display: flex;
3
- padding-top: 12px;
4
- padding-bottom: 12px;
5
- padding-right: 15px;
6
- margin-top: 4px;
7
- justify-content: flex-end;
8
- }
9
- .all-post-wrapper {
10
- max-width: 1200px;
11
- margin-left: auto;
12
- margin-right: auto;
13
- }
14
- .post-list {
15
- display: grid;
16
- grid-template-columns: repeat(6, 1fr);
17
- gap: 8px;
18
- grid-auto-flow: row;
19
- grid-auto-rows: minmax(200px, auto);
20
- margin-left: 0;
21
- list-style: none;
22
- }
23
- .post-card {
24
- position: relative;
25
- grid-column: auto / span 2;
26
- box-sizing: border-box;
27
- display: flex;
28
- flex-direction: column;
29
- border-radius: 14px;
30
- padding: 20px;
31
- border: 1px solid var(--md-sys-color-outline);
32
- & p {
33
- display: -webkit-box;
34
- line-clamp: 3;
35
- -webkit-line-clamp: 3;
36
- -webkit-box-orient: vertical;
37
- overflow: hidden;
38
- }
39
- @media screen and (max-width: 1200px) {
40
- grid-column: auto/span 3;
41
- }
42
- @media screen and (max-width: 800px) {
43
- grid-column: auto/span 6;
44
- }
45
- }
46
- .pinned-post-card {
47
- position: relative;
48
- box-sizing: border-box;
49
- display: flex;
50
- flex-direction: column;
51
- border-radius: 14px;
52
- padding: 12px;
53
- width: 30%;
54
- transform-origin: top right;
55
- animation: pin 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
56
- background-color: var(--md-sys-color-primary-container);
57
- & p,
58
- span,
59
- a {
60
- color: var(--md-sys-color-on-primary-container);
61
- }
62
- & img {
63
- background-color: var(--md-sys-color-surface-container-high);
64
- border-radius: 24px;
65
- }
66
- @media screen and (max-width: 1300px) {
67
- width: 46%;
68
- }
69
- @media screen and (max-width: 850px) {
70
- width: 100%;
71
- & p {
72
- display: -webkit-box;
73
- line-clamp: 5;
74
- -webkit-line-clamp: 5;
75
- -webkit-box-orient: vertical;
76
- overflow: hidden;
77
- }
78
- }
79
- }
80
-
81
- .pinned-post-list {
82
- display: flex;
83
- margin-left: 0;
84
- flex-wrap: wrap;
85
- justify-content: space-around;
86
- padding-top: 12px;
87
- list-style: none;
88
- background-color: var(--md-sys-color-surface-container);
89
- border-radius: 24px;
90
- padding: $spacing-unit;
91
- min-height: 390px;
92
- @media screen and (max-width: 850px) {
93
- padding: $spacing-unit/2;
94
- min-height: 200px;
95
- }
96
-
97
- > li:not(:last-child) {
98
- margin-bottom: $spacing-unit;
99
- }
100
- }
101
- .pinned-post-card::before {
102
- content: "";
103
- position: absolute;
104
- top: -10px;
105
- left: -12px;
106
- right: -10px;
107
- bottom: -10px;
108
- background-image: url("/assets/theme-assets/theme-images/border-thick.svg");
109
- background-size: 100% 100%;
110
- filter: var(--outline-filter);
111
- pointer-events: none; /* Allows interaction with content inside the border */
112
- }
113
- .navrail {
114
- font-family: "Comic Shanns", $base-font-family;
115
- position: fixed;
116
- display: flex;
117
- flex-direction: column;
118
- height: 100vh;
119
- justify-content: flex-start;
120
- align-items: center;
121
- z-index: 99;
122
- padding: 30px 8px 30px 16px;
123
- box-sizing: border-box;
124
- width: 100px;
125
- // background-color: var(--md-sys-color-surface);
126
- @media screen and (min-width: 1360px) {
127
- width: 130px;
128
- }
129
-
130
- @include media-query($on-palm) {
131
- flex-direction: row;
132
- bottom: 0;
133
- width: 100vw;
134
- height: fit-content;
135
- background-color: var(--md-sys-color-surface-container-high);
136
- padding: 0px;
137
- box-shadow: 0px -4px 16px 0px var(--md-sys-color-shadow);
138
- .navrail-icon {
139
- max-height: 34px;
140
- max-width: max-content;
141
- object-fit: cover;
142
- }
143
- .navrail-button {
144
- padding: 8px 0 8px 0;
145
- }
146
- }
147
- }
148
- .navrail-button {
149
- padding: 12px 0 12px 0;
150
- position: relative;
151
- display: flex;
152
- flex-direction: column;
153
- width: 100%;
154
- justify-content: center;
155
- align-items: center;
156
- color: var(--md-sys-color-on-surface);
157
- }
158
- .navrail-icon {
159
- max-width: 40px;
160
- }
161
-
162
- .theme-selector {
163
- position: relative;
164
- display: flex;
165
- justify-content: flex-end;
166
- margin-left: auto;
167
- padding: 6px;
168
- margin-top: 8px;
169
- margin-right: 8px;
170
- border-radius: 99px;
171
- background-color: rgba(70, 70, 70, 0.233);
172
- backdrop-filter: blur(8px);
173
- width: fit-content;
174
- @media screen and (min-width: 601px) {
175
- position: fixed;
176
- z-index: 103;
177
- bottom: 10px;
178
- left: 30px;
179
- }
180
- }
181
-
182
- .current-theme {
183
- height: 26px;
184
- width: 26px;
185
- border-radius: 50%;
186
- background-color: var(--current-color); /* Initial theme color */
187
- margin-left: 12px;
188
- cursor: pointer;
189
- transition: transform 0.3s;
190
- }
191
- .theme-options {
192
- display: flex;
193
- gap: 10px;
194
- max-width: 0px;
195
- transition: all 0.3s;
196
- }
197
- .theme-option {
198
- width: 26px;
199
- height: 26px;
200
- border-radius: 50%;
201
- cursor: pointer;
202
- }
203
- .home {
204
- padding-right: $spacing-unit;
205
- padding-left: $spacing-unit + 100;
206
- @extend %clearfix;
207
- @include media-query($on-laptop) {
208
- padding-right: $spacing-unit / 2;
209
- padding-left: ($spacing-unit / 2)+100;
210
- }
211
- @include media-query($on-palm) {
212
- padding-left: $spacing-unit/2;
213
- }
214
- }
215
- .pin-svg {
216
- position: absolute;
217
- height: 80px;
218
- width: auto;
219
- top: -34px;
220
- right: 15px;
221
- z-index: 11;
222
- }
223
- .pin-path {
224
- stroke: var(--md-sys-color-tertiary);
225
- stroke-width: 2.5;
226
- }
227
- h1 {
228
- font-family: "Comic Shanns", $base-font-family;
229
- // text-align: start;
230
- }
231
- .tagline {
232
- font-family: "Comic Shanns", $base-font-family;
233
- text-align: center;
234
- font-size: 1.2rem;
235
- }
236
- .home {
237
- max-width: 1200px;
238
- margin-left: auto;
239
- margin-right: auto;
240
- }
241
- .divider-path {
242
- stroke: var(--md-sys-color-outline);
243
- stroke-width: 2;
244
- }
245
- .divider-svg {
246
- width: 100%;
247
- height: auto;
248
- margin-left: auto;
249
- margin-right: auto;
250
- @include media-query($on-palm) {
251
- }
252
- }
253
- @keyframes pin {
254
- 0% {
255
- transform: rotate(-35deg);
256
- }
257
- 20% {
258
- transform: rotate(10deg);
259
- }
260
- 40% {
261
- transform: rotate(-3deg);
262
- }
263
- 60% {
264
- transform: rotate(2deg);
265
- }
266
- 80% {
267
- transform: rotate(-1deg);
268
- }
269
- 100% {
270
- transform: rotate(0deg);
271
- }
272
- }
273
- @keyframes mainreveal {
274
- from {
275
- transform: translateY(20%);
276
- opacity: 0;
277
- }
278
- to {
279
- transform: translate(0);
280
- opacity: 1;
281
- }
282
- }
283
- main {
284
- overflow: hidden;
285
- animation: mainreveal 0.25s;
286
- }
287
- .card-title{
288
- font-family: "Comic Shanns", $base-font-family;
289
- }