diff --git a/card/header/twitter/index.html b/card/header/twitter/index.html new file mode 100644 index 0000000..ec55122 --- /dev/null +++ b/card/header/twitter/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/twitter/style.css b/card/header/twitter/style.css new file mode 100644 index 0000000..ddfade1 --- /dev/null +++ b/card/header/twitter/style.css @@ -0,0 +1,143 @@ +@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: 8vw; + --welcome-header-subline-font-size: 2.5vw; + + --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-evenly; + align-items: center; + + flex: 0 0 100%; +} + +.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 60vw; + 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; +}