website Changeset - 049df7b63e18 · Conservancy Kallithea

Changeset - 049df7b63e18

Parent rev.

Child rev.

[Not reviewed]

0 5 0

Ben Sturmfels (bsturmfels) - 2 years ago 2021-10-15 12:06:34
ben@sturm.com.au

Add mobile menu and DuckDuckGo-based search.

5 files changed with 84 insertions and 15 deletions:

www/conservancy/static/css/conservancy.css

www/conservancy/static/img/font_awesome.svg

www/conservancy/static/js/conservancy.js

www/conservancy/templates/base_conservancy.html

www/conservancy/templates/frontpage.html

0 comments (0 inline, 0 general)

www/conservancy/static/css/conservancy.css

➞

Show inline comments

@@ ... / @@ -40,65 +40,67 @@ body { @@
     "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 purple;
   border-radius: 2px;
   content: 'FIXME';
   font-size: 0.55rem;
   color: purple;
   border: 1px solid var(--orange);
   border-radius: 6px;
   content: '?';
   font-size: 0.6rem;
   color: var(--orange);
   position: absolute;
   top: -5px;
   right: -5px;
   top: -4px;
   right: -4px;
   padding: 1px;
   background: yellow;
   opacity: 0.8;
   /* opacity: 0.8; */
   width: 12px;
   text-align: center;
+}
 input:focus {
   z-index: 3;
   border-color: #86b7fe;
-  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
+  box-shadow: 0 0 0 .25rem rgb(236, 99, 67, .5);
 };
 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;
