First version
This commit is contained in:
105
assets/css/actu.sass
Normal file
105
assets/css/actu.sass
Normal file
@ -0,0 +1,105 @@
|
||||
// ACTUALITES
|
||||
$space: 1rem
|
||||
.actualites
|
||||
margin: 0 -$space
|
||||
padding: 0
|
||||
|
||||
> .cell
|
||||
height: 300px
|
||||
padding: $space
|
||||
position: relative
|
||||
|
||||
&.empty
|
||||
width: 100%
|
||||
|
||||
a
|
||||
display: flex
|
||||
width: 100%
|
||||
height: 100%
|
||||
text-decoration-color: rgba($color-primary, 0)
|
||||
box-sizing: border-box
|
||||
padding: $space
|
||||
|
||||
&:hover
|
||||
background: rgba($color-primary, 0.5)
|
||||
|
||||
&::after
|
||||
content: inherit
|
||||
|
||||
.info
|
||||
padding: 2rem
|
||||
background: rgba($color-primary, 0.25)
|
||||
border: $space solid rgba(255,255,255,.25)
|
||||
box-sizing: border-box
|
||||
width: 100%
|
||||
height: 100%
|
||||
align-content: center
|
||||
text-align: center
|
||||
|
||||
h3
|
||||
color: white
|
||||
font-size: 2rem
|
||||
text-align: center
|
||||
margin: 0
|
||||
padding: 0
|
||||
flex: 0
|
||||
|
||||
time
|
||||
color: white
|
||||
font-size: 1rem
|
||||
flex: 0
|
||||
|
||||
|
||||
.image
|
||||
position: absolute
|
||||
top: $space
|
||||
bottom: $space
|
||||
left: $space
|
||||
right: $space
|
||||
z-index: -2
|
||||
overflow: hidden
|
||||
|
||||
img
|
||||
height: 100%
|
||||
object-fit: cover
|
||||
|
||||
figure.center
|
||||
text-align: center
|
||||
img
|
||||
margin: 0 auto
|
||||
max-width: 100%
|
||||
|
||||
$imageBorder: 2px
|
||||
.actu-image
|
||||
text-align: center
|
||||
padding: 1rem 0 0
|
||||
max-width: 100%
|
||||
|
||||
@media screen and (min-width: 840px)
|
||||
.actu-image
|
||||
padding: 2rem 0
|
||||
|
||||
@media screen and (max-width: 839px)
|
||||
$space: .5rem
|
||||
.actualites
|
||||
margin: 0 -$space
|
||||
|
||||
> .cell
|
||||
padding: $space
|
||||
a
|
||||
padding: $space
|
||||
|
||||
.info
|
||||
padding: $space * 2
|
||||
border: $space solid rgba(255,255,255,.25)
|
||||
.image
|
||||
top: $space
|
||||
bottom: $space
|
||||
left: $space
|
||||
right: $space
|
||||
|
||||
@media screen and (max-width: 599px)
|
||||
.actualites
|
||||
|
||||
> .cell
|
||||
max-width: 460px
|
||||
19
assets/css/footer.sass
Normal file
19
assets/css/footer.sass
Normal file
@ -0,0 +1,19 @@
|
||||
.footer
|
||||
border-top: 0.2rem solid $color-primary
|
||||
margin: 4rem auto 2rem
|
||||
padding: 1rem 2rem
|
||||
line-height: normal
|
||||
align-items: flex-end
|
||||
|
||||
.cell
|
||||
flex: auto
|
||||
|
||||
@media screen and (max-width: 599px)
|
||||
.footer
|
||||
padding: 0
|
||||
margin-bottom: 1rem
|
||||
text-align: center
|
||||
align-items: center
|
||||
|
||||
.-right
|
||||
text-align: center
|
||||
72
assets/css/header.sass
Normal file
72
assets/css/header.sass
Normal file
@ -0,0 +1,72 @@
|
||||
// HEADER
|
||||
|
||||
.header
|
||||
// margin-top: 52px
|
||||
background-color: $color-primary
|
||||
color: white
|
||||
|
||||
a
|
||||
color: white
|
||||
|
||||
.container
|
||||
padding: 0 0 2rem
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
.titleContainer
|
||||
flex: 1
|
||||
text-align: center
|
||||
margin: 2rem 0 0 2rem
|
||||
|
||||
.logo
|
||||
border-bottom-left-radius: 10px
|
||||
border-bottom-right-radius: 10px
|
||||
padding: 10px
|
||||
background-color: white
|
||||
|
||||
h1
|
||||
font-size: 3rem
|
||||
line-height: 1.1
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
cite
|
||||
font-size: 1.4rem
|
||||
|
||||
|
||||
@media screen and (max-width: 839px)
|
||||
.header
|
||||
margin-top: 0
|
||||
|
||||
.container
|
||||
max-width: 680px
|
||||
padding: 0
|
||||
|
||||
.titleContainer
|
||||
padding: 0
|
||||
margin: 1rem
|
||||
|
||||
.logoContainer
|
||||
position: relative
|
||||
margin: 1rem
|
||||
top: 0
|
||||
|
||||
img
|
||||
width: 100px
|
||||
height: 100px
|
||||
border-radius: 10px
|
||||
|
||||
h1
|
||||
font-size: 2rem
|
||||
|
||||
cite
|
||||
font-size: 1rem
|
||||
|
||||
@media screen and (max-width: 599px)
|
||||
.header
|
||||
.container
|
||||
align-items: flex-end
|
||||
.titleContainer
|
||||
display: none
|
||||
.logoContainer
|
||||
left: calc(50% - (152px / 2))
|
||||
@ -8,6 +8,11 @@ $color-tertiary: #f4f5f6
|
||||
$color-quaternary: #d1d1d1
|
||||
$color-quinary: #e1e1e1
|
||||
|
||||
@import "./header"
|
||||
@import "./nav"
|
||||
@import "./footer"
|
||||
@import "./actu"
|
||||
|
||||
body
|
||||
margin: 0
|
||||
font-family: $font-family-serif2
|
||||
@ -19,11 +24,24 @@ h1
|
||||
|
||||
h2
|
||||
font-size: 2rem
|
||||
margin-top: 4rem
|
||||
|
||||
h2, h3
|
||||
font-family: $font-family-sans-serif7
|
||||
color: $color-primary
|
||||
|
||||
hr
|
||||
border: 0
|
||||
height: 2px
|
||||
margin: 2rem 0
|
||||
background-color: rgba($color-primary, 0.25)
|
||||
|
||||
.txt-center
|
||||
text-align: center
|
||||
|
||||
img
|
||||
display: block
|
||||
|
||||
blockquote
|
||||
border-left: 4px solid $color-primary
|
||||
font-style: italic
|
||||
@ -37,190 +55,48 @@ a
|
||||
@mixin container
|
||||
max-width: $size-lg
|
||||
margin: 0 auto
|
||||
padding: 0 20px
|
||||
padding: 0 1rem
|
||||
|
||||
.container, #content
|
||||
.container
|
||||
@include container
|
||||
|
||||
img
|
||||
max-width: 100%
|
||||
|
||||
// HEADER
|
||||
&.small
|
||||
max-width: 680px
|
||||
line-height: 1.50
|
||||
|
||||
.header
|
||||
margin-top: 52px
|
||||
background-color: $color-primary
|
||||
color: white
|
||||
h2
|
||||
line-height: 1.1
|
||||
|
||||
.cfa
|
||||
text-align: center
|
||||
padding: 2rem
|
||||
|
||||
a
|
||||
padding: 1rem
|
||||
background-color: $color-primary
|
||||
color: white
|
||||
text-decoration: none
|
||||
|
||||
.container
|
||||
padding: 0 0 2rem
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
.titleContainer
|
||||
flex: 1
|
||||
text-align: center
|
||||
margin: 2rem 0 0 2rem
|
||||
|
||||
.logo
|
||||
border-bottom-left-radius: 10px
|
||||
border-bottom-right-radius: 10px
|
||||
padding: 10px
|
||||
background-color: white
|
||||
|
||||
h1
|
||||
font-size: 3rem
|
||||
line-height: 1.1
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
cite
|
||||
font-size: 1.4rem
|
||||
|
||||
&:hover
|
||||
background: $color-secondary
|
||||
|
||||
// NAV
|
||||
|
||||
.nav
|
||||
position: fixed
|
||||
z-index: 10
|
||||
top: 0
|
||||
background-color: white
|
||||
width: 100%
|
||||
|
||||
nav
|
||||
left: 0
|
||||
right: 0
|
||||
|
||||
ul
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
li
|
||||
display: inline
|
||||
border-right: 1px solid $color-primary
|
||||
|
||||
&:last-child
|
||||
border-right: none
|
||||
|
||||
a
|
||||
display: inline-block
|
||||
padding: 1rem
|
||||
font-size: 1rem
|
||||
font-weight: bold
|
||||
|
||||
#content
|
||||
// #content
|
||||
// https://freefrontend.com/css-link-styles/
|
||||
// https://codepen.io/markmead/pen/drORWG
|
||||
a
|
||||
position: relative
|
||||
// a
|
||||
// position: relative
|
||||
|
||||
&::after
|
||||
content: ""
|
||||
background: rgba($color-primary, 0.25)
|
||||
position: absolute
|
||||
left: 6px
|
||||
bottom: -6px
|
||||
width: calc(100% - 8px)
|
||||
height: calc(100% - 8px)
|
||||
z-index: -1
|
||||
|
||||
// FOOTER
|
||||
|
||||
.footer
|
||||
border: 1px dotted $color-primary
|
||||
border-top: 0.2rem solid $color-primary
|
||||
margin: 2rem auto
|
||||
padding: 2rem
|
||||
|
||||
// ACTUALITES
|
||||
$space: 20px
|
||||
#content .actualites
|
||||
margin: 0 -$space
|
||||
padding: 0
|
||||
|
||||
> .cell
|
||||
height: 300px
|
||||
padding: $space
|
||||
position: relative
|
||||
|
||||
a
|
||||
display: flex
|
||||
width: 100%
|
||||
height: 100%
|
||||
text-decoration-color: rgba($color-primary, 0)
|
||||
box-sizing: border-box
|
||||
padding: 1rem
|
||||
|
||||
&:hover
|
||||
background: rgba($color-primary, 0.5)
|
||||
|
||||
&::after
|
||||
content: inherit
|
||||
|
||||
.info
|
||||
padding: 2rem
|
||||
background: rgba($color-primary, 0.25)
|
||||
border: 1rem solid rgba(255,255,255,.25)
|
||||
box-sizing: border-box
|
||||
width: 100%
|
||||
height: 100%
|
||||
align-content: center
|
||||
text-align: center
|
||||
|
||||
h3
|
||||
color: white
|
||||
font-size: 2rem
|
||||
text-align: center
|
||||
margin: 0
|
||||
padding: 0
|
||||
flex: 0
|
||||
|
||||
time
|
||||
color: white
|
||||
font-size: 1rem
|
||||
flex: 0
|
||||
|
||||
|
||||
.image
|
||||
position: absolute
|
||||
top: $space
|
||||
bottom: $space
|
||||
left: $space
|
||||
right: $space
|
||||
z-index: -2
|
||||
overflow: hidden
|
||||
|
||||
img
|
||||
height: 100%
|
||||
object-fit: cover
|
||||
|
||||
figure.center
|
||||
text-align: center
|
||||
|
||||
$imageBorder: 2px
|
||||
.actu-image
|
||||
text-align: center
|
||||
padding: 2rem
|
||||
|
||||
div
|
||||
position: relative
|
||||
display: inline-block
|
||||
|
||||
&:before
|
||||
content: ""
|
||||
position: absolute
|
||||
top: -$imageBorder
|
||||
bottom: -$imageBorder
|
||||
left: -$imageBorder
|
||||
right: -$imageBorder
|
||||
width: 100%
|
||||
height: 100%
|
||||
z-index: -1
|
||||
border: $imageBorder solid rgba($color-primary, 0.25)
|
||||
|
||||
img
|
||||
padding: 10px
|
||||
margin: 10px 10px 6px // Pourquoi ?
|
||||
border: $imageBorder solid rgba($color-primary, 0.25)
|
||||
// &::after
|
||||
// content: ""
|
||||
// background: rgba($color-primary, 0.25)
|
||||
// position: absolute
|
||||
// left: 6px
|
||||
// bottom: -6px
|
||||
// width: calc(100% - 8px)
|
||||
// height: calc(100% - 8px)
|
||||
// z-index: -1
|
||||
|
||||
134
assets/css/nav.sass
Normal file
134
assets/css/nav.sass
Normal file
@ -0,0 +1,134 @@
|
||||
.nav
|
||||
// position: fixed
|
||||
z-index: 10
|
||||
top: 0
|
||||
background-color: white
|
||||
width: 100%
|
||||
|
||||
#menu_checkbox
|
||||
display: none
|
||||
|
||||
.icon-menu
|
||||
display: none
|
||||
background-color: white
|
||||
border-radius: 1.5rem
|
||||
width: 3rem
|
||||
height: 3rem
|
||||
position: fixed
|
||||
top: 1rem
|
||||
right: 1rem
|
||||
box-sizing: border-box
|
||||
box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)
|
||||
border: 0
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
.icon
|
||||
position: absolute
|
||||
transition: all 0.1s ease-in-out
|
||||
left: .75rem
|
||||
right: .75rem
|
||||
width: 1.5rem
|
||||
height: 4px
|
||||
top: calc(3rem / 2 - 2px)
|
||||
background-color: $color-primary
|
||||
|
||||
&::before, &::after
|
||||
position: absolute
|
||||
content: ""
|
||||
background-color: $color-primary
|
||||
height: 4px
|
||||
width: 100%
|
||||
display: block
|
||||
|
||||
&::before
|
||||
top: -.5rem
|
||||
&::after
|
||||
top: .5rem
|
||||
|
||||
nav
|
||||
left: 0
|
||||
right: 0
|
||||
margin-bottom: 4rem
|
||||
|
||||
ul
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
li
|
||||
display: inline
|
||||
border-right: 1px solid $color-primary
|
||||
border-bottom: 1px solid $color-primary
|
||||
|
||||
&:last-child
|
||||
border-right: none
|
||||
|
||||
&.active
|
||||
background: $color-primary
|
||||
color: white
|
||||
|
||||
a
|
||||
color: white
|
||||
text-decoration-color: white
|
||||
|
||||
a
|
||||
display: inline-block
|
||||
padding: 1rem
|
||||
font-size: 1rem
|
||||
font-weight: bold
|
||||
|
||||
|
||||
@media screen and (max-width: 839px)
|
||||
.nav
|
||||
position: absolute
|
||||
|
||||
.grid
|
||||
flex-direction: column
|
||||
.cell
|
||||
flex: 0 0 auto
|
||||
|
||||
nav
|
||||
display: none
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
position: relative
|
||||
background-color: white
|
||||
z-index: 500
|
||||
|
||||
ul
|
||||
li
|
||||
border: 0
|
||||
text-align: center
|
||||
|
||||
a
|
||||
width: 100%
|
||||
box-sizing: border-box
|
||||
|
||||
.icon-menu
|
||||
display: block
|
||||
z-index: 501
|
||||
|
||||
#menu_checkbox:checked
|
||||
|
||||
#menu_checkbox:checked ~ nav
|
||||
position: fixed
|
||||
display: block
|
||||
height: 100vh
|
||||
|
||||
.grid
|
||||
justify-content: center
|
||||
height: 100%
|
||||
|
||||
#menu_checkbox:checked ~ .icon-menu
|
||||
.icon
|
||||
width: 60%
|
||||
transform: rotate(45deg) translate(5px, 7px)
|
||||
top: 14px
|
||||
&::before
|
||||
display: none
|
||||
&::after
|
||||
transform: rotate(-90deg)translate(-5px, 12px)
|
||||
transform-origin: 5%
|
||||
Reference in New Issue
Block a user