Mobile Friendly fixes

content/post/Async-Event-Stream-for-IoT-Devices-in-.Net-Core.md

@@ -4,9 +4,9 @@ title = "Async Event Stream for IoT Devices in .Net Core"
 date = "2021-07-12"
 description = "Building async subscription based event architecture for IoT devices in dotnet!"
 tags = [
-    "#csharp",
-    "#dotnet",
-    "#IoT",
+    "csharp",
+    "dotnet",
+    "IoT",
 ]
 categories = [
     "Coding",

content/post/why-you-dont-need-a-bootcamp.md

@@ -4,8 +4,8 @@ title = "Why you don't need a Bootcamp"
 date = "2021-09-18"
 description = "I keep seeing people jump to recommending code bootcamps..."
 tags = [
-    "#ButThatsJustMyOpinionMan",
-    "#Coding"
+    "ButThatsJustMyOpinionMan",
+    "Coding"
 ]
 categories = [
     "Opinions",

layouts/partials/header.html

@@ -0,0 +1,37 @@
+<!-- Navbar
+================================================== -->
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+    <a class="navbar-brand" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
+    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#main-nav" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div id="main-nav" class="collapse nav-collapse">
+        <ul class="navbar-nav">
+            {{ $currentPage := . }} {{ range .Site.Menus.main }} {{ if .HasChildren }}
+            <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="themes" style="" aria-expanded="false">Themes <span class="caret"></span></a>
+                <div class="dropdown-menu">
+                    {{ range .Children }}
+                    <a class="dropdown-item {{ if $currentPage.IsMenuCurrent " main " . }}active{{ end }}" href="{{ .URL }}">{{ .Name }}</a> {{ end }}
+                </div>
+            </li>
+            {{ else }}
+            <li class="nav-item {{ if $currentPage.HasMenuCurrent " main " . }}active{{ end }}">
+                <a class="nav-link" href="{{ .URL }}">
+                                    {{ .Pre }}
+                                    <span>{{ .Name }}</span>
+                                </a>
+            </li>
+            {{ end }} {{ end }}
+        </ul>
+    </div>
+    </div>
+    </div>
+</nav>
+
+<div class="expand-img">
+    <div id="expand-img" class="expand-img-wrapper" style="display: none;">
+        <img src="http://localhost:1313/images/RPI-GPIO.png"/>
+        <button class="btn btn-primary btn-lg">X</button>
+    </div>
+</div>

static/css/custom.css

@@ -1,6 +1,58 @@
 html, body.crt {
   height: auto;
+  width: auto;
   min-height: 100vh;
+  min-width: 100vw;
+  max-width: 100vw;
+}
+
+p > img {
+  max-width: 100%;
+}
+
+p > img + btn {
+  float: right;
+  transform: translateY(-100%);
+}
+
+.expand-img {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.expand-img > .expand-img-wrapper {
+  width: auto;
+  height: auto;
+  position: absolute;
+  top:50%;
+  left:50%;
+  transform: translate(-50%, -50%);
+}
+
+.expand-img > .expand-img-wrapper > img {
+  max-width: 90vw;
+  max-height: 90vh;
+  width: auto;
+  height: auto;
+}
+
+.expand-img > .expand-img-wrapper > button, 
+.expand-img > .expand-img-wrapper > .btn-primary.btn-lg:not(:disabled):not(.disabled):active {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: auto;
+  left: auto;
+  pointer-events: all;
+}
+
+p > a {
+  overflow-wrap: break-word;
 }
 
 .crt::after {
@@ -32,4 +84,11 @@ pre > code {
 }
 pre {
   background-color: #272822;
+}
+
+.card-body > a {
+  white-space: nowrap;
+  overflow:hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }

static/js/custom.js

@@ -0,0 +1,26 @@
+function onReady() {
+    $(`p>img`)
+    .after(appendExpandButton)
+    .next()
+    .on('click', onExpandButton);
+
+    $(`#expand-img button`).on(`click`, onHideImgExpand);
+}
+
+function appendExpandButton(img) {
+    return `<btn class='btn btn-primary' data-img="${this.src}">+<btn>`
+}
+
+function onExpandButton(e) {
+    var imgSrc = this.getAttribute(`data-img`);
+    $(`#expand-img img`).attr(`src`, imgSrc);
+    $(`#expand-img`).show(0);
+}
+
+function onHideImgExpand() {
+    $(`#expand-img`).hide(500);
+}
+
+(function() {
+    $(document).ready(onReady)
+})()