header
This commit is contained in:
parent
30ef777ebf
commit
07f20b0134
85
www/data/styles.css
Normal file
85
www/data/styles.css
Normal file
@ -0,0 +1,85 @@
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.headerdiv {
|
||||
background-color: #353;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.headerdiv .logowrapper {
|
||||
flex: initial;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.headerdiv > .logowrapper > .logo {
|
||||
height: 30px;
|
||||
margin: 4px 0px 8px 6px;
|
||||
flex: initial;
|
||||
}
|
||||
|
||||
.tabrow {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background-color: #888;
|
||||
color: #FFF;
|
||||
border: 1px solid black;
|
||||
font-weight: bold;
|
||||
|
||||
margin: 5px 10px;
|
||||
padding: 0px 5px;
|
||||
min-width: 64px;
|
||||
vertical-align: center;
|
||||
text-align: center;
|
||||
|
||||
flex: initial;
|
||||
}
|
||||
|
||||
.tab_github {
|
||||
background-color: #4078c0;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.tab_split {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
cursor: pointer;
|
||||
color: blue;
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.tab_github:hover {
|
||||
background-color: #c9510c;
|
||||
color: black;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
|
||||
.logowrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.headerdiv {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tabrow {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
3
www/fragments/footer.php
Normal file
3
www/fragments/footer.php
Normal file
@ -0,0 +1,3 @@
|
||||
<div class="footerdiv">
|
||||
|
||||
</div>
|
16
www/fragments/header.php
Normal file
16
www/fragments/header.php
Normal file
@ -0,0 +1,16 @@
|
||||
<div class="headerdiv">
|
||||
<div class="logowrapper">
|
||||
<img class="logo" src="/images/logo.png" />
|
||||
</div>
|
||||
|
||||
<div class="tabrow">
|
||||
<div class="tab">Home</div>
|
||||
<div class="tab">Project Euler</div>
|
||||
<div class="tab">Blog</div>
|
||||
<div class="tab">Programs</div>
|
||||
<div class="tab">About</div>
|
||||
<div class="tab_split" ></div>
|
||||
<div class="tab tab_github">Github</div>
|
||||
</div>
|
||||
|
||||
</div>
|
BIN
www/images/logo.png
Normal file
BIN
www/images/logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 20 KiB |
@ -1,12 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Mikescher.com</title>
|
||||
<meta name="google-site-verification" content="pZOhmjeJcQbRMNa8xRLam4dwJ2oYwMwISY1lRKreSSs" />
|
||||
<link rel="icon" type="image/png" href="/images/favicon.png"/>
|
||||
<meta charset="utf-8">
|
||||
<title>Mikescher.com</title>
|
||||
<meta name="google-site-verification" content="pZOhmjeJcQbRMNa8xRLam4dwJ2oYwMwISY1lRKreSSs"/>
|
||||
<link rel="icon" type="image/png" href="/images/favicon.png"/>
|
||||
<link rel="stylesheet" href="/data/styles.css"/>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
Hello World
|
||||
<?php include (__DIR__ . '/../fragments/header.php'); ?>
|
||||
|
||||
<div class="content">
|
||||
|
||||
</div>
|
||||
|
||||
<?php include (__DIR__ . '/../fragments/footer.php'); ?>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user