avatar in sidebar

layouts/partials/sidebar.html

@@ -1,5 +1,17 @@
 <section>
-    <img class="u-photo" width="100px" src="/images/avatar.jpg">
+    {{ range first 1 (where .Site.RegularPages.ByDate.Reverse "Section" "blog") }}
+        {{ $d1 := time.ParseDuration "-168h" }}
+        {{ $t1 := time.Now.Add $d1 }}
+        {{ $t2 := time.AsTime .PublishDate }}
+        {{ if $t2.After $t1 }}
+            <div id="avatar-frame" class="online">
+        {{ else }}
+            <div id="avatar-frame" class="busy">
+        {{ end }}
+    {{ end }}
+        <span class="gloss"></span>
+        <img class="u-photo" width="100px" src="/images/avatar.jpg">
+    </div>
 </section>
 <section>
     <h1>current status</h1>

static/js/quotes.js

@@ -2,7 +2,6 @@ var subtitles = [
     "null",
     "George likes his chicken spicy",
     "Graphic design is my passion",
-    "Twitter is a fandom site for current events",
     "Genesis does what Nintendon\'t",
     "1000 JS libraries in your pocket",
     "A large boulder the size of a small boulder",

themes/dreamcast/layouts/partials/head.html

@@ -7,7 +7,7 @@
     <title>{{ .Page.Title }}</title>
     <link rel="stylesheet" href="/css/main.css">
     <link rel="icon" type="image/png" href="/favicon.png">
-    <script src="/js/quotes.js"></script>
+    <script src="/js/quotes.js" defer></script>
     <link rel="webmention" href="https://webmention.io/yequari.com/webmention" />
     <link rel="pingback" href="https://webmention.io/yequari.com/xmlrpc" />
     <script src="/js/webmention.js" async></script>

themes/dreamcast/static/css/main.css

@@ -1,4 +1,4 @@
-@import url(https://fonts.bunny.net/css?family=b612-mono:400|phudu:400|noto-sans:400|martian-mono:700);
+@import url(https://fonts.bunny.net/css?family=b612-mono:400|phudu:400|noto-sans:400|martian-mono:700|andika:400);
 /* CSS HEX */
 :root {
     --jet: #353535ff;
@@ -137,6 +137,7 @@ header h1 {
     font-family: 'Phudu', monospace;
     /* font-size: 1rem; */
     color: var(--fairy-tale);
+    display: inline;
 }
 
 ul.social {
@@ -168,10 +169,6 @@ header .profile img {
     display: inline-block;
 }
 
-header .profile h1 {
-    display: inline;
-}
-
 p.about {
     line-height: 0;
     color: var(--fairy-tale);
@@ -214,7 +211,8 @@ nav li {
 nav li a {
     display: inline-block;
     padding: 20px;
-    font-family: 'B612 Mono', monospace;
+    font-family: 'Andika', monospace;
+    font-size: 1.1rem;
     font-weight: bold;
     transition: box-shadow 0.3s;
 }
@@ -227,7 +225,7 @@ nav li a:link, nav li a:visited {
 nav li a:hover, nav li a:active {
     animation: 0.2s ease-in 1 forwards gradient;
     outline: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 0 3px 10px white;
+    box-shadow: 0 0 10px white;
 }
 
 @keyframes gradient {
@@ -258,14 +256,16 @@ nav li a:hover, nav li a:active {
     display: flex;
     flex-flow: row wrap-reverse;
     box-shadow: 10px 5px 5px #00000066;
-    padding: 30px;
+    padding: 0;
 }
 
 .sidebar {
     flex: 0 1 20%;
-    border-right: 1px solid grey;
+    border-right: 1px solid;
-    margin-right: 15px;
+    border-image: linear-gradient(transparent 5vh, grey 5.1vh, grey 94%, transparent 95%) 1;
-    padding-right: 15px;
+    padding: 30px 15px;
+    /* background: linear-gradient(aqua 0%, transparent 15%); */
+    /* border-radius: 15px 0 0 0; */
 }
 
 .sidebar h1 {
@@ -273,9 +273,49 @@ nav li a:hover, nav li a:active {
     padding-bottom: 5px;
 }
 
+.sidebar #avatar-frame {
+    width: fit-content;
+    height: 100px;
+    margin: 0 auto;
+    padding: 8px 8px;
+    border: 1px solid #cccccf;
+    border-radius: 16px/24px;
+    position: relative;
+}
+
+.sidebar #avatar-frame img {
+    max-width: 100px;
+    border: 1px solid grey;
+    border-radius: 5px;
+}
+
+.online {
+  background: linear-gradient(#D6FFDB00 0%, #D6FFDB 30%, #66FF00 100%);
+  box-shadow: 0 5px 10px #66FF00;
+}
+
+.busy {
+  background: linear-gradient(#FF9A0000 0%, #D8820055 30%,  #fca30d 100%);
+  box-shadow: 0 5px 10px #fca30d;
+}
+
+.gloss {
+  width: 100%;
+  height: 100%;
+/*   background: red; */
+  background: radial-gradient(ellipse 200px 140px at 50% 0%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 50%,
+  rgba(255,255,255,0) 51%);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  border-radius: 16px/24px;
+  pointer-events: none;
+}
+
 main {
     flex: 1 3 70%;
-    padding-left: 10px;
+    padding: 30px;
 }
 
 main li {
@@ -290,7 +330,6 @@ article p.context {
 
 article p {
     text-align: justify;
-    font-size: 1.1rem;
 }
 
 article img {
@@ -360,6 +399,15 @@ footer {
     text-align: center;
 }
 
+/* Index page blog posts */
+.title-date {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+
 /*
  * Links page
  */
@@ -417,6 +465,9 @@ footer {
 @media only screen and (max-width: 700px) {
     .sidebar {
         border: none;
-        margin: 0;
+    }
+
+    article img {
+        max-width: 200px;
     }
 }