Bassic stylesheet
This commit is contained in:
parent
4dafd4cbfc
commit
eabf4c1f5b
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
© Copyright 2022 by Homer S..
|
||||
|
|
Loading…
Reference in New Issue