diff --git a/_cobalt.yml b/_cobalt.yml index 21fa71b..dbdbd59 100644 --- a/_cobalt.yml +++ b/_cobalt.yml @@ -2,3 +2,36 @@ site: title: Emi's Homepage description: A trans femby's tiny corner of the internet base_url: / + data: + socials: + - type: mastodon + url: https://www.librepunk.club/Emi + icon: mastodon + handle: "@emi@www.librepunk.club" + - type: matrix + url: https://matrix.to/#/@emi:the-apothecary.club + icon: element + handle: "@emi:the-apothecary.club" + - type: discord + url: https://discord.gg/ + icon: discord + handle: Emi#6025 + - type: gitlab + url: https://gitlab.com/Alch_Emi + icon: gitlab + handle: gitlab.com/Alch_Emi + - type: gittea + url: https://fem.mint.lgbt/Alch_Emi + icon: cup + handle: fem.mint.lgbt/Alch_Emi + - type: github + url: https://github.com/Alch-Emi + icon: github + handle: github.com/Alch-Emi + concotions: + - name: Kochab + desc: A customizable and powerful Gemini library + url: https://fem.mint.lgbt/Emi/kochab + - name: pronouns.today + desc: Pronouns generated daily + url: https://pronouns.today diff --git a/_includes/icon.html b/_includes/icon.html new file mode 100644 index 0000000..1f45a98 --- /dev/null +++ b/_includes/icon.html @@ -0,0 +1,25 @@ +{% comment %} +Displays an inline icon from an svg. The icon must be an asset in the :/assets/images/icon/ directory of the project. The icon should be viewboxed to be 24x24px, and will be inserted into the page and take on the color of the text/element it occupies. Keep track of the icon's filename in the repository. This value should be present in two places. + +1. The icon's name should also be an id applied to the main SVG element of the icon. +2. The icon's name should be passed using the name argument of the include. + +Neither of these values should include the .svg extension. + +Alt text support is included. + +Arguments: + size: The width and height the icon should have on the page + alt: Alt text to make available to screenreaders + name: See above. +{% endcomment %} + + + + {{alt}} + + diff --git a/_layouts/landing.liquid b/_layouts/landing.liquid index 325d5ff..98772ac 100644 --- a/_layouts/landing.liquid +++ b/_layouts/landing.liquid @@ -13,6 +13,42 @@ {% assign sections=page.content | split: "

. . .

" %}
+
+
+

Emi Simpson

+

+ they/she/fae/he/sea/xe/ne +

+
+

+ + ✨︎ + matrix +

+

~ local affront to god ~

+

~ hobbyist trespasser ~

+

~ hot as hell ~

+

~ enjoyer of that which is cringe ~

+
+
+
+

Whereabouts

+ +
+
+

Concoctions

+ {% for concotion in site.data.concotions %} +

{{concotion.name}} — {{concotion.desc}}

