début du thème, footer et header en mobile
This commit is contained in:
Valentin
46
web/themes/erabletheme/css/reset.css
Normal file
46
web/themes/erabletheme/css/reset.css
Normal file
@@ -0,0 +1,46 @@
|
||||
*, *:before, *:after{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
footer, header, nav, section, main{
|
||||
display: block;
|
||||
}
|
||||
|
||||
body{
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul{
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q{
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after, q:before, q:after{
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table{
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
input{
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
/* GLOBAL */
|
||||
/* Marianne */
|
||||
@font-face {
|
||||
font-family: "Marianne";
|
||||
src: url("../fonts/Marianne/Marianne-Light.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Light.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Marianne";
|
||||
src: url("../fonts/Marianne/Marianne-Light_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Light_Italic.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Marianne";
|
||||
src: url("../fonts/Marianne/Marianne-Medium.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Medium.woff") format("woff");
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Marianne";
|
||||
src: url("../fonts/Marianne/Marianne-Medium_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Medium_Italic.woff") format("woff");
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
}
|
||||
/* Barlow */
|
||||
@font-face {
|
||||
font-family: "Barlow";
|
||||
src: url("../fonts/Barlow/barlow-light.woff2") format("woff2"), url("../fonts/Barlow/barlow_light.woff") format("woff");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
/* SIZES */
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* PARTIALS */
|
||||
.layout-container {
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
.layout-container header {
|
||||
width: 100vw;
|
||||
background: white;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
|
||||
z-index: 99;
|
||||
}
|
||||
.layout-container header div {
|
||||
max-width: 100%;
|
||||
max-height: 7vh;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.layout-container header div #block-erabletheme-logorepublique {
|
||||
max-width: 15vw;
|
||||
}
|
||||
.layout-container header div #block-erabletheme-logorepublique a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.layout-container header div #block-erabletheme-logorepublique a img {
|
||||
padding-left: 3vw;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
.layout-container header div #block-erabletheme-logoerable {
|
||||
max-width: 30vw;
|
||||
}
|
||||
.layout-container header div #block-erabletheme-logoerable a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.layout-container header div #block-erabletheme-logoerable a img {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.layout-container header div #block-erabletheme-navigationprincipale {
|
||||
display: none;
|
||||
}
|
||||
.layout-container header div #block-erabletheme-socialmedialinks {
|
||||
display: none;
|
||||
}
|
||||
.layout-container header div #block-erabletheme-header #hamburger {
|
||||
width: 4rem;
|
||||
height: 100%;
|
||||
background-color: #00ff80;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.layout-container header div #block-erabletheme-header #hamburger h2 {
|
||||
font-size: 0.8rem;
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
}
|
||||
.layout-container header div #block-erabletheme-header ul {
|
||||
display: none;
|
||||
}
|
||||
.layout-container header div #block-erabletheme-header ul.active {
|
||||
display: block;
|
||||
position: fixed;
|
||||
background-color: #314e41;
|
||||
top: 7vh;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
z-index: 0;
|
||||
padding: 30px 0;
|
||||
}
|
||||
.layout-container header div #block-erabletheme-header ul.active li {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 6px 0;
|
||||
}
|
||||
.layout-container header div #block-erabletheme-header ul.active li a {
|
||||
color: white;
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-weight: 800;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
.layout-container header div #block-erabletheme-header ul.active li a.is-active {
|
||||
background-color: white;
|
||||
color: #314e41;
|
||||
}
|
||||
|
||||
.layout-container > footer {
|
||||
width: 100vw;
|
||||
background-color: white;
|
||||
z-index: 99;
|
||||
box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2);
|
||||
margin-top: 50px;
|
||||
padding: 0 3vw;
|
||||
}
|
||||
.layout-container > footer #footer_left div {
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.layout-container > footer #footer_left div #block-erabletheme-logorep {
|
||||
max-width: 30vw;
|
||||
}
|
||||
.layout-container > footer #footer_left div #block-erabletheme-logorep img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.layout-container > footer #footer_left div #block-erabletheme-logoepau {
|
||||
max-width: 50vw;
|
||||
}
|
||||
.layout-container > footer #footer_left div #block-erabletheme-logoepau img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.layout-container > footer #footer_section {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.layout-container > footer #footer_section #footer_center {
|
||||
padding-left: 2vw;
|
||||
width: 50%;
|
||||
}
|
||||
.layout-container > footer #footer_section #footer_center nav ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.layout-container > footer #footer_section #footer_center nav ul li a {
|
||||
color: #314e41;
|
||||
font-size: 0.8rem;
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-weight: 800;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.layout-container > footer #footer_section #footer_right {
|
||||
width: 30%;
|
||||
}
|
||||
.layout-container > footer #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.layout-container > footer #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul li a span {
|
||||
font-weight: lighter;
|
||||
font-size: 1.4rem;
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
padding: 0.4rem;
|
||||
border-radius: 1.1rem;
|
||||
color: white;
|
||||
background-color: #038788;
|
||||
}
|
||||
.layout-container > footer #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul li a svg.ext {
|
||||
background-color: red;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=styles.css.map */
|
||||
|
||||
1
web/themes/erabletheme/css/styles.css.map
Normal file
1
web/themes/erabletheme/css/styles.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../scss/styles.scss","../scss/global/_fonts.scss","../scss/global/variables/_typography.scss","../scss/global/_typography.scss","../scss/partials/_header.scss","../scss/global/variables/_layout.scss","../scss/global/variables/_colors.scss","../scss/partials/_footer.scss"],"names":[],"mappings":"AAAA;ACAA;AAEA;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;AAEA;EACI;EACA;EAEA;EACA;;ACzCJ;ACAA;EACI;;;AHMJ;AINA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;;AACA;EACI,cCxBb;EDyBa;EACA;;AAIZ;EACI;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AAIZ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;EACA,kBErDP;EFsDO;EACA;EACA;;AACA;EACI,WFzDT;EE0DS;EACA;EACA;;AAGR;EACI;;AAEJ;EACI;EACA;EACA,kBEnEP;EFoEO;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA,OEtFf;;;ACHb;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;;AAGR;EACI;;AACA;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;;AACA;EACI,ODxCP;ECyCO,WL3CL;EK4CK;EACA;EACA;;AAKZ;EACI;;AACA;EACI;EACA;;AAEI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDjEjB;;ACmEa;EACI;EACA","file":"styles.css"}
|
||||
Reference in New Issue
Block a user