clean css

This commit is contained in:
Kevin Tessier 2020-09-15 12:53:50 +02:00
parent cca5ead09a
commit dedd9459e3
12 changed files with 339 additions and 147 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -3,6 +3,7 @@ $colorWhite: white;
$colorYellow:#ffcc00;
$colorBlack:black;
$colorBlue:#009ee0ff;
$colorRed:#f51212;
$colorBlack:black;
$heightLogo: 115px;

View File

@ -48,10 +48,6 @@ li,ul,ol{
}
}
footer{
display: none!important;
}
.wrap-btn{
margin-top: 2rem;
@media screen and (min-width: 576px) {

View File

@ -1,30 +1,71 @@
&.agenda, &.archive{
main{
padding-top: 10rem;
h2{
border: 5px solid $colorYellow;
text-transform: uppercase;
width: max-content;
display: inline-block;
padding: 0.5rem 1.5rem;
z-index: 999;
left: -0rem;
background: white;
position: relative;
margin-bottom: 2rem;
transform: translateX(0%) rotate(-15deg);
@media screen and (min-width: 576px) {
transform: translateX(0%) rotate(-15deg);
}
@media screen and (min-width: 1200px) {
transform: translateX(-50%) rotate(-15deg);
}
}
section{
&.filter{
flex-direction: column;
ul{
margin-bottom: 2rem;
}
}
.cat-list{
li{
border: 5px solid black;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
margin-left: 1rem;
cursor:pointer;
transition: background 0.3s ease, color 0.3s ease;
a{
color: black;
}
&:hover{
background:black;
color: white;
transition: all 0.3s ease;
a{
color: inherit;
}
}
&.is-active{
background:black;
color: white;
a{
color: inherit;
}
}
}
&:not(.cat-list){
justify-content: end;
li{
margin-right: 1rem;
}
}
}
}
}
.thumbnails{
a{
display: block;
}
margin-bottom: 2rem;
.wrap_content{
display: flex;

View File

@ -2,7 +2,7 @@
aside{
height: 100%;
& > .wrapper{
border:5px solid yellow;
border:5px solid $colorYellow;
padding: 1rem 2rem;
}
#bouton_asso{
@ -10,7 +10,7 @@
text-align: center;
a{
padding: 0.5rem 1rem;
border:5px solid yellow;
border:5px solid $colorYellow;
}
}
}
@ -28,7 +28,7 @@
}
}
article{
border: 5px solid yellow;
border: 5px solid $colorYellow;
margin-bottom: 20px;
padding: 2rem;
}

View File

@ -13,7 +13,7 @@
}
.container-fluid{
& > h3{
border: 5px solid black;
text-transform: uppercase;
width: max-content;
display: inline-block;
padding: 0.5rem 1.5rem;
@ -40,6 +40,11 @@
}
}
&#section_proch{
& > .container-fluid{
h3{
border: 5px solid $colorYellow;
}
}
& > div{
& > .row{
justify-content: center;
@ -59,8 +64,71 @@
}
}
}
&#section_asso{
.container-fluid{
& > h3{
border: 5px solid $colorYellow;
}
& > .row{
position: relative;
}
figure {
position: absolute;
top: 0;
left: 0;
margin-top: 100px;
width: 70%;
& ~ .row{
margin-top: 2rem;
left: 0;
transform: translateX(0);
width: 100%;
position: relative;
padding: 20px 10px;
background-color: white;
border: 5px solid $colorYellow;
margin: auto;
}
}
.btn{
a{
text-decoration: underline;
color: $colorBlack;
}
}
}
@media screen and (min-width: 576px) {
.container-fluid{
& > .row{
position: relative;
}
figure {
position: absolute;
top: 0;
left: 0;
margin-top: 100px;
width: 70%;
& ~ .row{
margin-top: 2rem;
left: 80%;
transform: translateX(-100%);
width: 70%;
position: relative;
padding: 20px 10px;
background-color: white;
border: 5px solid $colorYellow;
margin-bottom: 100px;
}
}
}
}
}
&#section_projets{
.container-fluid{
& > h3{
border: 5px solid $colorRed;
}
& > h4{
text-align: center;
margin: 0 0 2rem 0;
@ -70,7 +138,7 @@
margin-bottom: 2rem;
h3{
text-align: center;
color: red;
color: $colorRed;
text-transform: uppercase;
height: 4rem;
display: flex;
@ -78,13 +146,13 @@
justify-content: center;
}
& > div{
border:10px solid red;
border:10px solid $colorRed;
padding: 1rem;
height: calc(100% - 4rem);
h4{
font-size: 1rem;
line-height: 1.2;
color: red;
color: $colorRed;
}
& > div{
p{
@ -100,6 +168,12 @@
}
}
&#section_tpsF{
.container-fluid{
& > h3{
border: 5px solid $colorBlue;
color: $colorBlack;
}
}
& > div{
& > .row{
justify-content: center;
@ -141,53 +215,10 @@
}
}
&#section_asso{
&#section_MineVideo{
.container-fluid{
& > .row{
position: relative;
}
figure {
position: absolute;
top: 0;
left: 0;
margin-top: 100px;
width: 70%;
& ~ .row{
margin-top: 2rem;
left: 0;
transform: translateX(0);
width: 100%;
position: relative;
padding: 20px 10px;
background-color: white;
border: 8px solid yellow;
margin: auto;
}
}
}
@media screen and (min-width: 576px) {
.container-fluid{
& > .row{
position: relative;
}
figure {
position: absolute;
top: 0;
left: 0;
margin-top: 100px;
width: 70%;
& ~ .row{
margin-top: 2rem;
left: 80%;
transform: translateX(-100%);
width: 70%;
position: relative;
padding: 20px 10px;
background-color: white;
border: 8px solid yellow;
margin-bottom: 100px;
}
}
& > h3{
border: 5px solid $colorBlue ;
}
}
}
@ -198,6 +229,7 @@
margin: auto;
}
}
.thumbnails{
&:not(:last-of-type){
margin-bottom: 3rem;

View File

@ -1,5 +1,76 @@
&.post{
.retour{
margin-bottom: 2rem;
a{
display: inline-block;
transform: translateX(-50%);
color: black;
}
}
header{
h3{
border: 5px solid $colorYellow;
padding: 0.5rem;
width: max-content;
}
}
.data{
margin: 1rem 0rem;
}
footer{
.partager{
figure{
a{
margin-right: 0.5rem;
width: 35px;
height: 35px;
}
}
}
}
.other{
margin: 5rem 0;
h3{
border: 5px solid $colorYellow;
width: max-content;
padding: 0.5rem;
text-transform: uppercase;
width: max-content;
display: inline-block;
padding: 0.5rem 1.5rem;
z-index: 999;
left: -0rem;
background: white;
position: relative;
margin-bottom: 2rem;
transform: translateX(0%) rotate(-15deg);
@media screen and (min-width: 576px) {
transform: translateX(0%) rotate(-15deg);
}
@media screen and (min-width: 1200px) {
transform: translateX(-50%) rotate(-15deg);
}
}
.thumbnails{
min-height: 450px;
a{
display: block;
}
margin-bottom: 2rem;
.wrap_content{
display: flex;
flex-direction: column;
justify-content: center;
margin-top: -6rem;
height: 150px;
}
&:hover {
.wrap_content{
margin-top: -7rem;
}
}
}
}
}

View File

@ -3,7 +3,7 @@
{% include 'components/title_page.twig' %}
{% set now = 'now'|date('Ydj') %}
<section class="row filter">
<ul class="d-flex flex-wrap">
<ul class="d-flex col flex-wrap">
<li><a href="/archive">Archive</a></li>
</ul>
<ul class="cat-list col d-flex flex-wrap">
@ -21,10 +21,11 @@
</li>
{% set newArray = newArray|merge([term]) %}
{% endif %}
{% endfor %}
</ul>
</section>
<section class="row grid">
<section class="grid">
{% for item in posts %}
{% set end = item.informations_fin_event|date("Ydj") %}
{% if now <= end %}

View File

@ -1,4 +1,2 @@
<div id="bouton_en_savoir">
<a href="{{post.meta('bouton_en_savoir').lien_bouton_en_savoir}}">
<a rel="noreferrer" href="{{post.meta('bouton_en_savoir').lien_bouton_en_savoir}}">
{{post.meta('bouton_en_savoir').texte_bouton_en_savoir}}</a>
</div>

View File

@ -10,7 +10,7 @@
</div>
<div class="col-12 col-md-6">
{{ post.meta('paragraphe_descriptif_2') }}
<div class="col-12 mx-0 px-0">
<div class="col-12 mx-0 px-0 btn btn_more">
{% include 'components/buttons/bouton_ensavoir.html.twig' %}
</div>
</div>

View File

@ -10,18 +10,18 @@
</div>
<article class="row">
<div class="header mobile col-12 d-lg-none d-block">
<header class="mobile col-12 d-lg-none d-block">
<h3 class="titre_event">{{ post.title }}</h3>
</div>
</header>
<figure class="__img_event col-lg-6 col-12">
<img src="{{ Image(post.image_event).src }}" />
</figure>
<div class="article-content col-lg-6 col-12 my-3 my-lg-0">
<div class="header d-none d-lg-block">
<header class="header d-none d-lg-block">
<h3 class="titre_event">{{ post.title }}</h3>
</div>
</header>
<div class="cat {{post.category.slug}}">
| {{post.category.name}} |
@ -41,9 +41,7 @@
<span class="end">
à <time>{{post.informations_fin_event|date("G:i")}}</time>
</span>
{% else %}
<span class="start">
Du <time>{{post.informations_debut_event|date("j F Y") }}</time>
à <time>{{post.informations_debut_event|date("G:i")}}</time>
@ -52,16 +50,16 @@
<br>Au <time>{{post.informations_fin_event|date("j F Y") }}</time>
à <time>{{post.informations_fin_event|date("G:i")}}</time></br>
</span>
{% endif %}
</div>
</div>
<div class="lieu">{{group.lieu}}</div>
</div>
<div class="wrapper__content">
{{ post.meta('description') }}
</div>
<footer>
<div class="tarif">
<h3>Tarif</h3>
<p>{{group.type_tarif}}</p>
@ -92,20 +90,20 @@
<div class="partager">
<h3>Partager</h3>
<div class="d-flex">
<figure class="d-flex">
<a href="https://www.facebook.com/sharer/sharer.php?u={{post.link}}">
<img src="{{theme.link}}/asset/images/fb.svg" />
<img src="{{theme.link}}/dist/assets/images/fb.svg" />
</a>
<a target="_blank" href="https://twitter.com/intent/tweet?text={{post.link}}">
<img src="{{theme.link}}/asset/images/twitter.svg" />
<img src="{{theme.link}}/dist/assets/images/twitter.svg" />
</a>
<a href="mailto:?subject={{post.link}}" title="Share by Email">
<img src="{{theme.link}}/asset/images/mail.svg" />
<img src="{{theme.link}}/dist/assets/images/mail.svg" />
</a>
</figure>
</div>
</div>
</footer>
</div>
</article>