UI styling, breadcrumb navigation

[rawnet] / rawnet.css

diff --git a/rawnet.css b/rawnet.css
index 93de0dad5874882a0b964c6cc817bf9d05861a37..472db1eb086132303e2ae1677d14c1ae96a965d9 100644 (file)
--- a/rawnet.css
+++ b/rawnet.css
@@ -6,25 +6,70 @@ body {
 }
 
 header {
-  background-color: rgba(0,0,0,.75);
+  background-size: inherit;
+  background-position: right;
+  background-image: /* #6AF #6FF */
+    linear-gradient( 0deg, rgba(0,0,0,.75) 0% 100%),
+    linear-gradient( 0deg, transparent 25%, rgba(128,128,128,.5) 25% 50%, transparent 50% 75%, rgba(192,192,192,.5) 75%),
+    linear-gradient(90deg, transparent 25%, rgba(128,128,128,.5) 25% 50%, transparent 50% 75%, rgba(192,192,192,.5) 75%),
+    linear-gradient( 0deg, #FFF 0% 100%);
   padding: .25em;
-  border-bottom: 1pt solid;
-  box-shadow: #000 0 .25em .5em;
+  box-shadow: #000 .25em .25em .25em;
   text-align: center;
-}
-header > * {
-  display: inline-block;
+  padding-right: .25em 12em;
+  z-index: 1;
 }
 
 header #user_login {
-  float: right;
-  margin: .125em .5em;
+  background-size: inherit;
+  background-image: inherit;
+  box-shadow: inherit;
+  position: absolute;
+  right: 0; top: 30.5pt; max-height: 0;
+  padding: 0 .5em;
+  transition: max-height linear .125s;
+  text-align: center;
+  width: 12em;
+}
+#user_login > * {
+  position: relative;
+  top: -2.5em;
+}
+#user_login > *:last-child {
+  margin-bottom: -2em;
+}
+header #user_login:hover {
+  max-height: 10em;
 }
 header #user_login > p {
-  display: inline-block;
   color: #EEE;
   font-size: .875em; line-height: 1.125em;
-  max-width: 12em;
+}
+header #user_login > p span {
+  display: block;
+  font-size: initial;
+  line-height: 1.375em;
+}
+header #user_login.login:before {
+  display: block;
+  content: "Login";
+  position: relative;
+  font-size: 1.25em;
+  text-decoration: underline;
+  top: -1.5em;
+  padding-bottom: 1em;
+  color: #EEE;
+  text-align: right;
+}
+header #user_login input,
+header #user_login button {
+  display: none;
+}
+header #user_login:hover input,
+header #user_login:hover button {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 main {
@@ -33,6 +78,16 @@ main {
   box-shadow: #000 .125em .125em 1em;
 }
 
+main nav {
+  font-size: .875em;
+  margin-top: -1em;
+}
+main nav > * {
+  padding: .125em .5em;
+  font-style: italic;
+  text-decoration: underline;
+}
+
 body.channel main h1.name {
   text-align: center;
 }