v1.1.1 - style changes to blog; updates to socmed links; contact image

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "visual-anatomy-3d",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "visual-anatomy-3d",
-      "version": "1.1.0",
+      "version": "1.1.1",
       "license": "ISC",
       "dependencies": {
         "@glidejs/glide": "^3.4.1",
@@ -2245,14 +2245,20 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001271",
+      "version": "1.0.30001429",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001271.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001429.tgz",
-      "integrity": "sha512-BBruZFWmt3HFdVPS8kceTBIguKxu4f99n5JNp06OlPD/luoAMIaIK5ieV5YjnBLH3Nysai9sxj9rpJj4ZisXOA==",
+      "integrity": "sha512-511ThLu1hF+5RRRt0zYCf2U2yRr9GPF6m5y90SBCWsvSoYoW7yAGlv/elyPaNfvGCkp6kj/KFZWU0BMA69Prsg==",
       "dev": true,
-      "funding": {
+      "funding": [
+        {
           "type": "opencollective",
           "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
         }
+      ]
     },
     "node_modules/caw": {
       "version": "2.0.1",
@@ -17011,9 +17017,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001271",
+      "version": "1.0.30001429",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001271.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001429.tgz",
-      "integrity": "sha512-BBruZFWmt3HFdVPS8kceTBIguKxu4f99n5JNp06OlPD/luoAMIaIK5ieV5YjnBLH3Nysai9sxj9rpJj4ZisXOA==",
+      "integrity": "sha512-511ThLu1hF+5RRRt0zYCf2U2yRr9GPF6m5y90SBCWsvSoYoW7yAGlv/elyPaNfvGCkp6kj/KFZWU0BMA69Prsg==",
       "dev": true
     },
     "caw": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "visual-anatomy-3d",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Visual Anatomy 3D",
   "scripts": {
     "build-dev:webpack": "webpack",

src/_includes/contact.ejs

@@ -20,5 +20,6 @@
             <span class="alert form-alert alert--failure" id="otherError">Something went wrong. Try us on <a href="https://twitter.com/graphicvizion" target="_blank" style="font-weight: 600; color: #eee; text-decoration: underline;">Twitter</a> instead.</span>
             <span class="alert form-alert alert--success" id="success">Thanks! We'll contact you shortly.</span>
         </div>
+        <img class="hide-on-mobile" src="./assets/images/contact.png" alt="Map of Utrecht, Netherlands showing GraphicViZion's office" title="Map of Utrecht, Netherlands showing GraphicViZion's office">
     </section>
 </article>

src/_includes/footer.ejs

@@ -16,7 +16,7 @@
     <section>
         <ul>
             <li>
-                <a href="https://www.instagram.com/graphic_vizion/" target="_blank">
+                <a href="https://www.instagram.com/graphicvizion/" target="_blank">
                     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-instagram" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
                         <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                         <rect x="4" y="4" width="16" height="16" rx="4" />
@@ -86,7 +86,7 @@
                 </a>
             </li>
             <li>
-                <a href="https://play.google.com/store/apps/developer?id=Graphic-ViZion" target="_blank">
+                <a href="https://play.google.com/store/apps/developer?id=GraphicViZion" target="_blank">
                     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-google-play"
                         width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
                         stroke-linecap="round" stroke-linejoin="round">

src/_includes/layouts/base.ejs

@@ -1,3 +1,7 @@
+---
+pageName: ''
+---
+
 <!DOCTYPE html>
 <html class="page--<%= pageName %>" lang="en" dir="ltr" style="--scrollbarWidth: 0px; --viewportWidth: calc(100vw - var(--scrollbarWidth));">
 
@@ -56,6 +60,7 @@
   <meta property="og:description" content="<%= (!!locals.description) ? description : site.description %>" />
   <meta property="og:locale" content="<%= site.locale %>" />
   <meta property="og:site_name" content="<%= site.site_name %>" />
+  <script async defer data-website-id="f74324cf-e86f-4993-8537-63ccd9698204" src="https://s9-analytics.altweb.me/umami.js"></script>
   <% if (locals.tags=="posts" ) { %>
     <meta property="og:type" content="article" />
     <meta property="article:published_time" content="<%= date.toISOString() %>" />

src/_includes/layouts/post.ejs

@@ -22,6 +22,11 @@ pageName: post
           <%= this.dateFns.format(new Date(date), 'yyyy.LL.dd' ) %>
         </time>
       </div>
+      <% if (locals.intro) { %>
+        <div class="post__intro">
+          <%= intro %>
+        </div>
+      <% } %>
     </header>
     <section class="post__content">
       <%- content %>

src/assets/styles/_contact.css

@@ -15,7 +15,9 @@
 
 .contact__wrapper section {
     display: flex;
-    flex-direction: column;
+    gap:4rem;
+    align-items: flex-start;
+    justify-content: center;
 }
 
 .contact__wrapper .form {
@@ -33,6 +35,12 @@
     text-align: center;
 }
 
+.contact__wrapper img{
+    width: min(35ch + 2rem, 90vw + 2rem);
+    border-radius: var(--r-1);
+    max-width: 34%;
+}
+
 .contact__wrapper input {
     border-radius: max(1rem, 16pt);
     padding: 0.5em 1em;

src/assets/styles/_hero.css

@@ -1,5 +1,3 @@
-
-
 .hero__video {
   border-radius: var(--r-1);
 }
@@ -8,16 +6,29 @@
     background: var(--c-bkg);
     border-radius: var(--r-1) var(--r-1) 0 0;
     padding: var(--p-1);
+  }
+
+  .page--home .hero__banner {
     position: absolute;
     bottom: calc(-1 * var(--offset));
     left: 6rem;
   }
 
+  .page--post .hero__banner {
+    position: relative;
+    width: calc(100% - 8rem);
+    left: 4rem;
+  }
+
   .hero__banner h1 {
-    width: 14ch;
+    min-width: 14ch;
     font-size: 4.2rem;
   }
 
+  .page--post .hero__banner h1 {
+    width: auto;
+  }
+
 .banner-edge-left {
   position: absolute;
   left: calc(-1 * var(--r-1) + var(--weird-gap));
@@ -82,10 +93,21 @@ color: black;
   background: var(--c-bkg);
 }
 
-
 .hero__wrapper {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
+
+.page--home .hero__wrapper {
+    --offset: 8rem;
+    margin-bottom: var(--offset);
+    padding: 0 2rem;
+    --weird-gap: 0.04rem;
+    z-index: 1; /* temp, to overlap slider */
+  }
+  
+  .page--post .hero__wrapper {
+    align-items: flex-start;
+  }

src/assets/styles/_post.css

@@ -26,6 +26,17 @@
 .page--post .hero__banner{
     bottom: auto;
     top: var(--offset-from-top);
+    top: calc(-1 * var(--r-1) + -3rem);
+    margin-bottom: calc(-1 * var(--r-1) + -3rem);
+}
+
+.post__intro{
+    padding: 0 calc(4rem + var(--p-1));
+    color: var(--c-3);
+    font-size: 1.4rem;
+    text-align: justify;
+    font-style: italic;
+    line-height: 1.2;
 }
 
 article#post{
@@ -37,7 +48,7 @@ article#post{
 }
 
 article#post h1{
-    color: var(--c-3);
+    
 }
 article#post > header{
     gap: 0;
@@ -63,8 +74,8 @@ article#post .post__content a{
 }
 
 article#post .post__content img{
-    width: 80%;
+    width: 100%;
-    margin: 2rem 10%;
+    margin: 2rem 0;
     border-radius: var(--r-1);
     background-color: var(--c-1);
 }
