responsive design

main
Ariadne Conill 2022-08-02 18:08:22 -05:00
parent 4db7bdc0da
commit 120562e20a
2 changed files with 55 additions and 34 deletions

View File

@ -1,7 +1,9 @@
<a href="/" rel="me"> <div class="h-card">
<img src="/images/me.jpg"> <a href="/" rel="me">
<h1>{{ .Site.Title }}</h1> <img src="/images/me.jpg">
</a> <h1>{{ .Site.Title }}</h1>
</a>
</div>
<ul> <ul>
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}

View File

@ -8,11 +8,6 @@ body {
line-height: 1.8rem; line-height: 1.8rem;
} }
a {
color: #ccf;
text-decoration: none;
}
nav { nav {
padding: 1em; padding: 1em;
width: 15em; width: 15em;
@ -20,43 +15,18 @@ nav {
text-align: center; text-align: center;
} }
nav a {
color: #fff;
}
nav ul { nav ul {
text-align: left; text-align: left;
list-style: none; list-style: none;
padding: 0; padding: 0;
} }
nav ul li, article a {
text-decoration: underline;
}
main { main {
padding: 1em 1em 0em 1em; padding: 1em 1em 0em 1em;
max-width: 50em; max-width: 50em;
font-size: 1.2rem; font-size: 1.2rem;
} }
h1, h2, h3, h4, h5, h6 {
margin: 0 0 1em 0;
}
.article {
padding-bottom: 1em;
}
.article a {
display: block;
margin: 0 0 0.75em 0;
}
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
margin: 0 0 0.25em 0;
}
[rel="me"] img { [rel="me"] img {
width: 15em; width: 15em;
height: 15em; height: 15em;
@ -64,6 +34,55 @@ h1, h2, h3, h4, h5, h6 {
border-radius: 15em; border-radius: 15em;
} }
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
body {
flex-direction: column;
}
nav {
width: inherit;
text-align: left;
}
[rel="me"] img {
display: none;
}
}
a {
color: #ccf;
text-decoration: none;
}
nav a {
color: #fff;
}
nav ul li, article a {
text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 1em 0;
}
.article {
padding-bottom: 1rem;
}
.article a {
display: block;
margin: 0 0 0.75rem 0;
}
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
margin: 0 0 0.25rem 0;
}
.highlight pre { .highlight pre {
background-color: #0a0316; background-color: #0a0316;
tab-size: 4; tab-size: 4;