From a9bfaa1cf981d9e7b8bfc340f945f7395939a41e Mon Sep 17 00:00:00 2001 From: Thomas Wade Date: Wed, 17 Oct 2018 18:35:41 +1030 Subject: [PATCH] Add basic structure and some styling --- index.html | 32 ++++++++++++++---- styles/default.css | 84 +++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 101 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index d50f0ab..4fe21b4 100644 --- a/index.html +++ b/index.html @@ -14,14 +14,32 @@
-
- +
+
+ + + Lemonblog + + + adds zest to your day + + +
+ Blog + About + FAQ +
+
+
+ Reserved for content + +
+
+ Footer +
-
- -
-
- +
+ Navigation goes here
diff --git a/styles/default.css b/styles/default.css index ac8035b..d3d1b8e 100644 --- a/styles/default.css +++ b/styles/default.css @@ -1,3 +1,8 @@ +@media (max-width: 1000px) +{ + /* Do some mobile processing here */ +} + html, body, .rootContainer @@ -11,30 +16,93 @@ body, background-color: #fff; } -.centreContainer +a { + font-weight: 600; + + text-decoration: none; + + color: #000; +} + +.centreColumn +{ + position: relative; + width: 800px; min-height: 100vh; + margin-left: calc(50vw - 400px); } .headerContainer { - line-height: 100px; + line-height: 70px; - width: 100%; - height: 100px; + width: calc(100% - 40px); + height: 70px; + margin-bottom: 50px; vertical-align: middle; + + color: #fff; +} + +.titleAndTagline +{ + font-weight: normal; + + display: inline-block; + + height: 100%; + padding-right: 20px; + padding-left: 20px; + + vertical-align: baseline; + + color: #fff; + background-color: #000; } .title { - font-size: 40pt; - - height: 100%; + font-size: 22pt; } .tagline { - height: 50px; + font-size: 10pt; +} + +.navButtons +{ + float: right; +} +.navButtons a +{ + display: inline-block; + + width: 60px; + height: 100%; + padding-right: 10px; + padding-left: 10px; + + text-align: center; + + 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; +} + +.footerContainer +{ + position: absolute; + bottom: 0; + + width: 100%; + height: 100px; }