@@ -154,7 +165,8 @@ article#post .post__content blockquote p {
 }
 
 article#post .post__content p{
-    margin: 1em 0;
+    margin: 1.5em 0;
+    text-align: justify;
 }
 
 article#post .post__content hr{

src/assets/styles/main.css

@@ -318,12 +318,9 @@ h2.blog-header{
     font-size: 2.3rem;
 }
 
-.page--home .hero__wrapper {
+iframe{
-  --offset: 8rem;
+  border-radius: var(--r-1);
-  margin-bottom: var(--offset);
+  min-width: 100%;
-  padding: 0 2rem;
-  --weird-gap: 0.04rem;
-  z-index: 1; /* temp, to overlap slider */
 }
 
 @import '_nav.css';

src/posts/2002-01-01-cheatsheet.md

@@ -3,6 +3,7 @@ title: 'Cheatsheet'
 description: 'Watch here for my future blog.'
 date: 2022-09-08T00:00:00Z
 image: 003.jpg
+intro: 'hfgjgjfjhhjdgf'
 ---
 
 # h1 Heading

src/posts/2002-01-01-test-post.md

@@ -1,12 +1,11 @@
 ---
-title: 'test post'
+title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, consectetur adipiscing elit'
 description: 'Watch here for my future blog.'
 date: 2020-28-08T00:00:00Z
 image: 002.jpg
+intro: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
 ---
 
-![hero image](/assets/images/posts/boobs/001.jpg)
-
 # Lorem ipsum
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do [eiusmod tempor incididunt]() ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.