askclass-course-theme 0.13.5 → 0.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '086c24d2710c4b54f4b75109b1e093f1d8394834c5c4a8be0850894611693dc5'
-  data.tar.gz: 8128143e5d5809c197012a5f2d63a039d0f7419a401b16d9e5112f92134c51d7
+  metadata.gz: 2c97dd0d0d5e532f5721a54b8a0d003ebfc599c5dd275748d501c863adad803c
+  data.tar.gz: 52fc1f6663759fda22c98fa464af849e4989d3f24fc2c2b7ba594805d3f0a3dc
 SHA512:
-  metadata.gz: 0f540630bdb9825b1a60baa01b7f61ec38efba779cc90eb83c80e056e8dba991cbddc8aadb01c9f8fd87b221c4758e2abe0586269e3f34f4687288d75f86b41b
-  data.tar.gz: 02b1a307a2ca2a42468f95a810ebb72c4dfbb85f271df5c54971565bd1b9cab04f2b80b44321247c13d41e94a3faed592a4d28673ea2bc8b7a80e7fa1cbad3c6
+  metadata.gz: 0f7bfdc4e447483a223f7892003e193644ef3e2a2485dfc891b49fe0c0780682507c729a92103073016dd4791cd4c1a6f7fbafa7995cd70b54e3150a87469efc
+  data.tar.gz: 1312dd01ae62c1bcd4ae41ad5d15a95a6f97e329fe71e5bdeec647788f6ace425bf8e1da046605cb0032fe2207b804c869c14911ca51ae547130378776bb8126

data/_config.yml

@@ -26,7 +26,7 @@ acc:
     sizes: [ 48, 96, 144, 192, 300, 512 ]
   shortcuts:
     - name: Syllabus
-      url: https://acc.askclass.com/session/session-01
+      url: /session/session-01
       desc: Class syllabus and contact information
   meta:
     apple_icon: "logo-300.png"
@@ -61,6 +61,7 @@ acc:
     - Share+Tech+Mono
     - Lexend
     - Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
+  icon_class: material-symbols-outlined
 
 collections_dir: content
 collections:

data/_includes/course.html

@@ -1,17 +1,22 @@
 {%- assign course = site.data.course -%}
+
 <ul class="grid">
   {%- for segment in course.segments -%}
     {%- assign info = site.data.syllabus[segment] -%}
     {%- if info -%}
       <li class="card-tab {{ info.theme }}">
         <div class="top-bar">{{ info.segment[0] }}</div>
+        {%- if info.segment[2] -%}
+        <div class="tab icon {{ symbols }}">{{ info.segment[2] }}</div>
+        {%- else -%}
         <div class="tab">{{ info.segment[1] }}</div>
+        {%- endif -%}
         <div class="header">
           <a href="/segment/{{ segment }}">
             {%- include date_range.html info=info -%}
           </a>
         </div>
-        <div class="body">
+        <div class="body limit-height">
           {%- if info.desc -%}
             <h4>{{ info.desc }}</h4>
           {%- endif -%}
@@ -22,20 +27,20 @@
             {%- assign session = site.data.sessions[item] -%}
             <div class="item">
               <div class="middle-align">
-                <span class="material-symbols-outlined">{{ session.icon }}</span>
+                <span class="{{ symbols }}">{{ session.icon }}</span>
                 {%- if session.url -%}
                   <a href="/session/{{ session.url }}" title="{{ session.title }}">
                     <h3>{{ session.header }}</h3>
                   </a>
                 {%- else -%}
-                    <h3>{{ session.header }}</h3>
+                  <h3>{{ session.header }}</h3>
                 {%- endif -%}
               </div>
               {%- if session.due -%}
                 <small class="due"
                   data-date="{{ session.due }}"
                   title="Due {{ session.due | date: site.acc.date_format }}">
-                  <span class="material-symbols-outlined">alarm_on</span>
+                  <span class="icon {{ symbols }}">alarm_on</span>
                   {{ session.due | date: '%b %e' }}
                 </small>
               {%- endif -%}
@@ -52,7 +57,7 @@
           <a class="button" href="/segment/{{ segment }}">
             {{ info.title }}&nbsp;
             <span data-date="{{ info.end }}"
-              class="middle-align material-symbols-outlined rocket">rocket_launch</span>
+              class="middle-align rocket {{ symbols }}">rocket_launch</span>
           </a>
         </div>
       </li>
@@ -78,4 +83,14 @@
       ymd2ms(el.dataset.date) < Date.now() &&
         (el.innerText = 'rocket')
   );
+
+  document.querySelectorAll('.limit-height').forEach(el => {
+    const check = () => {
+      const atBottom = el.scrollHeight - el.scrollTop <= el.clientHeight + 2;
+      el.classList.toggle('has-more', !atBottom);
+    };
+    check(); // run once on load
+    el.addEventListener('scroll', check);
+    new ResizeObserver(check).observe(el);
+  });
 </script>

data/_includes/footer.html

@@ -4,7 +4,7 @@
     {% for item in site.acc.footer -%}
     <li>
       {%- if item.icon -%}
-        <span class="material-symbols-outlined">{{ item.icon }}</span>
+        <span class="{{ symbols }}">{{ item.icon }}</span>
       {%- endif -%}
       <a href="{{ item.href }}">{{ item.text }}</a>
     </li>

