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 @@
|
||||
* {
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #ffffff;
|
||||
text-size-adjust:100%
|
||||
background-attachment: fixed;
|
||||
background-color: #000000;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height:100vh
|
||||
}
|
||||
|
||||
main {
|
||||
display: block
|
||||
}
|
||||
|
||||
a {
|
||||
color: #268bd2;
|
||||
text-decoration:none
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
text-decoration:underline
|
||||
}
|
||||
|
||||
a strong {
|
||||
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
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: #000000;
|
||||
h1 {
|
||||
font-size:2rem
|
||||
}
|
||||
|
||||
.nav-link,
|
||||
.navbar-brand {
|
||||
color: #ffff;
|
||||
cursor: pointer;
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-top:1rem
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
margin-right: 1em !important;
|
||||
#sidebar {
|
||||
flex: 0 0 auto;
|
||||
padding:2rem
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #e70c0c;
|
||||
#sidebar .site-title {
|
||||
font-family: 'Abril Fatface', serif;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
margin-bottom: .5rem;
|
||||
margin-top:0
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
justify-content: flex-end;
|
||||
#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>
|
||||
<head>
|
||||
<title>F.D.G.L e. V.</title>
|
||||
<meta charset="utf-8">
|
||||
<!-- Bootstrap CSS file -->
|
||||
<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') }}">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-md">
|
||||
<a class="navbar-brand" href="/index.html"><img src="/static/logo.png" alt="logo"
|
||||
height="100"></a>
|
||||
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="main-navigation">
|
||||
<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>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
</head>
|
||||
<body class=post>
|
||||
<div id="sidebar">
|
||||
<header>
|
||||
<div class="site-title">
|
||||
<a href="{{ url_for("index") }}">
|
||||
<img src="{{ url_for('static', filename='logo.png') }}" alt="F.D.G.L." height="150"/>
|
||||
F.D.G.L. e.V.
|
||||
</a>
|
||||
</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>
|
||||
</div>
|
||||
</nav>
|
||||
<header class="page-header header container-fluid">
|
||||
</header>
|
||||
<main>
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</main>
|
||||
<footer class="page-footer">
|
||||
<div class="footer-copyright text-center">© F.D.G.L. e.V.</div>
|
||||
</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>
|
||||
<main class="container">
|
||||
<header>
|
||||
<h1 class="post-title">Lorem Ipsum</h1>
|
||||
</header>
|
||||
<div class="content">
|
||||
<div class="post-body">
|
||||
{% block content %}
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue