Initial commit

main
Charlotte Som 2023-11-16 03:32:20 +00:00
commit 7194065af5
17 changed files with 256 additions and 0 deletions

3
README.md Normal file
View File

@ -0,0 +1,3 @@
# bio.char.lt
bio site for putting in my social profiles

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

39
css/fonts.css Normal file
View File

@ -0,0 +1,39 @@
@font-face {
font-family: 'Rouna';
src: url('/assets/rouna/rouna-bold-webfont.eot');
src: url('/assets/rouna/rouna-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/rouna/rouna-bold-webfont.woff2') format('woff2'),
url('/assets/rouna/rouna-bold-webfont.woff') format('woff'),
url('/assets/rouna/rouna-bold-webfont.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Rouna';
src: url('/assets/rouna/rouna-medium-webfont.eot');
src: url('/assets/rouna/rouna-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/rouna/rouna-medium-webfont.woff2') format('woff2'),
url('/assets/rouna/rouna-medium-webfont.woff') format('woff'),
url('/assets/rouna/rouna-medium-webfont.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Rouna';
src: url('/assets/rouna/rouna-regular-webfont.eot');
src: url('/assets/rouna/rouna-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/rouna/rouna-regular-webfont.woff2') format('woff2'),
url('/assets/rouna/rouna-regular-webfont.woff') format('woff'),
url('/assets/rouna/rouna-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Noto Color Emoji';
src: url('/assets/noto-color-emoji/NotoColorEmoji-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

111
css/styles.css Normal file
View File

@ -0,0 +1,111 @@
:root {
--bg-col: #121212;
--fg-col: #ffffff;
--accent-col: rgb(255, 167, 248);
--accent-col-2: rgb(255, 93, 241);
}
html {
color-scheme: dark;
font-family: "Rouna", 'Noto Color Emoji', sans-serif;
font-size: 14pt;
background-color: var(--bg-col);
color: var(--fg-col);
}
body {
max-width: 36em;
margin: 0 auto;
}
h1 {
margin: 0;
font-size: 2rem;
}
h2,
h3 {
margin: 0;
font-size: 1em;
}
main {
margin: 1em 0;
padding: 1em 1.618em;
border-radius: 1em;
border: 2px solid var(--fg-col);
box-sizing: content-box;
}
main > :first-child {
margin-top: 0;
}
main > :last-child {
margin-bottom: 0;
}
header {
padding-bottom: 0.5em;
margin-bottom: 1em;
border-bottom: 1px dashed #444;
}
footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
font-size: 12pt;
text-align: center;
margin-top: 1em;
padding-top: 0.5em;
border-top: 1px dashed #444;
}
section {
margin: 0.5em 0;
}
p {
margin: 0.5em 0;
}
ul, ol {
margin: 1em;
padding: 0;
}
a {
color: var(--accent-col);
text-decoration: none;
border-bottom: 1px solid var(--accent-col);
transition: 0.2s;
transition-property: color border-color;
}
a:hover,
a:focus,
a:active {
color: var(--accent-col-2);
border-color: var(--accent-col-2);
}
.inline-list {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.inline-list li {
display: inline-block;
margin: 0;
padding-inline-end: 0.5ch;
}
.inline-list li + li {
border-inline-start: 2px solid white;
padding-inline-start: 0.5ch;
}

103
index.html Normal file
View File

@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>charlotte ✨</title>
<link rel="stylesheet" href="/css/fonts.css" />
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<main>
<header>
<h1>charlotte ✨</h1>
<p>
multi-specialist interdisciplinary technician. polyglot. silly rabbit
</p>
</header>
<section id="intro">
<p>
hi, i'm charlotte! i do multimedia projects with computers. that
includes:
</p>
<ul>
<li>software</li>
<li>electronic music</li>
<li>generative animations</li>
<li>visual effects</li>
<li>&hellip; and more!</li>
</ul>
<p>
i am also the founding director &amp; chief everything officer at
<a href="https://lavender.software/">lavender software ltd</a>, where
we make software that is purple.
</p>
</section>
<section id="pronouns">
<h2>my pronouns are:</h2>
<ul class="inline-list">
<li>
<a href="https://pronouns.within.lgbt/bun">bun/buns</a>
</li>
<li><a href="https://pronouns.within.lgbt/she">she/her</a></li>
</ul>
</section>
<section id="software">
<h2>find my software:</h2>
<ul class="inline-list">
<li>
<a rel="me" href="https://github.com/char">github</a>
</li>
<li>
<a rel="me" href="https://git.lavender.software/charlotte">
git.lavender.software
</a>
</li>
</ul>
</section>
<section id="socials">
<h2>find me on the web:</h2>
<ul class="inline-list">
<li><a rel="me" href="https://twitter.com/bhop_art">twitter</a></li>
<li>
<a rel="me" href="https://soundcloud.com/char-lt">soundcloud</a>
</li>
<li>
<a rel="me" href="https://trans.enby.town/charlotte">fediverse</a>
</li>
<li>
<a rel="me" href="https://pet.bun.how">bluesky</a>
</li>
</ul>
</section>
<section id="blogs">
<h2>i write on these blogs:</h2>
<ul class="inline-list">
<li><a href="https://char.lt">char.lt</a></li>
<li><a href="https://hackery.site">hackery.site</a></li>
<li><a href="https://nullpt.rs">nullpt.rs</a></li>
</ul>
</section>
<footer>
<p>charlotte som</p>
<p aria-hidden="true">🏳️‍⚧️ ΘΔ 🏴</p>
<p><a href="https://www.anticopyright.com">anti-copyright</a></p>
</footer>
</main>
</body>
</html>