Overhaul header, first pass at second level navigation.
This commit is contained in:
parent
bde54db0c4
commit
c41efe0e0b
3 changed files with 172 additions and 70 deletions
|
|
@ -17,7 +17,9 @@ 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;
|
||||
|
|
@ -49,11 +51,29 @@ body {
|
|||
a {
|
||||
text-decoration: none;
|
||||
color: var(--navy);
|
||||
transition: all .2s ease;
|
||||
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;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
padding: 1px;
|
||||
background: yellow;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
z-index: 3;
|
||||
border-color: #86b7fe;
|
||||
|
|
@ -82,8 +102,9 @@ a.read-more {
|
|||
.btn-white {
|
||||
color: var(--orange);
|
||||
background: white;
|
||||
border: 1px solid #777;
|
||||
}
|
||||
.btn-white:hover .btn-white:active {
|
||||
.btn-white:hover, .btn-white:active {
|
||||
background: #eee;
|
||||
text-decoration: none;
|
||||
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
|
||||
|
|
@ -138,45 +159,89 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
|
|||
|
||||
/* Header */
|
||||
|
||||
#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 */
|
||||
body > header {
|
||||
/* background: linear-gradient(to top right, white, white, var(--washed-blue) 80%); */
|
||||
overflow: auto; /* Prevent logo top margin popping out. */
|
||||
}
|
||||
#logobutton {
|
||||
display: block;
|
||||
height: 103px;
|
||||
background: url(/img/conservancy-header.svg) no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
#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 { 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);
|
||||
}
|
||||
#navbar li:hover a, #navbar li a:focus {
|
||||
border-bottom: 4px solid var(--light-green);
|
||||
|
||||
@media screen and (min-width: 30em) {
|
||||
#navbar li > a {
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem
|
||||
}
|
||||
}
|
||||
#navbar li { float: left; display: inline; margin-bottom: 3px; }
|
||||
|
||||
|
||||
#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;
|
||||
}
|
||||
#navbar li ul a {
|
||||
font-weight: normal;
|
||||
}
|
||||
#navbar li:hover ul {
|
||||
display: block;
|
||||
}
|
||||
#navbar li:last-child ul {
|
||||
left: auto;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#mainContent {
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#sidebar + #mainContent {
|
||||
|
|
@ -306,12 +371,6 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
|
|||
clear: all;
|
||||
}
|
||||
|
||||
/* 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; }
|
||||
|
||||
.columns {
|
||||
|
|
|
|||
|
|
@ -27,35 +27,78 @@
|
|||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
|
||||
<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>
|
||||
<div id="navbar-clear"></div>
|
||||
|
||||
|
|
@ -130,8 +173,8 @@
|
|||
{% endwith %}
|
||||
{% endif %}
|
||||
|
||||
{% 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
|
||||
<a href="https://mastodon.technology/@conservancy">Mastodon</a>,
|
||||
<a href="https://twitter.com/conservancy">Twitter</a>,
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@
|
|||
|
||||
{% block content %}
|
||||
|
||||
<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;" />
|
||||
<p class="mb0">Software Freedom Conservancy is a not-for-profit charity that
|
||||
helps promote, improve, develop, and defend Free, Libre, and Open Source
|
||||
|
|
@ -34,17 +34,17 @@
|
|||
infrastructure for FLOSS projects. This allows FLOSS developers to
|
||||
focus on what they do best — writing and improving FLOSS for the
|
||||
general public — 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>
|
||||
<section class="w-30-ns mh2 pa3 bg-light-blue ba b--gray">
|
||||
<h2 class="f4 ttu">Special message</h2>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="mt3 flex-ns">
|
||||
<div class="mt3 mh2-ns flex-ns">
|
||||
<div class="w-70-ns mh2">
|
||||
<section class="mh0 pa3 bg-light-blue ba b--gray">
|
||||
<h2 class="f4 ma0 ttu">Additional links / call-outs here, if needed</h2>
|
||||
|
|
@ -80,12 +80,12 @@
|
|||
<h3 class="ttu">Term of the week</h3>
|
||||
<h4 class="f4 mt3 mb2 i navy">auditability</h4>
|
||||
<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>
|
||||
|
||||
<div class="mh3 pt3">
|
||||
<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%;">
|
||||
<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' %}#envelope"></use></svg></a>
|
||||
|
|
|
|||
Loading…
Reference in a new issue