askclass-home-theme 0.0.4 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b394cb0ccaff8e07e1741e2480f78a1e002733d7cb3bc94830ceded61dda80d1
-  data.tar.gz: dd103398ab46a34bca8802f46b8e048dd0dbf73e2858ce345ad2cf3bbcc095ac
+  metadata.gz: 3413b1e939a63599c28707462a98e60c85002af9bf43be2c73d834daa3d19d22
+  data.tar.gz: 246359b8287e23b34da0f777ffa6420752e1bb4428a91f8a1c4586a1233fe530
 SHA512:
-  metadata.gz: 7c5327bac9a6b5b01d6b32539355357adb478f5c47a2c55ea0d783ecd7c0ee64202adf0bbf3c07f36b8027b2a16ad1e626d728f0d671a6662097023a816887af
-  data.tar.gz: 955011743e641ee956a626a253795cd31e3231755b5c4eb7dc8ce901e26caef14500763a97401b14f949cd79c0f45f5fffa6cd8009e28e1238b830fec791e06b
+  metadata.gz: 764cb5e4f6736052744cf3c85e0e27614047028de61ae5ff0a882468388c07359ba14076a5b9fd573eca02bafb397b8730ccd350e5d372a7dc6b583da6853ff5
+  data.tar.gz: e33660c4bb31751539ac8798ec029db4e0ce608f4c795895a945ec46c178110a76a43db187917e87310ea2eb4392df702b1ee71b02376cb11a54ee36ef578e6f

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,
@@ -36,11 +33,6 @@ ach:
       student,
       educator,
       university
-  footer:
-    - href: "https://askclass.com"
-      text: "© 2023 AskClass."
-    - href: "https://app.askclass.com"
-      text: "Keep Asking®"
   font_families:
     - Lora
     - Open+Sans:ital,wght@0,300;0,400;0,500;0,700;1,400;1,700

data/_includes/boxes/fullpage.html

@@ -41,7 +41,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,22 @@
       '>
       {%- if box.image %}
         <div class='image-overlay'>
-          <img src='{{ box.image.src }}' title='{{ box.image.text }}' width='{{ box.image.width }}' />
+          <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='{{ 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>
     </div>
   {%- endfor %}
   </div>

data/_includes/foot/js.html

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

data/_includes/footer.html

@@ -1,12 +1,22 @@
+{%- assign FOOTER = site.data[LANG].footer | default: site.data.footer %}
+{%- if FOOTER %}
 <footer>
   <ul>
-    {% for item in site.ach.footer -%}
+    {%- for item in FOOTER -%}
     <li>
+      {%- if item.copyright %}
+        &copy; {{ site.time | date: "%Y" }}&nbsp;
+      {%- endif %}
       {%- if item.icon -%}
         <span class="material-symbols-outlined">{{ item.icon }}</span>
       {%- endif -%}
-      <a href="{{ item.href }}">{{ item.text }}</a>
+      {%- if item.href %}
+        <a href="{{ item.href }}">{{ item.text }}</a>
+      {%- else %}
+        {{ item.text }}
+      {%- endif %}
     </li>
     {%- endfor %}
   </ul>
 </footer>
+{%- endif %}

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/languages.html

@@ -0,0 +1,15 @@
+{%- if _langCount > 1 %}
+  {%- for lang in _langs %}
+    {%- assign linkText = lang.text | default: lang.tag %}
+    {%- if LANG == lang.tag %}
+      <a href="javascript:void(0)"
+        class="a-button small">{{ linkText }}</a>
+    {%- elsif lang.tag == _langs[0].tag %}
+      <a href="/"
+        class="a-button small link">{{ linkText }}</a>
+    {%- else %}
+      <a href="/{{ lang.tag }}"
+        class="a-button small link">{{ linkText }}</a>
+    {%- endif %}
+  {%- endfor %}
+{%- endif %}

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

