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 */ /* 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 */ /* Custom default button */
.btn-secondary, .btn-secondary,
.btn-secondary:hover, .btn-secondary:hover,

Binary file not shown.

After

Width:  |  Height:  |  Size: 211 KiB

View File

@ -26,12 +26,15 @@
{% block extra_header_block %}{% endblock %} {% block extra_header_block %}{% endblock %}
</head> </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 --> <div class="d-flex h-100 flex-column">
<header class="d-flex w-100 p-3 mx-auto flex-column text-white text-center"> <header class="container d-flex w-100 p-3 mx-auto flex-column text-white text-center">
<div> <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"> <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 %}" <a class="nav-link fw-bold py-1 px-0 {% if request.path == '/' %}active{% endif %}"
href="{% url 'index' %}">Home</a> href="{% url 'index' %}">Home</a>
@ -45,11 +48,11 @@
{% block main %}{% endblock %} {% 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> <p>
Clubhaus Schornbach 2007 - {% now 'Y' %} Clubhaus Schornbach 2007 - {% now 'Y' %}
<br> <br>
<a>Impressum</a> <a class="link-secondary" href="{% url 'impressum' %}">Impressum</a>
</p> </p>
</footer> </footer>
</div> </div>

View File

@ -5,7 +5,7 @@
{% block extra_header_block %} {% block extra_header_block %}
<style> <style>
.cus-bg-image { .cus-bg-image {
background-image: url("{% static 'homepage/web-party.jpg' %}"); background-image: url("{% static 'homepage/background.jpg' %}");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@ -35,7 +35,7 @@
<div class="container py-4 text-white"> <div class="container py-4 text-white">
<div class="row"> <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> </div>
<!-- countdown --> <!-- countdown -->
@ -61,12 +61,12 @@
<!-- links --> <!-- links -->
<div class="row justify-content-center my-5"> <div class="row justify-content-center my-5">
<div class="col-auto display-6 m-2"> <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> <span class="badge rounded-pill text-bg-dark"><i class="bi-spotify"></i> Playlist</span>
</a> </a>
</div> </div>
<div class="col-auto display-6 m-2"> <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> <span class="badge rounded-pill text-bg-dark"><i class="bi-cloud"></i> Wetter</span>
</a> </a>
</div> </div>

View File

@ -13,7 +13,8 @@
{% endblock %} {% endblock %}
{% block main %} {% block main %}
<div class="d-flex h-100 mx-3"> <div class="d-flex flex-column h-100 mx-3">
<main class="d-flex flex-grow-1 w-100 my-5 mx-auto bg-logo" style="max-width: 42rem"></main> <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> </div>
{% endblock %} {% endblock %}

View File

@ -3,23 +3,41 @@
{% block site_name %}Tobacco Card{% endblock %} {% 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 %} {% block extra_scripts_block %}
<script defer src="{% static 'homepage/assets/masonry/masonry.pkgd.min.js' %}"></script> <script defer src="{% static 'homepage/assets/masonry/masonry.pkgd.min.js' %}"></script>
{% endblock %} {% endblock %}
{% block main %} {% 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"> <div class="row text-center mb-3">
<h1>Tabacco Card</h1> <h1 class="fst-italic">Tobacco Card</h1>
</div> </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 %} {% for tobacco in tobaccos %}
<div class="col-sm-6 col-lg-4 col-sm-12 mb-4 text-center"> <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 {% if tobacco.in_stock %} bg-success {% else %} red-700 text-decoration-line-through {% endif %}">
<div class="card-body"> <div class="card-header">
<h5 class="card-title">{{ tobacco.name }}</h5> <h4 class="align-baseline">{{ tobacco.name }}</h4>
<h6 class="card-subtitle mb-2">{{ tobacco.category.name }}</h6> <h6 class="card-subtitle mb-2">{{ tobacco.category.name }}</h6>
</div>
<div class="card-body">
<p class="card-text">{{ tobacco.description }}</p> <p class="card-text">{{ tobacco.description }}</p>
</div> </div>
</div> </div>