update top link page

fcc_challenges.css

@@ -1,23 +1,49 @@
-html,body {
+body, html {
+  margin: 0;
+  padding: 0;
+  font-family: 'Baloo Bhai', serif;
+  color: #f1f3ce;
+  background-color: #00293C;
 }
 
 h1 {
-  text-align: center;
+  font-size: 1.4em;
+  margin-bottom: -.5em;
+  color: #f1f3ce;
+}
+h2 {
+  font-size: 1em;
 }
 
-#directory-list {
+div {
-  display: flex;
+  margin: auto;
-  justify-content: center;
+  text-align: left;
-  font-size: 2rem;
+  width: 90%;
+  padding: .1em;
 }
-
+a {
-#directory-list li {
+  box-shadow: .1em .1em black;
-  margin: 1.5rem auto;
-  font-weight: 700;
   text-decoration: none;
-  text-decoration-color: black;
+  text-indent: 1em;
+  color: #f1f3ce;
+  font-size: 20px;
+  display: block;
+  background: #1e656d;
+  padding: .1em;
+  margin: .1em;
+  border: .1em solid black; 
+  border-radius: .3em;
+}
+a:hover {
+  background-color: #f62a00;
+}
+a:focus {
+  background-color: #f1f3ce;
+  color: #f62a00;
 }
 
-#directory-list a {
+@media (min-width: 1201px) {
-  color: hsl(100, 19%, 18%);
+  div {
+    width: 95%
+  }
 }

index.html

@@ -1,47 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-  <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0">
+    <title>FCC Challenges</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=
+    <link rel="stylesheet" type="text/css" href="pure-min.css">
-  "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="fcc_challenges.css">
-  <title>FCC Challenges</title>
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Baloo+Bhai" />
   </head>
   <body>
     <h1 id="title">FCC Challenges</h1>
-  <div id="directory-list">
+    <h2>Repository View</h2>
-    <ul>
+    <div>
-      <li>
+      <a href="https://github.com/TrentSPalmer/fcc-challenges" target="_blank">GitHub Repository of This Page</a>
-        <a href="https://github.com/TrentSPalmer/fcc-challenges" target="_blank">GitHub Repository View of This
+    </div>
-        Page</a>
+    <h2>Responsive Web Design Projects</h2>
-      </li>
+    <div>
-      <li>
+      <a href="mccain-tribute/" target="_blank">Tribute Page - McCain Tribute</a>
-        <a href="mccain-tribute/" target="_blank">Build a Tribute Page - McCain Tribute - Responsive Web Design
+    </div>
-        Projects</a>
+    <div>
-      </li>
+      <a href="how-was-dinner/" target="_blank">Survey Form - How Was Dinner?</a>
-      <li>
+    </div>
-        <a href="how-was-dinner/" target="_blank">Build a Survey Form - How Was Dinner? - Responsive Web Design
+    <div>
-        Projects</a>
+      <a href="tools-that-love-you/" target="_blank">Product Landing Page <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tools That Love You</a>
-      </li>
+    </div>
-      <li>
+    <div>
-        <a href="tools-that-love-you/" target="_blank">Build a Product Landing Page - Tools That Love You - Responsive
+      <a href="lmde-3-disk-encryption/" target="_blank">Technical Documentation <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LMDE 3 Disk Encryption</a>
-        Web Design Projects</a>
+    </div>
-      </li>
+    <h2>Front End Library Projects</h2>
-      <li>
+    <div>
-        <a href="lmde-3-disk-encryption/" target="_blank">Build a Technical Documentation Page - LMDE 3 Disk Encryption
+      <a href="random-quote-machine/build" target="_blank">Random Quote Machine</a>
-        - Responsive Web Design Projects</a>
+    </div>
-      </li>
+    <div>
-      <li>
+      <a href="markdown-previewer" target="_blank">Markdown Previewer</a>
-        <a href="random-quote-machine/build" target="_blank">Random Quote Machine - Build a Random Quote Machine -
-        Front End Libraries Projects</a>
-      </li>
-      <li>
-        <a href="markdown-previewer" target="_blank">Markdown Previewer - Build a Markdown Previewer -
-        Front End Libraries Projects</a>
-      </li>
-    </ul>
     </div>
   </body>
 </html>

pure-min.css

@@ -0,0 +1,11 @@
+/*!
+Pure v1.0.0
+Copyright 2013 Yahoo!
+Licensed under the BSD License.
+https://github.com/yahoo/pure/blob/master/LICENSE.md
+*/
+/*!
+normalize.css v^3.0 | MIT License | git.io/normalize
+Copyright (c) Nicolas Gallagher and Jonathan Neal
+*/
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */.pure-button:focus,a:active,a:hover{outline:0}.pure-table,table{border-collapse:collapse;border-spacing:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}.pure-button,input{line-height:normal}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}.pure-button,.pure-form input:not([type]),.pure-menu{box-sizing:border-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend,td,th{padding:0}legend{border:0}.hidden,[hidden]{display:none!important}.pure-img{max-width:100%;height:auto;display:block}.pure-g{letter-spacing:-.31em;text-rendering:optimizespeed;font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){table .pure-g{display:block}}.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}.pure-u,.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto;display:inline-block;zoom:1}.pure-g [class*=pure-u]{font-family:sans-serif}.pure-u-1-24{width:4.1667%}.pure-u-1-12,.pure-u-2-24{width:8.3333%}.pure-u-1-8,.pure-u-3-24{width:12.5%}.pure-u-1-6,.pure-u-4-24{width:16.6667%}.pure-u-1-5{width:20%}.pure-u-5-24{width:20.8333%}.pure-u-1-4,.pure-u-6-24{width:25%}.pure-u-7-24{width:29.1667%}.pure-u-1-3,.pure-u-8-24{width:33.3333%}.pure-u-3-8,.pure-u-9-24{width:37.5%}.pure-u-2-5{width:40%}.pure-u-10-24,.pure-u-5-12{width:41.6667%}.pure-u-11-24{width:45.8333%}.pure-u-1-2,.pure-u-12-24{width:50%}.pure-u-13-24{width:54.1667%}.pure-u-14-24,.pure-u-7-12{width:58.3333%}.pure-u-3-5{width:60%}.pure-u-15-24,.pure-u-5-8{width:62.5%}.pure-u-16-24,.pure-u-2-3{width:66.6667%}.pure-u-17-24{width:70.8333%}.pure-u-18-24,.pure-u-3-4{width:75%}.pure-u-19-24{width:79.1667%}.pure-u-4-5{width:80%}.pure-u-20-24,.pure-u-5-6{width:83.3333%}.pure-u-21-24,.pure-u-7-8{width:87.5%}.pure-u-11-12,.pure-u-22-24{width:91.6667%}.pure-u-23-24{width:95.8333%}.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%}.pure-button{display:inline-block;zoom:1;white-space:nowrap;vertical-align:middle;text-align:center;cursor:pointer;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pure-button::-moz-focus-inner{padding:0;border:0}.pure-button-group{letter-spacing:-.31em;text-rendering:optimizespeed}.opera-only :-o-prefocus,.pure-button-group{word-spacing:-.43em}.pure-button{font-family:inherit;font-size:100%;padding:.5em 1em;color:#444;color:rgba(0,0,0,.8);border:1px solid #999;border:transparent;background-color:#E6E6E6;text-decoration:none;border-radius:2px}.pure-button-hover,.pure-button:focus,.pure-button:hover{filter:alpha(opacity=90);bLine truncated