diff --git a/index.html b/index.html index 4fe21b4..e21e20e 100644 --- a/index.html +++ b/index.html @@ -14,8 +14,8 @@
-
-
+
+
Lemonblog @@ -30,17 +30,19 @@ FAQ
+
+
Reserved for content +
+ Navigation goes here +
Footer
-
- Navigation goes here -
diff --git a/styles/default.css b/styles/default.css index d3d1b8e..bd28391 100644 --- a/styles/default.css +++ b/styles/default.css @@ -9,6 +9,8 @@ body, { font-family: Arial, Helvetica, sans-serif; + position: relative; + margin: 0; /* Override the default page border */ padding: 0; @@ -30,30 +32,44 @@ a position: relative; width: 800px; - min-height: 100vh; + min-height: calc(100vh - 120px); margin-left: calc(50vw - 400px); + padding-top: 120px; } .headerContainer { line-height: 70px; - width: calc(100% - 40px); + position: fixed; + z-index: 10; + top: 0; + + width: 100vw; height: 70px; - margin-bottom: 50px; vertical-align: middle; color: #fff; } +.centreHeaderContainer +{ + position: relative; + + width: 800px; + height: 70px; + margin-right: auto; + margin-left: auto; +} + .titleAndTagline { font-weight: normal; display: inline-block; - height: 100%; + height: 70px; padding-right: 20px; padding-left: 20px; @@ -79,10 +95,12 @@ a } .navButtons a { - display: inline-block; + display: block; + float: left; width: 60px; height: 100%; + margin: 0; padding-right: 10px; padding-left: 10px; @@ -90,12 +108,12 @@ a color: #fff; background-color: #000; - box-shadow: inset 0 0 0 3px #000; /* Box shadow hack to get an inset border */ } .navButtons a.current { color: #000; background-color: #fff; + box-shadow: inset 0 -10px 0 0 #000; /* Box shadow hack to get an inset border */ } .footerContainer @@ -106,3 +124,12 @@ a width: 100%; height: 100px; } + +.sidebar +{ + position: absolute; + top: 120px; + right: -200px; + + width: 200px; +}