website Changeset - 567271314866 · Conservancy Kallithea

Changeset - 567271314866

Parent rev.

Child rev.

[Not reviewed]

0 1 0

Ben Sturmfels (bsturmfels) - 3 years ago 2021-10-19 13:47:58
ben@sturm.com.au

Add link and button focus/active states.

1 file changed with 16 insertions and 4 deletions:

www/conservancy/static/css/conservancy.css

0 comments (0 inline, 0 general)

www/conservancy/static/css/conservancy.css

➞

Show inline comments

@@ ... / @@ -33,73 +33,85 @@ html { @@
 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 .2s ease;
   font-weight: bold;
+}
 a:hover { text-decoration: underline; }
 input:focus {
   z-index: 3;
   border-color: #86b7fe;
   box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
 };
 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: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;
+}
 .btn-white:hover {
+.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 {
     position: fixed;
     top: 180px;
     right: 2%;
     width: 18%;
+}
 @media all and (max-width: 725px) {
     .donate-sidebar { display: none; }
@@ ... / @@ -139,49 +151,49 @@ h3 { margin-top: .6em; margin-bottom: .4em; } @@
   text-indent: -5000px; /* hide in favor of image */
+}
 #logobutton {
   display: block;
   margin: 0;
   padding: 0;
   height: 120px;
   background: url(/img/conservancy-header.png) no-repeat;
   background-size: contain;
+}
 /* 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;
   color: white;
   padding: .5em .8em .1em;
   margin: 0 3px .1em 0;
   text-decoration: none;
   border-bottom: 4px solid transparent;
+}
 #navbar li:hover a {
+#navbar li:hover a, #navbar li a:focus {
   border-bottom: 4px solid var(--light-green);
+}
 #navbar li { float: left; display: inline; margin-bottom: 3px; }
 #mainContent {
   max-width: 1140px;
   margin: 0 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;
+}

0 comments (0 inline, 0 general)