askclass-home-theme 0.1.1 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3413b1e939a63599c28707462a98e60c85002af9bf43be2c73d834daa3d19d22
-  data.tar.gz: 246359b8287e23b34da0f777ffa6420752e1bb4428a91f8a1c4586a1233fe530
+  metadata.gz: e3888ff13ef71645169ca769518138c749fce8d231850a3bfbe6f1fc2d8f0dcf
+  data.tar.gz: b4680d839fa56737cc97ef1ca1a2eb5e924db313a452be6003b0fbf43b6d1530
 SHA512:
-  metadata.gz: 764cb5e4f6736052744cf3c85e0e27614047028de61ae5ff0a882468388c07359ba14076a5b9fd573eca02bafb397b8730ccd350e5d372a7dc6b583da6853ff5
-  data.tar.gz: e33660c4bb31751539ac8798ec029db4e0ce608f4c795895a945ec46c178110a76a43db187917e87310ea2eb4392df702b1ee71b02376cb11a54ee36ef578e6f
+  metadata.gz: c66ef310e2e133062a22df13ad209460dd19c35a2542d3be020dc451dbda834d6b6c876da5eb5371917587ab9eaa7bce2e8d0fe780d7bd596eeb92c71de45cce
+  data.tar.gz: fb283cf2ecc48bdd70a4b11c0e6e55649baea4806a9474b8c38876d6fb3c2182ad202454331c830f3d562990461478182827da11a7ba5e6d4e5333377f7ef2b1

data/_includes/boxes/{fullpage.html → normal.html}

@@ -1,7 +1,14 @@
 {%- assign info = include.data %}
-<article class='fullpage'
-  style='
+{%- if include.type == 'fullpage' %}
+  {%- capture minHeight %}
     min-height: calc(100vh - {{ info.offset-top | default: '0px' }});
+  {%- endcapture %}
+{%- else %}
+  {%- assign minHeight = '' %}
+{%- endif %}
+<article class='fullpage'
+  style='{{ minHeight }}
+    color: {{ info.color | default: 'inherit' }};
     background-color: {{ info.background-color | default: 'transparent' }};
     justify-content: {{ info.justify | default: 'flex-start' }};
   '>

data/_includes/boxes/rounded.html

@@ -17,6 +17,11 @@
       '>
       {%- if box.image %}
         <div class='image-overlay'>
+          {%- if box.image.color %}
+          <div class='overlay'
+            onclick='playGif(this)'
+            style='background-image: linear-gradient(0deg, {{ box.image.color }}, transparent)'></div>
+          {%- endif %}
           <img onclick='playGif(this)'
             src='{{ box.image.src }}'
             data-gif='{{ box.image.gif }}'
@@ -25,7 +30,7 @@
         </div>
       {%- endif %}
       <div class='text-content'>
-        <h1 class='{{ smaller }}'>{{ box.title }}</h1>
+        <h1 class='{{ box.class }}'>{{ box.title }}</h1>
         <p>{{ box.text }}</p>
         {%- if box.button %}
           <a class='a-button link' href='{{ box.button.href }}'>

data/_includes/main.html

@@ -1,5 +1,9 @@
 {%- assign _slist = site.data[LANG].main.segments | default: site.data.main.segments %}
 {%- for segment in _slist %}
   {%- assign _info = SEGMENTS[segment] %}
-  {%- include boxes/{{ _info.type | default: 'fullpage' }}.html data=_info %}
+  {%- if _info.type == 'fullpage' %}
+    {%- include boxes/normal.html data=_info type='fullpage' %}
+  {%- else %}
+    {%- include boxes/{{ _info.type | default: 'normal' }}.html data=_info %}
+  {%- endif %}
 {%- endfor %}

data/_sass/_base.scss

@@ -59,6 +59,7 @@ a {
   text-decoration: none;
 }
 
+h1, h2, h3, h4, h5, h6 { letter-spacing: -1px }
 h1 { font-size: 3.5em }
 h2 { font-size: 2em }
 h3 { font-size: 1.7em }