@@ -0,0 +1,8 @@
+{%- assign _nav = site.data[LANG].nav | default: site.data.nav %}
+<div class='nav-buttons'>
+  {%- include head/languages.html %}
+  {%- for button in _nav.buttons %}
+    <a href="{{ button.url }}" class="a-button {{ button.color }} {{ button.hidden }}">{{ button.text }}</a>
+  {%- endfor %}
+</div>
+

data/_includes/head/top-nav.html

@@ -0,0 +1,7 @@
+<section class="center-align">
+  <article class="space-between max-width">
+    {%- include logo.html %}
+    {%- include head/top-nav-buttons.html %}
+  </article>
+</section>
+

data/_includes/localize.html

@@ -0,0 +1,10 @@
+{%- assign _langs = site.data.nav.languages %}
+{%- assign _langCount = _langs | size %}
+{%- if _langCount > 1 %}
+  {%- assign LANG = page.lang | default: _langs[0].tag %}
+{%- else %}
+  {%- assign LANG = 'en' %}
+{%- 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/logo.html

@@ -1,14 +1,5 @@
-<section class="center-align">
-  <article class="space-between max-width">
-    <a href="/">
-      <img src="/assets/{{ include.image | default: site.ach.logo.image }}"
-        width="{{ include.size | default: site.ach.logo.size }}"
-        title="{{ site.title }}" />
-    </a>
-    <div class='nav-buttons'>
-      {%- for button in site.data.nav %}
-        <a href="{{ button.url }}" class="a-button">{{ button.text }}</a>
-      {%- endfor %}
-    </div>
-  </article>
-</section>
+<a href="{{ BASEURL }}">
+  <img src="/assets/{{ include.image | default: site.ach.logo.image }}"
+    width="{{ include.size | default: site.ach.logo.size }}"
+    title="{{ site.title }}" />
+</a>

data/_includes/main.html

@@ -1,4 +1,5 @@
-{%- for segment in site.data.main.segments %}
-  {%- assign info = site.data.segments[segment] %}
-  {%- include boxes/{{ info.type | default: 'fullpage' }}.html data=info %}
+{%- 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 %}
 {%- endfor %}

data/_layouts/default.html

@@ -1,18 +1,20 @@
 <!doctype html>
-<html lang="en">
+{%- include localize.html %}
+<html lang="{{ LANG }}">
   {% include header.html %}
   <body>
-    {% include logo.html %}
-    {% if page.url == '/' %}
+    {% include head/top-nav.html %}
+    {% if page.url == '/' or page.lang %}
       {% include main.html %}
     {% elsif page.url == '/404.html' %}
-      <h2 class="center-align">Page not found!</h2>
+      <h2 class="center-align">{{ TEXT.page-not-found }}</h2>
     {% elsif page.url == '/offline.html' %}
-      <h2 class="center-align">You're Currently Offline</h2>
+      <h2 class="center-align">{{ TEXT.offline }}</h2>
     {% else %}
       {{ content }}
     {% endif %}
     {% include footer.html %}
+    {% include foot/js.html %}
     {% include foot/pwaupdate.html %}
   </body>
 </html>

data/_layouts/modules.html

@@ -1,8 +1,9 @@
 <!doctype html>
-<html lang="en">
+{%- include localize.html %}
+<html lang="{{ LANG }}">
   {% include header.html %}
   <body>
-    {% include logo.html %}
+    {% include head/top-nav.html %}
     <section class="center-align content">
       <article class='max-width'>
         {{ content }}

data/_sass/_base.scss

@@ -20,6 +20,7 @@
   --color-button-bg:    #{$color-button-bg};
   --color-button2-fg:   #{$color-button2-fg};
   --color-button2-bg:   #{$color-button2-bg};
+
   --color-code-bg:      #{$color-code-bg};
 
   --content-width:      #{$content-width};
@@ -143,19 +144,16 @@ sub {
   justify-content: space-between;
 }
 
-.spacer {
-  margin-top: 100px;
-}
-
 .max-width {
   max-width: var(--content-width);
   width: 100%;
 }
 
 footer {
-  @include margin-top();
   @include align-center();
-  color: var(--color-dark);
+  margin: $margin-footer;
+  color: $color-footer-fg;
+  background-color: $color-footer-bg;
   font-size: 14px;
   ul {
     padding: 0;
@@ -164,47 +162,10 @@ footer {
       @include align-middle();
       margin: 0 5px;
       a {
-        color: var(--color-dark);
+        color: $color-footer-link;
       }
     }
   }
 }
 
-.a-button {
-  font-size: 1em;
-  line-height: 1em;
-  transition: all .2s ease-in-out;
-  border: 2px solid transparent;
-  padding: 15px 20px;
-  height: auto;
-  letter-spacing: .75px;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  border-radius: 5px;
-  color: var(--color-button-fg);
-  background-color: var(--color-button-bg);
-  text-align: center;
-  text-transform: uppercase;
-  font-weight: bold;
-  &:hover {
-    opacity: 0.8;
-    transform: translateY(-3px);
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-  }
-  &.link {
-    color: var(--color-fg);
-    background-color: transparent;
-  }
-  &.secondary {
-    color: var(--color-button2-fg);
-    background-color: var(--color-button2-bg);
-  }
-}
-
-.nav-buttons {
-  margin: 0 1em;
-}
-
-@import "media";
+@import "buttons", "media";

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

@@ -0,0 +1,39 @@
+.a-button {
+  font-size: 1em;
+  line-height: 1em;
+  transition: all .2s ease-in-out;
+  border: 2px solid transparent;
+  padding: 15px 20px;
+  height: auto;
+  letter-spacing: .75px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: 5px;
+  color: var(--color-button-fg);
+  background-color: var(--color-button-bg);
+  text-align: center;
+  text-transform: uppercase;
+  font-weight: bold;
+  &:hover {
+    opacity: 0.8;
+    transform: translateY(-3px);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  }
+  &.link {
+    color: var(--color-fg);
+    background-color: transparent;
+  }
+  &.secondary {
+    color: var(--color-button2-fg);
+    background-color: var(--color-button2-bg);
+  }
+  &.small {
+    padding: 5px;
+  }
+}
+
+.nav-buttons {
+  margin: 0 1em;
+}

data/_sass/_defaults.scss

@@ -20,6 +20,13 @@ $color-button-fg:       #fff;
 $color-button-bg:       #ff4713;
 $color-button2-fg:      #fff;
 $color-button2-bg:      #222;
+
 $color-code-bg:         #222;
 
+$color-footer-bg:       transparent;
+$color-footer-fg:       #444;
+$color-footer-link:     #222;
+
+$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 {
@@ -70,8 +72,7 @@ article {
     .box {
       width: 100%;
       box-sizing: border-box;
-      border-radius: 2em;
-      padding: 2em;
+      border-radius: 1em;
       margin: 1em 0;
       h1 {
         margin: 0;
@@ -87,23 +88,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 +121,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/js/scripts.js

@@ -0,0 +1,6 @@
+function playGif(e) {
+  if (!e.dataset.gif) return ;
+  const bak = e.src;
+  e.src = e.dataset.gif;
+  e.dataset.gif = bak;
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: askclass-home-theme
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 0.1.1
 platform: ruby
 authors:
 - AskClass
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-04-06 00:00:00.000000000 Z
+date: 2023-04-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -36,12 +36,17 @@ files:
 - _config.yml
 - _includes/boxes/fullpage.html
 - _includes/boxes/rounded.html
+- _includes/foot/js.html
 - _includes/foot/pwaupdate.html
 - _includes/footer.html
 - _includes/head/common.html
+- _includes/head/languages.html
 - _includes/head/meta.html
+- _includes/head/top-nav-buttons.html
+- _includes/head/top-nav.html
 - _includes/header.html
 - _includes/image.html
+- _includes/localize.html
 - _includes/logo.html
 - _includes/main.html
 - _includes/video.html
@@ -49,6 +54,7 @@ files:
 - _layouts/modules.html
 - _sass/_base.scss
 - _sass/_bullets.scss
+- _sass/_buttons.scss
 - _sass/_colors.scss
 - _sass/_defaults.scss
 - _sass/_media.scss
@@ -59,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