improved l&f of the nav
authorJean Philip Orsini <orsinije@fr.ibm.com>
Tue, 19 Jan 2016 10:30:27 +0000 (11:30 +0100)
committerJean Philip Orsini <orsinije@fr.ibm.com>
Tue, 19 Jan 2016 10:30:27 +0000 (11:30 +0100)
html/index.html
html/last_songs.html
html/style.css

index 259899e..d54de39 100644 (file)
 </head>
 
 <body>
-        <header>
-                <h1>Proxy Radio</h1>
-        </header>
-
         <nav>
                 <ul>
-                        <li>Home</li>
+                        <li class="selected">Proxy Radio</li>
                         <li><a href="last_songs.html">Played songs</a></li>
                         <li><a href="songs.html">All songs</a></li>
                 </ul>
index dcacb71..ec8f612 100644 (file)
 </head>
 
 <body>
+        <nav>
+                <ul>
+                        <li><a href="index.html">Proxy Radio</a></li>
+                        <li class="selected">Played songs</li>
+                        <li><a href="songs.html">All songs</a></li>
+                </ul>
+        </nav>
+
         <section>
                 <h1>Last played songs</h1>
 
index 7f61856..01b8e48 100644 (file)
@@ -2,8 +2,13 @@ body {
         font-family: sans-serif;
         font-size: 100%;
         padding: 0;
-        margin: 8pt 0 0 8pt;
+        margin: 0;
         background-color: #eee;
+        color: #444;
+}
+
+section {
+        margin: 8pt 0 0 8pt;
 }
 
 h1 {
@@ -22,21 +27,32 @@ audio {
 
 nav ul {
         background-color: #444;
-        color: white;
+        color: #eee;
         padding: 1em 0 1em 1em;
         margin: 0;
+        text-transform: uppercase;
+        font-size: 100%;
+        border-bottom-color: #444;
+        border-bottom-width: medium;
+        border-bottom-style: solid;
 }
 
 nav ul li {
         display: inline;
+        margin: 0 1.5em 0 0;
         padding: 0;
+        letter-spacing: 1px;
 }
 
 nav a {
-        color: white;
+        color: #eee;
         text-decoration: none;
 }
 
-nav li::after {
-        content: "|";
+li.selected {
+        border-bottom-color: #eee;
+        border-bottom-style: solid;
+        border-bottom-width: medium;
+        padding-bottom: 1em;
+        font-weight: bold;
 }