Changeset - 6ae57ee2c08d
[Not reviewed]
0 1 0
Ben Sturmfels (bsturmfels) - 2 years ago 2021-10-19 13:47:58
ben@sturm.com.au
Improve sidebar and inline images on mobile.
1 file changed with 22 insertions and 16 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/css/conservancy.css
Show inline comments
...
 
@@ -333,28 +333,27 @@ body > header {
 
    width: 80%;
 
}
 

	
 
#container {
 
    width: 100%;
 
    overflow: hidden;
 
}
 
#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;
 
    margin: 0;
 
    padding: 0;
 
    background: #ffffff;
 
    flex: 1 1 auto;
 
}
 
#container #sidebar {
 
    position: absolute;
 
    width: 13em;
 
    background-color: #ccd4a3;
 
    /* Gives symmetry with the margin-top of the first h2.
 
       1.25em font-size * 1.5em margin == 1.875em */
 
    padding-bottom: 1.875em;
 
  background-color: #ccd4a3;
 
  padding: 1px 0.5rem 0.25rem;
 
  flex: 1 0 15em;
 
  margin-bottom: 1rem;
 
}
 

	
 
@media screen and (min-width: 30em) {
 
  #container {
 
    display: flex;
 
  }
 
  #container #sidebar {
 
    margin-right: 1rem;
 
  }
 
}
 

	
 
#container #sidebar li {
...
 
@@ -475,10 +474,17 @@ blockquote, div.quote /* div.quote is used by conservancy whitepaper */ {
 
    text-indent: 0;
 
    margin: .25em;
 
    min-width: 8%;
 
    max-width: 30%;
 
    width: auto;
 
    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 {
 
   width: 100%;
 
}
0 comments (0 inline, 0 general)