data/_includes/head/common.html

@@ -1,8 +1,8 @@
-{% assign acc = site.acc %}
-{% assign desc = page.description | default: site.description | strip_html | strip_newlines %}
-{% assign assets = '/assets/' | prepend: site.url %}
-{% assign families = acc.font_families | join: "&family=" %}
-{% assign og_image = acc.meta.og_image | prepend: assets %}
+{%- assign acc = site.acc %}
+{%- assign desc = page.description | default: site.description | strip_html | strip_newlines %}
+{%- assign families = acc.font_families | join: "&family=" %}
+{%- assign og_image = acc.meta.og_image | prepend: '/assets/' %}
+{%- assign symbols = acc.icon_class | default: 'material-symbols-outlined' -%}
 
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0" />
@@ -22,12 +22,12 @@
   <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 acc.twitter %}
+  {%- if acc.twitter %}
   <meta name="twitter:site" content="{{ acc.social.twitter }}" />
   <meta name="twitter:card" content="summary_large_image">
-  {% endif % %}
+  {% endif -%}
 
-  <link rel="manifest" href="{{ assets }}site.webmanifest" />
+  <link rel="manifest" href="/assets/site.webmanifest" />
   <link rel="preconnect" href="https://cdn.jsdelivr.net" />
   <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -35,11 +35,11 @@
   <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 }}{{ acc.meta.shortcut.favicon }}" />
-  <link rel="icon" type="{{ acc.meta.shotcut.type }}" href="{{ assets}}{{ acc.meta.shortcut.image }}" />
-  <link rel="icon" type="image/svg+xml" href="{{ assets}}{{ acc.logo.image }}" />
+  <link rel="shortcut icon" href="/assets/{{ acc.meta.shortcut.favicon }}" />
+  <link rel="icon" type="{{ acc.meta.shotcut.type }}" href="/assets/{{ acc.meta.shortcut.image }}" />
+  <link rel="icon" type="image/svg+xml" href="/assets/{{ acc.logo.image }}" />
 
-  <link rel="apple-touch-icon" href="{{ assets}}{{ acc.meta.apple_icon }}" />
-  {% for size in acc.logo.sizes %}
-  <link rel="apple-touch-icon" sizes="{{size}}x{{size}}" href="{{ assets }}logo-square-{{size}}.png" />
-  {% endfor %}
+  <link rel="apple-touch-icon" href="/assets/{{ acc.meta.apple_icon }}" />
+  {%- for size in acc.logo.sizes %}
+  <link rel="apple-touch-icon" sizes="{{size}}x{{size}}" href="/assets/logo-square-{{size}}.png" />
+  {% endfor -%}

data/_includes/header.html

@@ -1,5 +1,5 @@
 <head>
-  {%- include head/meta.html -%}
+  {% include head/meta.html -%}
   {%- include head/common.html -%}
   {%- if page.collection == 'session' -%}
     {%- if session_data.type == 'Dialog' -%}
@@ -9,5 +9,5 @@
     {%- endif -%}
   {%- else -%}
   <link rel="stylesheet" href="{{ 'assets/css/segment.css' |  relative_url }}" />
-  {%- endif -%}
+  {% endif %}
 </head>

data/_includes/segment/index.html

@@ -4,7 +4,6 @@
   {%- for item in info.items -%}
     {%- assign session = site.data.sessions[item] -%}
     <li class="card-tab {{ info.theme }}">
-
       {%- if session.type -%}
         <div class="top-bar">{{ session.type }}</div>
       {%- elsif session.sequence -%}
@@ -16,12 +15,12 @@
       {%- if session.sequence -%}
         <div class="tab">{{ session.sequence }}</div>
       {%- elsif session.icon -%}
-        <div class="tab material-symbols-outlined">{{ session.icon }}</div>
+        <div class="tab icon {{ symbols }}">{{ session.icon }}</div>
       {%- endif -%}
 
       {%- if session.due -%}
         <div class="header">
-          <span data-date="{{ session.due }}" class="material-symbols-outlined alarm">alarm_on</span>
+          <span data-date="{{ session.due }}" class="{{ symbols }} alarm">alarm_on</span>
           {{ session.due | date: '%b %e, %y' }}
         </div>
       {%- elsif session.type -%}

data/_includes/segment/nav.html

@@ -17,25 +17,25 @@
       {% if include.icon %}
         {{ site.data.syllabus[prev].title }}
       {% endif %}
-      <a href="/segment/{{ prev }}" class="material-symbols-outlined md-48">navigate_before</a>
+      <a href="/segment/{{ prev }}" class="{{ symbols }} md-48">navigate_before</a>
     {% else %}
       &nbsp;
-      <span class="material-symbols-outlined md-48 md-disabled">navigate_before</span>
+      <span class="{{ symbols }} md-48 md-disabled">navigate_before</span>
     {% endif %}
 
     {% if include.icon %}
-      <a href="/segment/{{ include.segment }}" class="material-symbols-outlined">calendar_today</a>
+      <a href="/segment/{{ include.segment }}" class="{{ symbols }}">calendar_today</a>
     {% else %}
       <a href="/segment/{{ include.segment }}"><h3>{{ site.data.syllabus[include.segment].title }}</h3></a>
     {% endif %}
 
     {% if next %}
