You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
434 lines
6.5 KiB
434 lines
6.5 KiB
/* http://meyerweb.com/eric/tools/css/reset/ |
|
v2.0 | 20110126 |
|
License: none (public domain) |
|
*/ |
|
|
|
html, body, div, span, applet, object, iframe, |
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
|
a, abbr, acronym, address, big, cite, code, |
|
del, dfn, em, img, ins, kbd, q, s, samp, |
|
small, strike, strong, sub, sup, tt, var, |
|
b, u, i, center, |
|
dl, dt, dd, ol, ul, li, |
|
fieldset, form, label, legend, |
|
table, caption, tbody, tfoot, thead, tr, th, td, |
|
article, aside, canvas, details, embed, |
|
figure, figcaption, footer, header, hgroup, |
|
menu, nav, output, ruby, section, summary, |
|
time, mark, audio, video { |
|
margin: 0; |
|
padding: 0; |
|
border: 0; |
|
font-size: 100%; |
|
font: inherit; |
|
vertical-align: baseline; |
|
} |
|
/* HTML5 display-role reset for older browsers */ |
|
article, aside, details, figcaption, figure, |
|
footer, header, hgroup, menu, nav, section { |
|
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; |
|
} |
|
|
|
/* END OF RESET */ |
|
|
|
/*edit variable here*/ |
|
|
|
:root{ |
|
--menu_h: 70px; |
|
--base_padding:20px; |
|
--hover_color-menu: #fae5d4; |
|
--menu-font-size : 3em; |
|
} |
|
|
|
body{ |
|
|
|
font-family: 'courier_primeregular'; |
|
min-height:100vh; |
|
font-size:10px; |
|
height:auto; |
|
background:url('img/gradient-back.svg') no-repeat center center; |
|
background-size:cover; |
|
} |
|
|
|
h1{ |
|
|
|
font-family:'script12_btroman'; |
|
|
|
|
|
} |
|
|
|
#homeSpacer{ |
|
height:calc(100vh - var(--menu_h)); |
|
transition:all 0.6s ease; |
|
z-index:1000; |
|
} |
|
|
|
nav{ |
|
position: fixed; |
|
width: 100%; |
|
cursor: pointer; |
|
} |
|
|
|
#menu #topBtn{ |
|
height:var(--menu_h); |
|
width:100%; |
|
background:#fff; |
|
position: relative; |
|
border-bottom: solid 3px var(--hover_color-menu) |
|
} |
|
|
|
#menu #topBtn { |
|
display: grid; |
|
grid-template-columns: 9fr 1fr; |
|
grid-template-rows: 1fr; |
|
min-height: 100%; |
|
/*! align-self: center; */ |
|
} |
|
|
|
#menu #topBtn div{ |
|
align-self: center; |
|
padding:var(--base_padding); |
|
font-size:var(--menu-font-size); |
|
} |
|
#menu #topBtn div:last-of-type{ |
|
text-align: center; |
|
} |
|
|
|
.open{ |
|
height:calc(var(--menu_h)) !important; |
|
border: solid 3px var(--hover_color-menu)!important; |
|
|
|
} |
|
|
|
|
|
#menu ul .menu_active{ |
|
height:calc(var(--menu_h)) !important; |
|
border: solid 3px var(--hover_color-menu)!important; |
|
} |
|
|
|
#menu ul{ |
|
width:100%; |
|
background: #fff; |
|
line-height: var(--menu_h); |
|
transition: all ease 0.3s; |
|
height: 0; |
|
} |
|
|
|
|
|
#menu ul li { |
|
box-sizing: border-box; |
|
padding:calc(var(--base_padding)-6); |
|
height:0; |
|
border: solid 0px var(--hover_color-menu); |
|
background: #fff; |
|
font-size:var(--menu-font-size); |
|
overflow: hidden; |
|
transition: all ease 0.3s; |
|
|
|
} |
|
|
|
#menu ul li span{ |
|
width: 100px; |
|
display:block; |
|
padding: 0 20px 0 15px; |
|
} |
|
|
|
|
|
#menu ul li span img{ |
|
width: 20px; |
|
display:inline-block; |
|
} |
|
|
|
#menu ul li h3 , #menu ul li span { |
|
display: inline; |
|
} |
|
|
|
#menu ul li a{ |
|
text-decoration: none; |
|
color: #000; |
|
display: block; |
|
width:100%; |
|
} |
|
|
|
#menu ul li:hover{ |
|
background:var(--hover_color-menu); |
|
} |
|
|
|
#content{ |
|
/*! z-index: -1; */ |
|
} |
|
|
|
|
|
.picto_sun{ |
|
width: 250px; |
|
height: 250px; |
|
position: fixed; |
|
z-index: -1; |
|
} |
|
|
|
.picto_shape{ |
|
width: 2250px; |
|
height: 950px; |
|
position: fixed; |
|
z-index: -1; |
|
opacity:0.8; |
|
} |
|
.yellow_filter{ |
|
filter: invert(95%) sepia(46%) saturate(2939%) hue-rotate(354deg) brightness(107%) contrast(107%); |
|
} |
|
|
|
.pink_filter{ |
|
filter: invert(92%) sepia(27%) saturate(4960%) hue-rotate(292deg) brightness(137%) contrast(104%); |
|
} |
|
|
|
@keyframes pulse { |
|
0% { |
|
fill: #FFF33B; |
|
} |
|
50% { |
|
fill: #FF4136; |
|
} |
|
100% { |
|
fill: #FFF33B; |
|
} |
|
} |
|
|
|
.picto svg{ |
|
animation: pulse 25s infinite; |
|
/*! fill:yellow; */ |
|
} |
|
|
|
#content{ |
|
position : relative; |
|
|
|
} |
|
|
|
#logo{ |
|
position: absolute; |
|
width:150px; |
|
height:auto; |
|
top:calc(var(--menu_h)*3); |
|
left:var(--menu_h); |
|
z-index: -1; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
.page_data{ |
|
font-size: 2.5em; |
|
line-height: 1.4em; |
|
} |
|
|
|
.page_data h1{ |
|
font-size: 2.5em; |
|
line-height: 1.4em; |
|
} |
|
.wrapper{ |
|
padding-top:150px; |
|
width:60%; |
|
margin:auto; |
|
z-index:100; |
|
position: relative; |
|
} |
|
.wrapper h1{ |
|
padding-bottom: 0.5em; |
|
font-family: 'script12_btroman'; |
|
} |
|
.wrapper p{ |
|
} |
|
|
|
.content_wrapper{ |
|
padding-top: calc(100px + var(--menu_h)); |
|
width:70%; |
|
margin:auto; |
|
|
|
} |
|
|
|
article { |
|
margin-bottom: 40px; |
|
font-size:10px; |
|
} |
|
|
|
article div .a_title { |
|
font-family:'script12_btroman'; |
|
font-size: 6rem; |
|
text-transform: capitalize; |
|
font-weight:bolder; |
|
} |
|
|
|
|
|
article div .a_meta { |
|
font-family:'script12_btroman'; |
|
font-size: 2rem; |
|
text-transform: capitalize; |
|
font-weight:bolder; |
|
} |
|
|
|
article p { |
|
margin-bottom: 20px; |
|
font-size: 1.5rem; |
|
line-height: 1.4em; |
|
} |
|
article h1 { |
|
font-size: 2.5rem; |
|
line-height: 1.4em; |
|
} |
|
|
|
article strong{ |
|
font-weight: bolder; |
|
} |
|
|
|
article em{ |
|
font-style: italic; |
|
} |
|
|
|
|
|
article ol li{ |
|
margin-top: 0px; |
|
font-size: 1.5rem; |
|
line-height: 1.4em; |
|
|
|
} |
|
|
|
article ol li p { |
|
font-size: 1.5rem; |
|
margin:0; |
|
padding: 0; |
|
} |
|
|
|
article ol li ul{ |
|
margin-bottom:50px; |
|
} |
|
|
|
article ol li ul li:first-child{ |
|
font-size: 1.2rem; |
|
margin-bottom:20px; |
|
} |
|
|
|
article ol li ul li:last-of-type{ |
|
font-size: 1.2rem; |
|
margin-top:10px; |
|
} |
|
|
|
|
|
|
|
|
|
article ol li ul li{ |
|
font-size: 0.8rem; |
|
} |
|
|
|
article .vitrine img{ |
|
display: block; |
|
width: 50%; |
|
margin:auto; |
|
} |
|
|
|
|
|
.content_wrapper .separator{ |
|
width: 50%; |
|
height: 12px; |
|
margin: 150px auto; |
|
|
|
} |
|
.gallery { |
|
display: grid; |
|
grid-template-columns: repeat(7, 1fr); |
|
gap: 20px; |
|
margin-top: 20px; |
|
} |
|
|
|
.gallery .img_container{ |
|
height:200px; |
|
overflow :hidden; |
|
display: grid; |
|
|
|
} |
|
.gallery img { |
|
width: 100%; |
|
min-height: 100%; |
|
align-self: center; |
|
object-fit: cover; |
|
cursor: pointer; |
|
/* transition: transform 0.3s ease; */ |
|
} |
|
|
|
.lightbox { |
|
display:none; |
|
position: fixed; |
|
z-index: 999; |
|
left: 0; |
|
top: 0; |
|
width: 100%; |
|
height: 100%; |
|
background-color: rgba(255,255,255, 0.5); |
|
justify-content: center; |
|
align-items: center; |
|
padding: 20px; |
|
} |
|
|
|
.lightbox img { |
|
max-width: 50%; |
|
max-height: 50%; |
|
margin: auto; |
|
} |
|
|
|
.lightbox.active { |
|
display:flex; |
|
} |
|
|
|
.close-btn { |
|
position: absolute; |
|
top: 200px; |
|
right: 200px; |
|
color: white; |
|
font-size: 100px; |
|
background: none; |
|
border: none; |
|
cursor: pointer; |
|
} |
|
|
|
/* Responsive layout */ |
|
/* @media (max-width: 768px) { |
|
.gallery { |
|
grid-template-columns: repeat(2, 1fr); |
|
} |
|
} |
|
|
|
@media (max-width: 480px) { |
|
.gallery { |
|
grid-template-columns: 1fr; |
|
} |
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
.gallery { |
|
grid-template-columns: repeat(2, 1fr); |
|
} |
|
} |
|
|
|
@media (max-width: 480px) { |
|
.gallery { |
|
grid-template-columns: 1fr; |
|
} |
|
}
|
|
|