Update
This commit is contained in:
37
assets/css/grid.scss
Normal file
37
assets/css/grid.scss
Normal file
@ -0,0 +1,37 @@
|
||||
.grid { display: flex; flex-wrap: wrap; }
|
||||
.grid.\-top { align-items: flex-start; }
|
||||
.grid.\-middle { align-items: center; }
|
||||
.grid.\-bottom { align-items: flex-end; }
|
||||
.grid.\-stretch { align-items: stretch; }
|
||||
.grid.\-baseline { align-items: baseline; }
|
||||
.grid.\-left { justify-content: flex-start; }
|
||||
.grid.\-center { justify-content: center; }
|
||||
.grid.\-right { justify-content: flex-end; }
|
||||
.grid.\-between { justify-content: space-between; }
|
||||
.grid.\-around { justify-content: space-around; }
|
||||
|
||||
.cell { flex: 1; box-sizing: border-box; }
|
||||
.cell.\-center { text-align: center ;}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.cell.\-1of12 { flex: 0 0 calc(100% * 1 / 12); }
|
||||
.cell.\-2of12 { flex: 0 0 calc(100% * 2 / 12); }
|
||||
.cell.\-3of12 { flex: 0 0 calc(100% * 3 / 12); }
|
||||
.cell.\-4of12 { flex: 0 0 calc(100% * 4 / 12); }
|
||||
.cell.\-5of12 { flex: 0 0 calc(100% * 5 / 12); }
|
||||
.cell.\-6of12 { flex: 0 0 calc(100% * 6 / 12); }
|
||||
.cell.\-7of12 { flex: 0 0 calc(100% * 7 / 12); }
|
||||
.cell.\-8of12 { flex: 0 0 calc(100% * 8 / 12); }
|
||||
.cell.\-9of12 { flex: 0 0 calc(100% * 9 / 12); }
|
||||
.cell.\-10of12 { flex: 0 0 calc(100% * 10 / 12); }
|
||||
.cell.\-11of12 { flex: 0 0 calc(100% * 11 / 12); }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.grid {
|
||||
flex-direction: column;
|
||||
}
|
||||
.cell {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
@ -7,21 +7,38 @@
|
||||
//@import "node_modules/spectre.css/src/spectre"
|
||||
//@import "node_modules/spectre.css/src/spectre-exp"
|
||||
//@import "node_modules/spectre.css/src/spectre-icons"
|
||||
//@import "node_modules/spectre.css/src/_variables"
|
||||
@import "./grid"
|
||||
|
||||
@mixin container
|
||||
max-width: 940px
|
||||
width: 90%
|
||||
margin: 0 auto
|
||||
// Responsive breakpoints
|
||||
$size-xs: 480px
|
||||
$size-sm: 600px
|
||||
$size-md: 840px
|
||||
$size-lg: 960px
|
||||
$size-xl: 1280px
|
||||
$size-2x: 1440px
|
||||
|
||||
body
|
||||
margin: 0
|
||||
|
||||
a
|
||||
color: black
|
||||
text-decoration-color: #e72520
|
||||
|
||||
&:hover
|
||||
color: #e72520
|
||||
|
||||
@mixin container
|
||||
max-width: $size-lg
|
||||
margin: 0 auto
|
||||
padding: 0 20px
|
||||
|
||||
.container
|
||||
@include container
|
||||
|
||||
.header
|
||||
position: fixed
|
||||
z-index: 1
|
||||
z-index: 3
|
||||
left: 0
|
||||
right: 0
|
||||
height: 90px
|
||||
@ -31,7 +48,6 @@ a
|
||||
.container
|
||||
display: flex
|
||||
height: 100%
|
||||
border-bottom: 1px dotted black
|
||||
|
||||
.accueil
|
||||
padding: 15px
|
||||
@ -45,8 +61,6 @@ a
|
||||
margin-right: -20px
|
||||
|
||||
a
|
||||
color: black
|
||||
text-decoration-color: black
|
||||
text-decoration-thickness: 3px
|
||||
text-underline-offset: 10px
|
||||
padding: 15px
|
||||
@ -60,25 +74,127 @@ a
|
||||
li
|
||||
display: inline
|
||||
|
||||
|
||||
.ancre
|
||||
position: absolute
|
||||
top: -126px
|
||||
|
||||
@media (max-width: $size-md)
|
||||
.header
|
||||
height: 70px
|
||||
.container
|
||||
justify-content: space-between
|
||||
align-items: center
|
||||
.logo
|
||||
height: 30px
|
||||
|
||||
.ancre
|
||||
top: -86px
|
||||
|
||||
@media (max-width: $size-sm)
|
||||
.header
|
||||
.menu
|
||||
text-align: right
|
||||
margin: 0
|
||||
a
|
||||
padding: 0
|
||||
margin: 0
|
||||
text-decoration-thickness: 1px
|
||||
text-underline-offset: 1px
|
||||
li
|
||||
display: block
|
||||
|
||||
.bg
|
||||
position: relative
|
||||
height: 1000px
|
||||
padding: 20px 0
|
||||
|
||||
&.colored
|
||||
background-color: green
|
||||
background-color: #f2f2f2
|
||||
|
||||
@media (max-width: $size-md)
|
||||
padding: 10px 0
|
||||
|
||||
#content
|
||||
padding-top: 90px
|
||||
|
||||
.container
|
||||
@include container
|
||||
|
||||
.ancre
|
||||
text-align: center
|
||||
position: absolute
|
||||
top: -106px
|
||||
$gutter: 10px
|
||||
$padding-card: 20px
|
||||
$padding-card-body: 20px
|
||||
|
||||
.news
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
align-items: center
|
||||
|
||||
.card
|
||||
margin: 20px 0
|
||||
height: 300px
|
||||
overflow: hidden
|
||||
display: flex
|
||||
|
||||
&:nth-child(even)
|
||||
.card-image
|
||||
order: 2
|
||||
.card-body
|
||||
order: 1
|
||||
margin-left: 0
|
||||
margin-right: -40px
|
||||
|
||||
|
||||
@media (max-width: 768px)
|
||||
.menu
|
||||
visibility: hidden
|
||||
|
||||
.card-image
|
||||
width: 45%
|
||||
overflow: hidden
|
||||
display: flex
|
||||
justify-content: center
|
||||
|
||||
img
|
||||
padding: 0
|
||||
margin: 0
|
||||
align-self: center
|
||||
min-height: 300px
|
||||
|
||||
.card-body
|
||||
z-index: 2
|
||||
width: 55%
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.1)
|
||||
border-bottom: 1px solid #ebebeb
|
||||
margin-left: -40px
|
||||
align-self: center
|
||||
background-color: white
|
||||
padding: $padding-card-body
|
||||
|
||||
h3
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
time
|
||||
color: #bcc3ce
|
||||
|
||||
*:last-child
|
||||
margin-bottom: 0
|
||||
padding-bottom: 0
|
||||
|
||||
@media (max-width: $size-md)
|
||||
.card
|
||||
.card-image
|
||||
width: 40%
|
||||
.card-body
|
||||
width: 60%
|
||||
|
||||
@media (max-width: $size-sm)
|
||||
.card
|
||||
height: inherit
|
||||
.card-image
|
||||
width: 30%
|
||||
max-height: 200px
|
||||
align-self: center
|
||||
.card-body
|
||||
align-self: inherit
|
||||
margin: 0
|
||||
width: 70%
|
||||
|
||||
&:nth-child(even)
|
||||
.card-body
|
||||
margin: 0
|
||||
|
||||
Reference in New Issue
Block a user