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";