askclass-home-theme 0.1.1 → 0.1.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 (11) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/boxes/{fullpage.html → normal.html} +9 -2
  3. data/_includes/boxes/rounded.html +6 -1
  4. data/_includes/main.html +5 -1
  5. data/_sass/_base.scss +1 -0
  6. data/_sass/_defaults.scss +4 -0
  7. data/_sass/_section.scss +26 -4
  8. data/assets/css/default.scss +1 -1
  9. data/assets/css/modules.scss +1 -1
  10. data/assets/js/scripts.js +23 -1
  11. metadata +3 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 3413b1e939a63599c28707462a98e60c85002af9bf43be2c73d834daa3d19d22
4
- data.tar.gz: 246359b8287e23b34da0f777ffa6420752e1bb4428a91f8a1c4586a1233fe530
3
+ metadata.gz: 7323a8fa7421d3a621e37b613db75f1a1dc839f3c876997cc299a2df4f1197df
4
+ data.tar.gz: 6dff747021a522cc4ffe0f2f27d486b94d7cd5943d42fc2567caf03d22f36afa
5
5
  SHA512:
6
- metadata.gz: 764cb5e4f6736052744cf3c85e0e27614047028de61ae5ff0a882468388c07359ba14076a5b9fd573eca02bafb397b8730ccd350e5d372a7dc6b583da6853ff5
7
- data.tar.gz: e33660c4bb31751539ac8798ec029db4e0ce608f4c795895a945ec46c178110a76a43db187917e87310ea2eb4392df702b1ee71b02376cb11a54ee36ef578e6f
6
+ metadata.gz: 773efcf384c75bd5c9ab4b5354703f741206f7cc3b9619f584cab6e33c3159eb164779979707114b3840200bb6bf0fabd96cf368d65657d75d6d2ce10b3e22c1
7
+ data.tar.gz: 53abae1b2be92e194a8f3e3059549fd8b96a2a8a4b2ff5c383b329e20c35d3eebb7a962234f60ef1cb4d2fc02f5798cb47540d11f945cadad64cd7aad5d798a9
data/_includes/boxes/{fullpage.html → normal.html} RENAMED
@@ -1,7 +1,14 @@
1
1
  {%- assign info = include.data %}
2
- <article class='fullpage'
3
- style='
2
+ {%- if include.type == 'fullpage' %}
3
+ {%- capture minHeight %}
4
4
  min-height: calc(100vh - {{ info.offset-top | default: '0px' }});
5
+ {%- endcapture %}
6
+ {%- else %}
7
+ {%- assign minHeight = '' %}
8
+ {%- endif %}
9
+ <article class='fullpage'
10
+ style='{{ minHeight }}
11
+ color: {{ info.color | default: 'inherit' }};
5
12
  background-color: {{ info.background-color | default: 'transparent' }};
6
13
  justify-content: {{ info.justify | default: 'flex-start' }};
7
14
  '>
data/_includes/boxes/rounded.html CHANGED
@@ -17,6 +17,11 @@
17
17
  '>
18
18
  {%- if box.image %}
19
19
  <div class='image-overlay'>
20
+ {%- if box.image.color %}
21
+ <div class='overlay'
22
+ onclick='playGif(this)'
23
+ style='background-image: linear-gradient(0deg, {{ box.image.color }}, transparent)'></div>
24
+ {%- endif %}
20
25
  <img onclick='playGif(this)'
21
26
  src='{{ box.image.src }}'
22
27
  data-gif='{{ box.image.gif }}'
@@ -25,7 +30,7 @@
25
30
  </div>
26
31
  {%- endif %}
27
32
  <div class='text-content'>
28
- <h1 class='{{ smaller }}'>{{ box.title }}</h1>
33
+ <h1 class='{{ box.class }}'>{{ box.title }}</h1>
29
34
  <p>{{ box.text }}</p>
30
35
  {%- if box.button %}
31
36
  <a class='a-button link' href='{{ box.button.href }}'>
data/_includes/main.html CHANGED
@@ -1,5 +1,9 @@
1
1
  {%- assign _slist = site.data[LANG].main.segments | default: site.data.main.segments %}
2
2
  {%- for segment in _slist %}
3
3
  {%- assign _info = SEGMENTS[segment] %}
4
- {%- include boxes/{{ _info.type | default: 'fullpage' }}.html data=_info %}
4
+ {%- if _info.type == 'fullpage' %}
5
+ {%- include boxes/normal.html data=_info type='fullpage' %}
6
+ {%- else %}
7
+ {%- include boxes/{{ _info.type | default: 'normal' }}.html data=_info %}
8
+ {%- endif %}
5
9
  {%- endfor %}
