Changeset - 45166a2cb7f7
[Not reviewed]
0 1 0
Ben Sturmfels (bsturmfels) - 2 years ago 2021-10-19 02:26:57
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
...
 
@@ -324,46 +324,45 @@ body > header {
 
    background: #eeeeee;
 
}
 

	
 
#fundraiser-percentage {
 
    text-align: center;
 
}
 

	
 
.content-with-donate-sidebar {
 
    align: left;
 
    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 {
 
    text-align: center;
 
    list-style: none;
 
    padding: 3px 10px 3px 10px;
 
    margin: 5px;
 
    border: 1px solid #CCC;
 
    background: #eaf1f1;
 
    background: -moz-linear-gradient(top, #fff, #eaf1f1);
 
    background: -webkit-linear-gradient(top, #fff, #eaf1f1);
 
    background: linear-gradient(to bottom, #fff, #eaf1f1);
...
 
@@ -466,28 +465,35 @@ blockquote, div.quote /* div.quote is used by conservancy whitepaper */ {
 
    max-width: 100%;
 
}
 
.picture-small {
 
    padding-left: 1em;
 
    border: thin silver solid;
 
    padding: 0.5em;
 
    text-align: center;
 
    font-style: italic;
 
    font-size: 70%;
 
    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%;
 
}
 
.picture-tiny {
 
    padding-left: 1em;
 
    border: thin silver solid;
 
    padding: 0.5em;
 
    text-align: center;
 
    font-style: italic;
 
    font-size: 50%;
 
    text-indent: 0;
 
    margin: .25em;
0 comments (0 inline, 0 general)