brongniart
5 months ago
parent
7b98ca54a8
commit
812c73c94e
|
After Width: | Height: | Size: 50 KiB |
@ -0,0 +1,111 @@
|
||||
/* Conteneur pour les suggestions en deux colonnes */
|
||||
.quotes-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Citations */
|
||||
.citation-container {
|
||||
background: linear-gradient(to right, #4a148c, #7b1fa2);
|
||||
border-radius: 12px;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
width: 49%; /* Chaque citation occupe 45% de la largeur pour laisser 5% d'espace */
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
word-wrap: break-word; /* Permet de couper les mots trop longs */
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Fixe la taille pour s'assurer que toutes les citations restent cohérentes */
|
||||
.citation-container .text-content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 150px;
|
||||
}
|
||||
.quote {
|
||||
background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.citation-image {
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center; /* Centre verticalement le texte */
|
||||
word-wrap: break-word; /* Permet de couper les mots trop longs */
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.quoteContent {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 10px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.movie, .character, .year {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Mode sombre */
|
||||
body.dark-mode .quote {
|
||||
background: linear-gradient(to right, #4a148c, #7b1fa2);
|
||||
color:white;
|
||||
}
|
||||
|
||||
/* Mode clair */
|
||||
body.light-mode .quote {
|
||||
background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%);
|
||||
color:black; /* Changer le texte en noir pour le mode clair */
|
||||
}
|
||||
|
||||
body.light-mode .quote,
|
||||
body.light-mode .movie,
|
||||
body.light-mode .character,
|
||||
body.light-mode .year {
|
||||
color: black; /* Forcer le texte en noir pour le mode clair */
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.suggestions-container {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.citation-container {
|
||||
width: 100%; /* Chaque citation prend toute la largeur sur mobile */
|
||||
max-width: 100%;
|
||||
height: 100px; /* Supprimer la hauteur fixe sur mobile */
|
||||
}
|
||||
|
||||
.citation-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.quote {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
@ -1,11 +1,69 @@
|
||||
@import url(./style.css);
|
||||
@import url(./styleQuoteLittle.css);
|
||||
|
||||
/* ====== DEFAULT ====== */
|
||||
|
||||
|
||||
.search-container {
|
||||
margin-left: 5%;
|
||||
width: 90%;
|
||||
|
||||
height: 60px;
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
.search-container .searchButton {
|
||||
float: right;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.searchButton img{
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.search-container input[type="search"] {
|
||||
margin: 10px ;
|
||||
border:none;
|
||||
background: none;
|
||||
float:left;
|
||||
padding: 0;
|
||||
color: #00f;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
width:auto;
|
||||
}
|
||||
|
||||
.filtre{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
/* ====== DARK MODE ====== */
|
||||
/*body.dark-mode */
|
||||
|
||||
body.dark-mode .search-container {
|
||||
background: #fff;
|
||||
}
|
||||
body.dark-mode .search-container input[type="search"] {
|
||||
color: #000;
|
||||
}
|
||||
body.dark-mode .search-container .searchButton {
|
||||
background: linear-gradient(to right, #4a148c, #7b1fa2);
|
||||
}
|
||||
|
||||
/* ====== LIGHT MODE ====== */
|
||||
/*body.light-mode*/
|
||||
|
||||
|
||||
/* ====== DEFAULT ====== */
|
||||
body.light-mode .search-container {
|
||||
background: #ccc;
|
||||
}
|
||||
body.light-mode .search-container input[type="search"] {
|
||||
color: #000;
|
||||
}
|
||||
body.light-mode .search-container .searchButton {
|
||||
background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%);
|
||||
}
|
||||
@ -1,44 +1,46 @@
|
||||
<form action="#" method="post">
|
||||
|
||||
<input type="search" id="filtre" name="search"/>
|
||||
<form action="{{racine}}/search" method="post">
|
||||
<div class="search-container">
|
||||
<input type="search" placeholder="Recherche" id="filtre" name="search" value="{{ search }}"/>
|
||||
<button class="searchButton" type="submit"> <img src="images/search" alt='Search'> </button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="filtre">
|
||||
<div>
|
||||
<input type="radio" id="citation" name="type" value="citation" checked />
|
||||
<input type="radio" id="citation" name="type" value="citation" {% if type!='titre' or type!='personnage' %} checked {% endif %}/>
|
||||
<label for="citation">Citation</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" id="titre" name="type" value="titre" />
|
||||
<input type="radio" id="titre" name="type" value="titre" {% if type=='titre' %} checked {% endif %} />
|
||||
<label for="titre">Titre</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" id="personnage" name="type" value="personnage" />
|
||||
<input type="radio" id="personnage" name="type" value="personnage" {% if type=='personnage' %} checked {% endif %} />
|
||||
<label for="personnage">Personnage</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<p>Plus de filtre</p>
|
||||
|
||||
<div>
|
||||
<label>Filter by:</label>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="film" name="film" checked />
|
||||
<input type="checkbox" id="film" name="film" value="film" />
|
||||
<label for="film">Film</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="roman" name="roman" />
|
||||
<input type="checkbox" id="roman" name="roman" value="roman"/>
|
||||
<label for="roman">Roman</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" id="jeux_vidéo" name="jeux_vidéo" />
|
||||
<input type="checkbox" id="jeux_vidéo" name="jeux_vidéo" value="jeux_vidéo"/>
|
||||
<label for="jeux_vidéo">Jeux Vidéo</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="submit" value="Search" />
|
||||
-->
|
||||
|
||||
</form>
|
||||
@ -0,0 +1,9 @@
|
||||
<div class='citation-container quote'>
|
||||
<img src="{{ srcImg }}" alt='{{ sourceName }}' class='citation-image'>
|
||||
<div class='text-content'>
|
||||
<p class='quoteContent'>{{ quoteContent }}</p>
|
||||
<p class='movie'>- {{ sourceName }}</p>
|
||||
<p class='character'>Personnage : {{ nameCarac }}</p>
|
||||
<p class='year'>Année : {{ dateSortie }}</p>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in new issue