Add cards to homepage
This commit is contained in:
parent
8352c0f6d6
commit
e5187e4e1f
33
_cobalt.yml
33
_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
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
||||
<svg
|
||||
height="{{size}}"
|
||||
width="{{size}}"
|
||||
viewBox="0 0 24 24"
|
||||
aria-labelledby="{{alt}}">
|
||||
|
||||
<title id="{{alt}}">{{alt}}</title>
|
||||
<use xlink:href={{name | prepend: "/static/icon/" | prepend: site.base_url | append: ".svg#"| append: name}} />
|
||||
</svg>
|
||||
|
|
@ -13,6 +13,42 @@
|
|||
</header>
|
||||
{% assign sections=page.content | split: "<p>. . .</p>" %}
|
||||
<main style="--section-count: {{sections | size}}">
|
||||
<div id="cards">
|
||||
<section class="card">
|
||||
<h2> Emi Simpson </h2>
|
||||
<p class="pronouns">
|
||||
they/she/fae/he/sea/xe/ne
|
||||
</p>
|
||||
<div style="text-align: center">
|
||||
<p class="contact">
|
||||
<a class="email" href="mailto:emi@alchemi.dev">email</a>
|
||||
<span>✨︎</span>
|
||||
<a class="matrix" href="https://matrix.to/#/@emi:the-apothecary.club">matrix</a>
|
||||
</p>
|
||||
<p>~ local affront to god ~</p>
|
||||
<p>~ hobbyist trespasser ~</p>
|
||||
<p>~ hot as hell ~</p>
|
||||
<p>~ enjoyer of that which is cringe ~</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="card">
|
||||
<h2> Whereabouts </h2>
|
||||
<div id="socials">
|
||||
{% for social in site.data.socials %}
|
||||
<p><a href="{{social.url}}">
|
||||
{% include "icon.html" size: 16, name: social.icon, alt: social.type %}
|
||||
{{social.handle}}
|
||||
</a></p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
<section class="card">
|
||||
<h2> Concoctions </h2>
|
||||
{% for concotion in site.data.concotions %}
|
||||
<p><b><a href="{{concotion.url}}">{{concotion.name}}</a></b> — {{concotion.desc}}</p>
|
||||
{% endfor %}
|
||||
</section>
|
||||
</div>
|
||||
{% for section in sections %}
|
||||
<section style="--section-number: {{ forloop.index }}">
|
||||
{{ section }}
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" id="cup"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 3h15a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-2v3a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V4a1 1 0 0 1 1-1zm13 2v3h2V5h-2zM2 19h18v2H2v-2z"/></svg>
|
||||
|
After Width: | Height: | Size: 267 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" id="discord"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.076 11c.6 0 1.086.45 1.075 1 0 .55-.474 1-1.075 1C9.486 13 9 12.55 9 12s.475-1 1.076-1zm3.848 0c.601 0 1.076.45 1.076 1s-.475 1-1.076 1c-.59 0-1.075-.45-1.075-1s.474-1 1.075-1zm4.967-9C20.054 2 21 2.966 21 4.163V23l-2.211-1.995-1.245-1.176-1.317-1.25.546 1.943H5.109C3.946 20.522 3 19.556 3 18.359V4.163C3 2.966 3.946 2 5.109 2H18.89zm-3.97 13.713c2.273-.073 3.148-1.596 3.148-1.596 0-3.381-1.482-6.122-1.482-6.122-1.48-1.133-2.89-1.102-2.89-1.102l-.144.168c1.749.546 2.561 1.334 2.561 1.334a8.263 8.263 0 0 0-3.096-1.008 8.527 8.527 0 0 0-2.077.02c-.062 0-.114.011-.175.021-.36.032-1.235.168-2.335.662-.38.178-.607.305-.607.305s.854-.83 2.705-1.376l-.103-.126s-1.409-.031-2.89 1.103c0 0-1.481 2.74-1.481 6.121 0 0 .864 1.522 3.137 1.596 0 0 .38-.472.69-.871-1.307-.4-1.8-1.24-1.8-1.24s.102.074.287.179c.01.01.02.021.041.031.031.022.062.032.093.053.257.147.514.262.75.357.422.168.926.336 1.513.452a7.06 7.06 0 0 0 2.664.01 6.666 6.666 0 0 0 1.491-.451c.36-.137.761-.337 1.183-.62 0 0-.514.861-1.862 1.25.309.399.68.85.68.85z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg fill="none" version="1.1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" id="element"><path d="m100 0c-55.23 0-100 44.77-100 100 0 55.23 44.77 100 100 100 55.23 0 100-44.77 100-100 0-55.23-44.77-100-100-100zm-12.54 30.51c31.38 0 56.82 25.38 56.82 56.7 0 4.62-3.754 8.365-8.383 8.365-4.63 0-8.383-3.745-8.383-8.365 0-22.07-17.93-39.97-40.05-39.97-4.63 0-8.383-3.745-8.383-8.365s3.753-8.365 8.383-8.365zm-0.1328 25.59c4.63 0 8.383 3.745 8.383 8.365s-3.753 8.365-8.383 8.365c-22.12 0-40.05 17.89-40.05 39.97 0 4.619-3.753 8.363-8.383 8.363s-8.383-3.744-8.383-8.363c0-31.31 25.44-56.7 56.82-56.7zm73.78 22.75c4.63 0 8.383 3.745 8.383 8.365 0 31.31-25.44 56.7-56.81 56.7-4.63 0-8.383-3.745-8.383-8.365 0-4.619 3.753-8.365 8.383-8.365 22.12 0 40.05-17.89 40.05-39.97 0-4.62 3.753-8.365 8.383-8.365zm-96.87 25.59c4.63 0 8.383 3.746 8.383 8.365 0 22.07 17.93 39.97 40.05 39.97 4.63 0 8.383 3.744 8.383 8.363 0 4.621-3.753 8.365-8.383 8.365-31.38 0-56.82-25.38-56.82-56.7 0-4.619 3.753-8.365 8.383-8.365z"/></svg>
|
||||
|
After Width: | Height: | Size: 1020 B |
|
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="github">
|
||||
<g>
|
||||
<path fill="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 853 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" id="gitlab"><path fill="none" d="M0 0h24v24H0z"/><path d="M5.868 2.75L8 10h8l2.132-7.25a.4.4 0 0 1 .765-.01l3.495 10.924a.5.5 0 0 1-.173.55L12 22 1.78 14.214a.5.5 0 0 1-.172-.55L5.103 2.74a.4.4 0 0 1 .765.009z"/></svg>
|
||||
|
After Width: | Height: | Size: 301 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" id="mastodon"><path fill="none" d="M0 0h24v24H0z"/><path d="M21.258 13.99c-.274 1.41-2.456 2.955-4.962 3.254-1.306.156-2.593.3-3.965.236-2.243-.103-4.014-.535-4.014-.535 0 .218.014.426.04.62.292 2.215 2.196 2.347 4 2.41 1.82.062 3.44-.45 3.44-.45l.076 1.646s-1.274.684-3.542.81c-1.25.068-2.803-.032-4.612-.51-3.923-1.039-4.598-5.22-4.701-9.464-.031-1.26-.012-2.447-.012-3.44 0-4.34 2.843-5.611 2.843-5.611 1.433-.658 3.892-.935 6.45-.956h.062c2.557.02 5.018.298 6.451.956 0 0 2.843 1.272 2.843 5.61 0 0 .036 3.201-.397 5.424zm-2.956-5.087c0-1.074-.273-1.927-.822-2.558-.567-.631-1.308-.955-2.229-.955-1.065 0-1.871.41-2.405 1.228l-.518.87-.519-.87C11.276 5.8 10.47 5.39 9.405 5.39c-.921 0-1.663.324-2.229.955-.549.631-.822 1.484-.822 2.558v5.253h2.081V9.057c0-1.075.452-1.62 1.357-1.62 1 0 1.501.647 1.501 1.927v2.79h2.07v-2.79c0-1.28.5-1.927 1.5-1.927.905 0 1.358.545 1.358 1.62v5.1h2.08V8.902z"/></svg>
|
||||
|
After Width: | Height: | Size: 987 B |
136
static/style.css
136
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 }
|
||||
|
|
|
|||
Loading…
Reference in New Issue