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 |
@ -3,10 +3,18 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Mikescher.com</title>
|
<title>Mikescher.com</title>
|
||||||
<meta name="google-site-verification" content="pZOhmjeJcQbRMNa8xRLam4dwJ2oYwMwISY1lRKreSSs" />
|
<meta name="google-site-verification" content="pZOhmjeJcQbRMNa8xRLam4dwJ2oYwMwISY1lRKreSSs"/>
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.png"/>
|
<link rel="icon" type="image/png" href="/images/favicon.png"/>
|
||||||
|
<link rel="stylesheet" href="/data/styles.css"/>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
Hello World
|
<?php include (__DIR__ . '/../fragments/header.php'); ?>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php include (__DIR__ . '/../fragments/footer.php'); ?>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
Loading…
Reference in New Issue
Block a user