#18: Very satisfactory!

Looking good at all scales, and in the end I didn't use bootstrap (although it would still be a good thing to learn it).

.gitignore

@@ -15,4 +15,5 @@ pom.xml.asc
 .lein-env
 .nrepl-port
 smeagol.log*
-/node_modules/
+/node_modules/
+.DS_Store

project.clj

@@ -32,7 +32,7 @@
             [lein-ancient "0.5.5" :exclusions [org.clojure/clojure org.clojure/data.xml]]
             [lein-marginalia "0.7.1" :exclusions [org.clojure/clojure]]
             [io.sarnowski/lein-docker "1.1.0"]]
-  :bower-dependencies [[simplemde "1.11.2"]["bootstrap" "3.3.7"]]
+  :bower-dependencies [[simplemde "1.11.2"]]
   :docker {:image-name "simonbrooke/smeagol"
          :dockerfile "Dockerfile"}
   :ring {:handler smeagol.handler/app

resources/public/content/stylesheet.css

@@ -82,6 +82,12 @@ header h1 {
   margin-top: 0;
 }
 
+img {
+  border: 0;
+  padding: 0;
+  vertical-align: middle;
+}
+
 input {
   background-color: white;
 }
@@ -302,7 +308,13 @@ th {
 
 /* tablets, primarily. Adapted to touch; targets are larger */
 @media all and (min-device-width: 769px) and (max-device-width: 1024px) {
-/* content of the current in the Wiki - editable, provided by users. Within main-container */
+  h1 {
+    /* I wouldn't normally use a px value, but the menu icon is 49px wide */
+    padding: 0.25em 5%;
+    padding-left: 100px;
+  }
+
+  /* content of the current page in the Wiki - editable, provided by users. Within main-container */
   #content {
     border: thin solid silver;
     width: 80%;
@@ -315,39 +327,48 @@ th {
     padding: 0;
     position: fixed;
     z-index: 149;
-    background:rgba(40,40,40,0.8);
+    color: silver;
-    font-size: larger;
+    background:rgba(40,40,40,0.9);
   }
 
-  #nav:hover #nav-menu {
+  #nav a {
-    display: inline;
-  }
-
-  #nav-icon {
-    padding: 0.25em;
-    float: left;
-  }
-
-  #nav-menu {
-    display: none;
-  }
-
-  #nav ul li {
-    padding: 0;
-    margin: 0;
-    display: inline;
-  }
-
-  #nav ul li a {
     color: white;
     text-decoration: none;
     font-weight: bold;
-    padding: 0.1em 0.75em;
-    margin: 0;
   }
+
+  #nav:hover #nav-menu {
+    display: block;
+    list-style-type: none;
+    width: 100%;
+  }
+
+  #nav-icon {
+    padding: 0;
+  }
+
+  #nav-menu, #phone-side-bar {
+    display: none;
+  }
+
+  #nav menu li {
+    padding: 0.5em;
+    margin: 0.5 em;
+    font-size: 150%;
+  }
+
+  #nav menu li a {
+  }
+
   #nav ul li.active a { background: silver;}
   li.nav-item a:hover { background: rgb( 240, 240, 240) }
   li.nav-item a:active { background: gray; color: white; }
+
+  #nav menu #user {
+    text-decoration: none;
+    font-weight: bold;
+    margin: 0;
+  }
 }
 
 /* phones, and, indeed, smaller phones. Adapted to touch; display radically
@@ -360,6 +381,7 @@ th {
   h1 {
     /* I wouldn't normally use a px value, but the menu icon is 49px wide */
     padding: 0.25em 5%;
+    padding-left: 100px;
     text-align: right;
   }
 
@@ -388,7 +410,6 @@ th {
     z-index: 149;
     color: silver;
     background:rgba(40,40,40,0.9);
-    font-size: 200%;
   }
 
   #nav a {

resources/templates/base.html

@@ -5,11 +5,8 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="{{servlet-context}}/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="{{servlet-context}}/content/stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
     <link href="{{servlet-context}}/css/print.css" media="print" rel="stylesheet" type="text/css" />
-    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
-    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     {% block extra-headers %}
     {% endblock %}
   </head>
@@ -18,7 +15,7 @@
       <!-- navbar -->
       <div id="nav">
         <img id="nav-icon" src="{{servlet-context}}/img/three-lines.png" alt="Menu"/>
-        <menu id="nav-menu" class="nav">
+        <menu id="nav-menu">
           <li class="{{wiki-selected}}"><a href="{{servlet-context}}/">{{config.home-link}}</a></li>
           {% if admin %}
           <li class="{{edit-users-selected}}"><a href="{{servlet-context}}/edit-users">{{config.edit-users-link}}</a></li>
@@ -35,17 +32,17 @@
         </menu>
         <div id="phone-side-bar"  class="wiki">
             {{side-bar|safe}}
-        <div id="phone-credits">
+          <div id="phone-credits">
-          <p>
+            <p>
-           <img height="16" width="16" alt="one wiki to rule them all"
+              <img height="16" width="16" alt="one wiki to rule them all"
-                src="img/smeagol.png"/>One Wiki to rule them all ||
+                   src="img/smeagol.png"/>One Wiki to rule them all ||
-           Smeagol wiki engine {{version}} ||
+              Smeagol wiki engine {{version}} ||
-           <img height="16" width="16"
+              <img height="16" width="16"
-                alt="The Web Engineering Factory &amp; Toolworks"
+                   alt="The Web Engineering Factory &amp; Toolworks"
-                src="http://www.weft.scot/images/weft.logo.64.png">
+                  src="http://www.weft.scot/images/weft.logo.64.png">
-            Developed by <a href="http://www.weft.scot/">WEFT</a>
+              Developed by <a href="http://www.weft.scot/">WEFT</a>
-          </p>
+            </p>
-         </div>
+          </div>
         </div>
       </div>
       <h1>{{config.site-title}}: {{title}}</h1>