Bassic stylesheet

This commit is contained in:
Homer S. 2022-02-10 22:37:51 +01:00
parent 4dafd4cbfc
commit eabf4c1f5b
2 changed files with 63 additions and 14 deletions

View File

@ -1,6 +1,7 @@
body {
font-family: 'Verdana', sans-serif;
margin: 50px 25px;
margin:0;
}
a {
@ -11,32 +12,75 @@ a:hover {
color: #33bbdf;
}
header, footer, div.page {
width: 760px;
margin: 0 auto;
background: #daeef3;
padding: 20px 30px;
header {
display: flex;
flex-flow: row-reverse wrap;
height:auto;
width:100%;
background: transparent;
}
header h1 {
color: #169bbd;
flex: 1;
background: #5522ee;
color: #4010b0;
margin: 0;
font-weight: normal;
font-size: 42px;
}
header nav {
background:#4010b0;
color: #5522ee;
flex: 3;
}
header nav ul {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
width:100%;
list-style: none;
margin: 0;
padding: 0;
}
header nav ul li {
display: inline;
margin: 0 8px 0 0;
display: block;
margin:0;
padding: 0;
}
div.page {
background: #f1fbfe;
header nav ul li a {
color: #5522ee;
text-decoration: none;
font-weight: bold;
}
header nav ul li a:hover {
color: #7744ff;
}
div#flex {
display: flex;
flex-flow: row wrap;
}
main {
flex: 3;
background: #4010b0;
color: #5522ee;
}
aside {
flex: 1;
background: #5522ee;
color: #4010b0;
}
footer {
width:100%;
height:auto;
}

View File

@ -4,7 +4,7 @@
<title>{% block title %}Welcome{% endblock %} — PodcastLektor</title>
<body>
<header>
<h1>PodcastLektor</h1>
<h1>Podcast</h1>
<nav>
<ul class="nav navbar-nav">
<li{% if this._path == '/' %} class="active"{% endif
@ -18,10 +18,15 @@
%}><a href="{{ href|url }}">{{ title }}</a></li>
{% endfor %}
</ul>
</nav>
</nav>
</header>
<div class="page">
<div id="flex">
<main>
{% block body %}{% endblock %}
</main>
<aside>
{% block aside %}<h1>Widgets</h1>{% endblock %}
</aside>
</div>
<footer>
&copy; Copyright 2022 by Homer S..