-      <a href="/segment/{{ next }}" class="material-symbols-outlined md-48">navigate_next</a>
+      <a href="/segment/{{ next }}" class="{{ symbols }} md-48">navigate_next</a>
       {% if include.icon %}
         {{ site.data.syllabus[next].title }}
       {% endif %}
     {% else %}
-      <span class="material-symbols-outlined md-48 md-disabled">navigate_next</span>
+      <span class="{{ symbols }} md-48 md-disabled">navigate_next</span>
     {% endif %}
   </div>
 </section>

data/_includes/session/audio.html

@@ -0,0 +1,3 @@
+<div style="padding: 50px 0">
+  <div class='essential_audio' data-url='{{ include.audio }}'></div>
+</div>

data/_includes/session/header.html

@@ -15,13 +15,13 @@
     {%- include date_range.html info=segment_data -%}
   </div>
 
-  <div class="middle-align">
+  <div class="middle-align lesson-group">
     {%- for item in segment_data.items -%}
       {%- assign _info = site.data.sessions[item] -%}
       {%- if _info.sequence -%}
         {%- assign _mso = '' -%}
       {%- else -%}
-        {%- assign _mso = 'material-symbols-outlined' -%}
+        {%- assign _mso = symbols | append: " icon" -%}
       {%- endif -%}
 
       {%- if item == session_id -%}

data/_includes/session/next_prev.html

@@ -14,7 +14,7 @@
   {%- if _p %}
   <div class="{{ align }}">
     <span>{{ indicator }}</span>
-    <span class="material-symbols-outlined">navigate_{{ arrow }}</span>
+    <span class="{{ symbols }}">navigate_{{ arrow }}</span>
   </div>
   <a href="/session/{{ _p.url }}">
     {%- if _p.header -%}

data/_includes/session/sounds.html

@@ -0,0 +1,6 @@
+{% for audio in include.audio %}
+  <div class='essential_audio' data-url='{{ audio }}'></div>
+
+  {%- assign _size = include.audio | size %}
+  {% if forloop.index != _size %}<br /><br />{% endif -%}
+{% endfor %}

data/_layouts/session.html

@@ -17,6 +17,7 @@
         {%- include session/images.html images=session_data.images -%}
         {%- include session/points.html -%}
         {%- include session/videos.html videos=session_data.videos -%}
+        {%- include session/sounds.html audio=session_data.audio -%}
         {{ content }}
         {%- if page.dialogue -%}
           {%- include session/conversation.html data=page.dialogue-%}
@@ -28,5 +29,6 @@
     {%- include session/content_revealer.html -%}
     {%- include footer.html -%}
     {%- include foot/mathjax.html -%}
+    <script async src="/assets/js/essential-audio-player.js"></script>
   </body>
 </html>

data/_sass/_base.scss

