askclass-home-theme 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b0f03ea8c017b448577a6d7b3eb98ec48786956f92a5aa2352d9c2467022ad47
-  data.tar.gz: 98efd2469bc09be241ba3154192ac15bf3468327dd29f6abd5a18ddb25761358
+  metadata.gz: 7323a8fa7421d3a621e37b613db75f1a1dc839f3c876997cc299a2df4f1197df
+  data.tar.gz: 6dff747021a522cc4ffe0f2f27d486b94d7cd5943d42fc2567caf03d22f36afa
 SHA512:
-  metadata.gz: 6f3b15cce31936a05f2767439aa59a23de8d0547bf49bf1cf40f6cb20084ec420937c22d61b9e25face3650a70df0b8bab2d0294e765295998ad2ebe7a5c27f1
-  data.tar.gz: 37392c6e0d3374deb99dfe88145da1eedaae97dd6b6ff504d511d24b4848745d0e27e0558f6743021e35833110bb79658bc0a8ea728293a602f10c06cb208322
+  metadata.gz: 773efcf384c75bd5c9ab4b5354703f741206f7cc3b9619f584cab6e33c3159eb164779979707114b3840200bb6bf0fabd96cf368d65657d75d6d2ce10b3e22c1
+  data.tar.gz: 53abae1b2be92e194a8f3e3059549fd8b96a2a8a4b2ff5c383b329e20c35d3eebb7a962234f60ef1cb4d2fc02f5798cb47540d11f945cadad64cd7aad5d798a9

data/_config.yml

@@ -23,10 +23,7 @@ ach:
   meta:
     apple_icon: "logo-300.png"
     og_image: "logo-square-512.png"
-    shortcut:
-      favicon: "favicon.ico"
-      type: "image/png"
-      image: "logo-96.png"
+    favicon: "favicon.ico"
     keywords: >
       edtech,
       education,

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' }};
   '>
@@ -41,7 +48,7 @@
         <p>{{ info.text }}</p>
       {%- endif %}
       {%- if info.more %}
-        <a class='a-button link' href='{{ info.more.href }}'>
+        <a class='a-button link {{ info.more.size }}' href='{{ info.more.href }}'>
           {{ info.more.label }}
         </a>
       {%- endif %}

data/_includes/boxes/rounded.html

@@ -17,16 +17,27 @@
       '>
       {%- if box.image %}
         <div class='image-overlay'>
-          <img src='{{ box.image.src }}' title='{{ box.image.text }}' width='{{ box.image.width }}' />
+          {%- 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 }}'
+            title='{{ box.image.text }}'
+            width='{{ box.image.width | default: "100%" }}' />
         </div>
       {%- endif %}
-      <h1 class='{{ smaller }}'>{{ box.title }}</h1>
-      <p>{{ box.text }}</p>
-      {%- if box.button %}
-        <a class='a-button link' href='{{ box.button.href }}'>
-          {{ box.button.label }}
-        </a>
-      {%- endif %}
+      <div class='text-content'>
+        <h1 class='{{ box.class }}'>{{ box.title }}</h1>
+        <p>{{ box.text }}</p>
+        {%- if box.button %}
+          <a class='a-button link' href='{{ box.button.href }}'>
+            {{ box.button.label }}
+          </a>
+        {%- endif %}
+      </div>
     </div>
   {%- endfor %}
   </div>

data/_includes/foot/js.html

@@ -0,0 +1 @@
+<script src='/assets/js/scripts.js' />

data/_includes/head/common.html

@@ -1,7 +1,11 @@
-{% assign ach = site.ach %}
-{% assign desc = page.excerpt | default: site.description | strip_html | strip_newlines %}
-{% assign assets = '/assets/' | prepend: site.url %}
-{% assign families = ach.font_families | join: "&family=" %}
+{%- assign ach = site.ach %}
+{%- assign desc = SEGMENTS[slug].text
+    | default: page.excerpt
+    | default: site.description
+    | strip_html
+    | strip_newlines %}
+{%- assign assets = '/assets/' | prepend: site.url %}
+{%- assign families = ach.font_families | join: "&family=" %}
 {%- assign og_image = ach.meta.og_image | prepend: '/assets/' %}
 
   <meta charset="utf-8" />
