feat(ui): mets en forme la page d'accueil
Parent
8f96a865a3
révision
edbab8dd8b
|
@ -4,6 +4,7 @@
|
|||
"stylelint-prettier/recommended"
|
||||
],
|
||||
"rules": {
|
||||
"selector-class-pattern": null,
|
||||
"scss/at-function-named-arguments": null,
|
||||
"scss/at-mixin-argumentless-call-parentheses": "never",
|
||||
"scss/at-rule-conditional-no-parentheses": true
|
||||
|
|
Fichier binaire non affiché.
Après Largeur: | Hauteur: | Taille: 5.7 KiB |
Fichier binaire non affiché.
Après Largeur: | Hauteur: | Taille: 14 KiB |
|
@ -4,6 +4,7 @@
|
|||
|
||||
.topbar {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
padding: $navbar-padding-y $navbar-padding-x;
|
||||
background-color: $orange-lighter;
|
||||
}
|
||||
|
@ -31,6 +32,7 @@
|
|||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
color: $gray;
|
||||
pointer-events: auto;
|
||||
background: transparent;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 2px;
|
||||
|
|
|
@ -22,4 +22,5 @@
|
|||
@import 'components/topbar';
|
||||
|
||||
// Pages spécifiques
|
||||
@import 'pages/home';
|
||||
@import 'pages/registration';
|
||||
|
|
|
@ -0,0 +1,77 @@
|
|||
// -----------------------------------------------------------------------------
|
||||
// Styles de la page d'accueil
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
.home-page {
|
||||
.topbar {
|
||||
pointer-events: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.topbar-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.home-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
transition: padding 0.15s ease-in-out, opacity 0.15s ease-in-out;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-wrapper,
|
||||
.home__depot,
|
||||
.home__reservation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.home__depot,
|
||||
.home__reservation {
|
||||
flex: 1 0 0%;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.home__depot {
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
$green,
|
||||
$green 50%,
|
||||
tint-color($green, 30%)
|
||||
);
|
||||
border-bottom: 2px solid rgba($white, 0.75);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.home__reservation {
|
||||
background: linear-gradient(
|
||||
225deg,
|
||||
$brown,
|
||||
$brown 50%,
|
||||
tint-color($brown, 30%)
|
||||
);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
}
|
|
@ -32,7 +32,7 @@
|
|||
{% icon "menu" %}
|
||||
</button>
|
||||
|
||||
<div class="container flex-grow-1">
|
||||
<div class="topbar-container container flex-grow-1">
|
||||
<div class="d-flex">
|
||||
<a class="topbar-brand d-none d-md-block" href="{% url "home" %}">
|
||||
Bike'Eco
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{% extends "base.html" %}
|
||||
{% load navtag %}
|
||||
{% load navtag static %}
|
||||
|
||||
{% block nav %}
|
||||
{% nav "home" %}
|
||||
|
@ -7,7 +7,18 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content_container %}
|
||||
<div class="container">
|
||||
<h1 class="title my-3">Bienvenue dans Bike'Eco !</h1>
|
||||
<div class="home-wrapper">
|
||||
<a href="#" class="home__depot">
|
||||
<div class="text-end">
|
||||
<img class="img-fluid" src="{% static "img/poubelle.png" %}" alt="">
|
||||
</div>
|
||||
<h2 class="title mb-0 text-start">Alerte dépôts sauvages</h2>
|
||||
</a>
|
||||
<a href="#" class="home__reservation">
|
||||
<h2 class="title mb-0 text-end">Réservation de vélos</h2>
|
||||
<div class="text-start">
|
||||
<img class="img-fluid" src="{% static "img/velo.png" %}" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
Chargement…
Référencer dans un nouveau ticket