From fe785f6ed3ba8f4f982b8d8b7b26e777b78e2790 Mon Sep 17 00:00:00 2001 From: Sebin Nyshkim Date: Mon, 23 Jan 2023 02:02:35 +0100 Subject: [PATCH] chore: add header template for Mastodon --- card/header/mastodon/index.html | 44 ++++++++++ card/header/mastodon/style.css | 139 ++++++++++++++++++++++++++++++++ 2 files changed, 183 insertions(+) create mode 100644 card/header/mastodon/index.html create mode 100644 card/header/mastodon/style.css diff --git a/card/header/mastodon/index.html b/card/header/mastodon/index.html new file mode 100644 index 0000000..ec55122 --- /dev/null +++ b/card/header/mastodon/index.html @@ -0,0 +1,44 @@ + + + + + + + Document + + + +
+
+ Sebin Smug Icon +
+
+

Sebin Nyshkim

+

+ + + + SebinNyshkim + + + + + + @SebinNyshkim + + + + + @SebinNyshkim@meow.social + + + + + Sebin Nyshkim#8877 + +

+
+
+ + + diff --git a/card/header/mastodon/style.css b/card/header/mastodon/style.css new file mode 100644 index 0000000..cfb57ac --- /dev/null +++ b/card/header/mastodon/style.css @@ -0,0 +1,139 @@ +@import "../../../src/assets/fonts/exo/exo.css"; + +:root { + font-size: 20px; + color: #fff; + + --theme-c-muted-blue: #22759d; + --theme-c-amaranth: #e93f3f; + --theme-c-deep-purple: #33124a; + --theme-c-charcoal: #303030; + + --container-box-shadow: 1vw 1vw 4vw rgba(0, 0, 0, 0.7); + --welcome-header-mainline-font-size: 6vw; + --welcome-header-subline-font-size: 2vw; + + --icon-size: calc(var(--welcome-header-subline-font-size) * 1.25); + + --page-background: radial-gradient(circle at bottom right, + var(--theme-c-amaranth) 5%, + transparent 50%), + radial-gradient(circle at top left, + var(--theme-c-muted-blue) 5%, + var(--theme-c-deep-purple) 100%); +} + +*, +*::before, +*::after { + margin: 0; + box-sizing: border-box; + /* line-height: 1.5; */ +} + +body { + display: flex; + flex-flow: row nowrap; + justify-content: center; + align-items: center; + + min-height: 100vh; +} + +main::before, +main::after { + content: ""; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +main::before { + background: url(../../../src/assets/subtle-prism.svg); + mix-blend-mode: multiply; + z-index: -1; + transform: scale(1.5); +} + +main::after { + background: var(--page-background); + z-index: -2; +} + +.flex { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + + flex: 0 0 72vw; +} + +.flex>* { + flex: 0 0 auto; +} + +.image { + flex: 0 0 60vh; + max-height: 100vh; +} + +.image img { + display: block; + width: 100%; + border-radius: 100%; + border: 1vw solid #fff; + box-shadow: var(--container-box-shadow); +} + +.headings { + flex: 0 0 50vw; + margin: 0; +} + +.headings :where(h1, h2) { + font-family: "Exo", sans-serif; + text-align: center; + font-style: italic; + margin: 0; +} + +.headings h1 { + font-size: var(--welcome-header-mainline-font-size); + font-weight: 900; + line-height: 1.75; +} + +.headings h2 { + font-size: var(--welcome-header-subline-font-size); + font-weight: 300; + display: flex; + flex-flow: row wrap; + justify-content: space-evenly; + line-height: 1.75; +} + +.headings .contact { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; +} + +.headings .icon, +.headings .handle { + flex: 0 0 auto; +} + +.headings .icon { + flex: 0 0 var(--icon-size); + width: var(--icon-size); + height: var(--icon-size); + margin: 0 0.375em 0 0; +} + +.headings .icon { + fill: #fff; +}