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

Add basic structure and some styling

Browse Source
This commit is contained in:
Thomas Wade 2018-10-17 18:35:41 +10:30
parent 4153fbbf63
commit a9bfaa1cf9
2 changed files with 101 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@ -14,14 +14,32 @@
</head> </head>
<body> <body>
<div class="rootContainer"> <div class="rootContainer">
<div class="centreColumn">
<div class="headerContainer"> <div class="headerContainer">
<a href="/" class="titleAndTagline">
<span class="title">
Lemonblog
</span>
<span class="tagline">
adds zest to your day
</span>
</a>
<div class="navButtons">
<a href="/" class="current">Blog</a>
<a href="/about">About</a>
<a href="/faq">FAQ</a>
</div>
</div> </div>
<div class="contentContainer"> <div class="contentContainer">
Reserved for content
<ng-view></ng-view>
</div> </div>
<div class="footerContainer"> <div class="footerContainer">
Footer
</div>
</div>
<div class="rightColumn">
Navigation goes here
</div> </div>
</div> </div>
</body> </body>

84
styles/default.css
View File

@ -1,3 +1,8 @@
@media (max-width: 1000px)
{
/* Do some mobile processing here */
}
html, html,
body, body,
.rootContainer .rootContainer
@ -11,30 +16,93 @@ body,
background-color: #fff; background-color: #fff;
} }
.centreContainer a
{ {
font-weight: 600;
text-decoration: none;
color: #000;
}
.centreColumn
{
position: relative;
width: 800px; width: 800px;
min-height: 100vh; min-height: 100vh;
margin-left: calc(50vw - 400px);
} }
.headerContainer .headerContainer
{ {
line-height: 100px; line-height: 70px;
width: 100%; width: calc(100% - 40px);
height: 100px; height: 70px;
margin-bottom: 50px;
vertical-align: middle; 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 .title
{ {
font-size: 40pt; font-size: 22pt;
height: 100%;
} }
.tagline .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;
} }