diff --git a/www/conservancy/static/css/conservancy.css b/www/conservancy/static/css/conservancy.css index b7fc8762..8357d108 100644 --- a/www/conservancy/static/css/conservancy.css +++ b/www/conservancy/static/css/conservancy.css @@ -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 { diff --git a/www/conservancy/templates/base_conservancy.html b/www/conservancy/templates/base_conservancy.html index 2a460fc8..b679fa27 100644 --- a/www/conservancy/templates/base_conservancy.html +++ b/www/conservancy/templates/base_conservancy.html @@ -27,35 +27,78 @@ {% block head %}{% endblock %} - -
-
-

- Software Freedom Conservancy -

-
-
-
- Learn + +
+
+
+

+ + Software Freedom Conservancy + +

-
- Donate + +
+ Donate + Join + Special
-
+