midgard
/
website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve lay-out

This commit is contained in:
Midgard 2020-06-02 18:41:46 +02:00
parent c59205afa3
commit dfaf6a191f
Signed by untrusted user who does not match committer: midgard
GPG Key ID: 511C112F1331BBB4
2 changed files with 72 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
index.html
View File

@ -14,29 +14,31 @@
</h1>
</header>
<section id="blog">
<h2>Blog</h2>
<ul>{blog_posts}
</ul>
</section>
<main>
<section id="blog" class="links">
<h2>Blog</h2>
<ul>{blog_posts}
</ul>
</section>
<section id="projects">
<h2>Projects</h2>
<ul>
<li><a href="/projects/osm-frontend/">
<div class="title">OpenStreetMap frontend</div>
<div class="summary">Building a great frontend for a great map</div>
</a></li>
<li><a href="/projects/ipo/">
<div class="title">ipo</div>
<div class="summary">A Python library that brings shell-like piping to Python</div>
</a></li>
<li><a href="/projects/itinero-mapmatcher/">
<div class="title">Itinero Mapmatcher</div>
<div class="summary">My internship: snapping GPX traces to the road network</div>
</a></li>
</ul>
</section>
<section id="projects" class="links">
<h2>Projects</h2>
<ul>
<li><a href="/projects/osm-frontend/">
<div class="title">OpenStreetMap frontend</div>
<div class="summary">Building a great frontend for a great map</div>
</a></li>
<li><a href="/projects/ipo/">
<div class="title">ipo</div>
<div class="summary">A Python library that brings shell-like piping to Python</div>
</a></li>
<li><a href="/projects/itinero-mapmatcher/">
<div class="title">Itinero Mapmatcher</div>
<div class="summary">My internship: snapping GPX traces to the road network</div>
</a></li>
</ul>
</section>
</main>
<aside id="social">
<a id="rss-link" href="/rss/">Follow with RSS</a>

114
public/main.css
View File

@ -25,72 +25,41 @@ a:hover {
body {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto auto auto auto 1fr;
grid-template-areas:
"header"
"blog"
"projects"
"social"
"footer";
align-items: start;
}
body.blog {
grid-template-rows: auto auto auto 1fr;
grid-template-areas:
"header"
"main"
"social"
"footer";
align-items: start;
}
header {
grid-area: header;
}
main {
grid-area: main;
}
.blog main {
justify-self: center;
}
#blog {
grid-area: blog;
}
#projects {
grid-area: projects;
}
#social {
grid-area: social;
align-self: start;
}
footer {
grid-area: footer;
align-self: end;
}
@media (min-width:500px) {
section {
font-size: 125%;
}
}
@media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:300px)) {
body {
grid-template-columns: 1fr 2fr;
grid-template-rows: auto;
grid-template-areas:
"header blog"
"header projects"
"social projects"
"footer footer";
gap: 1em 3em;
}
body.blog {
grid-template-rows: auto;
grid-template-columns: 27vmin 2fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header main"
"social main"
"footer footer";
}
header {
grid-area: header;
}
footer {
align-self: end;
gap: 1em 3em;
}
}
@ -98,8 +67,9 @@ footer {
body {
padding: 2em 2em 0;
}
section {
body:not(.blog) main {
font-size: 150%;
margin-left: 4em;
}
}
@ -107,19 +77,17 @@ footer {
body {
padding: 4em 4em 0;
grid-template-columns: 1fr 2fr 2fr;
grid-template-areas:
"header blog projects"
"social blog projects"
"footer footer footer";
grid-template-columns: 250px 1fr;
gap: 1em 4em;
}
body.blog {
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas:
"header main ."
"social main ."
"footer footer footer";
body:not(.blog) main {
display: flex;
margin-left: 6em;
}
body:not(.blog) main > * {
margin-right: 4em;
flex-grow: 1;
}
}
@ -136,7 +104,7 @@ footer {
text-align: left;
display: inline-block;
width: 3.4em;
width: 3.37em;
}
.wordmark span {
display: block;
@ -170,9 +138,6 @@ a.wordmark:hover span:last-child:before {
}
header {
background-color: #fff;
}
header img {
width: 25vmin;
height: 25vmin;
@ -188,9 +153,6 @@ header img, .sitename {
vertical-align: middle;
}
@media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:300px)) {
header {
background-color: transparent;
}
header img {
width: 27vmin;
height: 27vmin;
@ -211,54 +173,63 @@ header img, .sitename {
.sitename {
margin: 0.3em 0 0 0;
display: block;
font-size: 56pt;
font-size: 56.5pt;
}
}
ul {
.links ul {
padding: 0;
}
li {
.links li {
list-style: none;
margin: 1.5em 0;
}
li a {
.links li a {
display: block;
text-decoration: none;
padding: 0.2em 0.3em;
margin: 0 -0.3em;
}
li a:hover, li a:focus {
.links li a:hover, li a:focus {
background-color: #fffaf7;
}
a .summary {
.links a .summary {
font-size: 75%;
color: #333;
margin-top: 0.3em;
}
a .title {
.links a .title {
text-decoration: underline;
}
main {
.blog main {
line-height: 1.5;
max-width: 50em;
}
@media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:300px)) {
.blog main {
line-height: 1.7;
}
}
#social {
font-size: 75%;
}
#social a {
display: inline-block;
width: 4em;
text-align: center;
vertical-align: top;
text-decoration: none;
color: #000;
opacity: 0.7;
opacity: 0.5;
}
#social a:hover {
opacity: 1;
@ -279,6 +250,17 @@ main {
#irc-link:before {
background-image: url(irc.svg);
}
@media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:300px)) {
#social {
font-size: 2vmin;
margin-top: 5em;
}
}
@media (min-width:1500px) {
#social {
font-size: 100%;
}
}