cards

vtbag · Nov 12, 2024 · b0617b0 · b0617b0
1 parent c9c0fbd
commit b0617b0
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 9 deletions.
diff --git a/src/pages/cards/Bag.astro b/src/pages/cards/Bag.astro
@@ -1,13 +1,22 @@
 ---
-import bag from "../../assets/bag.png?url"
+import bag from "../../assets/bag.png?url";
 ---
+
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:description" content="" />
+    <meta property="og:image" content="/social.png" />
+  </head>
   <body>
     <div style="background-color: #181008; width:42vw">
       <img src={bag} alt="bag" />
     </div>
     <div style="width:57vw">
-      <h2><hr><span class="effect">Tools, Tips, and Tricks</span><br>to E  with the<br><span class="effect2">View Transition API!</span><hr>
+      <h2>
+        <hr /><span class="effect">Tools, Tips, and Tricks</span><br />to E with
+        the<br /><span class="effect2">View Transition API!</span><hr />
       </h2>
     </div>
     <h1>The Bag of Tricks for View Transitions</h1>
@@ -25,10 +34,10 @@ import bag from "../../assets/bag.png?url"
       color: #a98b6c;
       font-size: 66px;
       font-family: Arial, Helvetica, sans-serif;
-      transform: translate(0, -135vh)
+      transform: translate(0, -135vh);
     }
     h2 {
-      color:#a98b6ccc;
+      color: #a98b6ccc;
       font-size: 56px;
       font-family: Arial, Helvetica, sans-serif;
       transform: translate(-4vw, -12vh);
@@ -55,15 +64,15 @@ import bag from "../../assets/bag.png?url"
       background: linear-gradient(90deg, #c5b3a5, #a98b6c);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
-      text-shadow: 2px 2px 4px rgba(64,64,64, 0.5);
+      text-shadow: 2px 2px 4px rgba(64, 64, 64, 0.5);
       font-weight: 700;
       font-size: 66px;
     }
     .effect2 {
       background: linear-gradient(90deg, #a98b6c, #c5b3a5);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
-      text-shadow: 2px 2px 4px rgba(64,64,64, 0.5);
+      text-shadow: 2px 2px 4px rgba(64, 64, 64, 0.5);
       font-weight: 700;
       font-size: 66px;
     }

diff --git a/src/pages/cards/Chamber.astro b/src/pages/cards/Chamber.astro
@@ -4,6 +4,10 @@ import chamber from "@vtbag/inspection-chamber?url";
 
 <html lang="en" style="color-scheme:dark">
   <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:description" content="" />
+    <meta property="og:image" content="/social.png" />
     <title>Chamber</title>
     <script is:inline src={chamber} slot="head2"></script>
   </head>

diff --git a/src/pages/cards/Crossing.astro b/src/pages/cards/Crossing.astro
@@ -4,7 +4,10 @@
 
 <html lang="en" style="color-scheme:dark">
   <head>
-    <title>Crossing</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:description" content="" />
+    <meta property="og:image" content="/social.png" />
   </head>
   <body>
     <img width="640" src="/crossing.png" />

diff --git a/src/pages/cards/Shaft.astro b/src/pages/cards/Shaft.astro
@@ -4,7 +4,10 @@
 
 <html lang="en" style="color-scheme:dark">
   <head>
-    <title>Shaft</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:description" content="" />
+    <meta property="og:image" content="/social.png" />
   </head>
   <body>
     <img width="640" src="/shaft.png" />

diff --git a/src/pages/cards/Signal.astro b/src/pages/cards/Signal.astro
@@ -4,7 +4,10 @@
 
 <html lang="en" style="color-scheme:dark">
   <head>
-    <title>Signal</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:description" content="" />
+    <meta property="og:image" content="/social.png" />
   </head>
   <body>
     <img width="640" src="/signal.png" />