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
@@ -0,0 +1,20 @@
1
+ @font-face {
2
+ font-family: "Excalifont";
3
+ src: url("/assets/theme-assets/theme-fonts/Excalifont-Regular.woff2");
4
+ }
5
+ @font-face {
6
+ font-family: "Comic Shanns";
7
+ src: url("/assets/theme-assets/theme-fonts/comic\ shanns.otf");
8
+ }
9
+ @font-face {
10
+ font-family: "Lexend";
11
+ src: url("/assets/theme-assets/theme-fonts/Lexend-Regular.ttf");
12
+ }
13
+ // @font-face {
14
+ // font-family: "Gluten Light";
15
+ // src: url("/assets/theme-assets/theme-fonts/Gluten-Static/Gluten-Regular.ttf");
16
+ // }
17
+ // @font-face {
18
+ // font-family: "Architect";
19
+ // src: url("/assets/theme-assets/theme-fonts/ArchitectsDaughter-Regular.ttf");
20
+ // }
@@ -0,0 +1,79 @@
1
+ .site-footer {
2
+ padding: $spacing-unit 0;
3
+ @include media-query($on-palm) {
4
+ padding-bottom: 100px;
5
+ }
6
+ }
7
+
8
+ .footer-heading {
9
+ @include relative-font-size(1.125);
10
+ margin-bottom: $spacing-unit / 2;
11
+ }
12
+
13
+ .contact-list,
14
+ .social-media-list {
15
+ list-style: none;
16
+ margin-left: 0;
17
+ }
18
+
19
+ .footer-col-wrapper {
20
+ @include relative-font-size(0.9375);
21
+ color: $grey-color;
22
+ margin-left: -$spacing-unit / 2;
23
+ @extend %clearfix;
24
+ }
25
+
26
+ .footer-col {
27
+ float: left;
28
+ margin-bottom: $spacing-unit / 2;
29
+ padding-left: $spacing-unit / 2;
30
+ }
31
+
32
+ .footer-col-1 {
33
+ width: -webkit-calc(35% - (#{$spacing-unit} / 2));
34
+ width: calc(35% - (#{$spacing-unit} / 2));
35
+ }
36
+
37
+ .footer-col-2 {
38
+ width: -webkit-calc(20% - (#{$spacing-unit} / 2));
39
+ width: calc(20% - (#{$spacing-unit} / 2));
40
+ }
41
+
42
+ .footer-col-3 {
43
+ width: -webkit-calc(45% - (#{$spacing-unit} / 2));
44
+ width: calc(45% - (#{$spacing-unit} / 2));
45
+ }
46
+
47
+ @include media-query($on-laptop) {
48
+ .footer-col-1,
49
+ .footer-col-2 {
50
+ width: -webkit-calc(50% - (#{$spacing-unit} / 2));
51
+ width: calc(50% - (#{$spacing-unit} / 2));
52
+ }
53
+
54
+ .footer-col-3 {
55
+ width: -webkit-calc(100% - (#{$spacing-unit} / 2));
56
+ width: calc(100% - (#{$spacing-unit} / 2));
57
+ }
58
+ }
59
+
60
+ @include media-query($on-palm) {
61
+ .footer-col {
62
+ float: none;
63
+ width: -webkit-calc(100% - (#{$spacing-unit} / 2));
64
+ width: calc(100% - (#{$spacing-unit} / 2));
65
+ }
66
+ }
67
+
68
+ .divider-svg {
69
+ width: 100%;
70
+ height: auto;
71
+ margin-left: auto;
72
+ margin-right: auto;
73
+ @include media-query($on-palm) {
74
+ }
75
+ }
76
+ .divider-path {
77
+ stroke: var(--md-sys-color-outline);
78
+ stroke-width: 2;
79
+ }
@@ -0,0 +1,29 @@
1
+ .header-container {
2
+ display: flex;
3
+ justify-content: center;
4
+ flex-direction: column;
5
+ }
6
+ .site-header {
7
+ min-height: $spacing-unit * 1.865;
8
+ position: relative;
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
+ .tagline {
26
+ font-family: "Comic Shanns", $base-font-family;
27
+ text-align: center;
28
+ font-size: 1.2rem;
29
+ }
@@ -0,0 +1,128 @@
1
+ .site-nav {
2
+ line-height: $base-line-height * $base-font-size * 2.25;
3
+
4
+ .nav-trigger {
5
+ display: none;
6
+ }
7
+
8
+ .menu-icon {
9
+ display: none;
10
+ }
11
+ .trigger {
12
+ display: none;
13
+ justify-content: center;
14
+ border-radius: 999px;
15
+ }
16
+ .page-link {
17
+ color: var(--md-sys-color-on-surface);
18
+ min-width: 60px;
19
+ text-align: center;
20
+ border-radius: 999px;
21
+ padding: 0 20px 0 20px;
22
+ &:not(:last-child) {
23
+ margin-right: 20px;
24
+ }
25
+ }
26
+
27
+ @include media-query($on-palm) {
28
+ position: absolute;
29
+ top: 12px;
30
+ left: 12px;
31
+ background-color: var(--md-sys-color-surface-container);
32
+ backdrop-filter: blur(8px);
33
+ border-radius: 8px;
34
+ text-align: right;
35
+ padding-bottom: 3px;
36
+ padding-left: 2px;
37
+ padding-right: 2px;
38
+
39
+ label[for="nav-trigger"] {
40
+ display: block;
41
+ width: 36px;
42
+ height: 36px;
43
+ z-index: 2;
44
+ cursor: pointer;
45
+ }
46
+
47
+ .menu-icon {
48
+ display: block;
49
+ float: right;
50
+ width: 36px;
51
+ height: 26px;
52
+ line-height: 0;
53
+ padding-top: 10px;
54
+ text-align: center;
55
+
56
+ > svg {
57
+ fill: $grey-color-dark;
58
+ }
59
+ }
60
+
61
+ input ~ .trigger {
62
+ clear: both;
63
+ display: none;
64
+ }
65
+
66
+ input:checked ~ .trigger {
67
+ display: block;
68
+ padding-bottom: 5px;
69
+ }
70
+
71
+ .page-link {
72
+ display: block;
73
+ padding: 5px 10px;
74
+
75
+ &:not(:last-child) {
76
+ margin-right: 0;
77
+ }
78
+ margin-left: 20px;
79
+ }
80
+ }
81
+ }
82
+ .navrail {
83
+ font-family: "Comic Shanns", $base-font-family;
84
+ position: fixed;
85
+ display: flex;
86
+ flex-direction: column;
87
+ height: 100vh;
88
+ justify-content: flex-start;
89
+ align-items: center;
90
+ z-index: 99;
91
+ padding: 30px 8px 30px 16px;
92
+ box-sizing: border-box;
93
+ width: 100px;
94
+ @media screen and (min-width: 1360px) {
95
+ width: 130px;
96
+ }
97
+
98
+ @include media-query($on-palm) {
99
+ flex-direction: row;
100
+ bottom: 0;
101
+ width: 100vw;
102
+ height: fit-content;
103
+ background-color: var(--md-sys-color-surface-container);
104
+ padding: 0px;
105
+ box-shadow: 0px -4px 16px 0px var(--md-sys-color-shadow);
106
+ .navrail-icon {
107
+ max-height: 34px;
108
+ max-width: max-content;
109
+ object-fit: cover;
110
+ }
111
+ .navrail-button {
112
+ padding: 8px 0 8px 0;
113
+ }
114
+ }
115
+ }
116
+ .navrail-button {
117
+ padding: 12px 0 12px 0;
118
+ position: relative;
119
+ display: flex;
120
+ flex-direction: column;
121
+ width: 100%;
122
+ justify-content: center;
123
+ align-items: center;
124
+ color: var(--md-sys-color-on-surface);
125
+ }
126
+ .navrail-icon {
127
+ max-width: 40px;
128
+ }
@@ -0,0 +1,10 @@
1
+ .page-content {
2
+ padding: $spacing-unit 0;
3
+ flex: 1;
4
+ }
5
+
6
+ .page-heading {
7
+ @include relative-font-size(2);
8
+ }
9
+
10
+
@@ -0,0 +1,99 @@
1
+ @keyframes pin {
2
+ 0% {
3
+ transform: rotate(-35deg);
4
+ }
5
+ 20% {
6
+ transform: rotate(10deg);
7
+ }
8
+ 40% {
9
+ transform: rotate(-3deg);
10
+ }
11
+ 60% {
12
+ transform: rotate(2deg);
13
+ }
14
+ 80% {
15
+ transform: rotate(-1deg);
16
+ }
17
+ 100% {
18
+ transform: rotate(0deg);
19
+ }
20
+ }
21
+ .pinned-post-card {
22
+ position: relative;
23
+ box-sizing: border-box;
24
+ display: flex;
25
+ flex-direction: column;
26
+ border-radius: 14px;
27
+ padding: 12px;
28
+ width: 30%;
29
+ transform-origin: top right;
30
+ animation: pin 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
31
+ background-color: var(--md-sys-color-primary-container);
32
+ & p,
33
+ span,
34
+ a {
35
+ color: var(--md-sys-color-on-primary-container);
36
+ }
37
+ & img {
38
+ background-color: var(--md-sys-color-surface-container-high);
39
+ border-radius: 24px;
40
+ }
41
+ @media screen and (max-width: 1300px) {
42
+ width: 46%;
43
+ }
44
+ @media screen and (max-width: 850px) {
45
+ width: 100%;
46
+ & p {
47
+ display: -webkit-box;
48
+ line-clamp: 5;
49
+ -webkit-line-clamp: 5;
50
+ -webkit-box-orient: vertical;
51
+ overflow: hidden;
52
+ }
53
+ }
54
+ }
55
+
56
+ .pinned-post-list {
57
+ display: flex;
58
+ margin-left: 0;
59
+ flex-wrap: wrap;
60
+ justify-content: space-around;
61
+ padding-top: 12px;
62
+ list-style: none;
63
+ background-color: var(--md-sys-color-surface-container);
64
+ border-radius: 24px;
65
+ padding: $spacing-unit;
66
+ min-height: 390px;
67
+ @media screen and (max-width: 850px) {
68
+ padding: $spacing-unit/2;
69
+ min-height: 200px;
70
+ }
71
+
72
+ > li:not(:last-child) {
73
+ margin-bottom: $spacing-unit;
74
+ }
75
+ }
76
+ .pinned-post-card::before {
77
+ content: "";
78
+ position: absolute;
79
+ top: -10px;
80
+ left: -12px;
81
+ right: -10px;
82
+ bottom: -10px;
83
+ background-image: url("/assets/theme-assets/theme-images/border-thick.svg");
84
+ background-size: 100% 100%;
85
+ filter: var(--outline-filter);
86
+ pointer-events: none; /* Allows interaction with content inside the border */
87
+ }
88
+ .pin-svg {
89
+ position: absolute;
90
+ height: 80px;
91
+ width: auto;
92
+ top: -34px;
93
+ right: 15px;
94
+ z-index: 11;
95
+ }
96
+ .pin-path {
97
+ stroke: var(--md-sys-color-tertiary);
98
+ stroke-width: 2.5;
99
+ }
@@ -0,0 +1,107 @@
1
+ .all-post-wrapper {
2
+ max-width: 1200px;
3
+ margin-left: auto;
4
+ margin-right: auto;
5
+ }
6
+ .post-header {
7
+ margin-bottom: $spacing-unit;
8
+ }
9
+ .post-meta {
10
+ font-size: $small-font-size;
11
+ color: $grey-color;
12
+ }
13
+ .post-image {
14
+ height: 200px;
15
+ width: 100%;
16
+ }
17
+ .featured-image {
18
+ height: 300px;
19
+ width: 100%;
20
+ object-fit: contain;
21
+ }
22
+ .post-excerpt {
23
+ font-size: $small-font-size;
24
+ color: $grey-color;
25
+ }
26
+ .post-link {
27
+ display: block;
28
+ @include relative-font-size(1.5);
29
+ }
30
+ .post-title {
31
+ @include relative-font-size(2.625);
32
+ letter-spacing: -1px;
33
+ line-height: 1;
34
+ margin: 20px;
35
+
36
+ @include media-query($on-laptop) {
37
+ @include relative-font-size(2.25);
38
+ }
39
+ }
40
+
41
+ .post-content {
42
+ margin-bottom: $spacing-unit;
43
+ // text-align: justify;
44
+ p {
45
+ text-align: justify;
46
+ }
47
+
48
+ h2 {
49
+ @include relative-font-size(2);
50
+
51
+ @include media-query($on-laptop) {
52
+ @include relative-font-size(1.75);
53
+ }
54
+ }
55
+
56
+ h3 {
57
+ @include relative-font-size(1.625);
58
+
59
+ @include media-query($on-laptop) {
60
+ @include relative-font-size(1.375);
61
+ }
62
+ }
63
+
64
+ h4 {
65
+ @include relative-font-size(1.25);
66
+
67
+ @include media-query($on-laptop) {
68
+ @include relative-font-size(1.125);
69
+ }
70
+ }
71
+ }
72
+
73
+ .post-list {
74
+ display: grid;
75
+ grid-template-columns: repeat(6, 1fr);
76
+ gap: 8px;
77
+ grid-auto-flow: row;
78
+ grid-auto-rows: minmax(200px, auto);
79
+ margin-left: 0;
80
+ list-style: none;
81
+ }
82
+ .post-card {
83
+ position: relative;
84
+ grid-column: auto / span 2;
85
+ box-sizing: border-box;
86
+ display: flex;
87
+ flex-direction: column;
88
+ border-radius: 14px;
89
+ padding: 20px;
90
+ border: 1px solid var(--md-sys-color-outline);
91
+ & p {
92
+ display: -webkit-box;
93
+ line-clamp: 3;
94
+ -webkit-line-clamp: 3;
95
+ -webkit-box-orient: vertical;
96
+ overflow: hidden;
97
+ }
98
+ @media screen and (max-width: 1200px) {
99
+ grid-column: auto/span 3;
100
+ }
101
+ @media screen and (max-width: 800px) {
102
+ grid-column: auto/span 6;
103
+ }
104
+ }
105
+ .card-title {
106
+ font-family: "Comic Shanns", $base-font-family;
107
+ }
@@ -0,0 +1,41 @@
1
+ .theme-selector {
2
+ position: relative;
3
+ display: flex;
4
+ justify-content: flex-end;
5
+ margin-left: auto;
6
+ padding: 6px;
7
+ margin-top: 8px;
8
+ margin-right: 8px;
9
+ border-radius: 99px;
10
+ background-color: rgba(70, 70, 70, 0.233);
11
+ backdrop-filter: blur(8px);
12
+ width: fit-content;
13
+ @media screen and (min-width: 601px) {
14
+ position: fixed;
15
+ z-index: 103;
16
+ bottom: 10px;
17
+ left: 30px;
18
+ }
19
+ }
20
+
21
+ .current-theme {
22
+ height: 26px;
23
+ width: 26px;
24
+ border-radius: 50%;
25
+ background-color: var(--current-color); /* Initial theme color */
26
+ margin-left: 12px;
27
+ cursor: pointer;
28
+ transition: transform 0.3s;
29
+ }
30
+ .theme-options {
31
+ display: flex;
32
+ gap: 10px;
33
+ max-width: 0px;
34
+ transition: all 0.3s;
35
+ }
36
+ .theme-option {
37
+ width: 26px;
38
+ height: 26px;
39
+ border-radius: 50%;
40
+ cursor: pointer;
41
+ }