Add skip-nav, mobile styles, and CC attribution

Orbis-Cascade-Alliance · Aug 15, 2024 · 46ced57 · 46ced57
1 parent 2c9e4c2
commit 46ced57
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 14 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -14,6 +14,9 @@
   </head>
   <body>
     <div class="wrapper">
+	  <div id="skip-nav">
+		<a href="#main">Skip to main content</a>
+	  </div>
 	  <div id="side">
 		  <header>
 			{% if site.logo %}
@@ -24,24 +27,29 @@
 			<h1><a href="{{ "/" | absolute_url }}">{{ site.title | default: site.github.repository_name }}</a></h1>
 			<p>{{ site.description | default: site.github.project_tagline }}</p>
 		  </header>
-		  <div id="menu">
+		  <nav>
 			<ul>
 			  {% assign sorted_pages = site.pages | sort: "order" %}
 			  {% for page in sorted_pages %}
 			    {% if page.path contains "_pages/" %}
 				<li><a href="{{ page.url | absolute_url }}">{{ page.title }}</a></li>
 				{% endif %}
-			  {% endfor %}  <!-- page -->
+			  {% endfor %}
 			</ul>
-		  </div>
+		  </nav>
 		  <footer>
-			{% if site.github.is_project_page %}
-			<p>This project is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></p>
-			{% endif %}
-			<p><small>Hosted on GitHub Pages<br />Minimal theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
+			 <div id="cc-license" xmlns:cc="http://creativecommons.org/ns#" >
+				This project by the <a href="https://orbiscascade.org" property="cc:attributionName">Orbis Cascade Alliance</a> is licensed under
+				<div>
+					<a href="https://creativecommons.org/licenses/by/4.0/?ref=chooser-v1">CC BY 4.0</a>
+					<img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt="Creative Commons" />
+					<img src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt="Attribution" />
+				</div>
+			 </div> 
+			<p id="attribution">Hosted on GitHub Pages<br />Minimal theme by <a href="https://github.com/orderedlist">orderedlist</a></p>
 		  </footer>
 	  </div>
-      <section>
+      <section id="main">
       {{ content }}
       </section>
 	</div>

diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -6,6 +6,7 @@
 body {
   color: #333;
   font-size: 1rem;
+  padding: 0;
 }
 
 a:hover, a:focus, a:active {
@@ -25,17 +26,53 @@ h3 {
   font-size: 130%;
 }
 
-small {
-  font-size: 90%;
-}
-
 .wrapper {
   width: 1160px;
+  max-width: 100%;
+  margin: 30px auto;
+}
+
+#skip-nav {
+  width: 100%;
+  height: 2rem;
+}
+
+#skip-nav a {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+}
+
+#skip-nav a:focus {
+  width: auto;
+  height: auto;
 }
 
 #side {
   position: fixed;
-  width: 260px;
+  width: 300px;
+}
+
+nav ul {
+  margin: 0 0 1rem 0;
+  padding: 0;
+  list-style: none;
+}
+
+nav ul > li > a {
+  display: block;
+  padding: .5rem;
+  margin: .5rem 0;
+  outline: 1px solid #999;
+  border-radius: .25rem;
+  background-color: #eee;
+}
+
+nav ul > li > a:hover,
+nav ul > li > a:focus,
+nav ul > li > a:active {
+  background-color: #f9f9f9;
 }
 
 a#logo {
@@ -51,7 +88,7 @@ header {
 
 section {
   float: none;
-  margin-left: 290px;
+  margin-left: 350px;
   width: auto;
 }
 
@@ -60,4 +97,29 @@ footer {
   width: 100%;
   position: relative;
   bottom: auto;
+}
+
+#cc-license {
+  margin-bottom: 1rem;
+}
+
+#cc-license img {
+  height: 22px;
+  margin-left: 3px;
+  vertical-align: text-bottom;
+}
+
+#attribution {
+  font-size: 90%;
+}
+
+@media print, screen and (max-width: 960px) {
+  #side {
+    position: relative;
+	width: 100%;
+  }
+
+  section {
+    margin-left: 0;
+  }
 }