@@ ... / @@ -160,107 +162,142 @@ h3 { margin-top: .6em; margin-bottom: .4em; } @@
 /* 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);
+}
 #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
+  }
+}
 #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;
+}
 #mainContent {
   overflow: auto;
+}
 #sidebar + #mainContent {
     float: left;
+}
 #progressbar {
     height: 1.8em;
+}
 #progressbar .ui-widget-header {
     background: rgb(206, 31, 31);
+}
 #siteprogressbar .goalText {
     color: #557733;
     font-size: 10pt;
+}
 #siteprogressbar .soFarText {
     font-size: 10pt;
+}
 #siteprogressbar .progress {

www/conservancy/static/img/font_awesome.svg

➞

Show inline comments

 <?xml version="1.0" encoding="UTF-8"?>
 <!--
 Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
 License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 -->
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
   <symbol id="facebook" viewBox="0 0 512 512">
     <path fill="currentColor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path>
   </symbol>
   <symbol id="mastodon" viewBox="0 0 448 512">
     <path fill="currentColor" d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"></path>
   </symbol>
   <symbol id="twitter" viewBox="0 0 512 512">
     <path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
   </symbol>
   <symbol id="youtube" viewBox="0 0 576 512">
     <path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
   </symbol>
   <symbol id="rss-square" viewBox="0 0 448 512">
     <path fill="currentColor" d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634-5.214-80.05-69.243-143.92-149.123-149.123-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425 110.546 5.974 198.997 94.536 204.964 204.964.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432 167.83 6.025 302.21 141.191 308.205 308.205.232 6.449-4.978 11.787-11.432 11.787z"></path>
   </symbol>
   <symbol id="envelope" viewBox="0 0 512 512">
     <path fill="currentColor" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path>
   </symbol>
   <symbol id="bars" viewBox="0 0 448 512">
     <path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
   </symbol>
   <symbol id="heart" viewBox="0 0 512 512">
     <path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path>
   </symbol>
   <symbol id="search" viewBox="0 0 512 512">
     <path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
   </symbol>
 </svg>

www/conservancy/static/js/conservancy.js

➞

Show inline comments

@@ ... / @@ -79,25 +79,32 @@ $(document).ready(function() { @@
                                 $control.toggleClass('expanded');
                                 $control.find('.toggle-content').slideDown(800).fadeOut(10);
                                 $otherTextControl.find('.donate-box-highlight').fadeOut(100);
                               }, 300);
           setTimeout(function() { $control.find('.toggle-content').fadeIn(2000);
                                   $otherTextControl.find('.donate-box-highlight')
                                   .css({'font-weight': 'bold', 'font-size' : '110%' });
                                   $otherTextControl.find('.donate-box-highlight').fadeIn(10000);
                                 }, 500);
     });
     $('input[name=on0]:radio').on('change', function(event, duration) {
         var $input = $(this);
         var wantShirt = $input.val() == "wantGiftYes";
         var $form = $input.parents('form').last();
         var $tShirtSelector = $('.t-shirt-size-selector', $form);
         $('input', $tShirtSelector).prop('disabled', wantShirt);
         $('input[name=no_shipping]', $form).val(wantShirt ? '2' : '0');
         if (wantShirt) {
             $tShirtSelector.slideDown(duration);
         } else {
             $tShirtSelector.slideUp(duration);
+        }
     }).filter(':checked').trigger('change', 0);
     function toggleMenu(event) {
         $('#navbar').toggleClass('mobile');
         $('#search-query').focus();
+    }
     $('#menu-icon').on('click', toggleMenu);
     $('#search-icon').on('click', toggleMenu);
 });

www/conservancy/templates/base_conservancy.html

➞

Show inline comments

@@ ... / @@ -18,74 +18,89 @@ @@
     <link rel="stylesheet" type="text/css" media="screen" href="/css/conservancy.css" />
     <link rel="stylesheet" type="text/css" media="(min-width: 67em)" href="/css/conservancy-bigscreen.css" />
     <link rel="stylesheet" href="/css/jquery-ui-1.8.22.custom.css" />
     <link rel="stylesheet" href="/css/jquery.ui.multiprogressbar.css" />
     <script type="text/javascript" src="/js/jquery-1.7.2.js"></script>
     <script type="text/javascript" src="/js/jquery-ui-1.8.22.custom.min.js"></script>
     <script type="text/javascript" src="/js/jquery.outerhtml.js"></script>
     <script type="text/javascript" src="/js/jquery.ui.multiprogressbar.js"></script>
     <script type="text/javascript" src="/js/conservancy.js"></script>
     {% block head %}{% endblock %}
   </head>
   <body class="conservancy-{% block category %}other{% endblock %}">
     <header>
       <div class="flex-ns center mw8">
         <div class="w-60-ns">
           <h1 id="conservancyheader" class="mt2 mt3-ns mb2 mb3-ns">
             <a href="/">
               <img src="{% static 'img/conservancy-header.svg' %}" alt="Software Freedom Conservancy" class="db center mh3-ns" />
             </a>
           </h1>
         </div>
         <div class="w-40-ns mt2 mt4-ns mb2 mb2-ns mh2 pt1 flex flex-wrap justify-center items-center">
           <span id="menu-icon" class="dn-ns ph2 pointer">
             <svg style="color: var(--orange); width: 30px; height: 30px;"><use href="{% static 'img/font_awesome.svg' %}#bars"></use></svg>
           </span>
           <a href="/donate/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Donate</a>
           <a href="/sustainer/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Join</a>
           <a href="#fixme" class="f5 mh1 mv1 ph2 pv1 mr2 ttu b btn-white">Special</a>
           <a href="#fixme" class="f5 mh1 mv1 ph2 pv1 ttu b btn-white">Special</a>
           <span id="search-icon" class="dib ph2 pointer">
             <svg style="color: var(--orange); width: 30px; height: 30px;"><use href="{% static 'img/font_awesome.svg' %}#search"></use></svg>
           </span>
         </div>
       </div>
     </header>
     <div id="navbar-outer" class="mb2">
       <div id="navbar" class="center mw8 nested-list-resetb">
         <ul class="f5 b ttu flex flex-wrap justify-center">
     <div id="navbar-outer" class="mt2 mt0-ns mb2">
       <div id="navbar" class="center mw8 nested-list-resetb dn db-ns">
         <ul class="f5 ttu flex flex-wrap justify-center">
           <!-- Remaining previous menu items
           <li class="Projects"><a href="/projects/">Projects</a></li>
           <li class="npoacct"><a href="/npoacct/">NPOAcct</a></li>
           -->
           <li class="search dn-ns">
             <form method="get" action="https://duckduckgo.com" class="ml2 flex mw6">
               <input id="search-query" type="text" name="q" placeholder="Search with DuckDuckGo" class="pa2 ba b--gray br0" style="x-border-right: none; flex: 1 1 auto; width: 1%;" />
               <input type="hidden" name="sites" value="sfconservancy.org" />
               <button type="submit" class="bg-orange bn white pa2 pointer btn-orange" style="margin-left: -1px;">
                 <svg style="color: white; width: 20px; height: 20px;"><use href="{% static 'img/font_awesome.svg' %}#search"></use></svg></a>
               </button>
     </form>
           </li>
           <li class="home dn db-ns"><a href="/">Home</a></li>
-          <li class="what"><a href="#fixme">What <span class="dn di-ns">we do</span></a>
           <li class="what"><a href="#fixme">What we do</a>
             <ul>
               <li><a href="#fixme">Member Projects</a></li>
               <li><a href="/copyleft-compliance/">Copyleft Compliance</a></li>
               <li><a href="#fixme">Special</a></li>
               <li><a href="#fixme">Public Filings</a></li>
               <li><a href="#fixme">FAQs</a></li>
             </ul>
           </li>
-          <li class="who"><a href="#fixme">Who <span class="dn di-ns">we are</span></a>
           <li class="who"><a href="#fixme">Who we are</a>
             <ul>
               <li><a href="/sponsors/">Sponsors</a></li>
               <li><a href="/sustainer/">Sustainers</a></li>
               <li><a href="#fixme">Board of Directors</a></li>
               <li><a href="#fixme">Staff</a></li>
               <li><a href="#fixme">Evaluation Committee</a></li>
               <li><a href="#fixme">Outside Counsel, et alia</a></li>
               <li><a href="#fixme">Partner Organizations</a></li>
             </ul>
           </li>
           <li class="learn"><a href="#fixme">Learn</a>
             <ul>
               <li><a href="#fixme">Glossary of Terms</a></li>
               <li><a href="#fixme">Q&A</a></li>
               <li><a href="#fixme">Recommended Resources</a></li>
               <li><a href="#fixme">In The News</a></li>
             </ul>
           </li>
           <li class="news"><a href="/news/">News</a>
             <ul>
               <li><a href="#fixme">News Releases</a></li>
               <li><a href="/blog/">Blog</a></li>
               <li><a href="#fixme">In The News</a></li>
               <li><a href="#fixme">Press Kit</a></li>

www/conservancy/templates/frontpage.html

➞

Show inline comments

 {% extends "base_conservancy.html" %}
 {% load date_within %}
 {% load static %}
 {% block head %}
 <link rel="alternate" type="application/rss+xml" title="Software Freedom Conservancy Complete Feed" href="/feeds/omnibus/" />
 <link rel="alternate" type="application/rss+xml" title="Software Freedom Conservancy News" href="/feeds/news/" />
 <link rel="alternate" type="application/rss+xml" title="Software Freedom Conservancy Blogs" href="/feeds/blog/" />
 <style>
  #mainContent hr {
    /* Hide the <hr> elements in the list of news and blog items. */
    display: none;
+ }
  .date {
    font-size: 1em;
    font-style: normal;
    margin-top: 0;
+ }
  .press-release h3, .blog-entry h3 {
    margin-bottom: 0;
+ }
 </style>
 {% endblock %}
 {% block content %}
 <div class="mt3 mh2-ns pt2 flex-ns">
   <section class="w-70-ns mh2 mb3 mb0-ns pa2 ba bw1 b--light-blue overflow-auto">
     <img src="{% static 'img/remote.jpg' %}" alt="" class="fl pr2" style="width: 175px;" />
     <p class="mb0">Software Freedom Conservancy is a not-for-profit charity that
       helps promote, improve, develop, and defend Free, Libre, and Open Source
       Software (FLOSS) projects.  Conservancy provides a non-profit home and
       infrastructure for FLOSS projects.  This allows FLOSS developers to
       focus on what they do best &mdash; writing and improving FLOSS for the
       general public &mdash; while Conservancy takes care of the projects' needs that
       do not relate directly to software development and documentation. <a href="#fixme" class="orange">Learn more.</a></p>
   </section>
   <section class="w-30-ns mh2 pa3 bg-light-blue ba b--gray">
     <h2 class="f4 ttu">Special message</h2>

0 comments (0 inline, 0 general)