From 2e12833d4b1431f081a2301c56dab7a65cd8b588 Mon Sep 17 00:00:00 2001 From: Sebin Nyshkim Date: Fri, 20 Jan 2023 02:55:53 +0100 Subject: [PATCH] feat: add social card template --- card/index.html | 22 ++++++++++ card/style.css | 105 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 127 insertions(+) create mode 100644 card/index.html create mode 100644 card/style.css diff --git a/card/index.html b/card/index.html new file mode 100644 index 0000000..8e4db3a --- /dev/null +++ b/card/index.html @@ -0,0 +1,22 @@ + + + + + + + Document + + + +
+
+ Sebin Smug Icon +
+
+

Viktor Kraastav

+

Character Reference Page

+
+
+ + + diff --git a/card/style.css b/card/style.css new file mode 100644 index 0000000..f15b28f --- /dev/null +++ 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; +}