tom/webdev-assignment-2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Rework basic layout

Browse Source 
Title and nav are now little 'tabs' haging down from the top edge of the screen
This commit is contained in:
Thomas Wade 2018-10-17 22:05:19 +10:30
parent ab4a29ab41
commit 6560664615
2 changed files with 40 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -14,8 +14,8 @@
</head> </head>
<body> <body>
<div class="rootContainer"> <div class="rootContainer">
<div class="centreColumn"> <div class="headerContainer">
<div class="headerContainer"> <div class="centreHeaderContainer">
<a href="/" class="titleAndTagline"> <a href="/" class="titleAndTagline">
<span class="title"> <span class="title">
Lemonblog Lemonblog
@ -30,17 +30,19 @@
<a href="/faq">FAQ</a> <a href="/faq">FAQ</a>
</div> </div>
</div> </div>
</div>
<div class="centreColumn">
<div class="contentContainer"> <div class="contentContainer">
Reserved for content Reserved for content
<ng-view></ng-view> <ng-view></ng-view>
<div class="sidebar">
Navigation goes here
</div>
</div> </div>
<div class="footerContainer"> <div class="footerContainer">
Footer Footer
</div> </div>
</div> </div>
<div class="rightColumn">
Navigation goes here
</div>
</div> </div>
</body> </body>
</html> </html>

39
styles/default.css
View File

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