Skip to content

Commit

Permalink
Improve footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@odolbeau
odolbeau committed Dec 27, 2024
1 parent 4765312 commit 1d0f200
Show file tree
Hide file tree
Showing 2 changed files with 168 additions and 20 deletions.
128 changes: 117 additions & 11 deletions assets/styles/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,136 @@ $enable-negative-margins: true;
@import 'map';

body {
background-color: $gray-100;
font-family: 'Libre Franklin', sans-serif;
background-color: $gray-100;
font-family: 'Libre Franklin', sans-serif;
}

h1 {
@extend .text-uppercase;
@extend .text-primary;
@extend .text-uppercase;
@extend .text-primary;

font-family: 'Impact', sans-serif;
font-size: 4rem;
font-family: 'Impact', sans-serif;
font-size: 4rem;
}

h2 {
@extend .text-uppercase;
@extend .fw-semibold;
@extend .text-uppercase;
@extend .fw-semibold;

color: #666666;
color: #666666;
}

.card-hover:hover {
transform: scale(1.02);
box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
transform: scale(1.02);
box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

.navbar [aria-current] {
@extend .active;
}

.modern-footer {
@extend .bg-primary-subtle;

border-top: 1px solid rgba(0, 0, 0, 0.05);

.footer-logo {
font-size: 1.8rem;
font-weight: 700;
color: $gray-800;
text-decoration: none;
}

.footer-title {
font-weight: 600;
font-size: 1.2rem;
margin-bottom: 1.5rem;
position: relative;
display: inline-block;

&::after {
content: '';
position: absolute;
left: 0;
bottom: -5px;
width: 100%;
height: 2px;
background: linear-gradient(90deg, $primary, transparent);
}
}

.social-links {
display: flex;
gap: 15px;
}

.social-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: white;
display: flex;
align-items: center;
justify-content: center;
color: $gray-800;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

&:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(108, 92, 231, 0.2);
}
}

.quick-links {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
padding: 0;
list-style: none;

a {
@extend .link-dark;

text-decoration: none;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 5px;

&:hover {
transform: translateX(5px);
}

&::before {
content: '→';
opacity: 0;
transition: all 0.3s ease;
}

&:hover::before {
opacity: 1;
}
}
}

.footer-bottom {
background: $gray-100;

a {
text-decoration: none;

&:hover {
text-decoration: underline;
}
}

}

@media (max-width: 768px) {
.quick-links {
grid-template-columns: 1fr;
}
}
}
60 changes: 51 additions & 9 deletions templates/_base.html.twig
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{% extends '_skeleton.html.twig' %}

{% set current_route = app.request.attributes.get('_route') %}

{% block body %}
{% block header %}
{% set current_route = app.request.attributes.get('_route') %}

<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top text-bg-primary">
<div class="container-fluid">
Expand Down Expand Up @@ -107,13 +107,55 @@
</main>

{% block footer %}
<footer class="bg-primary-subtle border-top border-primary-subtle mt-5">
<div class="container mt-3">
<div class="d-flex justify-content-between flex-wrap">
{% if app.request.get('_route') != 'contact' %}
<p class="flex-fill">💬 Besoin d'aide ? Une question ? <a href="{{ path('contact') }}" class="text-black">C'est par ici</a> !</p>
{% endif %}
<p class="flex-fill text-end">Développé avec <span class="text-danger">♥</span> et <a href="https://github.com/altercampagne/eventoj/" class="text-black">en open source</a>.</p>
<footer class="modern-footer pt-5 mt-5">
<div class="container footer-content">
<div class="row g-4 mb-5">

<div class="col-lg-4 col-md-6">
<a href="{{ path('homepage') }}" class="footer-logo d-block mb-4">
AlterCampagne<span class="text-primary">.</span>
</a>
<p class="text-muted mb-4">Des tours itinérants à vélo à la rencontre des alternatives.</p>
<div class="social-links">
<a href="https://www.facebook.com/AlterTour/" class="social-icon" rel="nofollow"><i class="fab fa-facebook-f"></i></a>
<a href="https://www.youtube.com/user/altertour" class="social-icon" rel"nofollow"><i class="fab fa-youtube"></i></a>
<a href="https://github.com/altercampagne/" class="social-icon" rel"nofollow"><i class="fab fa-github"></i></a>
<!--
<a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
<a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
-->
</div>
</div>

<div class="col-lg-4 col-md-6">
<h3 class="footer-title">Liens utiles</h3>
<ul class="quick-links">
<li><a href="{{ path('event_list') }}">Nos évènements</a></li>
<li><a href="{{ path('alternative_map') }}">Les alternatives</a></li>
<li><a href="{{ path('faq') }}">Foire aux questions</a></li>
<li><a href="https://www.altercampagne.net/">Blog</a></li>
</ul>
</div>

<div class="col-lg-4 col-md-12">
<h3 class="footer-title">Contact</h3>
<p class="text-muted mb-4">Besoin d'aide ? Une question ? Nos bénévoles te répondrons dans les meilleurs délais.</p>
<a href="{{ current_route == 'contact' ? 'mailto:[email protected]' : path('contact') }}" class="btn btn-primary btn-lg w-100 opacity-75">Nous contacter</a>
</div>
</div>
</div>

<div class="footer-bottom border-top">
<div class="container">
<div class="row py-4 text-secondary">
<div class="col-md-6 text-center text-md-start">
<p class="mb-0">&copy; 2024 AlterCampagne.</p>
</div>
<div class="col-md-6 text-center text-md-end">
<p class="mb-0">Développé avec <i class="fas fa-heart text-danger"></i> et <a href="https://github.com/altercampagne/eventoj/">en open source</a>.</p>
</div>
</div>
</div>
</div>
</footer>
Expand Down

0 comments on commit 1d0f200

Please sign in to comment.