@@ -1,35 +1,39 @@
+@use "default";
+
 :root {
-  --icon-logo:          #{$icon-logo};
-
-  --font-special:       #{$font-special};
-  --font-mono:          #{$font-mono};
-  --font-main:          #{$font-main};
-  --font-secondary:     #{$font-secondary};
-  --font-tertiary:      #{$font-tertiary};
-  --font-samp:          #{$font-samp};
-
-  --color-bg:           #{$color-bg};
-  --color-fg:           #{$color-fg};
-  --color-primary:      #{$color-primary};
-  --color-secondary:    #{$color-secondary};
-  --color-tertiary:     #{$color-tertiary};
-  --color-link:         #{$color-link};
-  --color-dark:         #{$color-dark};
-  --color-theme:        #{$color-theme};
-  --color-bullet:       #{$color-bullet};
-  --color-row-odd:      #{$color-row-odd};
-  --color-row-even:     #{$color-row-even};
-
-  --color-card-fg:      #{$color-card-fg};
-  --color-card-bg:      #{$color-card-bg};
-  --color-code-bg:      #{$color-code-bg};
-
-  --content-width:      #{$content-width};
-
-  --grid-width:         #{$grid-width};
-  --grid-image-height:  #{$grid-image-height};
-  --card-font-size:     #{$card-font-size};
-  --samp-font-size:     #{$samp-font-size};
+  --icon-logo:          #{default.$icon-logo};
+  --icon-name:          #{default.$icon-name};
+
+  --font-special:       #{default.$font-special};
+  --font-mono:          #{default.$font-mono};
+  --font-main:          #{default.$font-main};
+  --font-secondary:     #{default.$font-secondary};
+  --font-tertiary:      #{default.$font-tertiary};
+  --font-samp:          #{default.$font-samp};
+
+  --color-bg:           #{default.$color-bg};
+  --color-fg:           #{default.$color-fg};
+  --color-primary:      #{default.$color-primary};
+  --color-secondary:    #{default.$color-secondary};
+  --color-tertiary:     #{default.$color-tertiary};
+  --color-link:         #{default.$color-link};
+  --color-dark:         #{default.$color-dark};
+  --color-theme:        #{default.$color-theme};
+  --color-bullet:       #{default.$color-bullet};
+  --color-row-odd:      #{default.$color-row-odd};
+  --color-row-even:     #{default.$color-row-even};
+
+  --color-card-fg:      #{default.$color-card-fg};
+  --color-card-bg:      #{default.$color-card-bg};
+  --color-code-bg:      #{default.$color-code-bg};
+
+  --content-width:      #{default.$content-width};
+
+  --grid-width:         #{default.$grid-width};
+  --grid-image-height:  #{default.$grid-image-height};
+  --grid-body-height:   #{default.$grid-body-height};
+  --card-font-size:     #{default.$card-font-size};
+  --samp-font-size:     #{default.$samp-font-size};
 }
 
 body {

data/_sass/_default.scss

@@ -1,4 +1,5 @@
 $icon-logo:             url('/assets/logo-icon.svg');
+$icon-name:             'Material Symbols Outlined';
 
 $font-main:             'Open Sans', sans-serif;
 $font-mono:             'Share Tech Mono', monospace;
@@ -31,3 +32,4 @@ $content-width:         600px;
 
 $grid-width:            180px;
 $grid-image-height:     180px;
+$grid-body-height:      initial;

data/_sass/_essential-audio.scss

@@ -0,0 +1,177 @@
+/****************************************/
+/*                                      */
+/*         Section 1: The Looks         */
+/*                                      */
+/****************************************/
+
+
+/* 1. The Main Container */
+div.essential_audio {
+  position: relative;
+  z-index: 0;
+  width: 100%;
+}
+
+
+/* 2. The Player Button – General */
+div.essential_audio > div:nth-child(1) div {
+  width: 28px;
+  height: 28px;
+  margin-top: -13px;
+  border-radius: 14px;
+  color: var(--color-fg);
+  background-color: var(--color-link);
+}
+div.essential_audio > div:nth-child(1) div:after {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 24px;
+  height: 24px;
+}
+/* Set here how much the button exceeds the horizontal track limits: */
+/* This must not be deleted! (but can be changed, of course) */
+:root {
+  --button-protrusion: 4px;
+}
+
+/* 2.a) The Player Button – Off */
+div.essential_audio > div:nth-child(1) div.off:after {
+  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><polygon fill='%23FFF' points='10,6.9 10,23.1 24,15' /></svg>");
+}
+
+/* 2.b) The Player Button – Loading */
+div.essential_audio > div:nth-child(1) div.load:after {
+  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><circle opacity='0.64' fill='%23FFFFFF' cx='6.5' cy='18.5' r='2'/><circle opacity='0.76' fill='%23FFFFFF' cx='6.5' cy='11.5' r='2'/><circle opacity='0.88' fill='%23FFFFFF' cx='11.5' cy='6.5' r='2'/><circle fill='%23FFFFFF' cx='18.5' cy='6.5' r='2'/><circle opacity='0.16' fill='%23FFFFFF' cx='23.5' cy='11.5' r='2'/><circle opacity='0.28' fill='%23FFFFFF' cx='23.5' cy='18.5' r='2'/><circle opacity='0.4' fill='%23FFFFFF' cx='18.5' cy='23.4' r='2'/><circle opacity='0.52' fill='%23FFFFFF' cx='11.5' cy='23.4' r='2'/></svg>");
+  animation: audio_load_rotate 1s infinite linear;
+}
+@keyframes audio_load_rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* 2.c) The Player Button – Playing */
+div.essential_audio > div:nth-child(1) div.play {
+  background-color: var(--color-link)!important;
+}
+div.essential_audio > div:nth-child(1) div.play:after {
+  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><rect fill='%23FFF' x='17' y='8' width='3' height='14' /><rect fill='%23FFF' x='10' y='8' width='3' height='14' /></svg>");
+}
+
+/* 2.d) The Player Button – Dragging */
+div.essential_audio > div:nth-child(1) div.drag {
+  transition: left 0s!important;
+  /*
+  cursor: grab!important;
+  */
+}
+
+/* 2.e) The Player Button – Error */
+div.essential_audio > div:nth-child(1) div.error {
+  background-color: rgba(0,0,0,0.35)!important;
+}
+div.essential_audio > div:nth-child(1) div.error:after {
+  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='%23FFF' d='M13.9,18.6c0-0.3,0-0.5,0-0.9c0-1.6,0.6-2.9,2.1-3.9l1.1-0.8c0.9-0.6,1.3-1.5,1.3-2.4c0-1.5-1-2.8-3-2.8c-2.2,0-3.1,1.6-3.1,3.2c0,0.2,0,0.4,0,0.5L10,11.9c-0.1-0.3-0.1-0.8-0.1-1.2c0-2.3,1.7-5.1,5.5-5.1c3.5,0,5.5,2.5,5.5,5c0,2-1.1,3.4-2.5,4.3l-1.2,0.8c-0.8,0.5-1.1,1.4-1.1,2.4c0,0.1,0,0.2,0,0.5H13.9z'/><path fill='%23FFF' d='M15,20.8c1,0,1.8,0.8,1.8,1.8S16,24.4,15,24.4c-1,0-1.8-0.8-1.8-1.8S14,20.8,15,20.8z'/></svg>");
+}
+
+
+/* 3. The Track */
+div.essential_audio > div:nth-child(2) {
+  height: 2px;
+}
+div.essential_audio > div:nth-child(2):after {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  background-color: #000;
+  opacity: 0.3;
+  mix-blend-mode: multiply;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}
+
+
+/* 4. The Loading Progress Bar */
+div.essential_audio > div:nth-child(2) div {
+  background-color: var(--color-link);
+  mix-blend-mode: multiply;
+}
+
+
+/* 5. The Klick & Drag Sensor */
+div.essential_audio > div:nth-child(3) {
+  height: 12px;
+  margin-top: -5px;
+}
+
+
+
+
+/****************************************/
+/*                                      */
+/*        Section 2: Core Values        */
+/*                                      */
+/****************************************/
+
+
+/* 1. The Main Container + General Settings */
+div.essential_audio,
+div.essential_audio * {
+  user-select: none;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-overflow-scrolling: auto;
+}
+div.essential_audio *:focus {
+  outline: none;
+}
+
+
+/* 2. The Player Button */
+div.essential_audio > div:nth-child(1) div {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  cursor: pointer;
+}
+
+/* 2.a) Container for Player Button */
+div.essential_audio > div:nth-child(1) {
+  position: absolute;
+  z-index: 3;
+  height: 0px;
+  top: 0px;
+  left: calc(var(--button-protrusion) * -1);
+  width: calc(100% + (2 * var(--button-protrusion)));
+}
+
+
+/* 3. The Track */
+div.essential_audio > div:nth-child(2) {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+
+/* 4. The Loading Progress Bar */
+div.essential_audio > div:nth-child(2) div {
+  position: absolute;
+  z-index: 1;
+  width: 0%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  transition: width 0.5s;
+}
+
+
+/* 5. The Klick & Drag Sensor */
+div.essential_audio > div:nth-child(3) {
+  position: absolute;
+  z-index: 2;
+  width: 100%;
+  top: 0px;
+  left: 0px;
+}

data/_sass/_grid.scss

@@ -1,3 +1,5 @@
+@use "tab" as *;
+
 ul.grid {
   list-style-type: none;
   padding-inline-start: unset;
@@ -19,5 +21,3 @@ ul.grid {
     height: var(--grid-image-height);
   }
 }
-
-@import "tab";

data/_sass/_post.scss

@@ -1,3 +1,10 @@
+@use "bullets" as *;
+@use "table" as *;
+@use "tab-colors" as *;
+@use "paginator" as *;
+@use "video" as *;
+@use "essential-audio" as *;
+
 @mixin boxed() {
   margin-top: 100px;
   border-radius: 5px;
@@ -179,13 +186,18 @@ samp {
   }
 }
 
+.lesson-group {
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
 .lesson-number {
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   padding: 7px 5px 3px 5px;
-  margin: 0 5px;
+  margin: 5px;
   background-color: var(--color-fg);
   font-family: var(--fontText);
   color: var(--color-bg);
@@ -197,10 +209,10 @@ samp {
   &.current {
     background-color: var(--color-secondary);
   }
-  &.material-symbols-outlined {
+  &.icon {
     font-size: 25px;
     padding: 5px;
-    font-family: 'Material Symbols Outlined';
+    font-family: var(--icon-name);
   }
 }
 
@@ -208,10 +220,3 @@ a.lesson-number{
   color: var(--color-fg);
   background-color: var(--color-link);
 }
-
-@import
-  "bullets",
-  "table",
-  "tab-colors",
-  "paginator",
-  "video";

data/_sass/_tab.scss

@@ -1,3 +1,5 @@
+@use "tab-colors" as *;
+
 @mixin special() {
   color: var(--color-card-bg, 'whitesmoke');
   font-family: var(--font-special);
@@ -41,8 +43,8 @@
     display: block;
     font-size: 12px;
   }
-  &.material-symbols-outlined {
-    font-family: 'Material Symbols Outlined';
+  &.icon {
+    font-family: var(--icon-name);
     line-height: 0.7;
     font-size: 37px;
   }
@@ -69,6 +71,34 @@
   padding: 10px;
   overflow: hidden;
   text-align: left;
+  &.limit-height {
+    max-height: var(--grid-body-height);
+    position: relative;
+    overflow-y: auto;
+    padding-bottom: 0;
+    box-sizing: border-box;
+    &::after {
+      content: "";
+      position: sticky;
+      display: block;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 30px;
+      opacity: 0;
+      padding: 0;
+      margin: 0;
+      background: linear-gradient(to top,
+        rgba(0, 0, 0, 0.12) 0%,
+        transparent 100%);
+      pointer-events: none;         /* clicks pass through */
+      transition: opacity 0.4s ease;
+      z-index: 1;
+    }
+    &.has-more::after {
+      opacity: 1;
+    }
+  }
   h2 {
     word-break: break-word;
     margin-top: 10px;
@@ -78,10 +108,14 @@
     color: inherit;
     margin: 5px 0;
   }
-  .item:not(:first-child) {
-    border-top: 1px solid;
-  }
   .item {
+    &:not(:first-child) {
+      border-top: 1px solid;
+    }
+    &:last-child {
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
     margin-bottom: 20px;
     text-align: left;
     font-size: var(--card-font-size);
@@ -96,7 +130,7 @@
       border-radius: 5px;
       margin: 0 3px;
       padding: 2px 5px;
-      .material-symbols-outlined {
+      .icon {
         font-size: 1.3em;
         font-variation-settings: 'FILL' 1;
       }
@@ -128,7 +162,7 @@
       padding: 5px 10px;
       color: white!important;
       background-color: var(--color-card-fg);
-      .material-symbols-outlined {
+      .rocket {
         font-variation-settings: 'FILL' 1;
       }
     }
@@ -141,4 +175,3 @@
   }
 }
 
-@import "tab-colors";

data/_sass/init.scss

@@ -4,3 +4,7 @@
 // Example, to overwrite default bg/fg colors specified in the file above:
 // $color-bg:        black;
 // $color-fg:        white;
+
+
+// Make grid boxes the same height (scrollable)
+// $grid-body-height:      300px;

data/assets/css/dialog.scss

@@ -1,3 +1,7 @@
 ---
 ---
-@import "post", "bubbles", "default", "init", "base";
+
+@use "base" as *;
+@use "post" as *;
+@use "bubbles" as *;
+@use "init" as *;

data/assets/css/segment.scss

@@ -1,3 +1,5 @@
 ---
 ---
-@import "grid", "default", "init", "base";
+@use "base" as *;
+@use "grid" as *;
+@use "init" as *;

data/assets/css/session.scss

@@ -1,3 +1,5 @@
 ---
 ---
-@import "post", "default", "init", "base";
+@use "base" as *;
+@use "post" as *;
+@use "init" as *;

data/assets/js/essential-audio-player.js

@@ -0,0 +1,10 @@
+// Essential Audio Player v1.0.3
+var Essential_Audio=(()=>{var t=true;var f=false;var n=null;var A={};var b=[];var c=f;var d=f;var h=0;const g=[["mp3","mpeg"],["ogg","ogg"],["wav","wav"],["aac","mpeg"],["m4a","mpeg"]];var j;var k;var l;var m=f;var o;var p;var q=50;var pa="div.essential_audio";var pb="div:nth-child(1)";var pf="mousemove";var pg="touchmove";var ph="mouseup";var pj="touchend";var pk="";var pl=(a)=>{return a.duration};var pm=(a)=>{return a.currentTime};var pn=(a)=>{return a.buffered};var po=()=>{if(event.changedTouches){l=event.changedTouches[0].pageX}else{l=event.pageX}return l};if(document.readyState!="loading"){B()}else{document.addEventListener("DOMContentLoaded",B)};function B(){var ia=document.querySelectorAll(pa);ia.forEach((vr,ib)=>{vr.innerHTML="<div><div class=\"off\"><!----></div></div><div><div><!----></div></div><div><!----></div>";var
+ic;if(vr.hasAttribute("id")){ic=vr.getAttribute("id")}else{ic=ib+1;vr.setAttribute("id",ic)}A[ic]=document.createElement("audio");var a=A[ic];a.id=ic;a.za=vr.querySelector(pb).querySelector("div");a.zb=a.za.offsetWidth;a.zc=vr.querySelector(pb).offsetWidth-a.zb;if(a.zc<0){a.zc=0}a.zd=vr.getAttribute("data-url");a.ze=0;a.zf=0;a.zh=0;a.zi=0;a.zj=f;a.zks=0;a.zl=f;a.zm=f;a.zn=f;a.zo=f;a.zp=f;a.zq=f;b[ib]=ic;a.crossOrigin="anonymous";a.preload="metadata";if(vr.hasAttribute("data-loop")){a.loop=t}if(vr.hasAttribute("data-scratch")){a.zr=t}else{a.zr=f}if(vr.hasAttribute("data-autoplay")){if(h<1){h=1;a.autoplay=t;a.preload="auto";c=a;E(a)}}if(vr.hasAttribute("data-preload")){if(!a.autoplay){a.preload="auto";E(a)}}a.za.onmousedown=(e)=>{e.stopPropagation();e.preventDefault();Ba(a)};a.za.ontouchstart=(e)=>{e.stopPropagation();e.preventDefault();Ba(a)};var
+ie=vr.querySelector("div:nth-child(3)");ie.onmousedown=(e)=>{e.stopPropagation();e.preventDefault();Bb(a)};ie.ontouchstart=(e)=>{e.stopPropagation();e.preventDefault();Bb(a)}})};function Ba(a){a.zp=t;j=po();k=j-(a.za.getBoundingClientRect().left+window.scrollX);window.addEventListener(pf,Bc);var va=setTimeout(function(){window.addEventListener(pg,Bc)},100);function Bc(){if(j!=po()){m=t;if(a.zc>0){a.za.classList.add("drag")}}if(m&&(a.zc>0)){o=po()-(a.za.parentNode.getBoundingClientRect().left+window.scrollX)-k;a.zh=Math.min(Math.max(o,0),a.zc);a.za.style.left=a.zh+"px";if(a.zr&&a.zn){V(a);if(a.paused&&(pm(a)!=pl(a))){a.play()}}}};window.addEventListener(ph,Bd);window.addEventListener(pj,Bd);function
+Bd(){window.removeEventListener(pf,Bc);window.removeEventListener(pg,Bc);clearTimeout(va);window.removeEventListener(ph,Bd);window.removeEventListener(pj,Bd);if(m){if(pl(a)&&(a.zc>0)){if(!a.zr||!a.zn){V(a)}if(a.zn&&a.paused&&(pm(a)!=pl(a))){a.play()}}m=f;a.za.classList.remove("drag")}else{if(c.id&&(c.id==a.id)&&a.zn){P(a)}if(!a.zl){C(a)}}a.zp=f}};function Bb(a){if(a.zc>0){a.zp=t;j=po();k=Math.floor(a.zb/2);window.addEventListener(pf,Be);window.addEventListener(pg,Be);function Be(){m=t;a.za.classList.add("drag");o=po()-a.za.parentNode.getBoundingClientRect().left-k;a.zh=Math.min(Math.max(o,0),a.zc);a.za.style.left=a.zh+"px";if(a.zr&&a.zn){V(a);if(a.paused&&(pm(a)!=pl(a))){a.play()}}};window.addEventListener(ph,Bf);window.addEventListener(pj,Bf);function
+Bf(){window.removeEventListener(pf,Be);window.removeEventListener(pg,Be);window.removeEventListener(ph,Bf);window.removeEventListener(pj,Bf);if(m){if(pl(a)){if(!a.zr||a.zn){V(a)}if(a.zn&&a.paused&&(pm(a)!=pl(a))){a.play()}}m=f;a.za.classList.remove("drag")}else{p=po()-a.za.parentNode.getBoundingClientRect().left-k;a.zh=Math.min(Math.max(p,0),a.zc);a.za.style.left=a.zh+"px";if(pl(a)){V(a);if(a.zn){a.play()}}}a.zp=f}}};function C(a){if(c){if(a.id==c.id){R();return}else{ R()}}c=a;if(pl(a)){O(a)}else{if(!a.zj){a.play();a.pause();E(a)}}};function D(a,vq){a.za.setAttribute("class","");a.za.classList.add(vq)};function
+E(a){D(a,"load");a.zj=t;a.zm=t;a.onplay=()=>{if(!a.zm){clearTimeout(a.td);D(a,"play")}if(a.id==d.id){c=a;d=f;a.zn=t;if(a.zc>0){a.tc=setInterval(Q,q,a)}}};a.onplaying=()=>{clearTimeout(a.td);D(a,"play")};a.onwaiting=()=>{a.td=setTimeout(()=>{D(a,"load")},50)};a.onpause=()=>{if(!a.zm&&!a.zp&&!a.ended){D(a,"off")}if(a.zn&&!a.zm&&!a.ended){R()}};a.onended=()=>{if(a.zc==0&&!a.loop){R(0)}};a.onseeking=()=>{if(a.id==d.id){P(a)}};a.onseeked=()=>{if(a.id==d.id){P(a)}};a.onloadedmetadata=()=>{a.onloadedmetadata=n;J(a)};a.onprogress=()=>{a.onprogress=n;a.ta=setInterval(U,500,a);a.zq=t};var vc=a.zd.substr(a.zd.length-4,a.zd.length);vc=vc.toLowerCase();var vd=f;for(var i=0;i<g.length;i++){if(vc=="."+g[i][0]){var ve=a.zd+pk;F(a,ve,i);vd=t;break}}if(!vd){g.forEach((vr,i)=>{var ve=a.zd+"."+vr[0]+pk;F(a,ve,i)})}};function F(a,ve,vf){var vg=new
+XMLHttpRequest;vg.onreadystatechange=()=>{if(vg.readyState==2){vg.onreadystatechange=n;G(vg,a,ve,vf)}};vg.onerror=()=>{G(vg,a,ve,vf)};vg.open("HEAD",ve);vg.send()};function G(vg,a,ve,vf){if(vg.status==200){a.ze+=1;a.innerHTML+="<source id=\""+g[vf][0]+"\" src=\""+ve+"\" type=\"audio/"+g[vf][1]+"\" crossorigin=\"anonymous\">"}else{a.zf+=1;if((g.length-a.zf)==0){H(a)}}vg.onerror=n};function H(a){a.zj=f;a.zo=f;a.zn=f;a.zl=t;D(a,"error");if(a.id==c.id){c=f}};function J(a){if(a.preload=="auto"){if(/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream){a.preload="metadata"}var vi=a.play();if(vi!==undefined){vi.then(()=>{if(a.autoplay){M(a)}else{K(a)}}).catch(error=>{K(a)})}}else{if(a.readyState>2){M(a)}else{V(a);if(a.zh==a.zc){T(a)}a.tb=setInterval(L,250,a)}}};function K(a){a.pause();D(a,"off");a.currentTime=0;a.zh=0;a.zm=f;if(a.autoplay&&c){if(a.id==c.id){d=c;c=f}}};function L(a){V(a);var vj=0;for(var
+i=0;i<pn(a).length;i++){if(pn(a).start(pn(a).length-1-i)<=pm(a)){vj=pn(a).end(pn(a).length-1-i);break}}if(vj>=pm(a)){clearInterval(a.tb);M(a)}};function M(a){a.zj=f;a.zm=f;if(!a.zn){if(!a.zo){O(a)}}else{R(a)}};function O(a){if(pm(a)==pl(a)){T(a)}V(a);d=f;a.zn=t;if(a.zc>0){a.tc=setInterval(Q,q,a)}a.play();var vs=setTimeout(function(){if(a.zn&&a.paused){R()}clearTimeout(vs)},25);D(a,"play")};function N(vr){if(!vr){if(d){vr=d.id}else{vr=b[0]}}var a=A[vr];if(!a.zn){C(a)}};function Q(a){if(!a.zp){P(a);if(pm(a)==pl(a)){if(a.loop){T(a)}else{R(0)}}}};function P(a){a.zh=Math.round(pm(a)*a.zc/pl(a));a.za.style.left=a.zh+"px"};function R(vp){if(c){clearInterval(c["tc"]);c.zo=t;c.zn=f;c.pause();D(c,"off");if(vp==0){T(c)}else{c.zh=c.za.offsetLeft}if(!c.zm){d=c}c=f}};function T(a){if(pl(a)){a.currentTime=0}a.zh=0;a.za.style.left=0+"px"};function S(vr){if(!vr){if(d){vr=d.id}else{vr=b[0]}}var a=A[vr];T(a)};function U(a){if(pl(a)){if(a.zc==0){var vk=0}else{var vk=Math.round(a.zh/a.zc*pl(a)*100)/100}var
+vl=0;for(var i=0;i<pn(a).length;i++){if(pn(a).start(pn(a).length-1-i)<=vk){vl=pn(a).end(pn(a).length-1-i);break}}a.zi=Math.round(vl/pl(a)*100);a.za.parentNode.parentNode.querySelector("div:nth-child(2)").querySelector("div").style.width=a.zi+"%";if(a.zi==100){clearInterval(a.ta);a.zq=f}}};function V(a){if(a.zc>0){a.currentTime=a.zh/a.zc*pl(a)}};function W(){var vm=document.querySelectorAll(pa);vm.forEach((vr)=>{var vn=vr.getAttribute("id");var a=A[vn];if(a.zq){clearInterval(a.ta)}a.zb=a.za.offsetWidth;var vo=vr.querySelector(pb).offsetWidth-a.zb;if(vo<0){vo=0}if((a.za.offsetLeft>0)&&(vn!=c.id)){a.zh=Math.round(a.za.offsetLeft/a.zc*vo);a.za.style.left=a.zh+"px"}a.zc=vo;if(pl(a)&&!a.zn){V(a)}if(a.zq){a.ta=setInterval(U,500,a)}})};window.addEventListener("resize",W);return{init:B,Audio:A,Play:N,Stop:R,Reset:S,players:Xa,active:Xb,last:Xc};function Xa(){return b}function Xb(){if(c){return c.id}else{return f}}function Xc(){if(d){return d.id}else{return f}}})();

data/assets/site.webmanifest

@@ -20,7 +20,12 @@
     {
       "name": "{{ sc.name }}",
       "url": "{{ sc.url }}",
-      "description": "{{ sc.desc }}"
+      "description": "{{ sc.desc }}",
+      "icons": [{
+        "src": "/assets/logo-96.png",
+        "type": "image/png",
+        "sizes": "96x96"
+      }]
     }{%- if forloop.index != forloop.length %},{%- endif %}
     {%- endfor %}
   ],
@@ -39,6 +44,12 @@
       "type": "image/png",
       "sizes": "300x300"
     },
+    {
+      "src": "logo-512.png",
+      "type": "image/png",
+      "sizes": "312x312",
+      "purpose": "any"
+    },
     {
       "src": "logo-icon.svg",
       "type": "image/svg+xml",
@@ -48,6 +59,7 @@
   ],
   "display_override": [
     "standalone",
-    "fullscreen"
+    "fullscreen",
+    "window-controls-overlay"
   ]
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: askclass-course-theme
 version: !ruby/object:Gem::Version
-  version: 0.13.5
+  version: 0.15.0
 platform: ruby
 authors:
 - AskClass
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-31 00:00:00.000000000 Z
+date: 2026-01-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -24,7 +24,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '4.2'
-description: 
+description:
 email:
 - team@askclass.com
 executables: []
@@ -47,6 +47,7 @@ files:
 - _includes/segment/header.html
 - _includes/segment/index.html
 - _includes/segment/nav.html
+- _includes/session/audio.html
 - _includes/session/bubble.html
 - _includes/session/content_revealer.html
 - _includes/session/conversation.html
@@ -58,6 +59,7 @@ files:
 - _includes/session/paginator.html
 - _includes/session/points.html
 - _includes/session/say.html
+- _includes/session/sounds.html
 - _includes/session/videos.html
 - _includes/session/youtube.html
 - _layouts/default.html
@@ -67,6 +69,7 @@ files:
 - _sass/_bubbles.scss
 - _sass/_bullets.scss
 - _sass/_default.scss
+- _sass/_essential-audio.scss
 - _sass/_grid.scss
 - _sass/_paginator.scss
 - _sass/_post.scss
@@ -75,10 +78,12 @@ files:
 - _sass/_table.scss
 - _sass/_video.scss
 - _sass/init.scss
+- assets/audio/appreciation.mp3
 - assets/css/dialog.scss
 - assets/css/segment.scss
 - assets/css/session.scss
 - assets/favicon.ico
+- assets/js/essential-audio-player.js
 - assets/loading.svg
 - assets/logo-144.png
 - assets/logo-192.png
@@ -99,7 +104,7 @@ homepage: https://acc.askclass.com
 licenses:
 - MPL-2.0
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -114,8 +119,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.7
-signing_key: 
+rubygems_version: 3.4.19
+signing_key:
 specification_version: 4
 summary: Responsive Jekyll theme for putting analog class syllabus online.
 test_files: []