Update and format pages
This commit is contained in:
parent
6bfb79ef43
commit
a709eec8f0
2 changed files with 86 additions and 106 deletions
|
|
@ -28,13 +28,13 @@ const { title } = Astro.props;
|
|||
:root {
|
||||
/* Radix colors – see https://www.radix-ui.com/colors */
|
||||
|
||||
--gray-1: hsl(0, 0%, 99.0%);
|
||||
--gray-1: hsl(0, 0%, 99%);
|
||||
--gray-2: hsl(0, 0%, 97.5%);
|
||||
--gray-3: hsl(0, 0%, 94.6%);
|
||||
--gray-4: hsl(0, 0%, 92.0%);
|
||||
--gray-4: hsl(0, 0%, 92%);
|
||||
--gray-5: hsl(0, 0%, 89.5%);
|
||||
--gray-6: hsl(0, 0%, 86.8%);
|
||||
--gray-7: hsl(0, 0%, 83.0%);
|
||||
--gray-7: hsl(0, 0%, 83%);
|
||||
--gray-8: hsl(0, 0%, 73.2%);
|
||||
--gray-9: hsl(0, 0%, 55.2%);
|
||||
--gray-10: hsl(0, 0%, 50.3%);
|
||||
|
|
@ -49,10 +49,10 @@ const { title } = Astro.props;
|
|||
--accent-6: hsl(360, 81.7%, 87.8%);
|
||||
--accent-7: hsl(359, 74.2%, 81.7%);
|
||||
--accent-8: hsl(359, 69.5%, 74.3%);
|
||||
--accent-9: hsl(358, 75.0%, 59.0%);
|
||||
--accent-9: hsl(358, 75%, 59%);
|
||||
--accent-10: hsl(358, 67.4%, 54.6%);
|
||||
--accent-11: hsl(358, 65.0%, 47.0%);
|
||||
--accent-12: hsl(350, 63.0%, 24.0%);
|
||||
--accent-11: hsl(358, 65%, 47%);
|
||||
--accent-12: hsl(350, 63%, 24%);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -65,23 +65,23 @@ const { title } = Astro.props;
|
|||
--gray-6: hsl(0, 0%, 24.7%);
|
||||
--gray-7: hsl(0, 0%, 29.1%);
|
||||
--gray-8: hsl(0, 0%, 37.5%);
|
||||
--gray-9: hsl(0, 0%, 43.0%);
|
||||
--gray-9: hsl(0, 0%, 43%);
|
||||
--gray-10: hsl(0, 0%, 50.7%);
|
||||
--gray-11: hsl(0, 0%, 69.5%);
|
||||
--gray-12: hsl(0, 0%, 93.5%);
|
||||
|
||||
--accent-1: hsl(353, 23.0%, 9.8%);
|
||||
--accent-1: hsl(353, 23%, 9.8%);
|
||||
--accent-2: hsl(354, 30.2%, 12.4%);
|
||||
--accent-3: hsl(353, 40.8%, 16.4%);
|
||||
--accent-4: hsl(353, 46.3%, 19.2%);
|
||||
--accent-5: hsl(353, 51.2%, 22.1%);
|
||||
--accent-6: hsl(353, 57.3%, 26.2%);
|
||||
--accent-7: hsl(354, 65.7%, 33.2%);
|
||||
--accent-8: hsl(358, 75.0%, 47.1%);
|
||||
--accent-9: hsl(358, 75.0%, 59.0%);
|
||||
--accent-8: hsl(358, 75%, 47.1%);
|
||||
--accent-9: hsl(358, 75%, 59%);
|
||||
--accent-10: hsl(359, 84.8%, 67.6%);
|
||||
--accent-11: hsl(358, 100%, 76.0%);
|
||||
--accent-12: hsl(350, 100%, 91.0%);
|
||||
--accent-11: hsl(358, 100%, 76%);
|
||||
--accent-12: hsl(350, 100%, 91%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -97,20 +97,6 @@ const { title } = Astro.props;
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: clamp(1.5rem, 4vw, 1.75rem);
|
||||
font-family: "Ysabeau", sans-serif;
|
||||
line-height: 1.4;
|
||||
background-color: var(--gray-1);
|
||||
color: var(--gray-12);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
/* body {
|
||||
font-size: 2rem;
|
||||
} */
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
|
|
@ -118,6 +104,14 @@ const { title } = Astro.props;
|
|||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
||||
font-family: "Ysabeau", sans-serif;
|
||||
line-height: 1.4;
|
||||
background-color: var(--gray-1);
|
||||
color: var(--gray-12);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
|
|
@ -175,4 +169,11 @@ const { title } = Astro.props;
|
|||
margin-right: 0.5em;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1080px;
|
||||
padding: 1.5rem;
|
||||
margin: 3rem auto;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,105 +4,84 @@ import Layout from "../layouts/Layout.astro";
|
|||
|
||||
<Layout title="Ondřej Nývlt">
|
||||
<main class="container">
|
||||
<div class="section">
|
||||
<hgroup class="header section__content">
|
||||
<h1>
|
||||
I’m <em>Ondřej Nývlt</em>,
|
||||
</h1>
|
||||
<p>
|
||||
a designer, software engineer, and student of social & cultural anthtropology.
|
||||
<p class="intro space-after">
|
||||
I’m <em>Ondřej Nývlt</em>, a designer, software engineer, and student
|
||||
of social & cultural anthtropology.
|
||||
</p>
|
||||
</hgroup>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section__header">About me</h2>
|
||||
<ul class="section__content about par-space">
|
||||
<li>I mostly make web apps. I try to stay close to the web platform and I prefer <a class="link" href="https://hypermedia.systems/">hypermedia driven applications</a> to SPAs.
|
||||
<li>I like a good typography and hate repetitive work. That’s why I experiment with computational typesetting and <a class="link" href="https://docs.racket-lang.org/pollen">Pollen</a> for my school theses.
|
||||
<li>I contribute to open-source projects at <a class="link" href="https://nolog.cz">nolog.cz</a>, activist IT collective
|
||||
which provides privacy-focused infrastructure to social movements (You should consider <a class="link" href="https://nolog.cz/support/">supporting them</a>).
|
||||
<section class="space-after">
|
||||
<ul class="list">
|
||||
<li>I make web apps that look nice and work well for everyone.</li>
|
||||
<li>I experiment with <a
|
||||
class="link"
|
||||
href="https://docs.racket-lang.org/pollen/index.html"
|
||||
>computational typesetting</a
|
||||
> for my school theses.
|
||||
</li>
|
||||
<li>I contribute to <a class="link" href="https://nolog.cz">nolog.cz</a>,
|
||||
a collective of people who provides social movements with privacy-focused
|
||||
IT infrastructure.
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<nav class="section par-space">
|
||||
<h2 class="section__header">Work</h2>
|
||||
<div class="section__content nav">
|
||||
<p>My software projects are to be found at</p>
|
||||
<ul>
|
||||
<li><a class="link" href="https://github.com/onvlt">github</a> and
|
||||
<li><a class="link" href="https://git.nolog.cz/uwundrej">git.nolog.cz</a>
|
||||
</ul>.
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="section">
|
||||
<h2 class="section__header">Contact</h2>
|
||||
<div class="section__content nav">
|
||||
<p>I’m at</p>
|
||||
<ul>
|
||||
<li><a class="link" href="https://twitter.com/uwundrej">twitter</a>,
|
||||
<li><a class="link" href="https://witter.cz/@uwundrej">mastodon</a> and
|
||||
<li><a class="link" href="mailto:ondrej@nyv.lt">e-mail</a>
|
||||
</ul>.
|
||||
</div>
|
||||
</nav>
|
||||
<section class="contact-section">
|
||||
<h2>Contact:</h2>
|
||||
<ul class="contact-list">
|
||||
<li>
|
||||
<a class="link" href='https://witter.cz/@uwundrej"'>Mastodon</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link" href="https://twitter.com/uwundrej">X</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link" href="https://github.com/onvlt">GitHub</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link" href="https://git.nolog.cz/uwundrej">git.nolog.cz</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
padding: 1rem;
|
||||
margin: 3rem auto;
|
||||
word-wrap: break-word;
|
||||
.intro {
|
||||
max-width: 40ch;
|
||||
}
|
||||
.list {
|
||||
--bullet-offset: 1em;
|
||||
}
|
||||
|
||||
.section__header {
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5em;
|
||||
.list li {
|
||||
padding-inline-start: var(--bullet-offset);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
.section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
.list li::before {
|
||||
content: "–";
|
||||
width: var(--bullet-offset);
|
||||
display: inline-block;
|
||||
margin-inline-start: calc(-1 * var(--bullet-offset));
|
||||
color: var(--accent-12);
|
||||
}
|
||||
|
||||
.section__header {
|
||||
grid-column: 1 / 3;
|
||||
text-align: right;
|
||||
.contact-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 2rem;
|
||||
}
|
||||
|
||||
.section__content {
|
||||
grid-column: 4 / 12;
|
||||
}
|
||||
.contact-section h2 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-weight: 700;
|
||||
margin-bottom: 3rem;
|
||||
font-size: 2.25rem;
|
||||
line-height: 1.3;
|
||||
.contact-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 1.5rem;
|
||||
}
|
||||
|
||||
.header > * {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.about li {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.nav p {
|
||||
margin-right: 0.6rem;
|
||||
}
|
||||
|
||||
.nav * {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.par-space {
|
||||
margin-bottom: 1em;
|
||||
.space-after {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue