Changeset - bc7219daa4e3
[Not reviewed]
0 3 0
Ben Sturmfels (bsturmfels) - 11 months ago 2021-10-15 08:35:40
ben@sturm.com.au
Overhaul header, first pass at second level navigation.
3 files changed with 173 insertions and 71 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/css/conservancy.css
Show inline comments
...
 
@@ -19,3 +19,5 @@ html {
 
  --light-green: #afe478;
 
  --washed-green: #daf4be;
 
  --light-blue: #92d4d1;
 
  --washed-blue: #ddfbfa;
 
  --navy: #224c57;
...
 
@@ -51,3 +53,3 @@ a {
 
  color: var(--navy);
 
  transition: all .2s ease;
 
  transition: all .1s ease-out;
 
  font-weight: bold;
...
 
@@ -56,2 +58,20 @@ 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;
 
  position: absolute;
 
  top: -5px;
 
  right: -5px;
 
  padding: 1px;
 
  background: yellow;
 
  opacity: 0.8;
 
}
 

	
 
input:focus {
...
 
@@ -84,4 +104,5 @@ a.read-more {
 
  background: white;
 
  border: 1px solid #777;
 
}
 
.btn-white:hover .btn-white:active {
 
.btn-white:hover, .btn-white:active {
 
  background: #eee;
...
 
@@ -140,19 +161,16 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
 

	
 
#conservancyheader {
 
  max-width: 1140px;
 
  margin: 0 auto;
 
  padding: 10px 0;
 
/*  background-color: #d1ff96; */
 
/*  background-color: #92CC58; */
 
/*  background-color: #BDD8A2; */
 
/*  background-color: #92cc58; */
 
/*  background-color: #b5cd9d; */
 
  background-color: #ffffff;
 
  text-indent: -5000px; /* hide in favor of image */
 
}
 
#logobutton {
 
  display: block;
 
  height: 103px;
 
  background: url(/img/conservancy-header.svg) no-repeat;
 
  background-size: contain;
 
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;
 
  }
 
}
...
 
@@ -160,21 +178,68 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
 
/* Navigation bar */
 
#navbar-outer { background: var(--navy); }
 
#navbar { margin-top: 3px; max-width: 1140px; margin: 0 auto;}
 
#navbar ul { list-style: none; }
 
#navbar-clear { clear: both; }
 
#navbar li a {
 
  display: block;
 
#navbar-outer {
 
  background: var(--navy);
 
}
 
#navbar ul {
 
  list-style: none;
 
  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;
 
  padding: .5em .8em .1em;
 
  margin: 0 3px .1em 0;
 
  text-decoration: none;
 
  border-bottom: 4px solid transparent;
 
  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:hover a, #navbar li a:focus {
 
  border-bottom: 4px 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;
 
}
 
#navbar li ul a {
 
  font-weight: normal;
 
}
 
#navbar li:hover ul {
 
  display: block;
 
}
 
#navbar li { float: left; display: inline; margin-bottom: 3px; }
 
#navbar li:last-child ul {
 
  left: auto;
 
  right: 0;
 
  text-align: right;
 
}
 

	
 

	
 

	
 
#mainContent {
 
  max-width: 1140px;
 
  margin: 0 auto;
...
 
@@ -308,8 +373,2 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
 

	
 
/* Navbar Submenus (currently unused) */
 
#navbar li ul { display: none; border: 1px solid #444; }
 
#navbar li:hover ul { display: block; position: absolute; }
 
#navbar li ul li { float: none; }
 
#navbar li ul li a { border: 0px; margin: 0px; }
 

	
 
.shaded { background: #F0FFB8; padding: .1em .5em; margin-bottom: .5em; }
www/conservancy/templates/base_conservancy.html
Show inline comments
...
 
@@ -29,31 +29,74 @@
 

	
 
  <body class="conservancy-{% block category %}other{% endblock %} debug">
 
    <div class="flex-ns" style="max-width: 1140px; margin: 0 auto;">
 
      <div class="w-70-ns">
 
        <h1 id="conservancyheader">
 
          <a id="logobutton" class="ma2" href="/">Software Freedom Conservancy</a>
 
        </h1>
 
      </div>
 
      <div class="w-30-ns mt2 mb4 mt5-ns mh2 flex" style="justify-content: center;">
 
        <div>
 
          <a href="#" class="f5 pa2 mr2 ttu b btn-white ba b--gray">Learn</a>
 
  <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>
 
          <a href="/donate/" class="f5 pa2 ttu b btn-orange">Donate</a>
 

	
 
        <div class="w-40-ns mt2 mt4-ns mb2 mb2-ns mh2 pt1 flex flex-wrap justify-center items-center">
 
          <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>
 
        </div>
 
      </div>
 
    </div>
 
    </header>
 

	
 
    <div id="navbar-outer">
 
      <div id="navbar">
 
        <ul class="f5 b ttu">
 
      <li class="sustainer"><a href="/sustainer/">Become a Sustainer!</a></li>
 
      <li class="news"><a href="/news/">News</a></li>
 
      <li class="blog"><a href="/blog/">Blog</a></li>
 
      <li class="Projects"><a href="/projects/">Projects</a></li>
 
      <li class="compliance"><a href="/copyleft-compliance/">Copyleft Compliance</a></li>
 
      <li class="npoacct"><a href="/npoacct/">NPOAcct</a></li>
 
      <li class="sponsors"><a href="/sponsors/">Sponsors</a></li>
 
      <li class="About"><a href="/about/">About</a></li>
 
    </ul>
 
      <div id="navbar" class="center mw8 nested-list-resetb">
 
        <ul class="f5 b 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="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>
 
            <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>
 
            <ul>
 
              <li><a href="/sponsors/">Sponsors</a></li>
 
              <li><a href="/sustainers/">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>
 
            </ul>
 
          </li>
 
          <li class="about"><a href="/about/">About</a>
 
            <ul>
 
              <li><a href="#fixme">Who we are</a></li>
 
              <li><a href="#fixme">Transparency</a></li>
 
              <li><a href="#fixme">Contact</a></li>
 
            </ul>
 
          </li>
 
        </ul>
 
      </div>
...
 
@@ -132,4 +175,4 @@
 

	
 
      {% block outercontent %}<div id="mainContent"> {% block content %}{% endblock %}</div>{% endblock %}
 
    <div id="conservancyfooter" class="mt4 pt3">
 
      {% block outercontent %}<div id="mainContent" class="mw8"> {% block content %}{% endblock %}</div>{% endblock %}
 
    <div id="conservancyfooter" class="mt4 pt3 ph3 bg-light-gray">
 
      <p>Connect with Conservancy on
www/conservancy/templates/frontpage.html
Show inline comments
...
 
@@ -27,4 +27,4 @@
 

	
 
<div class="mt4 flex-ns">
 
  <section class="w-70-ns mh2 mb3 mb0-ns pa2 ba bw1 b--light-blue">
 
<div class="mt4 mh2-ns 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;" />
...
 
@@ -36,3 +36,3 @@
 
      general public &mdash; while Conservancy takes care of the projects' needs that
 
      do not relate directly to software development and documentation. <a href="#" class="orange">Learn more.</a></p>
 
      do not relate directly to software development and documentation. <a href="#fixme" class="orange">Learn more.</a></p>
 
  </section>
...
 
@@ -42,3 +42,3 @@
 
    <p>Special message here special message here special message here special message here special message here.</p>
 
    <a href="#" class="f5 dib pa2 ttu b btn-orange">More information</a>
 
    <a href="#fixme" class="f5 dib pa2 ttu b btn-orange">More information</a>
 
  </section>
...
 
@@ -46,3 +46,3 @@
 

	
 
<div class="mt3 flex-ns">
 
<div class="mt3 mh2-ns flex-ns">
 
  <div class="w-70-ns mh2">
...
 
@@ -82,3 +82,3 @@
 
    <p>Ability to inspect the exact software running on a device. This includes version information, modifications and licensing information.</p>
 
    <p><a href="#" class="orange ttu">Visit our glossary of terms</a></p>
 
    <p><a href="#fixme" class="orange ttu">Visit our glossary of terms</a></p>
 
  </div>
...
 
@@ -87,3 +87,3 @@
 
    <h2 class="f6 ttu mb1">Subscribe to our email list</h2>
 
    <form method="post" action="#" class="ml2" style="display: flex;">
 
    <form method="post" action="#fixme" class="ml2" style="display: flex;">
 
      <input type="email" class="pa2 ba b--gray br0" style="x-border-right: none; flex: 1 1 auto; width: 1%;">
0 comments (0 inline, 0 general)