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

32
index.html
View File

@ -14,14 +14,32 @@
</head>
<body>
<div class="rootContainer">
<div class="headerContainer">
<div class="centreColumn">
<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 class="contentContainer">
Reserved for content
<ng-view></ng-view>
</div>
<div class="footerContainer">
Footer
</div>
</div>
<div class="contentContainer">
</div>
<div class="footerContainer">
<div class="rightColumn">
Navigation goes here
</div>
</div>
</body>

84
styles/default.css
View File

@ -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;
}