onvlt/personal-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve layout

Browse source
This commit is contained in:
Ondřej 2023-09-14 21:13:52 +02:00
parent a7e10cebd7
commit 469529bd66
1 changed files with 71 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
src/pages/index.astro
View file

@ -4,77 +4,106 @@ import Layout from "../layouts/Layout.astro";
<Layout title="Ondřej Nývlt"> <Layout title="Ondřej Nývlt">
<main class="container"> <main class="container">
<hgroup class="header"> <div class="section">
<h1> <hgroup class="header section__content">
I’m <em>Ondřej Nývlt</em>, <h1>
</h1> I’m <em>Ondřej Nývlt</em>,
<p> </h1>
a designer, software engineer, and&nbsp;student of social & cultural anthtropology. <p>
</p> a designer, software engineer, and&nbsp;student of social & cultural anthtropology.
</hgroup> </p>
</hgroup>
</div>
<ul class="about par-space"> <section class="section">
<li>I do mainly web development. While I do so, I try to stay as close to the web platform as possible, <h2 class="section__header">About me</h2>
without the hype and complexity of JavaScript tooling. Instead, I’m an advocate of <a class="link" href="https://hypermedia.systems/">hypermedia-driven applications</a>. <ul class="section__content about par-space">
<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 do mainly web development. While I do so, I try to stay as close to the web platform as possible,
<li>I contribute to open-source projects at <a class="link" href="https://nolog.cz">nolog.cz</a>, activist IT collective without the hype and complexity of JavaScript tooling. Instead, I’m an advocate of <a class="link" href="https://hypermedia.systems/">hypermedia-driven applications</a>.
which provides privacy-focused infrastructure to social movements (You should consider <a class="link" href="https://nolog.cz/support/">supporting them</a>). <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.
</ul> <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>).
</ul>
</section>
<nav class="nav par-space"> <nav class="section par-space">
<h2>My software projects are to be found at</h2> <h2 class="section__header">Work</h2>
<ul> <div class="section__content nav">
<li><a class="link" href="https://github.com/onvlt">github</a> and <p>My software projects are to be found at</p>
<li><a class="link" href="https://git.nolog.cz/uwundrej">git.nolog.cz</a> <ul>
</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>
<nav class="nav"> <nav class="section">
<h2>I’m at</h2> <h2 class="section__header">Contact</h2>
<ul> <div class="section__content nav">
<li><a class="link" href="https://twitter.com/uwundrej">twitter</a>, <p>I’m at</p>
<li><a class="link" href="https://witter.cz/@uwundrej">mastodon</a> and <ul>
<li><a class="link" href="mailto:ondrej@nyv.lt">e-mail</a> <li><a class="link" href="https://twitter.com/uwundrej">twitter</a>,
</ul>. <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> </nav>
</main> </main>
</Layout> </Layout>
<style> <style>
.container { .container {
max-width: 50rem; max-width: 1200px;
padding: 1rem; padding: 1rem;
margin: 3rem auto; margin: 3rem auto;
word-wrap: break-word; word-wrap: break-word;
} }
.header { .section__header {
font-weight: 700; font-weight: 700;
margin-bottom: 1.5rem; margin-bottom: 0.5em;
} }
.header * { @media screen and (min-width: 800px) {
.section {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.section__header {
grid-column: 1 / 3;
text-align: right;
}
.section__content {
grid-column: 4 / 12;
}
}
.header {
font-weight: 700;
margin-bottom: 3rem;
font-size: 2.25rem;
line-height: 1.3;
}
.header > * {
display: inline; display: inline;
} }
.about li { .about li {
margin-bottom: 1.25em; margin-bottom: 0.5em;
} }
.nav h2 { .nav p {
display: inline; margin-right: 0.6rem;
margin-right: 0.75rem;
} }
.nav ul { .nav * {
display: inline;
}
.nav li {
display: inline; display: inline;
} }
.par-space { .par-space {
margin-bottom: 1.25em; margin-bottom: 1em;
} }
</style> </style>