@@ -21,11 +25,11 @@
   <meta property="og:site_name" content="{{ site.title }}" />
   <meta property="og:description" content="{{ desc }}" />
   <meta property="og:url" content="{{ site.url }}{{ page.url }}" />
-  <meta property="og:image" content="{{ page.image | default: og_image }}" />
-  {% if ach.twitter %}
+  <meta property="og:image" content="{{ SEGMENTS[slug].image.src | default: page.image | default: og_image }}" />
+  {%- if ach.social.twitter %}
   <meta name="twitter:site" content="{{ ach.social.twitter }}" />
   <meta name="twitter:card" content="summary_large_image">
-  {% endif % %}
+  {%- endif % -%}
 
   <link rel="manifest" href="/assets/site.webmanifest" />
   <link rel="preconnect" href="https://cdn.jsdelivr.net" />
@@ -35,11 +39,12 @@
   <link rel="preload" as="style"
         href="https://fonts.googleapis.com/css2?family={{ families }}&display=swap"
         onload='this.onload=null;this.rel="stylesheet"' />
-  <link rel="shortcut icon" href="/assets/{{ ach.meta.shortcut.favicon }}" />
-  <link rel="icon" type="{{ ach.meta.shotcut.type }}" href="/assets/{{ ach.meta.shortcut.image }}" />
-  <link rel="icon" type="image/svg+xml" href="/assets/{{ ach.logo.alt_image }}" />
+  <link rel="shortcut icon" href="/assets/{{ ach.meta.favicon }}" />
+  {%- for icon in site.data.icons %}
+  <link rel="icon" type="{{ icon.type }}" href="{{ icon.href }}" />
+  {%- endfor %}
 
   <link rel="apple-touch-icon" href="/assets/{{ ach.meta.apple_icon }}" />
-  {% for size in ach.logo.sizes %}
+  {%- for size in ach.logo.sizes %}
   <link rel="apple-touch-icon" sizes="{{size}}x{{size}}" href="/assets/logo-square-{{size}}.png" />
   {%- endfor %}

data/_includes/head/meta.html

@@ -1,10 +1,11 @@
-{%- if session_data.title -%}
-  {%- assign title = session_data.title | append: " • " | append: site.title -%}
+{%- assign slug = page.name | remove_first: '.md' %}
+{%- if SEGMENTS[slug].headers -%}
+  {%- assign title = SEGMENTS[slug].headers | join: ' ' | append: " • " | append: site.title -%}
 {%- elsif site.title -%}
   <meta property="og:type" content="website" />
   <meta property="og:image:width" content="150" />
   <meta property="og:image:height" content="150" />
 {%- endif -%}
+
   <title>{{ title | default: site.title }}</title>
   <meta property="og:title" content="{{ title | default: site.title }}" />
-  <meta name="author" content="{{ writer | default: site.title }}" />

data/_includes/head/top-nav-buttons.html

@@ -2,7 +2,7 @@
 <div class='nav-buttons'>
   {%- include head/languages.html %}
   {%- for button in _nav.buttons %}
-    <a href="{{ button.url }}" class="a-button {{ button.color }}">{{ button.text }}</a>
+    <a href="{{ button.url }}" class="a-button {{ button.color }} {{ button.hidden }}">{{ button.text }}</a>
   {%- endfor %}
 </div>
 

data/_includes/localize.html

@@ -7,3 +7,4 @@
 {%- endif %}
 {%- assign TEXT = site.data.text[LANG] | default: site.data.text %}
 {%- assign BASEURL = page.lang | default: '' | prepend: '/' %}
+{%- assign SEGMENTS = site.data[LANG].segments | default: site.data.segments %}

data/_includes/main.html

@@ -1,6 +1,9 @@
 {%- assign _slist = site.data[LANG].main.segments | default: site.data.main.segments %}
