char/bio.char.lt
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Initial commit

Browse source
This commit is contained in:
Charlotte Som 2023-11-16 03:32:20 +00:00
commit 7194065af5
17 changed files with 256 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md Normal file
View file

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

BIN
assets/noto-color-emoji/NotoColorEmoji-Regular.ttf Normal file
View file

Binary file not shown.

BIN
assets/rouna/rouna-bold-webfont.eot Normal file
View file

Binary file not shown.

BIN
assets/rouna/rouna-bold-webfont.ttf Normal file
View file

Binary file not shown.

BIN
assets/rouna/rouna-bold-webfont.woff Normal file
View file

Binary file not shown.

BIN
assets/rouna/rouna-bold-webfont.woff2 Normal file
View file

Binary file not shown.

BIN
assets/rouna/rouna-medium-webfont.eot Normal file
View file

Binary file not shown.

BIN
assets/rouna/rouna-medium-webfont.ttf Normal file
View file

Binary file not shown.

BIN
assets/rouna/rouna-medium-webfont.woff Normal file
View file

Binary file not shown.

BIN
assets/rouna/rouna-medium-webfont.woff2 Normal file
View file

Binary file not shown.

BIN
assets/rouna/rouna-regular-webfont.eot Normal file
View file

Binary file not shown.

BIN
assets/rouna/rouna-regular-webfont.ttf Normal file
View file

Binary file not shown.

BIN
assets/rouna/rouna-regular-webfont.woff Normal file
View file

Binary file not shown.

BIN
assets/rouna/rouna-regular-webfont.woff2 Normal file
View file

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>