templates: create new style
Create new style without the need to relay on bootstrap and jQuery. Signed-off-by: Johannes Thumshirn <jth@kernel.org>pull/4/head
Johannes Thumshirn
4 years ago
parent
76e4cc96bc
commit
35c12af0bb
@ -1,27 +1,225 @@
|
|||||||
body {
|
* {
|
||||||
padding: 0;
|
box-sizing:border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: #ffffff;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
html {
|
||||||
background: #000000;
|
font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link,
|
body {
|
||||||
.navbar-brand {
|
text-size-adjust:100%
|
||||||
color: #ffff;
|
background-attachment: fixed;
|
||||||
cursor: pointer;
|
background-color: #000000;
|
||||||
|
color: rgba(255, 255, 255, 0.75);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height:100vh
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: block
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
a {
|
||||||
margin-right: 1em !important;
|
color: #268bd2;
|
||||||
|
text-decoration:none
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link:hover {
|
a:hover, a:focus {
|
||||||
color: #e70c0c;
|
text-decoration:underline
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-collapse {
|
a strong {
|
||||||
justify-content: flex-end;
|
color:inherit
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6, .site-title {
|
||||||
|
color: #313131;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.25;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
text-rendering:optimizeLegibility
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size:2rem
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-top:1rem
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding:2rem
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar .site-title {
|
||||||
|
font-family: 'Abril Fatface', serif;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: normal;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
margin-top:0
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar nav {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-nav-links {
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
background: #fff;
|
||||||
|
color: #515151;
|
||||||
|
padding:2rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
flex-direction:column
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > .content {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding-bottom:4rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > header {
|
||||||
|
background: transparent;
|
||||||
|
color: #fff;
|
||||||
|
margin:-1.5rem 2rem 2rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > header h1, .container > header h2 {
|
||||||
|
color:inherit
|
||||||
|
}
|
||||||
|
|
||||||
|
.home #sidebar {
|
||||||
|
text-align:center
|
||||||
|
}
|
||||||
|
|
||||||
|
.home #sidebar .site-title {
|
||||||
|
font-size:3.25rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.home #sidebar header ~ nav {
|
||||||
|
display:flex
|
||||||
|
}
|
||||||
|
|
||||||
|
.home #sidebar > * :last-child {
|
||||||
|
margin-bottom:0.5rem
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 49rem) {
|
||||||
|
body {
|
||||||
|
flex-direction: row;
|
||||||
|
min-height: 100vh;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
overflow-y:auto
|
||||||
|
}
|
||||||
|
|
||||||
|
body > * {
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
overflow-y:auto
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar, .home #sidebar {
|
||||||
|
text-align: left;
|
||||||
|
width:18rem
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar > * :last-child, .home #sidebar > * :last-child {
|
||||||
|
margin-bottom:0
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left:0
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar .site-title {
|
||||||
|
font-size:3.25rem
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar .site-title .back-arrow {
|
||||||
|
display:none
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar p.lead, #sidebar header ~ * {
|
||||||
|
display:block
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar header ~ nav {
|
||||||
|
display:flex
|
||||||
|
}
|
||||||
|
|
||||||
|
.index #sidebar {
|
||||||
|
margin-bottom:0
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
background: #fff;
|
||||||
|
color: #515151;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 4rem 4rem 0;
|
||||||
|
margin-left:18rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > header {
|
||||||
|
color: #313131;
|
||||||
|
margin:0
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > header h1, .container > header h2 {
|
||||||
|
color:inherit
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > header h1:last-child, .container > header h2:last-child {
|
||||||
|
margin-bottom:.5rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > * {
|
||||||
|
max-width: 38rem;
|
||||||
|
padding:0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar a {
|
||||||
|
color:#fff
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar a:hover, #sidebar a:focus {
|
||||||
|
text-decoration:underline
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 783px) {
|
||||||
|
.container > .content {
|
||||||
|
padding:1.5rem
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar #sidebar-nav-links {
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content:space-evenly
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar #sidebar-nav-links a {
|
||||||
|
display: inline-block;
|
||||||
|
margin:0 .5em
|
||||||
|
}
|
||||||
|
|
||||||
|
.home.index #sidebar {
|
||||||
|
padding: 1rem
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,44 +1,43 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<head>
|
<html lang="de">
|
||||||
<title>F.D.G.L e. V.</title>
|
<head>
|
||||||
<meta charset="utf-8">
|
<!-- CSS -->
|
||||||
<!-- Bootstrap CSS file -->
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
|
|
||||||
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class=post>
|
||||||
<nav class="navbar navbar-expand-md">
|
<div id="sidebar">
|
||||||
<a class="navbar-brand" href="/index.html"><img src="/static/logo.png" alt="logo"
|
<header>
|
||||||
height="100"></a>
|
<div class="site-title">
|
||||||
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
|
<a href="{{ url_for("index") }}">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<img src="{{ url_for('static', filename='logo.png') }}" alt="F.D.G.L." height="150"/>
|
||||||
</button>
|
F.D.G.L. e.V.
|
||||||
<div class="collapse navbar-collapse" id="main-navigation">
|
</a>
|
||||||
<ul class="navbar-nav">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="/index.html">Home</a>
|
|
||||||
</li> <li class="nav-item">
|
|
||||||
<a class="nav-link" href="/verein.html">Verein</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="/impressum.html">Impressum</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
</header>
|
||||||
|
<nav id="sidebar-nav-links">
|
||||||
|
<a class="page-link" href="{{ url_for('verein') }}">Verein</a>
|
||||||
|
<a class="page-link" href="#">News</a>
|
||||||
|
<a class="page-link" href="{{ url_for('impressum') }}">Impressum</a>
|
||||||
</nav>
|
</nav>
|
||||||
<header class="page-header header container-fluid">
|
</div>
|
||||||
|
<main class="container">
|
||||||
|
<header>
|
||||||
|
<h1 class="post-title">Lorem Ipsum</h1>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<div class="content">
|
||||||
|
<div class="post-body">
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{% endblock %}
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||||
|
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||||||
|
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
|
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||||
|
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||||
|
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||||
|
culpa qui officia deserunt mollit anim id est laborum.
|
||||||
|
{% endblock content %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer class="page-footer">
|
</body>
|
||||||
<div class="footer-copyright text-center">© F.D.G.L. e.V.</div>
|
</html>
|
||||||
</footer>
|
|
||||||
<!-- JS files: jQuery first, then Popper.js, then Bootstrap JS -->
|
|
||||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
|
|
||||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
|
|
||||||
<script src="{{ url_for('static', filename='main.js') }}"></script>
|
|
||||||
</body>
|
|
||||||
|
|||||||
Loading…
Reference in New Issue