Completed website HTML tweaks (#3807)

* removed shortcut from favicon, added external tag to hrefs and tweaked logo * made fixes outlined in PR review * changed footer span to footer div * refactor(css/style.css): Put CSS properties in lexical order **No changes - just alphabetized** * style(css/style.css): Add description list declarations Use for "Last updated" redo * docs(_includes/default.html): Fix missing page title * docs(_includes/default.html): Fixed URLs in footer Updated protocol on one, added trailing slash on the other * docs(docs): Remove unneeded div from footer * style(_includes/default.html): Reformatted CC license anchor tag * docs(_includes/default.html): Change to description list for last modified information Placed last modified in time tag, in both machine and human readable formats. * docs(docs): Revert removal of footer div tag Put it back to match look of existing site
mochajs · Mar 6, 2019 · df1937b · df1937b
1 parent f1662ac
commit df1937b
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 48 deletions.
diff --git a/docs/_includes/default.html b/docs/_includes/default.html
@@ -2,8 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>{{ page.title }}</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>{{ title }}</title>
     <link
       rel="preload"
       href="https://opencollective.com/static/images/user.svg"
@@ -13,7 +13,7 @@
     <link rel="stylesheet" href="css/normalize.css" />
     <link rel="stylesheet" href="css/style.css" />
     <link rel="stylesheet" href="css/prism.css" />
-    <link rel="shortcut icon" href="favicon.ico" />
+    <link rel="icon" href="favicon.ico" />
 
     <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <![endif]-->
   </head>
@@ -23,29 +23,37 @@
       <h1>
         <a href="/">
           <img
+            id="mocha-logo"
             src="/images/mocha-logo.svg"
-            alt="Mocha"
-            width="192"
-            height="192"
+            alt="Mocha logo"
           />
         </a>
       </h1>
-
       <p id="tag"><em>simple</em>, <em>flexible</em>, <em>fun</em></p>
     </header>
 
     <main id="content">{{ content }}</main>
 
     <footer>
-      <span>
-        <a href="https://mochajs.org">mochajs.org</a> is licensed under a
-        <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"
-          >Creative Commons Attribution 4.0 International License</a
+      <div>
+        <a rel="home" href="https://mochajs.org/">mochajs.org</a>
+        is licensed under a
+        <a
+          rel="license external noopener"
+          href="https://creativecommons.org/licenses/by/4.0/">
+          Creative Commons Attribution 4.0 International License</a
         >.
-        <p>
-          <em>Last updated: {{ 'now' | date: '%a %b %d %H:%M:%S %Y' }}</em>
-        </p></span
-      >
+        <dl class="dl-inline last-modified">
+          <dt>Last updated</dt>
+          <dd>
+            <time
+              itemprop="lastModified"
+              datetime="{{ 'now' | date: '%Y-%m-%dT%H:%M:%SZ' }}">
+              {{ 'now' | date: '%a %b %d %H:%M:%S %Y' }}
+            </time>
+          </dd>
+        </dl>
+      </div>
     </footer>
   </body>
 </html>
diff --git a/docs/css/style.css b/docs/css/style.css
@@ -3,8 +3,8 @@ html {
 }
 
 body {
-  color: #2c2c2c;
   border-top: 2px solid #ddd;
+  color: #2c2c2c;
 }
 
 @keyframes fadein {
@@ -29,8 +29,8 @@ body {
 
 header,
 #content {
-  max-width: 920px;
   margin: 0 auto;
+  max-width: 920px;
   padding-left: 30px;
   padding-right: 30px;
 }
@@ -39,27 +39,31 @@ header {
   padding-top: 20px;
 }
 
+#mocha-logo {
+  height: 192px;
+  width: 192px;
+}
+
 #content {
   padding-bottom: 60px;
 }
 
 #_header h1 {
+  animation: fadein 1s forwards;
   margin-top: 0;
   margin-left: -19px;
   opacity: 0;
-  animation: fadein 1s forwards;
 }
 
 #tag {
+  animation: fadein 1s forwards, slideright 1s forwards;
   color: #c29d7f;
