Skip to content

Changes

Page history
Mise à jour de _test_home authored by COUILLARD Eric's avatar COUILLARD Eric
Show whitespace changes
Inline Side-by-side
test.md
View page @ 16b34784
--- ---
title: _test_home title: _test_home
--- ---
<main class="wiki-home"> <main class="wiki-home">
<style> <style>
/* Styles spécifiques à cette page */ :root {
--tile-border-color: #ddd;
--tile-hover-bg: #f5f5f5;
--tile-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.wiki-home .grid-container { .wiki-home .grid-container {
display: grid; display: grid;
gap: 20px; gap: 20px;
...@@ -13,7 +16,7 @@ title: _test_home ...@@ -13,7 +16,7 @@ title: _test_home
} }
.wiki-home .tile { .wiki-home .tile {
border: 1px solid #ddd; border: 1px solid var(--tile-border-color);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
transition: all 0.3s ease; transition: all 0.3s ease;
...@@ -21,18 +24,19 @@ title: _test_home ...@@ -21,18 +24,19 @@ title: _test_home
flex-direction: column; flex-direction: column;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
background-color: #fff;
} }
.wiki-home .tile:hover { .wiki-home .tile:hover,
.wiki-home .tile:focus-within {
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1); box-shadow: var(--tile-shadow);
filter: grayscale(50%);
} }
.wiki-home .tile-image { .wiki-home .tile-image {
position: relative; position: relative;
width: 100%; width: 100%;
padding-top: 56.25%; /* Ratio 16:9 */ padding-top: 56.25%; /* Ratio 16:9 par défaut */
overflow: hidden; overflow: hidden;
} }
...@@ -43,6 +47,12 @@ title: _test_home ...@@ -43,6 +47,12 @@ title: _test_home
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: filter 0.3s ease;
}
.wiki-home .tile:hover img,
.wiki-home .tile:focus-within img {
filter: grayscale(50%);
} }
.wiki-home .tile-content { .wiki-home .tile-content {
...@@ -50,10 +60,26 @@ title: _test_home ...@@ -50,10 +60,26 @@ title: _test_home
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: background-color 0.3s ease;
}
.wiki-home .tile:hover .tile-content,
.wiki-home .tile:focus-within .tile-content {
background-color: var(--tile-hover-bg);
} }
.wiki-home .tile h2 { .wiki-home .tile h2 {
margin-top: 0; margin-top: 0;
color: #333;
}
.wiki-home .tile p {
color: #666;
}
.wiki-home .tile:focus {
outline: 3px solid #4a90e2;
outline-offset: 2px;
} }
/* Responsive design */ /* Responsive design */
...@@ -70,75 +96,29 @@ title: _test_home ...@@ -70,75 +96,29 @@ title: _test_home
} }
</style> </style>
<h1>Bienvenue sur le portail des ressources numériques</h1>
<p>Une plateforme pour découvrir de nouveaux usages numériques</p></br>
<div class="grid-container"> <div class="grid-container">
<!-- Tuile 1 --> <!-- Tuile 1 -->
<a href="../Portail" class="tile"> <a href="/lien-vers-page1" class="tile" aria-label="En savoir plus sur Grist">
<div class="tile-image"> <div class="tile-image">
<img src="../uploads/6933d6e1370d2ca95b3d362b4a7cced2/club.svg" alt="Grist"> <img src="../uploads/6933d6e1370d2ca95b3d362b4a7cced2/club.svg" alt="Grist" loading="lazy">
</div> </div>
<div class="tile-content"> <article class="tile-content">
<h2>GRIST</h2> <h2>Grist</h2>
<p>Découvrez les fonctionnalités essentielles de GRIST et apprenez à le maîtriser.</p> <p>Découvrez les fonctionnalités essentielles de GRIST et apprenez à le maîtriser.</p>
</div> </article>
</a> </a>
<!-- Tuile 2 --> <!-- Tuile 2 -->
<a href="../parapheur" class="tile"> <a href="/lien-vers-page2" class="tile" aria-label="En savoir plus sur Ressource 2">
<div class="tile-image"> <div class="tile-image" style="padding-top: 75%;"><!-- Ratio 4:3 -->
<img src="../uploads/268554f4e23fb4173ba1ae8de88b299f/collectif.svg" alt="Parapheur"> <img src="../uploads/268554f4e23fb4173ba1ae8de88b299f/collectif.svg" alt="Parapheur" loading="lazy">
</div> </div>
<div class="tile-content"> <article class="tile-content">
<h2>Parapheur</h2> <h2>Parapheur</h2>
<p>Dématérialisez vos circuits de validation et embarquez de la signature électronique certifiée.</p> <p>Dématérialisez vos circuits de validation et embarquez de la signature électronique certifiée.</p>
</div> </article>
</a> </a>
<!-- Tuile 3 --> <!-- Répéter pour les tuiles 3-6 -->
<a href="/lien-vers-page3" class="tile">
<div class="tile-image">
<img src="../uploads/7e19b2d3c08627b2974fabae4d662d81/pc.svg" alt="PC">
</div>
<div class="tile-content">
<h2>Sécurité</h2>
<p>Paramétrage, sécurité, gestion des fichiers et bonnes pratiques d’entretien de votre environnement de travail.</p>
</div>
</a>
<!-- Tuile 4 -->
<a href="/lien-vers-page4" class="tile">
<div class="tile-image">
<img src="../uploads/aeb48d794189cf0ffe36458683b8fed8/visio.svg" alt="visio">
</div>
<div class="tile-content">
<h2>Visioconférence</h2>
<p>Applications recommandées, connexion sécurisée, et synchronisation avec vos outils professionnels.</p>
</div>
</a>
<!-- Tuile 5 -->
<a href="/lien-vers-page5" class="tile">
<div class="tile-image">
<img src="../uploads/aeb48d794189cf0ffe36458683b8fed8/visio.svg" alt="visio">
</div>
<div class="tile-content">
<h2>Ressource 5</h2>
<p>Description de la ressource 5.</p>
</div>
</a>
<!-- Tuile 6 -->
<a href="/lien-vers-page6" class="tile">
<div class="tile-image">
<img src="chemin/vers/image6.jpg" alt="Ressource 6">
</div>
<div class="tile-content">
<h2>Ressource 6</h2>
<p>Description de la ressource 6.</p>
</div>
</a>
</div> </div>
</main> </main>
\ No newline at end of file