website Changeset - c64e52d9e62c · Conservancy Kallithea

Changeset - c64e52d9e62c

Parent rev.

Child rev.

[Not reviewed]

0 2 0

Ben Sturmfels (bsturmfels) - 16 months ago 2023-02-08 11:44:44
ben@sturm.com.au

Improve the .small-left/right and .medium-left/right classes

2 files changed with 17 insertions and 9 deletions:

www/conservancy/static/css/conservancy-bigscreen.css

www/conservancy/static/css/conservancy.css

0 comments (0 inline, 0 general)

www/conservancy/static/css/conservancy-bigscreen.css

➞

Show inline comments

 /* "Big screen" means, approximately, bigger than a phone */
 .column:nth-child(odd) {
     clear: both;
     float: left;
     width: 49%;
+}
 .column:nth-child(even) {
     float: right;
     width: 49%;
+}
 li.column {
     margin-bottom: 1em;
+}
 .left {
     float: left;
     margin-right: 1.5em;
+}
 .right {
     float: right;
     margin-left: 1.5em;
+}
 .picture {
     width: 30em;
     max-width: 35%;
     padding: .75em;
+}
 dl {
     border: 3px double #ccc;
     padding: 0.5em;
+}
 dt {
     clear: left;
     float: left;
     text-align: center;
     width: 10em;
     margin: 0em 1em 0.5em 0.5em;
     font-weight: bold;
     color: green;
+}
 dt:after {
     content: ":";
+}
 dd {
     margin: 0 0 2.5em 11.5em;
+}
 .small-left {
     float: left;
     height: auto;
     width: 25%;
     margin-left: 1.2em;
     margin-bottom: .4em;
     max-width: 20rem;
     margin: 0 2rem 0.5rem 0;
+}
 .small-right {
     float: right;
     height: auto;
     width: 25%;
     margin-right: 1.2em;
     margin-bottom: .4em;
     max-width: 20rem;
     margin: 0 0 0.5rem 2rem;
+}
 .medium-left {
     float: left;
     height: auto;
     max-width: 30rem;
     margin: 0 2rem 0.5rem 0;
+}
 .medium-right {
     float: right;
     height: auto;
     width: 50%;
     margin-left: .7em;
     margin-bottom: .7em;
     max-width: 30rem;
     margin: 0 0 0.5rem 2rem;
+}
 img.blog-right {
     float: right;
     padding-left: 1em;
     margin: .25em;
     min-width: 8%;
     max-width: 30%;
     width: auto;
+}
 #contractpatch-follow {
     float: left;
     width: 30em;
     margin-right: 1.5em;
     /* Below from .shaded, but we don't want the class on non-big screens. */
     padding: .75em;
     background: #F0FFB8;
+}
 #contractpatch-follow h2 {
     font-size: large;
+}
 #contractpatch-blog h3:first-child {
     /* Don't let the first blog headline clear below #contractpatch-follow. */
     clear: right;
+}
 .supporter-form-input {
     margin-bottom: .5em;
+}
 .supporter-form-input label,
 .supporter-form-input .input-group {
     display: inline-block;
     width: 49%;
+}
 .supporter-form-input label {
     text-align: right;
     padding-right: .3em;
+}
 .form-error, .supporter-form-input p {
     margin-left: 51%;
+}

www/conservancy/static/css/conservancy.css

➞

Show inline comments

 * { margin: 0; padding: 0; }
 img { border: 0; }
 body { margin: 0; padding: 0; }
 .clear { clear: both; }
 .hidden { display: none; }
 p, h1, h2, h3, h4, h5, h6, #mainContent ul, #mainContent ol {
   /* margin-top: 1em; */
   margin-bottom: 1em;