-  font-weight: 100;
   font-size: 30px;
+  font-weight: 100;
+  letter-spacing: 2px;
   margin-top: -158px;
   margin-left: 185px;
   margin-bottom: 125px;
-  letter-spacing: 2px;
-
-  animation: fadein 1s forwards, slideright 1s forwards;
 }
 
 #tag em {
@@ -94,29 +98,29 @@ nav.badges a + a {
 }
 
 #_backers a img {
-  width: 64px;
   background: url(/images/backer-background.svg?inline) center center no-repeat;
+  width: 64px;
 }
 
 h2 {
-  margin-top: 80px;
+  border-bottom: 1px solid #ddd;
   font-weight: 400;
   letter-spacing: 1px;
-  border-bottom: 1px solid #ddd;
+  margin-top: 80px;
   text-transform: uppercase;
 }
 
 h3 {
+  border-bottom: 1px solid #eee;
   font-weight: 200;
   letter-spacing: 1px;
-  border-bottom: 1px solid #eee;
   margin-top: 40px;
   text-transform: uppercase;
 }
 
 h3 > code {
-  text-transform: none;
   font-size: 14px;
+  text-transform: none;
 }
 
 #content > p:first-child {
@@ -134,34 +138,34 @@ a:hover {
 }
 
 a.direct-link {
+  background: url(../images/link-icon.svg) center center no-repeat;
+  background-size: auto 60%;
+  opacity: 0;
   position: absolute;
-  transform: translateX(-100%);
   text-decoration: none;
   text-indent: -60px;
+  transform: translateX(-100%);
   width: 30px;
-  background: url(../images/link-icon.svg) center center no-repeat;
-  background-size: auto 60%;
-  opacity: 0;
 }
 
 :hover > a.direct-link {
   opacity: 1;
 }
 
 ul {
+  box-sizing: content-box;
+  column-count: 2;
+  column-gap: 30px;
   margin-top: 20px;
   padding: 0 15px;
-  column-gap: 30px;
-  column-count: 2;
-  box-sizing: content-box;
 }
 
 ul li {
-  margin-top: 5px;
-  list-style: none;
   border-bottom: 1px solid #eee;
-  padding: 5px 0;
   break-inside: avoid;
+  list-style: none;
+  margin-top: 5px;
+  padding: 5px 0;
 }
 
 code {
@@ -170,36 +174,54 @@ code {
 }
 
 pre {
-  margin: 20px 0;
-  padding: 20px;
+  background-color: #f3f3f3;
   border: 1px solid #ddd;
   border-bottom-color: #ccc;
-  background-color: #f3f3f3;
   border-radius: 3px;
   box-shadow: inset 0 0 10px #ddd;
+  margin: 20px 0;
   overflow-x: auto;
+  padding: 20px;
 }
 
 img.screenshot {
-  display: block;
-  margin: 30px auto;
   border-radius: 3px;
   box-shadow: 0 3px 10px #dedede, 0 1px 5px #888;
+  display: block;
+  margin: 30px auto;
   max-width: 100%;
 }
 
 footer {
   background-color: #eee;
+  border-top: 1px solid #ddd;
   padding: 50px 0;
   text-align: right;
-  border-top: 1px solid #ddd;
 }
 
-footer span {
-  display: block;
-  margin-right: 30px;
+footer div {
   color: #888;
   font-size: 0.8em;
+  margin-right: 30px;
+}
+
+.last-modified {
+  font-style: italic;
+}
+
+.dl-inline dt,
+.dl-inline dd {
+  display: inline;
+  margin: 0;
+}
+
+.dl-inline dt:after {
+  content: ': ';
+}
+
+.dl-inline dd + dt:before {
+  content: '';
+  display: block;
 }
 
 @media all and (max-width: 600px) {
@@ -214,12 +236,12 @@ footer span {
   }
 
   pre {
-    padding: 10px;
     margin: 20px -11px;
+    padding: 10px;
   }
 }
 
 blockquote {
-  padding: 10px;
   border-left: 1px solid #eee;
+  padding: 10px;
 }