1
0

Add tims first feedback, some smaller css adjustments

This commit is contained in:
Marcel Schwarz 2022-08-05 23:19:37 +02:00
parent 986b529794
commit d84de5b391
11 changed files with 64 additions and 18 deletions

View File

@ -1,5 +1,29 @@
/* Globals */
/* milestone */
@font-face {
font-family: "Milestone";
src:
url("./fonts/milestone/milestone.otf") format("opentype"),
url("./fonts/milestone/milestone.woff") format("woff"),
url("./fonts/milestone/milestone.woff2") format("woff2");
}
.font-milestone {
font-family: "Milestone", "serif";
}
/* oleo-script-regular - latin */
@font-face {
font-family: "Oleo Script";
src:
url("./fonts/oleo-script/oleo-script-v14-latin-regular.woff") format("woff"),
url("./fonts/oleo-script/oleo-script-v14-latin-regular.woff2") format("woff2");
}
.font-oleo {
font-family: "Oleo Script", "serif";
}
/* Custom default button */
.btn-secondary,
.btn-secondary:hover,

Binary file not shown.

After

Width:  |  Height:  |  Size: 211 KiB

View File

@ -26,12 +26,15 @@
{% block extra_header_block %}{% endblock %}
</head>
<body class="bg-dark h-100"> <!-- d-flex h-100 text-center text-white bg-dark -->
<body class="bg-dark h-100">
<div class="d-flex h-100 flex-column"> <!-- d-flex w-100 h-100 p-3 mx-auto flex-column -->
<header class="d-flex w-100 p-3 mx-auto flex-column text-white text-center">
<div class="d-flex h-100 flex-column">
<header class="container d-flex w-100 p-3 mx-auto flex-column text-white text-center">
<div>
<h3 class="float-md-start mb-0">Clubhaus Schornbach</h3>
<h3 class="float-md-start mb-0 font-oleo">
<a class="text-white text-decoration-none"
href="{% url 'index' %}">Clubhaus Schornbach</a>
</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link fw-bold py-1 px-0 {% if request.path == '/' %}active{% endif %}"
href="{% url 'index' %}">Home</a>
@ -45,11 +48,11 @@
{% block main %}{% endblock %}
<footer class="d-flex w-100 p-3 mx-auto flex-column text-white text-center text-white-50">
<footer class="container d-flex w-100 p-3 mx-auto flex-column text-white text-center text-white-50">
<p>
Clubhaus Schornbach 2007 - {% now 'Y' %}
<br>
<a>Impressum</a>
<a class="link-secondary" href="{% url 'impressum' %}">Impressum</a>
</p>
</footer>
</div>

View File

@ -5,7 +5,7 @@
{% block extra_header_block %}
<style>
.cus-bg-image {
background-image: url("{% static 'homepage/web-party.jpg' %}");
background-image: url("{% static 'homepage/background.jpg' %}");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
@ -35,7 +35,7 @@
<div class="container py-4 text-white">
<div class="row">
<h1 class="display-1 fw-bold">{{ next_event.name }} Event</h1>
<h1 class="display-1 fw-bold fst-italic">{{ next_event.name }}</h1>
</div>
<!-- countdown -->
@ -61,12 +61,12 @@
<!-- links -->
<div class="row justify-content-center my-5">
<div class="col-auto display-6 m-2">
<a href="#info">
<a href="https://open.spotify.com/playlist/00FYaeOKftIb4zWDEShmtD?si=78a7ac31b6f84992" target="_blank">
<span class="badge rounded-pill text-bg-dark"><i class="bi-spotify"></i> Playlist</span>
</a>
</div>
<div class="col-auto display-6 m-2">
<a href="#info">
<a href="https://www.wetter.com/deutschland/schorndorf/DE0009600.html" target="_blank">
<span class="badge rounded-pill text-bg-dark"><i class="bi-cloud"></i> Wetter</span>
</a>
</div>

View File

@ -13,7 +13,8 @@
{% endblock %}
{% block main %}
<div class="d-flex h-100 mx-3">
<main class="d-flex flex-grow-1 w-100 my-5 mx-auto bg-logo" style="max-width: 42rem"></main>
<div class="d-flex flex-column h-100 mx-3">
<main class="d-flex row flex-grow-1 w-100 mt-5 mb-4 mx-auto bg-logo" style="max-width: 42rem"></main>
<div class="d-flex mb-3 mt-0 mx-auto flex-column text-white text-center display-3 font-milestone">The Original</div>
</div>
{% endblock %}

View File

@ -3,23 +3,41 @@
{% block site_name %}Tobacco Card{% endblock %}
{% block extra_header_block %}
<style>
.indigo-800 {
background-color: #290661;
}
.red-700 {
background-color: #841f29;
}
.red-800 {
background-color: #58151c;
}
</style>
{% endblock %}
{% block extra_scripts_block %}
<script defer src="{% static 'homepage/assets/masonry/masonry.pkgd.min.js' %}"></script>
{% endblock %}
{% block main %}
<main class="container text-white w-100">
<main class="container d-flex flex-grow-1 flex-column text-white w-100">
<div class="row text-center mb-3">
<h1>Tabacco Card</h1>
<h1 class="fst-italic">Tobacco Card</h1>
</div>
<div class="row m-0" data-masonry='{"percentPosition": true }'>
<div class="w-100 row m-0" data-masonry='{"percentPosition": true }'>
{% for tobacco in tobaccos %}
<div class="col-sm-6 col-lg-4 col-sm-12 mb-4 text-center">
<div class="card {% if tobacco.in_stock %} bg-success {% else %} bg-secondary text-decoration-line-through {% endif %}">
<div class="card-body">
<h5 class="card-title">{{ tobacco.name }}</h5>
<div class="card {% if tobacco.in_stock %} bg-success {% else %} red-700 text-decoration-line-through {% endif %}">
<div class="card-header">
<h4 class="align-baseline">{{ tobacco.name }}</h4>
<h6 class="card-subtitle mb-2">{{ tobacco.category.name }}</h6>
</div>
<div class="card-body">
<p class="card-text">{{ tobacco.description }}</p>
</div>
</div>