+}
 p {
   line-height: 1.6;
+}
 html {
   /* Standard colorss. */
   --khaki-green: #587733;
   --light-green: #afe478;
   --washed-green: #daf4be;
   --light-blue: #92d4d1;
   --washed-blue: #ddfbfa;
   --navy: #224c57;
   --orange: #ec6343;
   --orange-dim: #e05340;
   --orange-dimmer: #ce3520;
+}
 /* Some Tachyons-like classes to apply those standard colors. */
 .bg-light-blue { background: var(--light-blue); }
 .bg-orange { background: var(--orange); }
 .orange { color: var(--orange); }
 .b--light-blue { border-color: var(--light-blue); }
 .navy { color: var(--navy); }
 body {
   /* Native font stack as per Bootstrap 5.1. */
   font-family:
     system-ui,
     -apple-system,
     "Segoe UI",
     Roboto,
     "Helvetica Neue", Arial,
     "Noto Sans",
     "Liberation Sans",
     sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: .875rem;
   color: #333;
+}
 a {
   text-decoration: none;
   color: var(--navy);
   transition: all .1s ease-out;
   font-weight: bold;
+}
 a:hover { text-decoration: underline; }
 /* Missing links */
 a, form { position: relative; }
 .fixme,
 a[href$="#fixme"]:before,
 form[action$="#fixme"]:before {
   border: 1px solid var(--orange);
   border-radius: 6px;
   content: '?';
   font-size: 0.6rem;
   color: var(--orange);
   position: absolute;
   top: -4px;
   right: -4px;
   padding: 1px;
   background: yellow;
   /* opacity: 0.8; */
   width: 12px;
   text-align: center;
+}
 input:focus {
   z-index: 3;
   border-color: #86b7fe;
   box-shadow: 0 0 0 .25rem rgb(236, 99, 67, .5);
 };
 video {
     max-width: 100%;
     margin: 1rem 0;
+}
 a.read-more {
     cursor: pointer;
     font-style: italic;
+}
 .btn-orange {
   color: white;
   background: var(--orange);
   border: 1px solid var(--orange-dim);
+}
 .btn-orange:hover, .btn-orange:active {
   background: var(--orange-dim);
   text-decoration: none;
   box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
+}
 .btn-orange:focus {
   box-shadow: 0 0 0 .25rem var(--orange-dim);
+}
 .btn-white {
   color: var(--orange);
   background: white;
   border: 1px solid #777;
+}
 .btn-white:hover, .btn-white:active {
   background: #eee;
   text-decoration: none;
   box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
+}
 .btn-white:focus {
   box-shadow: 0 0 0 .25rem #ddd;
+}
 a svg {
   transition: all .2s ease;
+}
 a:hover svg {
   transform: scale(1.1);
+}
 .toggle-control  {
 cursor: pointer;
 text-decoration: none; color: #557733;
+}
 .toggle-control:hover { text-decoration: underline; color: #577632; }
 /* FIXME: We should do this:          */
 /* http://www.waypointarts.com/blog/2013/06/29/fixing-a-side-bar-while-scrolling-until-bottom */
 .donate-sidebar {
   background: var(--light-green) no-repeat;
   position: sticky;
   bottom: 0;
   width: auto;
   padding: 0.5rem 1rem;
   margin: 0 -1rem;
   border-radius: 8px 8px 0 0;
   border: 1px solid #90d468;
+}
 .donate-sidebar:hover {
   background: #a0d870;
+}
 p.footnote {
     font-size: 85%;
+}
 h1 { margin-top: .75em; margin-bottom: .5em; }
 h2 { margin-top: .75em; margin-bottom: .5em; }
 h3 { margin-top: .6em; margin-bottom: .4em; }
 #mainContent ul, #mainContent ol { padding-left: 1.5em; }
 .internalNavigate { width: 19%; float: right; }
 #mainContent .internalNavigate ul { list-style-type: none; padding-left: 0; }
 .internalNavigate ul li { margin-top: .3em; margin-bottom: .3em; }
 /* Header */
 body > header {
   /* background: linear-gradient(to top right, white, white, var(--washed-blue) 80%); */
   overflow: auto; /* Prevent logo top margin popping out. */
+}
 #conservancyheader img {
   max-height: 75px;
   width: auto;
+}
 @media screen and (min-width: 30em) {
   #conservancyheader img {
     max-height: 90px;
+  }
+}
 /* Navigation bar */
 #navbar-outer {
   background: var(--navy);
   position: relative;
   z-index: 100;
