Added new box style for page headers, support for hint when hovering interactible elements, add support for expanding 88x31 pictures on click, updated index look and feel/text, switch to macros for reusable elements, fix ccd path, rename main.js to music to better reflect it's purpose and update i18n.js export global strings.

_includes/base.njk

@@ -6,8 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" href="/static/main.css?fixcache=1">
     <script src="/static/scripts/ccd.js"></script>
-    <script src="/static/scripts/main.js" defer></script>
+    <script src="/static/scripts/music.js" defer></script>
     <script src="/static/scripts/88x31.js" defer></script>
+    <script src="/static/scripts/tips.js" defer></script>
     <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">

_includes/macros.njk

@@ -0,0 +1,35 @@
+{% macro i88x31(link) %}
+  <img class="i88x31" src="/static/images/88x31/{{ link }}" data-tip="<b>{{ i18n[langKey].i88x31hover }}</b> ({{ link }})">
+{% endmacro %}
+
+{% macro videoCard(videoLink, videoTitle, videoImage, videoWebsite, videoDuration, videoAccent) %}
+<div class="youtubeCardHolderHelper">
+<div class="youtubeCardHolder">
+<a href="{{ videoLink }}">
+    <div class="blogpostYoutubeVideo" {% if videoAccent %}style="border-color: {{ videoAccent }};"{% endif %}>
+        <img src="/static/images{{ videoImage }}">
+        <div class="videoHeader">
+            <!-- <p class="alsoAvailable">{{ i18n[langKey].alsoAvailableAsVideo }}:</p> -->
+            <h2 class="videoTitle" {% if videoAccent %}style="color: {{ videoAccent }};"{% endif %}>{{ videoTitle }}</h2>
+            <p>{{ videoWebsite }}{% if videoDuration %} ({{ videoDuration }}){% endif %}</p>
+        </div>
+        <!-- <p class="goLabel">ir</p> -->
+    </div>
+</a>
+</div>
+</div>
+{% endmacro %}
+
+{% macro projectCard(projectName, projectDescription, projectLink, projectImage, projectImageAlt) %}
+<div class="hsProject">
+    <div class="hsProjectHeader">
+        <div class="hsProjectImage"><img src="{{ projectImage }}" alt="{{ projectImageAlt or projectName }}"></div>
+        <a href="{{ projectLink }}" class="hsProjectHeaderIcon">
+            <img src="/static/visual/github.svg" class="invertedc">
+        </a>
+    </div>
+    <div class="hsProjectContent">
+        <p>{{ projectDescription }}</p>
+    </div>
+</div>
+{% endmacro %}

_includes/post.njk

@@ -3,6 +3,8 @@ layout: base.njk
 title: Adrian Victor:Blog
 ---
 {% set altLanguages = collections.post | alternateLanguages(postId, langKey) %}
+{% from "macros.njk" import videoCard with context %}
+
 <main>
     <article>
         <div id="postHeader">
@@ -20,18 +22,9 @@ title: Adrian Victor:Blog
             {% endif %}
         </div>
         {% if postVideoLink and postVideoImage and postVideoTitle and postVideoWebsite %}
-        <a href="{{ postVideoLink }}">
-            <div class="blogpostYoutubeVideo">
-                <img src="/static/images/thumbnails/{{ postVideoImage }}">
-                <div class="videoHeader">
-                    <p class="alsoAvailable">{{ i18n[langKey].alsoAvailableAsVideo }}:</p>
-                    <h2 class="videoTitle">{{ postVideoTitle }}</h2>
-                    <p>{{ postVideoWebsite }}{% if postVideoDuration %} ({{ postVideoDuration }}){% endif %}</p>
-                </div>
-                <!-- <p class="goLabel">ir</p> -->
-            </div>
-        </a>
+        {{ videoCard(postVideoLink, postVideoTitle, postVideoImage, postVideoWebsite, postVideoDuration) }}
         {% endif %}
+            
         {{ content | safe }}
     </article>
 </main>