test

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": "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>
+</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;
@@ -126,4 +134,4 @@
     margin-top: 0;
     max-height: max(4 * 1rem, 4 * 16pt);
     opacity: 1;
-}
+}

src/assets/styles/_hero.css

@@ -1,91 +1,113 @@
-
-
 .hero__video {
-    border-radius: var(--r-1);
+  border-radius: var(--r-1);
 }
 
 .hero__banner {
     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;
-}
+  }
 
-.hero__banner h1 {
+  .page--post .hero__banner {
-    width: 14ch;
+    position: relative;
+    width: calc(100% - 8rem);
+    left: 4rem;
+  }
+
+  .hero__banner h1 {
+    min-width: 14ch;
     font-size: 4.2rem;
-}
+  }
+
+  .page--post .hero__banner h1 {
+    width: auto;
+  }
 
 .banner-edge-left {
-    position: absolute;
+  position: absolute;
-    left: calc(-1 * var(--r-1) + var(--weird-gap));
+  left: calc(-1 * var(--r-1) + var(--weird-gap));
-    height: var(--r-1);
+  height: var(--r-1);
-    width: var(--r-1);
+  width: var(--r-1);
-    bottom: calc(var(--offset) - var(--weird-gap));
+  bottom: calc(var(--offset) - var(--weird-gap));
 }
 
 .banner-edge-right {
-    position: absolute;
+  position: absolute;
-    right: calc(-1 * var(--r-1) + var(--weird-gap));
+  right: calc(-1 * var(--r-1) + var(--weird-gap));
-    height: var(--r-1);
+  height: var(--r-1);
-    width: var(--r-1);
+  width: var(--r-1);
-    bottom: calc(var(--offset) - var(--weird-gap));
+  bottom: calc(var(--offset) - var(--weird-gap));
-    transform: scaleX(-1);
+  transform: scaleX(-1);
 }
 
 .hero__info {
-position: absolute;
+  position: absolute;
-top: 30%;
+  top: 30%;
-right: 15%;
+  right: 15%;
-display: flex;
+  display: flex;
-flex-direction: column;
+  flex-direction: column;
-gap: 1rem;
+  gap: 1rem;
-align-items: center;
+  align-items: center;
 }
 
 .no-flexbox-gap .hero__info > *:not(:last-child) {
-    margin-bottom: 1rem;
+  margin-bottom: 1rem;
 }
 
 .hero__info .platform-list {
-display: flex;
+  display: flex;
-gap: 0.8rem;
+  gap: 0.8rem;
 }
 
 .no-flexbox-gap .hero__info .platform-list > *:not(:last-child) {
-    margin-right: 0.8rem;
+  margin-right: 0.8rem;
 }
 
 .hero__info .platform-list svg {
-height: 1.8rem;
+  height: 1.8rem;
-width: 1.8rem;
+  width: 1.8rem;
 }
 
 .hero__info .platform-list svg path {
-fill: var(--c-2);
+  fill: var(--c-2);
-opacity: 0.25;
+  opacity: 0.25;
 }
 
 .btn--hero {
-text-transform: uppercase;
+  text-transform: uppercase;
-font-size: 1.5rem;
+  font-size: 1.5rem;
-background: var(--c-3);
+  background: var(--c-3);
-border-radius: 999px;
+  border-radius: 999px;
-padding: 1.9rem 2rem;
+  padding: 1.9rem 2rem;
-line-height: 1;
+  line-height: 1;
-color: black;
+  color: black;
 }
 
 .btn--hero:hover {
-background: var(--c-bkg);
+  background: var(--c-bkg);
 }
 
-
 .hero__wrapper {
-    position: relative;
+  position: relative;
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    align-items: center;
+  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,14 +1,13 @@
 ---
-title: 'asdf test post test post test post test post test post'
+title: 'test post'
 description: 'Watch here for my future blog.'
 date: 2020-28-08T00:00:00Z
-image: 003.jpg
+image: 002.jpg
 ---
 # 5 Fascinating Facts About the Human Circulatory System
 The circulatory system is one of the most vital systems in the human body. It is responsible for transporting oxygen and nutrients to cells, and removing carbon dioxide and other waste products. The circulatory system is made up of the heart, blood vessels, and blood. Here are 5 fascinating facts about this incredible system:
 
-## 1. The circulatory system is made up of three major types of blood vessels: arteries, veins, and capillaries.
+![hero image](/assets/images/posts/boobs/001.jpg)
-The circulatory system is a network of blood vessels that carries oxygen and nutrients to the cells of the body. Arteries are the blood vessels that carry oxygen-rich blood away from the heart. Veins are the blood vessels that carry oxygen-poor blood back to the heart. Capillaries are the tiny blood vessels that connect arteries and veins. The walls of the arteries and veins are made up of smooth muscle tissue. This type of tissue is able to contract and relax, which helps to regulate the flow of blood through the vessels. The walls of the capillaries are made up of a single layer of cells. This allows oxygen and nutrients to pass through to the cells of the body, and waste products to pass back into the bloodstream.
 
 # Lorem ipsum