website Changeset - 6ae57ee2c08d · Conservancy Kallithea

Changeset - 6ae57ee2c08d

Parent rev.

Child rev.

[Not reviewed]

0 1 0

Ben Sturmfels (bsturmfels) - 3 years ago 2021-10-19 13:47:58
ben@sturm.com.au

Improve sidebar and inline images on mobile.

1 file changed with 21 insertions and 15 deletions:

www/conservancy/static/css/conservancy.css

0 comments (0 inline, 0 general)

www/conservancy/static/css/conservancy.css

➞

Show inline comments

@@ ... / @@ -312,70 +312,69 @@ body > header { @@
   .soFarText {
       font-size: 8pt;
+  }
+}
 #siteprogressbar .progress {
     background: #577632;
+}
 #siteprogressbar .middle-goal {
     background: #d0d0d0;
+}
 #siteprogressbar .final-goal {
     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.
 .25em font-size * 1.5em margin == 1.875em */
     padding-bottom: 1.875em;
   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);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eaf1f1', GradientType=0);
+}
 #container #sidebar li a:hover { background: #577632; color: #fff; }
 #container #sidebar.Directors ul li.Directors,
 #container #sidebar.Eval ul li.Eval,
 #container #sidebar.Overview ul li.Overview,
 #container #sidebar.Contact ul li.Contact,
 #container #sidebar.Staff ul li.Staff,
 #container #sidebar.Outside ul li.Outside,
 #container #sidebar.Filings ul li.Filings,
 #container #sidebar.License ul li.License,
@@ ... @@
   background: #eee;
+}
 .newsgraphic { float: right; }
 .newsgraphic img { border: 1px solid #000; }
 .picture {
     text-align: center;
     font-style: italic;
+}
 .picture img {
     margin: 0 auto;
     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;
     min-width: 4%;
     max-width: 15%;
     width: auto;
+}
 .picture-tiny img {
    width: 100%;
+}
 .secondary_info { font-size: 83%; }
 .next_page_button { float: right; }
 .pagination_list { text-align: center; }

0 comments (0 inline, 0 general)