+}
 #navbar ul {
   list-style: none;
   text-transform: uppercase;
   padding: 0;
+}
 #navbar li {
   background: var(--navy);
   position: relative;
   padding-left: .25rem;
   padding-right: .25rem;
+}
 @media screen and (min-width: 30em) {
   #navbar li {
     padding-left: .5rem;
     padding-right: .5rem;
+  }
+}
 #navbar li > a {
   display: inline-block;
   color: white;
   text-decoration: none;
   padding: 0.25rem 0.25rem 0;
   /* Invisible borders to keep things even. */
   border-top: 0.20rem solid var(--navy);  /* A little less here. */
   border-bottom: 0.25rem solid var(--navy);
+}
 @media screen and (min-width: 30em) {
   #navbar li > a {
     padding-left: .5rem;
     padding-right: .5rem
+  }
+}
 .press-articles  li {
     list-style-type: none; /* Remove bullets */
     padding: 0; /* Remove padding */
     margin: 0; /* Remove margins */
     margin-top: 1.1em; margin-bottom: 1.1em;
+}
 #navbar li a:hover, #navbar li a:focus {
   border-bottom: 0.25rem solid var(--light-green);
+}
 #navbar li { padding-bottom: 0.25rem; }
 /* Navbar submenus */
 #navbar li ul {
   display: none;
   z-index: 100;
   position: absolute;
   top: 100%;
   left: 0;
   min-width: 15rem;
   text-transform: none;
+}
 #navbar li ul a {
   font-weight: normal;
+}
 #navbar li:hover ul {
   display: block;
+}
 /* Right-align the second last and last sub-menus. */
 #navbar li:nth-last-child(2) ul, #navbar li:nth-last-child(1) ul {
   left: auto;
   right: 0;
   text-align: right;
+}
 #menu-icon:active, #search-icon:active {
   transform: scale(1.1);
+}
 #navbar-outer { min-height: .5rem; }
 #navbar.mobile {
   display: block;
   max-width: 32rem;
+}
 #navbar.mobile.search { display: block; }
 #navbar.mobile li {
   display: block;
+}
 #navbar.mobile ul {
   padding-left: .5rem;
   padding-right: .5rem;
   display: block !important;
   position: relative !important;
   top: auto !important;
   left: 0 !important;
   right: auto !important;
   text-align: left !important;
+}
 #navbar.mobile > ul > li {
   padding-top: .5rem;
   padding-bottom: .5rem;
+}
 #navbar.mobile > ul > li {
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
 #navbar.mobile li ul {
   margin-left: .5rem;
+}
 .fundraiser-top-text {
   background: #F0FFB8;
   margin-top: -.5rem;
+}
 .fundraiser-top-text p {
   font-size: 110%;
   font-style: italic;
   text-align: center;
+}
 #siteprogressbar .goalText {
   color: #557733;
+}
 #siteprogressbar .soFarText {
   color: white;
+}
 #siteprogressbar .exceeded {
   color: var(--khaki-green);
+}
 #siteprogressbar .progress {
   background: linear-gradient(var(--khaki-green), #84a377, var(--khaki-green));
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   border-top-left-radius: 16px;
   border-bottom-left-radius: 16px;
   border: 1px solid #3f4439;
+}
 #siteprogressbar .final-goal {
   border-top-right-radius: 16px;
   border-bottom-right-radius: 16px;
   border: 1px solid #9bac88;
   border-left: none;
+}
 #siteprogressbar .progress.matched {
   border-top-right-radius: 16px;
   border-bottom-right-radius: 16px;
   font-size: 120%;
+}
 #siteprogressbar .progress.exceeded {
   border-top-right-radius: 16px;
   border-bottom-right-radius: 16px;
   background: linear-gradient(#84a377, var(--washed-green), #84a377);
+}
 #siteprogressbar {
   background: linear-gradient(var(--washed-green), white, var(--washed-green));
   box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
   line-height: 1.3;
   border-radius: 16px;