data/_sass/_defaults.scss

@@ -27,6 +27,10 @@ $color-footer-bg:       transparent;
 $color-footer-fg:       #444;
 $color-footer-link:     #222;
 
+$box-shift-top-margin:  -97px;
+$box-shift-shadow:      rgba(50,50,50,0.5) 1px 1px 5px;
+$box-larger-font-size:  60px;
+
 $margin-footer:         100px 0 0 0;
 
 $content-width:         1200px;

data/_sass/_section.scss

@@ -47,17 +47,15 @@ article {
     padding: 4em 1em;
 
     .media + .text {
-      margin-top: 20px;
+      margin-top: 1em;
     }
 
     h4 {
       margin: 0;
       padding: 0;
-      color: var(--color-dark);
     }
     p {
       font-family: var(--font-secondary);
-      color: var(--color-dark);
     }
   }
 
@@ -65,7 +63,6 @@ article {
     display: flex;
     justify-content: center;
     .max-width {
-      align-items: flex-start;
       padding: 0 1em;
       width: 100%;
     }
@@ -74,13 +71,37 @@ article {
       box-sizing: border-box;
       border-radius: 1em;
       margin: 1em 0;
+      overflow: hidden;
       h1 {
         margin: 0;
         line-height: 1;
+        overflow: hidden;
+        &.larger {
+          font-size: $box-larger-font-size;
+        }
+        &.shift {
+          margin-top: $box-shift-top-margin;
+          text-shadow: $box-shift-shadow;
+        }
       }
       p {
         font-family: var(--font-secondary);
       }
+      .image-overlay {
+        position: relative;
+        .overlay {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-image: linear-gradient( 0deg, black, transparent);
+        }
+        transition: all 5s ease-out;
+      }
+      .text-content {
+        position: relative;
+      }
     }
   }
 
@@ -111,6 +132,9 @@ article {
 
   @media screen and (min-width:767px) {
     @include medium();
+    &.rounded {
+      margin: 20px 0;
+    }
     .max-width.split-content {
       flex-direction: row;
       &.align-right {
@@ -119,6 +143,9 @@ article {
       .box, .media, .text {
         flex: 0 0 49%;
       }
+      .box {
+        height: 100%;
+      }
     }
   }
 

data/assets/css/default.scss

@@ -1,3 +1,3 @@
 ---
 ---
-@import "section", "defaults", "init", "base";
+@import "defaults", "init", "section", "base";

data/assets/css/modules.scss

@@ -1,3 +1,3 @@
 ---
 ---
-@import "post", "defaults", "init", "base";
+@import "defaults", "init", "post", "base";

data/assets/js/scripts.js

@@ -1,6 +1,28 @@
-function playGif(e) {
+function playGif(overlay) {
+  let e = overlay.nextElementSibling;
+
+  if (overlay.dataset.gif) {
+    e = overlay;
+  }
+
   if (!e.dataset.gif) return ;
+
   const bak = e.src;
   e.src = e.dataset.gif;
   e.dataset.gif = bak;
+
+  if (e.dataset.playing) {
+    e.removeAttribute('data-playing');
+    if (e !== overlay)
+      overlay.style.opacity = 1;
+  } else {
+    e.dataset.playing = true;
+    if (e !== overlay)
+      overlay.style.opacity = 0;
+  }
+
+  e.parentElement
+    .nextElementSibling
+    .firstElementChild
+    .style.opacity = e.dataset.playing ? 0.2 : 1;
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: askclass-home-theme
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.3
 platform: ruby
 authors:
 - AskClass
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-04-07 00:00:00.000000000 Z
+date: 2023-04-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -34,7 +34,7 @@ files:
 - LICENSE
 - README.md
 - _config.yml
-- _includes/boxes/fullpage.html
+- _includes/boxes/normal.html
 - _includes/boxes/rounded.html
 - _includes/foot/js.html
 - _includes/foot/pwaupdate.html