panki/pankisPage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

colors, some sort of structure. i think. if you are reading this, send help in form of web design skilzz

Browse Source
This commit is contained in:
Felix Pankratz 2020-03-04 23:19:26 +01:00
parent 73b1ce69db
commit 3e2ac792f9
2 changed files with 62 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
static/style.css
View File

@ -1 +1,46 @@
:root {
--background: #071e22;
--navbar: #1d7874;
--link: #f4c095;
--linkhl: #ee2e31
}
.header {
font-size: 32px;
height: 40;
background-color: var(--navbar);
}
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 60; /* Stay at the top */
left: 0;
background-color: var(--navbar); /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: var(--link);
display: block;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: var(--linkhl);
}
/* Style page content */
.main {
margin-left: 160px; /* Same as the width of the sidebar */
padding: 0px 10px;
background-color: var(--background);
}

20
templates/master.html
View File

@ -1,8 +1,9 @@
<docctype html>
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="static/style.css">
{% if subpage %}
<title>Felix Pankratz - {{subpage}}</title>
{% else %}
@ -10,6 +11,19 @@
{% endif %}
</head>
<body>
<h1>Felix Pankratz</h1>
</h2>Persönliche Webseite</h2>
<div class="header">
Felix Pankratz
</div>
<!-- Side navigation -->
<div class="sidenav">
<a href="#">About</a>
<a href="#">Projekte</a>
<a href="#">Monitoring</a>
<a href="#">Disclaimer</a>
</div>
<div class="main">
<p> Lorem Ipsum dolor sit amet! </p>
</div>
</body>