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

Improve lay-out

Browse source
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

6
index.html
View file

@ -14,13 +14,14 @@
</h1> </h1>
</header> </header>
<section id="blog"> <main>
<section id="blog" class="links">
<h2>Blog</h2> <h2>Blog</h2>
<ul>{blog_posts} <ul>{blog_posts}
</ul> </ul>
</section> </section>
<section id="projects"> <section id="projects" class="links">
<h2>Projects</h2> <h2>Projects</h2>
<ul> <ul>
<li><a href="/projects/osm-frontend/"> <li><a href="/projects/osm-frontend/">
@ -37,6 +38,7 @@
</a></li> </a></li>
</ul> </ul>
</section> </section>
</main>
<aside id="social"> <aside id="social">
<a id="rss-link" href="/rss/">Follow with RSS</a> <a id="rss-link" href="/rss/">Follow with RSS</a>

114
public/main.css
View file

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