+ {% endfor %} +
+
{% for section in sections %}
{{ section }} diff --git a/static/avara-black.otf b/static/avara-black.otf new file mode 100644 index 0000000..94ae4ca --- /dev/null +++ b/static/avara-black.otf @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:52eba41ec4b13572c8b0cc80ad1926235ae6e49d632a35b44096ba03cdbbf06f +size 22408 diff --git a/static/avara.otf b/static/avara.otf new file mode 100644 index 0000000..97b8089 --- /dev/null +++ b/static/avara.otf @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e85e1b4b4370df44b724c196062ab5dd4a3582eff0db520d5674494275b0600e +size 16300 diff --git a/static/fengardo-neue.otf b/static/fengardo-neue.otf new file mode 100644 index 0000000..14ca969 --- /dev/null +++ b/static/fengardo-neue.otf @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1f4e904094bbf8c24371a6bef50942fd9e0dc4305dc969cf2a016790747ebb3c +size 47684 diff --git a/static/icon/cup.svg b/static/icon/cup.svg new file mode 100644 index 0000000..e8c60ce --- /dev/null +++ b/static/icon/cup.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icon/discord.svg b/static/icon/discord.svg new file mode 100644 index 0000000..b3f81e2 --- /dev/null +++ b/static/icon/discord.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icon/element.svg b/static/icon/element.svg new file mode 100644 index 0000000..bfc1ee0 --- /dev/null +++ b/static/icon/element.svg @@ -0,0 +1 @@ + diff --git a/static/icon/github.svg b/static/icon/github.svg new file mode 100644 index 0000000..5078100 --- /dev/null +++ b/static/icon/github.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/icon/gitlab.svg b/static/icon/gitlab.svg new file mode 100644 index 0000000..2aae4bb --- /dev/null +++ b/static/icon/gitlab.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icon/mastodon.svg b/static/icon/mastodon.svg new file mode 100644 index 0000000..a45f370 --- /dev/null +++ b/static/icon/mastodon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/style.css b/static/style.css index 529e85b..a85b7d5 100644 --- a/static/style.css +++ b/static/style.css @@ -1,7 +1,15 @@ /* Fonts */ @font-face { - font-family: Comic Mono; - src: url(comic-mono.ttf); + font-family: Avara Bold; + src: url(/static/avara.otf); + /* Normally I'm against using fonts in websites, but I mean COME ON. This isn't + * Helvetica Clone 13, it's COMIC MONO. How iconic is that??? */ +} + +/* Fonts */ +@font-face { + font-family: Fengardo Neue; + src: url(/static/fengardo-neue.otf); /* Normally I'm against using fonts in websites, but I mean COME ON. This isn't * Helvetica Clone 13, it's COMIC MONO. How iconic is that??? */ } @@ -10,19 +18,19 @@ body { margin: 0; color: white; - font-family: Comic Mono, monospace; + font-family: Fengardo Neue; font-size: 1.2rem; background-color: #141016; } /* Setting up the centered content */ -section { +main > section { display: grid; justify-content: center; padding: 50px 0; } -section > * { +main > section > * { width: min(80vw, 700px) } @@ -36,14 +44,100 @@ h1 { margin-bottom: 15px; } header { + font-family: Avara Bold; text-align: center; - height: 100vh; + height: 70vh; display: grid; align-content: center; - background-color: #2A1A35; + background-color: #280C3F; +} + +/* Styles for the cards */ +#cards { + display: grid; + grid-template-columns: repeat(3, max(20vw, 350px)); + justify-content: space-evenly; + background-color: #280C3F; + padding: 40px 0; +} +.card { + color: #280C3F; + padding: 0 10px; +} +.card h2 { + color: #280C3F; + text-align: center; +} +.card a { + color: inherit; + text-decoration: none; +} +.card:nth-child(1) { + background-color: #ff2f94; + grid-area: 1/1/3/2; +} +.card:nth-child(2) { + background-color: #ff8153; + grid-area: 2/2/4/3; +} +.card:nth-child(3) { + background-color: #ff964a; + grid-area: 3/3/5/4; +} + +/* Card Specific Details */ +.card:nth-child(1) > h2 { + margin-bottom: 0px; +} +.pronouns { + font-family: Avara Bold; + text-align: center; + margin-top: 10px; +} +.contact { + font-size: 0.9rem; + display: grid; + grid-template-columns: 1fr 0fr 1fr; +} +.matrix:hover,.email:hover { + font-size: 0; +} +.email:hover:after { + font-size: 0.9rem; + content: "emi@alchemi.dev" +} +.matrix:hover:after { + font-size: 0.9rem; + content: "@emi:the-apothecary.club" +} +#socials a { + display: grid; + grid-template-columns: 0fr 1fr; + gap: 4px; + align-items: center; + justify-content: start; +} +#socials a:hover { + text-decoration: underline; + font-weight: bold; +} +#socials { + display: grid; + justify-content: center; + margin-bottom: 20px; +} +#socials p { + margin: 8px; +} +.card:nth-child(3) { + padding: 0 30px; } /* General Markdown Styling */ +h2 { + font-family: Avara Bold; +} + code { background-color: rgba(200, 200, 200, 0.1); padding: 2px 5px; @@ -64,27 +158,11 @@ h1, a { h2 { color: #F10385; } -section { +main > section { counter-increment: section-number; - background-color: rgba(42, 26, 53, calc(1 - var(--section-number) / var(--section-count, 5))); + background-color: rgba(40, 12, 63, calc(1 - var(--section-number) / var(--section-count, 5))); +} + +svg { + fill: currentColor; } -section:nth-child(1) { --section-number: 1 } -section:nth-child(2) { --section-number: 2 } -section:nth-child(3) { --section-number: 3 } -section:nth-child(4) { --section-number: 4 } -section:nth-child(5) { --section-number: 5 } -section:nth-child(6) { --section-number: 6 } -section:nth-child(7) { --section-number: 7 } -section:nth-child(8) { --section-number: 8 } -section:nth-child(9) { --section-number: 9 } -section:nth-child(10) { --section-number: 10 } -section:nth-child(11) { --section-number: 11 } -section:nth-child(12) { --section-number: 12 } -section:nth-child(13) { --section-number: 13 } -section:nth-child(14) { --section-number: 14 } -section:nth-child(15) { --section-number: 15 } -section:nth-child(16) { --section-number: 16 } -section:nth-child(17) { --section-number: 17 } -section:nth-child(18) { --section-number: 18 } -section:nth-child(19) { --section-number: 19 } -section:nth-child(20) { --section-number: 20 }