+}
 #container #mainContent {
     max-width: 50em;
     margin: 0 0 2rem;
     padding: 0;
     background: #ffffff;
     flex: 1 1 auto;
+}
 #container #sidebar {
   background-color: #e6eae1;
   padding: 1px 0.5rem 2rem;
   margin: 1rem -1rem 0;
+}
 @media screen and (min-width: 30em) {
   #container {
     display: flex;
+  }
   #container #sidebar {
     flex: 1 0 15em;
     margin: 1rem 0rem 1rem 2rem;
+  }
+}
 #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.Sponsors ul li.Sponsors,
 #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.Transparency ul li.Transparency,
 #container #sidebar.License ul li.License,
 #container #sidebar.Current ul li.Current,
 #container #sidebar.Services ul li.Services,
 #container #sidebar.Applying ul li.Applying,
 #container #sidebar.VizioTopBar ul li.VizioTopBar,
 #container #sidebar.VizioMain ul li.VizioMain,
 #container #sidebar.VizioPressRelease ul li.VizioPressRelase,
 #container #sidebar.VizioComplaint ul li.VizioComplaint,
 #container #sidebar.VizioQandA ul li.VizioQandA,
 #container #sidebar.VizioPressKit ul li.VizioPressKit,
 #container #sidebar.VizioPhotoAssets ul li.VizioPhotoAssets,
 #container #sidebar.VizioPress ul li.VizioPress,
 #container #sidebar.IssuesInTheNews ul li.IssuesInTheNews,
 #container #sidebar.Glossary ul li.Glossary,
 #container #sidebar.CopyleftCompliance ul li.CopyleftCompliance,
 #container #sidebar.HelpComply ul li.HelpComply,
 #container #sidebar.CopyleftPrinciples ul li.CopyleftPrinciples,
 #container #sidebar.EnforcementStrategy ul li.EnforcementStrategy,
 #container #sidebar.CopyleftCompliance ul li.CopyleftCompliance,
 #container #sidebar.LiberateFirmware ul li.LiberateFirmware,
 #container #sidebar.PastLawsuits ul li.PastLawsuits,
 #container #sidebar.CopyleftOrg ul li.CopyleftOrg /* Never put a comma here */
+{
     color: #000033;
     font-weight: bold;
     background: #e3e6e0;
+}
 #container #sidebar h2 {
     text-align: center;
     font-size: 1.25em;
     margin: 1.5em 0 0.8em 0;
+}
 #container #sidebar hr {
     width: 75%;
     float: center;
     clear: all;
+}
 .shaded { background: #F0FFB8; padding: .1em .5em; margin-bottom: .5em; }
 .columns {
+}
 .column h2 { font-size: 1.25em; }
 .column h3 { font-size: 1.1em; }
 .column hr { width: 50%; margin-left: auto; margin-right: auto; }
 .column h2 a { text-decoration: none; color: #000000; }
 .column h2 a:hover { text-decoration: underline; }
 #conservancyfooter {
   border-top: 1px solid #ccc;
   text-align: center;
   overflow: auto;
   margin: 0;
+}
 @media screen and (min-width: 30em) {
   #conservancyfooter {
     margin: 0;
+  }
+}
 .continued {
   display: block;
   font-size: .9em;
   font-weight: bold;
   margin-top: 1em;
   margin-bottom: 1em;
+}
 .date, .blog-tags, .blog-comments {
   font-style: italic;
   font-size: .9em;
   margin-bottom: .3em;
   margin-top: .3em;
+}
 a.feedlink /* RSS icon */ { display: block; float: right; font-size: 10pt; }
 blockquote, div.quote /* div.quote is used by conservancy whitepaper */ {
   margin-left: 2em;
   margin-right: 2em;
   padding-left: 1em;
   padding-right: 1em;

0 comments (0 inline, 0 general)