a few updates

jimmyff · May 19, 2024 · 7c05a18 · 7c05a18
1 parent 49840c7
commit 7c05a18
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 41 deletions.
diff --git a/sass/blog.scss b/sass/blog.scss
@@ -18,6 +18,12 @@
         width: 100%;
         max-width: 500px;
       }
+
+      &.full-width {
+        max-height: none;
+        max-width: 100%;
+      }
+
     }
   }
 }
@@ -53,7 +59,7 @@
 }
 
 .post .post-header {
-  margin: 30px 0;
+  margin: 20px 0;
 }
 
 .post-header h1.title {
@@ -82,18 +88,34 @@
 
 .youtube {
 
+  max-height: 90vh;
   position: relative;
-  padding-bottom: 56.25%;
-
-  iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+  margin: 0 auto;
+
+  .inner {
+    position: relative;
+    padding-bottom: 56.25%;
+
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &.portrait {
+    max-width: 40vh;
+
+    .inner {
+      padding-bottom: 177.77%;
+
+    }
   }
 }
 
+
 .draft {
   color: var(--red);
   font-weight: bold;

diff --git a/sass/header.scss b/sass/header.scss
@@ -1,30 +1,71 @@
 header {
   margin: 2rem 0;
-}
 
-header .avatar {
-  float: left;
-  margin: 0 2rem 0 0;
-}
+  .top {
+    display: flex;
+    gap: 1em;
+    margin-bottom: 2.5vw;
 
-header .links {
-  line-height: 2.2rem;
-}
 
-header .avatar img {
-  width: 4rem;
-  height: 4rem;
-  overflow: hidden;
-  border-radius: 100%;
-}
+    .avatar {
+
+      img {
+        width: 4rem;
+        height: 4rem;
+        overflow: hidden;
+        border-radius: 100%;
+      }
+    }
+
+    .details {
+
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .site-description {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        p {
+          margin: 0;
+        }
+
+
+      }
+    }
+
+  }
 
-header .site-description {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
 
-  p {
-    margin: 0 0 1rem 0;
+  .links {
+    line-height: 2.2rem;
+
+    display: flex;
+
+    a {
+      text-decoration: none;
+      flex: 0;
+      padding: 0.25em;
+      display: flex;
+
+      &.active,
+      &:hover {
+        span.name {
+          text-decoration: underline;
+        }
+      }
+
+      span {
+        flex: 0;
+
+        &.emoji {
+          padding-right: 0.25em;
+        }
+      }
+    }
   }
 }
 
@@ -80,7 +121,7 @@ nav {
 }
 
 nav a {
-  margin-right: 1.5rem;
+  margin-right: 2vw;
 }
 
 @media (max-width: 900px) {
@@ -89,10 +130,23 @@ nav a {
   }
 
   nav a {
-    margin-right: 0.5rem;
+
+    margin-right: 1vw;
   }
 
   header {
     margin: 1rem 0;
   }
+}
+
+@media (max-width: 500px) {
+
+  header {
+
+    .site-description p {
+      font-size: 0.8em;
+      ;
+    }
+
+  }
 }
diff --git a/templates/base.html b/templates/base.html
@@ -45,26 +45,30 @@
 
 <body>
     <header>
+    <div class="top">
         {% if config.extra.avatar -%}
 		<div class="avatar">
 			<a href="/">
                 {{ images::responsive_image(path="", src=config.extra.avatar, default_size=128, sizes=[64,128,256], alt=config.title  ) }}
 			</a>
 		</div>
 	    {% endif -%}
-        <a class="site-name"
-           href="/">
-            <h1>{{ config.title }}</h1>
-        </a>
-        <div class="site-description">
-            <p>{{ config.description }}</p>
+        <div class="details">
+            <a class="site-name"
+            href="/">
+                <h1>{{ config.title }}</h1>
+            </a>
+            <div class="site-description">
+                <p>{{ config.description }}</p>
+            </div>
         </div>
+    </div>
         <nav>
             <div class="links"> 
             {% for menu_link in config.extra.menu_links -%}
                 {% set link_url = menu_link.url | replace(from="$BASE_URL", to=config.base_url) -%} 
                 <a {% if current_url and current_url==link_url %}class="active"  {%  endif %}
-                href="{{ link_url | safe}} ">{{menu_link.name}}</a> 
+                href="{{ link_url | safe}} " alt="{{menu_link.name}}">{% if menu_link.emoji -%}<span class="emoji">{{ menu_link.emoji }}</span>{% endif -%}<span class="name">{{menu_link.name}}</span></a> 
             {% endfor -%} 
             </div>
         </nav>
@@ -84,6 +88,14 @@ <h1>{{ config.title }}</h1>
                 </li>
                 {% endif -%} 
 
+                {# Bluesky #} 
+                {% if config.extra.link_bluesky_url -%}
+                <li>
+                    <a href="{{ config.extra.link_bluesky_url }}"
+                       title="Bluesky" rel="me"><i data-feather="message-square"></i></a>
+                </li> 
+                {% endif -%} 
+
                 {# Mastadon #} 
                 {% if config.extra.link_mastodon_url -%}
                 <li>

diff --git a/templates/macros/images.html b/templates/macros/images.html
@@ -1,6 +1,10 @@
 {% extends "base.html" %}
 
 
+{% macro image_absolute(path, src, alt, class="") -%}
+<img alt="{{ alt }}" title="{{ alt }}" src="{{ get_url(path=src) | safe }}" class="{{ class }}" />
+{% endmacro image_absolute -%}
+
 {% macro image(path, src, alt, class="") -%}
 <img alt="{{ alt }}" title="{{ alt }}" src="{{ get_url(path=path ~ src) | safe }}" class="{{ class }}" />
 {% endmacro image -%}

diff --git a/templates/shortcodes/image.html b/templates/shortcodes/image.html
@@ -1,3 +1,9 @@
 
 {% import "macros/images.html" as images -%}
-{{ images::responsive_image(path=page.colocated_path, src=src, default_size=config.extra.images_default_size, sizes=config.extra.images_sizes, alt=alt, class=class | default(value="") ) }}
+{% if path %}
+{% set image_path =  path %}
+{% else %}
+{% set image_path = page.colocated_path %}
+{% endif %}
+
+{{ images::responsive_image(path= image_path, src=src, default_size=config.extra.images_default_size, sizes=config.extra.images_sizes, alt=alt, class=class | default(value="") ) }}
diff --git a/templates/shortcodes/youtube.html b/templates/shortcodes/youtube.html
@@ -1,7 +1,7 @@
-<div class="youtube{% if class %} {{class}}{% endif %}">
+<div class="youtube{% if class %} {{class}}{% endif %}"><div class="inner">
     <iframe  src="https://www.youtube.com/embed/{{id}}{% if autoplay %}?autoplay=1{% endif %}"
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen>
     </iframe>
-</div>
+</div></div>