anime logo

web/app/themes/la_mine/src/assets/scss/components/_header.scss

@@ -0,0 +1,50 @@
+header{
+    section{
+        position: relative;
+        figure{
+            a{
+                position: relative;
+                display: block;
+                width: max-content;
+                height: calc( #{$heightLogo} / 2 ) ;
+                transition: 0.5s all ease;
+                @media screen and (min-width: 576px) {
+                    height: $heightLogo;
+                }
+                img{
+                    z-index: 3;
+                    position: relative;
+                }
+                span{
+                    display: block;
+                }
+                #lumiR_logo{
+                    @include logoLamine(1, calc(#{$heightLogo} / 5 ), calc(#{$heightLogo} / 5), $colorYellow, 25px, 35px);
+                   
+                    @media screen and (min-width: 576px) {
+                        @include logoLamine(1, calc(#{$heightLogo} / 3), calc(#{$heightLogo} / 3), $colorYellow, 50px, 70px);
+                    }
+
+                }
+                #fond_logo{
+                    @include logoLamine(0, calc(#{$heightLogo}), calc(#{$heightLogo}), $colorWhite, -70%, 30%);
+                    
+                    @media screen and (min-width: 576px) {
+                        @include logoLamine(0, calc(#{$heightLogo} * 2 ), calc(#{$heightLogo} * 2 ), $colorWhite, -70%, 30%);
+                    }
+
+                }
+                &:hover{
+                    height: $heightLogoHover;
+                    transition: 0.5s all ease;
+                    #lumiR_logo{
+                        @include logoLamineHover(calc(#{$heightLogoHover} - 75px), calc(#{$heightLogoHover} - 75px), 45px, 60px); 
+                    }
+                    #fond_logo{
+                        @include logoLamineHover(calc(#{$heightLogoHover} + 75px), calc(#{$heightLogoHover} + 75px), -50%, 50%);
+                    }  
+                }
+            }
+        }
+    }
+}

web/app/themes/la_mine/src/assets/scss/configs/_mixins.scss

@@ -6,4 +6,71 @@ body{
   display: flex;
   justify-items: center;
   background: $color;
-}
+}
+
+
+// GLOBAL
+@mixin vertical-align{
+  display: flex;
+  align-items: center;
+}
+
+  @mixin reset-list{
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+@mixin horizontal-list {
+  & > li {
+    display: inline-block;
+    margin: {
+      left: -2px;
+      right: 2rem;
+    }
+  }
+}
+
+@mixin position_fixed{
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+@mixin hidden_border{
+  padding: 0;
+  border: none!important;
+  background: none!important;
+  outline: none!important;
+  &:focus {
+    outline: none!important;
+  }
+}
+
+@mixin wysiwyg{
+  h1{}
+  h2{}
+  h3{}
+  h4{}
+  h5{}
+  h6{}
+  strong{}
+  b{}
+  em{}
+  i{}
+  a{}
+  u{}
+  sup{}
+  p{
+    margin-bottom: 1rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    strong{}
+    sup{}
+    u{}
+    a{}
+    b{}
+    i{}
+    em{}
+  }
+}

web/app/themes/la_mine/src/assets/scss/configs/_mixinsLamine.scss

@@ -0,0 +1,20 @@
+@mixin logoLamine($Z, $width, $height, $color, $top, $left) {
+  z-index: $Z;
+  background-color: $color;
+  width: $width;
+  height: $height;
+  position: absolute;
+  top: $top;
+  left: $left;
+  transform: translateX(-50%);
+  border-radius: 50%;
+  transition: 0.5s all ease;
+}
+
+@mixin logoLamineHover($width, $height, $top, $left) {
+  width: $width;
+  height: $height;
+  top: $top;
+  left: $left;
+  transition: 0.5s all ease;
+}

web/app/themes/la_mine/src/assets/scss/configs/_variables.scss

@@ -0,0 +1,7 @@
+// color
+$colorWhite: white;
+$colorYellow:#ffcc00;
+
+$heightLogo: 115px;
+
+$heightLogoHover: 100px;

web/app/themes/la_mine/src/assets/scss/index.scss

@@ -1,3 +1,8 @@
+// config
+@import "configs/variables.scss";
+@import "configs/mixinsLamine.scss";
+@import "configs/mixins.scss";
+
 // bootstrap
 @import "bootstraps/bootstrap.scss";
 @import "bootstraps/bootstrap-reboot.scss";
@@ -19,6 +24,14 @@ figure{
 }
 
 
+body{
+    @import "pages/index.scss";
+}
+
+li,ul,ol{
+    @include reset-list;
+}
+
 // @import "bootstrap/scss/bootstrap-grid.scss";
 // @import "normalize.css/normalize.css"; 
 

web/app/themes/la_mine/src/assets/scss/pages/_home.scss

@@ -0,0 +1,3 @@
+&.accueil{
+    
+}

web/app/themes/la_mine/src/assets/scss/pages/_index.scss

@@ -0,0 +1 @@
+@import "home.scss";

web/app/themes/la_mine/templates/base.twig

@@ -7,42 +7,7 @@
 	<body class="container-fluid {{post.slug}} {{post.post_type}}">
 		<header class="fixed-top d-flex">
 			{% block header %}
-				<section class="logo col">
-					<figure>
-						<a href="{{site.url}}" rel="noreferrer">
-							<img src="{{theme.link}}/dist//assets/images/logo_lamine_vect.svg" alt="logo_Lamine" title="Le logo de La mine"/>
-							<span id="lumiR_logo"></span>
-							<span id="fond_logo"></span>
-						</a>
-					</figure>
-				</section>
-
-				<section class="nav-main col row">
-					<div class="rs col">		
-						<figure id="facebook">
-							<a rel="noreferrer" target="_blank" href="{{options.facebook.lien_facebook}}">
-								<img src="{{theme.link}}/dist//assets/images/fb.svg" alt="logo_facebook" title="Le logo de facebook"/>
-							</a>
-						</figure>
-						<figure id="insta">
-							<a rel="noreferrer" target="_blank" href="{{options.instagram.lien_instagram}}">
-								<img src="{{theme.link}}/dist//assets/images/inst.svg" alt="logo_instagram" title="Le logo d'instagram"/>
-							</a>
-						</figure>
-					</div>
-					<div class="burger col">
-						<div class="fond_burger">
-							<button class="hamburger hamburger--slider" type="button">
-								<span class="hamburger-box">
-									<span class="hamburger-inner"></span>
-								</span>
-							</button>
-						</div>
-					</div>
-					<nav class="col" role="navigation">
-						{% include "components/menu.twig" with {'items': menu.get_items} %}
-					</nav>
-				</section>
+				{% include "components/header.twig" %}
 			{% endblock %}
 		</header>
 
@@ -71,7 +36,7 @@
 		</main>
 
 		{% block footer %}
-			<footer>
+			<footer class="row">
 				{% include 'components/footer.twig' %}
 			</footer>
 			{{ function('wp_footer') }}

web/app/themes/la_mine/templates/components/footer.twig

@@ -1,34 +1,34 @@
-<section class="information col-12 col-xl-7 col-lg-12 p-0">
-  <div class="d-flex justify-content-around flex-wrap">
-    <div class="logo_lamine col-lg-3 col-sm-6">
-      <a href="{{site.url}}"><img src="{{ Image(options.lamine_footer.image_logo).src }}" /></a>
-    </div>
+<section class="col">
+  <div class="row">
+    <figure class="col">
+      <a rel="noreferrer" href="{{site.url}}"><img src="{{theme.link}}/src/assets/images/logo-lamine.png" /></a>
+    </figure>
 
-    <div class="horaires col-lg-3 col-sm-6">
+    <div class="col">
       {{options.texte_horaire }}
     </div>
 
-    <div class="adresse col-lg-3 col-sm-6">
+    <div class="col">
       {{options.texte_adresse }}
     </div>
 
-    <div class="col-lg-3 col-sm-6">
-      <div class="collecte">
+    <div class="col">
+      <div class="">
         {{options.texte_collecte }}
       </div>
 
-      <div class="reseaux_sociaux align-items">
-        <div class="facebook">
-          <a class="d-flex" target="_blank" href="{{options.facebook.lien_facebook}}">
+      <div class="">
+        <figure class="">
+          <a rel="noreferrer" target="_blank" href="{{options.facebook.lien_facebook}}">
             <img src="{{ Image(options.facebook.logo_facebook).src }}" />
-            <span>{{options.facebook.texte_facebook}}</span>
+            <figcaption>{{options.facebook.texte_facebook}}</figcaption>
           </a>
-        </div>
+        </figure>
         <div class="insta">
-          <a class="d-flex" target="_blank" href="{{options.instagram.lien_instagram}}">
+          <figure rel="noreferrer" class="d-flex" target="_blank" href="{{options.instagram.lien_instagram}}">
             <img src="{{ Image(options.instagram.logo_instagram).src }}" />
-            <span>{{options.instagram.texte_instagram}}</span>
-          </a>
+            <figcaption>{{options.instagram.texte_instagram}}</figcaption>
+          </figure>
         </div>
       </div>
 
@@ -36,45 +36,34 @@
   </div>
 </section>
 
-<section class="join-us col-12 col-xl-5 col-lg-12 p-0">
-<div>
-  <div class="send_actu">
-  <!-- Begin Mailchimp Signup Form -->
-  <div id="mc_embed_signup">
-    <form action="https://kevintessier.us19.list-manage.com/subscribe/post?u=a98b763288f940083bf28857c&amp;id=364a0fe850" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
-      <div class="d-flex" id="mc_embed_signup_scroll">
-        <div><p>Recevoir l'actualité de La Mine</p></div>
-    	  <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="E-mail" required>
-        <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_a98b763288f940083bf28857c_364a0fe850" tabindex="-1" value=""></div>
-        <div class="clear"><input type="submit" value="Ok" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
-      </div>
-    </form>
-  </div>
-  <!--End mc_embed_signup-->
-  </div>
-  <div class="add_asso">
-    <div id="Btn_asso">
-      <a target="_blank" href="{{post.meta('bouton_asso').lien_hello_asso}}">adhérer à l'association</a>
-    </div>
+<section class="col">
 
+    <div id="mc_embed_signup" class="row">
+      <form action="https://kevintessier.us19.list-manage.com/subscribe/post?u=a98b763288f940083bf28857c&amp;id=364a0fe850" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+        <div class="d-flex" id="mc_embed_signup_scroll">
+          <div><p>Recevoir l'actualité de La Mine</p></div>
+          <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="E-mail" required>
+          <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_a98b763288f940083bf28857c_364a0fe850" tabindex="-1" value=""></div>
+          <div class="clear"><input type="submit" value="Ok" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
+        </div>
+      </form>
+    </div>
+    
+  <div class="row">
+    <a class="btn" target="_blank" href="{{post.meta('bouton_asso').lien_hello_asso}}">adhérer à l'association</a>
   </div>
 
-  <div class="partenaires d-block d-sm-flex align-items-center col-lg-12">
-    <div class="_titre text-center mb-3">{{options.titre}}</div>
-    <div class="logo_partenaires w-100">
-      <div class="container_slide">
-        <ul>
-          {% for partner in options.partenaire %}
-            <li>
-              <a target="_blank" href="{{partner.lien_site_partenaire}}">
-                <img src="{{ Image(partner.logo).src }}" />
-              </a>
-            </li>
-          {% endfor %}
-        </ul>
+  <div class="row">
+    <h3>{{options.titre}}</h3>    
+    <figure class="col px-0">        
+      <div class="main-carousel">
+      {% for partner in options.partenaire %}  
+        <a rel="noreferrer" target="_blank" href="{{partner.lien_site_partenaire}}">
+          <img src="{{ Image(partner.logo).src }}" />
+        </a>
+      {% endfor %}
       </div>
-    </div>
+    </figure>
   </div>
-</div>
 
 </section>

web/app/themes/la_mine/templates/components/header.twig

@@ -0,0 +1,36 @@
+<section class="logo col-6">
+	<figure>
+		<a href="{{site.url}}" rel="noreferrer">
+			<img src="{{theme.link}}/dist//assets/images/logo_lamine_vect.svg" alt="logo_Lamine" title="Le logo de La mine"/>
+			<span id="lumiR_logo"></span>
+			<span id="fond_logo"></span>
+		</a>
+	</figure>
+</section>
+
+<section class="nav-main row">
+	<div class="rs col">		
+		<figure id="facebook">
+			<a rel="noreferrer" target="_blank" href="{{options.facebook.lien_facebook}}">
+				<img src="{{theme.link}}/dist//assets/images/fb.svg" alt="logo_facebook" title="Le logo de facebook"/>
+			</a>
+		</figure>
+		<figure id="insta">
+			<a rel="noreferrer" target="_blank" href="{{options.instagram.lien_instagram}}">
+				<img src="{{theme.link}}/dist//assets/images/inst.svg" alt="logo_instagram" title="Le logo d'instagram"/>
+			</a>
+		</figure>
+	</div>
+	<div class="burger col">
+		<div class="fond_burger">
+			<button class="hamburger hamburger--slider" type="button">
+				<span class="hamburger-box">
+					<span class="hamburger-inner"></span>
+				</span>
+			</button>
+		</div>
+	</div>
+	<nav class="col" role="navigation">
+		{% include "components/menu.twig" with {'items': menu.get_items} %}
+	</nav>
+</section>