Conservancy/website
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve sidebar and inline images on mobile.

Browse source
This commit is contained in:
Ben Sturmfels 2021-10-19 13:26:57 +11:00 committed by Bradley M. Kuhn
parent aa688838b3
commit 6ae57ee2c0
1 changed files with 22 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
www/conservancy/static/css/conservancy.css
View file

@ -333,28 +333,27 @@ body > header {
width: 80%; width: 80%;
} }
#container {
width: 100%;
overflow: hidden;
}
#container #mainContent { #container #mainContent {
/* All the measurements here are relative to #sidebar's 13em width.
Leave enough space for it plus 1.5em margins on either side. */
position: relative;
left: 14.5em;
width: calc(100% - 16em);
max-width: 50em; max-width: 50em;
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #ffffff; background: #ffffff;
flex: 1 1 auto;
} }
#container #sidebar { #container #sidebar {
position: absolute; background-color: #ccd4a3;
width: 13em; padding: 1px 0.5rem 0.25rem;
background-color: #ccd4a3; flex: 1 0 15em;
/* Gives symmetry with the margin-top of the first h2. margin-bottom: 1rem;
1.25em font-size * 1.5em margin == 1.875em */ }
padding-bottom: 1.875em;
@media screen and (min-width: 30em) {
#container {
display: flex;
}
#container #sidebar {
margin-right: 1rem;
}
} }
#container #sidebar li { #container #sidebar li {
@ -475,10 +474,17 @@ blockquote, div.quote /* div.quote is used by conservancy whitepaper */ {
text-indent: 0; text-indent: 0;
margin: .25em; margin: .25em;
min-width: 8%; min-width: 8%;
max-width: 30%;
width: auto; width: auto;
box-shadow: 1px 1px 2px rgba(0,0,0,.3); box-shadow: 1px 1px 2px rgba(0,0,0,.3);
margin-bottom: 1rem;
} }
@media screen and (min-width: 30em) {
.picture-small {
max-width: 20rem;
}
}
.picture-small img { .picture-small img {
width: 100%; width: 100%;
} }