data/_sass/_base.scss CHANGED
@@ -59,6 +59,7 @@ a {
59
59
  text-decoration: none;
60
60
  }
61
61
 
62
+ h1, h2, h3, h4, h5, h6 { letter-spacing: -1px }
62
63
  h1 { font-size: 3.5em }
63
64
  h2 { font-size: 2em }
64
65
  h3 { font-size: 1.7em }
data/_sass/_defaults.scss CHANGED
@@ -27,6 +27,10 @@ $color-footer-bg: transparent;
27
27
  $color-footer-fg: #444;
28
28
  $color-footer-link: #222;
29
29
 
30
+ $box-shift-top-margin: -97px;
31
+ $box-shift-shadow: rgba(50,50,50,0.5) 1px 1px 5px;
32
+ $box-larger-font-size: 60px;
33
+
30
34
  $margin-footer: 100px 0 0 0;
31
35
 
32
36
  $content-width: 1200px;
data/_sass/_section.scss CHANGED
@@ -53,11 +53,9 @@ article {
53
53
  h4 {
54
54
  margin: 0;
55
55
  padding: 0;
56
- color: var(--color-dark);
57
56
  }
58
57
  p {
59
58
  font-family: var(--font-secondary);
60
- color: var(--color-dark);
61
59
  }
62
60
  }
63
61
 
@@ -65,22 +63,46 @@ article {
65
63
  display: flex;
66
64
  justify-content: center;
67
65
  .max-width {
68
- align-items: flex-start;
69
- padding: 0 1em;
66
+ padding: 0 1em 1em;
70
67
  width: 100%;
71
68
  }
72
69
  .box {
73
70
  width: 100%;
71
+ height: 100%;
74
72
  box-sizing: border-box;
75
73
  border-radius: 1em;
76
74
  margin: 1em 0;
75
+ overflow: hidden;
77
76
  h1 {
78
77
  margin: 0;
79
78
  line-height: 1;
79
+ overflow: hidden;
80
+ &.larger {
81
+ font-size: $box-larger-font-size;
82
+ }
83
+ &.shift {
84
+ margin-top: $box-shift-top-margin;
85
+ text-shadow: $box-shift-shadow;
86
+ }
80
87
  }
81
88
  p {
82
89
  font-family: var(--font-secondary);
83
90
  }
91
+ .image-overlay {
92
+ position: relative;
93
+ .overlay {
94
+ position: absolute;
95
+ bottom: 0;
96
+ left: 0;
97
+ width: 100%;
98
+ height: 100%;
99
+ background-image: linear-gradient( 0deg, black, transparent);
100
+ }
101
+ transition: all 5s ease-out;
102
+ }
103
+ .text-content {
104
+ position: relative;
105
+ }
84
106
  }
85
107
  }
86
108
 
data/assets/css/default.scss CHANGED
@@ -1,3 +1,3 @@
1
1
  ---
2
2
  ---
3
- @import "section", "defaults", "init", "base";
3
+ @import "defaults", "init", "section", "base";
data/assets/css/modules.scss CHANGED
@@ -1,3 +1,3 @@
1
1
  ---
2
2
  ---
3
- @import "post", "defaults", "init", "base";
3
+ @import "defaults", "init", "post", "base";
data/assets/js/scripts.js CHANGED
@@ -1,6 +1,28 @@
1
- function playGif(e) {
1
+ function playGif(overlay) {
2
+ let e = overlay.nextElementSibling;
3
+
4
+ if (overlay.dataset.gif) {
5
+ e = overlay;
6
+ }
7
+
2
8
  if (!e.dataset.gif) return ;
9
+
3
10
  const bak = e.src;
4
11
  e.src = e.dataset.gif;
5
12
  e.dataset.gif = bak;
13
+
14
+ if (e.dataset.playing) {
15
+ e.removeAttribute('data-playing');
16
+ if (e !== overlay)
17
+ overlay.style.opacity = 1;
18
+ } else {
19
+ e.dataset.playing = true;
20
+ if (e !== overlay)
21
+ overlay.style.opacity = 0;
22
+ }
23
+
24
+ e.parentElement
25
+ .nextElementSibling
26
+ .firstElementChild
27
+ .style.opacity = e.dataset.playing ? 0.2 : 1;
6
28
  }
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: askclass-home-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.1
4
+ version: 0.1.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - AskClass
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-04-07 00:00:00.000000000 Z
11
+ date: 2023-04-08 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -34,7 +34,7 @@ files:
34
34
  - LICENSE
35
35
  - README.md
36
36
  - _config.yml
37
- - _includes/boxes/fullpage.html
37
+ - _includes/boxes/normal.html
38
38
  - _includes/boxes/rounded.html
39
39
  - _includes/foot/js.html
40
40
  - _includes/foot/pwaupdate.html