-{%- assign SEGMENTS = site.data[LANG].segments | default: site.data.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/_layouts/default.html

@@ -14,6 +14,7 @@
       {{ content }}
     {% endif %}
     {% include footer.html %}
+    {% include foot/js.html %}
     {% include foot/pwaupdate.html %}
   </body>
 </html>

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/_bullets.scss

@@ -1,15 +1,34 @@
+ul, ol {
+  padding-inline-start: 2em;
+  margin-block-start: 0.5em;
+  margin-block-end: 0.5em;
+  ul, ol {
+    padding-inline-start: 1.2em;
+  }
+  blockquote {
+    padding-left: 0.8em;
+    margin-left: 0.2em;
+    margin-right: 0.5em;
+  }
+}
+ol ::marker, ul ::marker {
+  color: var(--color-bullet);
+}
 ol > li {
   ul > li {
-    list-style-type: disc;
+    list-style-type: initial;
   }
   ol > li {
     list-style: lower-alpha;
+    ol > li {
+      list-style: lower-greek;
+    }
   }
 }
 
 ul > li > ul > li {
-  list-style-type: square;
+  list-style-type: initial;
   ul > li {
-    list-style-type: circle;
+    list-style-type: initial;
   }
 }

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

@@ -1,6 +1,5 @@
 .animated {
   margin: 0;
-  line-height: 1.2;
   animation-name: taglineEmerge;
   animation-fill-mode: forwards;
   animation-duration: 1400ms;
@@ -29,11 +28,14 @@ article {
       width: 100%;
     }
     .image-overlay {
-      margin-bottom: 20px;
       img {
-        border-radius: 1em;
+        border-radius: 1em 1em 0 0;
       }
     }
+    .text-content {
+      margin-top: 2em;
+      padding: 0 2em;
+    }
   }
 
   &.fullpage {
@@ -51,11 +53,9 @@ article {
     h4 {
       margin: 0;
       padding: 0;
-      color: var(--color-dark);
     }
     p {
       font-family: var(--font-secondary);
-      color: var(--color-dark);
     }
   }
 
@@ -63,23 +63,46 @@ article {
     display: flex;
     justify-content: center;
     .max-width {
-      align-items: flex-start;
-      padding: 0 1em;
+      padding: 0 1em 1em;
       width: 100%;
     }
     .box {
       width: 100%;
+      height: 100%;
       box-sizing: border-box;
-      border-radius: 2em;
-      padding: 2em;
+      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;
+      }
     }
   }
 
@@ -87,23 +110,26 @@ article {
     h1 { font-size: 80px; }
     h1.smaller { font-size: 70px; }
     h4, p { font-size: 35px; }
+    ul { font-size: 33px; }
+    .hide-large { display: none; }
   }
 
   @mixin medium() {
     h1 { font-size: 50px; }
     h1.smaller { font-size: 40px; }
-    h4, p { font-size: 30px; }
+    h4, p, ul { font-size: 30px; }
+    .hide-medium { display: none; }
   }
 
   @mixin small() {
     h1 { font-size: 40px; }
     h1.smaller { font-size: 30px; }
     h4, p { font-size: 24px; }
+    ul { font-size: 23px; }
+    .hide-small { display: none; }
   }
 
-  @media screen and (min-width:1024px) {
-    @include large();
-  }
+  @media screen and (max-width:767px) { @include small(); }
 
   @media screen and (min-width:767px) {
     @include medium();
@@ -117,7 +143,10 @@ article {
       }
     }
   }
-  @media screen and (max-width:767px) { @include small(); }
+
+  @media screen and (min-width:1024px) {
+    @include large();
+  }
 
   &.rounded .max-width,
   .split-content { @include small(); }

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

@@ -0,0 +1,28 @@
+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.0
+  version: 0.1.2
 platform: ruby
 authors:
 - AskClass
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-04-06 00:00:00.000000000 Z
+date: 2023-04-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -34,8 +34,9 @@ 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
 - _includes/footer.html
 - _includes/head/common.html
@@ -64,6 +65,7 @@ files:
 - assets/css/default.scss
 - assets/css/modules.scss
 - assets/favicon.ico
+- assets/js/scripts.js
 - assets/loading.svg
 - assets/logo-144.png
 - assets/logo-192.png