eric/e-tandem_UI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Began footer

Browse source
This commit is contained in:
ericb 2024-12-02 16:48:19 +01:00
parent 5fa25967a6
commit 9b2e1e2665
2 changed files with 34 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

20
static/css/main.css
View file

@ -16,7 +16,7 @@ body {
/* -webkit-font-smoothing: antialiased; */ /* -webkit-font-smoothing: antialiased; */
font-variant-ligatures: no-common-ligatures; font-variant-ligatures: no-common-ligatures;
} }
h1, h2, h3, h4{ h1, h2, h3, h4, h5{
font-family: var(--bs-ttl-font-family); font-family: var(--bs-ttl-font-family);
} }
/* ::selection, ::-moz-selection { /* ::selection, ::-moz-selection {
@ -36,7 +36,7 @@ h1, h2, h3, h4{
--bs-link-color: #f28705; --bs-link-color: #f28705;
--bs-body-font-family: 'Nunito', Arial, Tahoma, sans-serif; --bs-body-font-family: 'Nunito', Arial, Tahoma, sans-serif;
--bs-ttl-font-family: 'Lexend', Arial, Tahoma, sans-serif; --bs-ttl-font-family: 'Lexend', Arial, Tahoma, sans-serif;
--top-bar: 98px; --top-bar: 6.125rem;
--bottom-bar: 5em; --bottom-bar: 5em;
--div-padding: 3em; --div-padding: 3em;
} }
@ -119,6 +119,8 @@ h1, h2, h3, h4{
background-image: linear-gradient(to right bottom, rgb(242,135,5), rgb(246,150,2), rgb(249,165,2), rgb(251,180,9), rgb(253,155,20)); background-image: linear-gradient(to right bottom, rgb(242,135,5), rgb(246,150,2), rgb(249,165,2), rgb(251,180,9), rgb(253,155,20));
margin-top: var(--top-bar); margin-top: var(--top-bar);
height: auto; height: auto;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
} }
.hero > div{ .hero > div{
display: flex; display: flex;
@ -379,7 +381,7 @@ footer a img{
/* media queries */ /* media queries */
@media (width <= 576px) { @media (width <= 576px) {
body{ body{
font-size: 1.125rem; font-size: 1.0625rem;
} }
:root{ :root{
--div-padding: 2em; --div-padding: 2em;
@ -414,6 +416,9 @@ footer a img{
} }
} }
@media (width <= 992px) { @media (width <= 992px) {
:root{
--top-bar: 5rem;
}
h1, h2, h3, h4{ h1, h2, h3, h4{
text-align: center; text-align: center;
} }
@ -454,11 +459,18 @@ footer a img{
background-color: #fdc314; background-color: #fdc314;
font-weight: 600; font-weight: 600;
} }
.offcanvas li:not(:first-child){
margin-top: initial;
}
#side-lang{ #side-lang{
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
padding: calc(var(--div-padding) / 2); padding: var(--div-padding);
}
.separator.menu-admin{
margin-top: 1.5rem;
padding-left: 2rem;
} }
} }
@media (576px <= width <= 992px) { @media (576px <= width <= 992px) {

24
tandem-list.html
View file

@ -52,7 +52,7 @@
<a href="#" role="menuitem" class="nav-link">Espace documentaire</a> <a href="#" role="menuitem" class="nav-link">Espace documentaire</a>
</li> </li>
</ul> </ul>
<div class="menu-separator">Admin</div> <div class="separator menu-admin">Admin</div>
<ul class="nav"> <ul class="nav">
<li class="nav-item"> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Gérer les comptes</a> <a href="#" role="menuitem" class="nav-link">Gérer les comptes</a>
@ -68,7 +68,7 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<div id="side-lang"> <div id="side-lang" class="ms-auto">
<div class="col"> <div class="col">
<label for="lang">Choisir la langue</label> <label for="lang">Choisir la langue</label>
<select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language"> <select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language">
@ -95,7 +95,7 @@
<img class="img-fluid" src="static/img/ban-3.png"> <img class="img-fluid" src="static/img/ban-3.png">
</div> </div>
<div class="col-lg-6 order-1 order-lg-2"> <div class="col-lg-6 order-1 order-lg-2">
<h1 class="display-5 fw-bold lh-1 mb-3 mb-lg-5">Rechercher des TANDEMs</h1> <h1 class="display-5 fw-bold">Rechercher des TANDEMs</h1>
</div> </div>
</div> </div>
</div> </div>
@ -355,9 +355,21 @@
</main> </main>
<footer> <footer class="row row-cols-1 row-cols-sm-2 row-cols-lg-5 py-5 border-top">
<div class="container"> <div class="col mb-3">
<a href="https://www.bilinguisme.ch/" target="_blank" rel="noopener"><img class="img-fluid" src="static/img/logo/forum-bilinguisme.svg"></a> <a href="https://www.bilinguisme.ch/" target="_blank" rel="noopener"><img class="img-fluid" src="static/img/logo/forum-bilinguisme.svg" alt="Forum du Bilinguisme"></a>
<p>© 2024</p>
</div>
<div class="col">
<h5>Forum du bilinguisme</h5>
<p>
Place Robert-Walser 7, CP 439<br>
2501 Biel/Bienne
</p>
<a href="mailto:support@e-tandem.ch">support@e-tandem.ch</a>
<br>
<a href="tel:+41 32 323 22 80">+41 32 323 22 80</a>
</div> </div>
</footer> </footer>
</body> </body>