askclass-home-theme 0.0.3 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 79ebf39a48585ebae94e085b232f0dbc42f2d46952ae8a56da8da1d3ca6a5a99
-  data.tar.gz: 48058a39723ed90712494c140656d44a2baf7c0d3207b126b1c5d74635433b26
+  metadata.gz: b0f03ea8c017b448577a6d7b3eb98ec48786956f92a5aa2352d9c2467022ad47
+  data.tar.gz: 98efd2469bc09be241ba3154192ac15bf3468327dd29f6abd5a18ddb25761358
 SHA512:
-  metadata.gz: 1d23621970fd3b4cb5eef33e4a2562024471f79f11e501f2af0cfacff6f19b23afda6e5e1425aff7eabc3714543bbcc3c0435ba3cc50497d29e4378f91c7e526
-  data.tar.gz: ff5fd23501809244455acf97d7b390f78677230b40471a46f22105ff9ef3532321d3b0065d9392a980e1e49c37fd765c6a42f8168c4c3f801bb1d9b47867608d
+  metadata.gz: 6f3b15cce31936a05f2767439aa59a23de8d0547bf49bf1cf40f6cb20084ec420937c22d61b9e25face3650a70df0b8bab2d0294e765295998ad2ebe7a5c27f1
+  data.tar.gz: 37392c6e0d3374deb99dfe88145da1eedaae97dd6b6ff504d511d24b4848745d0e27e0558f6743021e35833110bb79658bc0a8ea728293a602f10c06cb208322

data/README.md

@@ -8,7 +8,8 @@ Simple responsive Jekyll theme for a home page.
 Starting fresh:
 ```sh
 $ echo 'source "https://rubygems.org"' > Gemfile
-$ echo 'theme: askclass-home-theme/ > _config.yml
+$ echo 'gem "askclass-home-theme"' >> Gemfile
+$ echo 'theme: askclass-home-theme' > _config.yml
 $ bundle
 $ jekyll serve
 ```

data/_config.yml

@@ -36,11 +36,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/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/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/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.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,9 @@
+{%- 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: '/' %}

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,6 @@
-{%- 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 %}
+{%- 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 %}
 {%- endfor %}

data/_layouts/default.html

@@ -1,14 +1,15 @@
 <!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 %}

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,45 +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 "buttons", "media";

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

@@ -0,0 +1,32 @@
+$font-main:             'Open Sans', sans-serif;
+$font-mono:             'Share Tech Mono', monospace;
+$font-special:          'Josefin Sans', sans-serif;
+$font-secondary:        'Lora', serif;
+$font-tertiary:         'Lexend', sans-serif;
+
+$color-primary:         white;
+$color-secondary:       floralwhite;
+$color-tertiary:        #2cdd88;
+$color-fg:              #333;
+$color-bg:              whitesmoke;
+$color-dark:            #444;
+$color-link:            deeppink;
+$color-theme:           #ffc100;
+
+$color-row-odd:         #2a2a2a;
+$color-row-even:        #2f2f2f;
+
+$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/init.scss

@@ -1,34 +1,6 @@
-$font-main:             'Open Sans', sans-serif;
-$font-mono:             'Share Tech Mono', monospace;
-$font-special:          'Josefin Sans', sans-serif;
-$font-secondary:        'Lora', serif;
-$font-tertiary:         'Lexend', sans-serif;
+// Overriding custom variables. See:
+// https://github.com/beAuthentic/askclass-home-theme/blob/main/_sass/_defaults.scss
 
-$color-primary:         white;
-$color-secondary:       floralwhite;
-$color-tertiary:        #2cdd88;
-$color-fg:              #333;
-$color-bg:              whitesmoke;
-$color-dark:            #444;
-$color-link:            deeppink;
-$color-theme:           #ffc100;
-
-$color-row-odd:         #2a2a2a;
-$color-row-even:        #2f2f2f;
-
-$color-button-fg:       #fff;
-$color-button-bg:       #ff4713;
-$color-button2-fg:      #fff;
-$color-button2-bg:      #222;
-$color-code-bg:         #222;
-$color-card-bg:         whitesmoke;
-$color-card-fg:         #444;
-
-$card-font-size:        16px;
-
-$content-width:         1200px;
-
-$grid-width:            180px;
-$grid-image-height:     180px;
-
-@import "media", "base";
+// Example, to overwrite default bg/fg colors specified in the file above:
+// $color-bg:        black;
+// $color-fg:        white;

data/assets/css/default.scss

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

data/assets/css/modules.scss

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: askclass-home-theme
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.1.0
 platform: ruby
 authors:
 - AskClass
@@ -39,9 +39,13 @@ files:
 - _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,7 +53,9 @@ files:
 - _layouts/modules.html
 - _sass/_base.scss
 - _sass/_bullets.scss
+- _sass/_buttons.scss
 - _sass/_colors.scss
+- _sass/_defaults.scss
 - _sass/_media.scss
 - _sass/_post.scss
 - _sass/_section.scss