Fix some spacing and sizing on responsive

This commit is contained in:
Alex Cabal 2020-12-20 16:31:43 -06:00
parent 796ce22a9e
commit d6a19255e0
4 changed files with 40 additions and 3 deletions

View file

@ -172,8 +172,12 @@ main.front-page > picture img{
max-width: 100%; /* for responsive */ max-width: 100%; /* for responsive */
} }
main > article{ main.front-page > picture img{
margin-top: 2rem;
margin-bottom: 1rem;
}
main > article{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -468,6 +472,7 @@ main.front-page > section > h2{
border-top: 3px double var(--sub-text); border-top: 3px double var(--sub-text);
border-bottom: 3px double var(--sub-text); border-bottom: 3px double var(--sub-text);
padding: 2rem 4rem; padding: 2rem 4rem;
hyphens: none;
} }
main.front-page > section > h2::before{ main.front-page > section > h2::before{
@ -483,6 +488,7 @@ main.front-page > section > section > h3{
text-align: center; text-align: center;
font-size: 2rem; font-size: 2rem;
margin-top: 0; margin-top: 0;
hyphens: none;
} }
main.center h1{ main.center h1{
@ -625,6 +631,9 @@ code{
main.front-page > a.button{ main.front-page > a.button{
align-self: center; align-self: center;
margin-top: 4rem; margin-top: 4rem;
white-space: normal;
height: auto;
text-align: center;
} }
article.ebook ul, article.ebook ul,
@ -1821,6 +1830,29 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
} }
@media(max-width: 1000px){ @media(max-width: 1000px){
main.front-page h1{
padding: 2rem;
}
main.front-page > section > section > div{
flex-direction: column;
}
main.front-page > section > section > div figure{
order: 1;
margin: 0;
margin-bottom: 2rem;
}
main.front-page > section > section > div div{
order: 2;
width: 100%;
}
main.front-page > section > section p{
width: 100%;
}
article.ebook #more-ebooks ul{ article.ebook #more-ebooks ul{
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -1896,6 +1928,10 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
.donate table td p{ .donate table td p{
text-align: center; text-align: center;
} }
.donate table.multi tr td + td{
padding-top: 1rem;
}
} }
@media(max-width: 870px){ @media(max-width: 870px){
@ -1961,7 +1997,6 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
@media(max-width: 680px){ @media(max-width: 680px){
main.front-page h1{ main.front-page h1{
padding: 3rem;
font-size: 2.4rem; font-size: 2.4rem;
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 61 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 173 KiB

After

Width:  |  Height:  |  Size: 188 KiB

Before After
Before After

View file

@ -50,7 +50,9 @@ require_once('Core.php');
<section> <section>
<h3>Rich &amp; detailed metadata</h3> <h3>Rich &amp; detailed metadata</h3>
<div> <div>
<p>Our ebooks include complete, well-researched, and consistent metadata, including original, detailed book blurbs and links to encyclopedia sources. Perfect for machine processing or for extra-curious, technically-minded readers.</p> <div>
<p>Our ebooks include complete, well-researched, and consistent metadata, including original, detailed book blurbs and links to encyclopedia sources. Perfect for machine processing or for extra-curious, technically-minded readers.</p>
</div>
<figure> <figure>
<picture> <picture>
<source srcset="/images/metadata@2x.png 2x, /images/metadata.png 1x" type="image/png"/> <source srcset="/images/metadata@2x.png 2x, /images/metadata.png 1x" type="image/png"/>