feat: add social card template

2023-01-20 02:55:53 +01:00 · 2023-01-20 02:55:53 +01:00 · 2e12833d4b
commit 2e12833d4b
parent afe81f2bbb
2 changed files with 127 additions and 0 deletions
--- a/card/index.html
+++ b/card/index.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Document</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <main class="flex">
+    <div class="image">
+      <img src="../src/assets/viktor-avatar.png" alt="Sebin Smug Icon" />
+    </div>
+    <div class="headings">
+      <h1>Viktor Kraastav</h1>
+      <h2>Character Reference Page</h2>
+    </div>
+  </main>
+  <!-- Open in browser and set mobile view to 2048x1072 with DPR: 2 and take screenshot -->
+</body>
+</html>
--- a/card/style.css
+++ b/card/style.css
@ -0,0 +1,105 @@
+@import "../src/assets/fonts/secular-one/secular-one.css";
+
+:root {
+  font-size: 20px;
+  color: #f8ebdd;
+
+  --theme-c-walnut-brown: #422322;
+  --theme-c-desert-sand-translucent: #e7c7b1bf;
+
+  --container-box-shadow: 1vw 1vw 4vw rgba(0, 0, 0, 0.7);
+  --welcome-header-mainline-font-size: 7vw;
+  --welcome-header-subline-font-size: 3.625vw;
+
+  --color-background: #2d4c5a;
+  --page-background: url(../src/assets/layered-waves-dark.svg);
+  --page-background-image-height: 100vw;
+  --page-background-image-max-height: 80vh;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: var(--color-background);
+}
+
+body::after {
+  background: var(--page-background);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center bottom;
+
+  display: block;
+
+  content: "";
+  position: sticky;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  height: var(--page-background-image-height);
+  max-height: var(--page-background-image-max-height);
+
+  z-index: -1;
+}
+
+.flex {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-evenly;
+  align-items: center;
+
+  height: 100vh;
+}
+
+.flex > * {
+  flex: 0 0 auto;
+}
+
+.image {
+  flex: 0 0 60vh;
+  max-height: 100vh;
+
+  background-color: var(--theme-c-desert-sand-translucent);
+
+  border: 1vw solid var(--theme-c-walnut-brown);
+  border-radius: 4.5vw;
+
+  transform: scale(0.84) translateX(15%) rotateZ(calc(-1 * (11 * 1deg)));
+  transform-origin: 0 100%;
+
+  overflow: hidden;
+}
+
+.image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scale(1.2) rotateZ(calc(11 * 1deg));
+}
+
+.headings {
+  flex: 0 0 55vw;
+  margin: 0;
+}
+
+.headings :where(h1, h2) {
+  font-family: "Secular One", sans-serif;
+  margin: 0;
+}
+
+.headings h1 {
+  font-size: var(--welcome-header-mainline-font-size);
+  font-weight: 900;
+}
+
+.headings h2 {
+  font-size: var(--welcome-header-subline-font-size);
+  font-weight: 300;
+}