diff --git a/themes/default/index.html b/themes/default/index.html
index 967e63e..9b5ed0a 100644
--- a/themes/default/index.html
+++ b/themes/default/index.html
@@ -19,12 +19,15 @@
diff --git a/themes/default/style.css b/themes/default/style.css
index 963bf1e..b1f3ca9 100644
--- a/themes/default/style.css
+++ b/themes/default/style.css
@@ -219,18 +219,33 @@ blockquote {
margin: 0;
float: left;
}
-#header .nav {
+#header .menu-icon {
+ display: none;
+ width: 35px;
+ height: 35px;
+ background: #afe1da url(menu-icon.png) center;
+}
+#header nav {
float: right;
list-style: none;
margin: 0;
padding: 0;
}
-#header .nav li { display: inline; }
-#header .nav a {
+#header nav a {
font-weight: bold;
margin-left: 20px;
}
-
+#header a:hover#menu-icon {
+ background-color: #444;
+ border-radius: 4px 4px 0 0;
+}
+#header ul {
+ list-style: none;
+}
+#header li {
+ display: inline-block;
+ float: left;
+}
#footer {
background: #707070;
padding: 60px 0;
@@ -254,3 +269,91 @@ blockquote {
*zoom: 1;
}
+/* Media Queries
+/*---------------------------------------------*/
+
+/* Small Devices, Tablets */
+@media only screen and (max-width : 768px) {
+
+ .inner {
+ width: 85%;
+ }
+ .inner img {
+ width:100%;
+ }
+ #header {
+ margin-bottom: 40px;
+ }
+ #header h1 a {
+ font-size:1em;
+ }
+ #header .menu-icon {
+ display:inline-block;
+ }
+ #header nav a { color: #000; }
+ #header nav a:hover { color: #afe1da; }
+ #header nav ul, nav:active ul {
+ display: none;
+ position: absolute;
+ padding: 20px;
+ background: #fff;
+ border: 5px solid #444;
+ right: 2.7em;
+ top: 100px;
+ width: 80%;
+ border-radius: 4px 0 4px 4px;
+ z-index: 9999;
+ }
+ #header nav li {
+ text-align: center;
+ width: 100%;
+ padding: 10px 0;
+ margin: 0;
+ }
+ #header nav:hover ul {
+ display: block;
+ }
+
+}
+
+/* Extra Small Devices, Phones */
+@media only screen and (max-width : 480px) {
+
+ .inner {
+ width: 85%;
+ }
+ .inner img {
+ width:100%;
+ }
+ #header {
+ margin-bottom: 30px;
+ }
+ #header h1 a {
+ font-size:1em;
+ }
+ #header .menu-icon {
+ display:inline-block;
+ }
+ #header nav a { color: #000; }
+ #header nav a:hover { color: #afe1da; }
+ #header nav ul, nav:active ul {
+ display: none;
+ position: absolute;
+ padding: 20px;
+ background: #fff;
+ border: 5px solid #444;
+ right: 0em;
+ top: 100px;
+ width: auto;
+ border-radius: 4px 0 4px 4px;
+ }
+ #header nav li {
+ text-align: center;
+ width: 100%;
+ padding: 10px 0;
+ margin: 0;
+ }
+ #header nav:hover ul {
+ display: block;
+ }
+}
\ No newline at end of file