Adding image... but CSS sometimes is a bitch

This commit is contained in:
Reto Bollinger 2024-11-17 14:20:36 +01:00
parent 589bb4c70b
commit 3d19bf237a
6 changed files with 87 additions and 22 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

View file

@ -40,17 +40,66 @@ th, td {
} }
header, footer, div.page { header, footer, div.page {
position: relative;
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
background: #ececec; background: #ececec;
padding: 20px 30px;
color: #6c7d8c; color: #6c7d8c;
max-width: 1200px;
}
header > div.inner_header, footer > div.inner_footer, div.page > div.inner_page{
padding: 20px 30px;
}
div.inner_page > *{
margin: 0;
} }
div.page h1, div.page h2, div.page h3, div.page h4, div.page h5, div.page h6{ div.page h1, div.page h2, div.page h3, div.page h4, div.page h5, div.page h6{
color: #5d5d5d; color: #5d5d5d;
} }
div.inner_page {
position: relative;
top: 0;
padding: 0;
}
div.bgimage + div.inner_page {
position: absolute;
box-sizing: border-box;
}
.page .bgimage img {
display: block;
width: 100%;
max-width: 1200px; /* corresponds to max height of 450px */
margin: 0 auto;
filter: opacity(50%);
}
page .bgimage {
position: absolute;
box-sizing: border-box;
background: #fff;
}
.bgimage {
background: #fff;
}
/*
.inner_page{
position: absolute;
top: 0;
padding: 0px 30px;
box-sizing: border-box;
}
*/
header, footer { header, footer {
color: #b0b0b0; color: #b0b0b0;
} }

View file

@ -1,5 +1,6 @@
title: Willkommen beim Pistolenclub Stammertal! title: Willkommen beim Pistolenclub Stammertal!
--- ---
body: body:
<div class="image"><img src="/pc-stammertal-logo-minimal.svg"></div> <div class="image"><img src="/pc-stammertal-logo-minimal.svg"></div>
---
_template: title_page.html

View file

@ -10,27 +10,31 @@
<title>{% block title %}Welcome{% endblock %} — PCS</title> <title>{% block title %}Welcome{% endblock %} — PCS</title>
<body> <body>
<header> <header>
<h1>Pistolenclub Stammertal</h1> <div class="inner_header">
<nav> <h1>Pistolenclub Stammertal</h1>
<ul class="nav navbar-nav"> <nav>
<li{% if this._path == '/' %} class="active"{% endif <ul class="nav navbar-nav">
%}><a href="{{ '/'|url }}">Welcome</a></li> <li{% if this._path == '/' %} class="active"{% endif
{% for href, title in [ %}><a href="{{ '/'|url }}">Welcome</a></li>
['/termine', 'Termine'], {% for href, title in [
['/about', 'Über uns'], ['/termine', 'Termine'],
['/vorstand', 'Vorstand'], ['/about', 'Über uns'],
['/kontakt', 'Kontakt'] ['/vorstand', 'Vorstand'],
] %} ['/kontakt', 'Kontakt']
<li{% if this.is_child_of(href) %} class="active"{% endif ] %}
%}><a href="{{ href|url }}">{{ title }}</a></li> <li{% if this.is_child_of(href) %} class="active"{% endif
{% endfor %} %}><a href="{{ href|url }}">{{ title }}</a></li>
</ul> {% endfor %}
</nav> </ul>
</nav>
</div>
</header> </header>
<div class="page"> <div class="page">
{% block body %}{% endblock %} {% block body %}{% endblock %}
</div> </div>
<footer> <footer>
&copy; Copyright 2024 by PC Stammertal. <div class="inner_footer">
&copy; Copyright 2024 by PC Stammertal.
</div>
</footer> </footer>
</body> </body>

View file

@ -1,6 +1,8 @@
{% extends "layout.html" %} {% extends "layout.html" %}
{% block title %}{{ this.title }}{% endblock %} {% block title %}{{ this.title }}{% endblock %}
{% block body %} {% block body %}
<h2>{{ this.title }}</h2> <div class="inner_page">
{{ this.body }} <h2>{{ this.title }}</h2>
{{ this.body }}
</div>
{% endblock %} {% endblock %}

View file

@ -0,0 +1,9 @@
{% extends "layout.html" %}
{% block title %}{{ this.title }}{% endblock %}
{% block body %}
<div class="bgimage"><img src="/images/bg_image_welcome_1.jpg"></div>
<div class="inner_page">
<h2>{{ this.title }}</h2>
{{ this.body }}
</div>
{% endblock %}