Weko/histoiredunpied
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Upgrade design

Browse Source
This commit is contained in:
Simon
2020-02-20 18:29:02 +01:00
parent 68260ed9d4
commit 9bdf14c12a
18 changed files with 136 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
assets/css/card.sass Normal file
View File

@ -0,0 +1,49 @@
$gutter: 20px
$gutterXS: 10px
.card
margin: $gutter 0
padding: $gutter
background-color: white
box-shadow: 0 1px 3px rgba(0,0,0,.1)
border-bottom: 1px solid #ebebeb
.card-image
overflow: hidden
display: flex
justify-content: center
padding: $gutter
img
padding: 0
margin: 0
max-width: 100%
max-height: 100%
.card-body
align-self: center
background-color: white
padding: $gutter
h3
padding: 0
margin: 0
time
color: #798081
font-size: .8rem
*:last-child
margin-bottom: 0
padding-bottom: 0
@media screen and (max-width: 600px)
.card
margin: $gutterXS 0
padding: $gutterXS
.card-image
padding: $gutterXS
.card-body
padding: $gutterXS

8
assets/css/grid.scss
View File

@ -11,9 +11,13 @@
.grid.\-around { justify-content: space-around; }
.cell { flex: 1; box-sizing: border-box; }
.cell.\-center { text-align: center ;}
.cell.\-left { text-align: left ;}
.cell.\-right { text-align: right; }
.cell.\-center { text-align: center ;}
.cell img { max-width: 100% }
@media screen and (min-width: 600px) {
.\-even-reverse:nth-child(even) { flex-direction: row-reverse; }
.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); }
@ -27,7 +31,7 @@
.cell.\-11of12 { flex: 0 0 calc(100% * 11 / 12); }
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 599px) {
.grid {
flex-direction: column;
}

95
assets/css/main.sass
View File

@ -1,8 +1,6 @@
@import "./font"
@import "./grid"
// Couleur
$primary-color: #e72520
$bg-color: #f2f2f2
// Responsive breakpoints
$size-xs: 480px
@ -12,12 +10,17 @@ $size-lg: 960px
$size-xl: 1280px
$size-2x: 1440px
@import "./font"
@import "./grid"
@import "./card"
body
margin: 0
font-family: $font-family
font-size: 13px
p
font-size: 0.9rem
h2
color: grey
a
color: black
@ -89,7 +92,7 @@ a
.ancre
top: -86px
@media (max-width: $size-sm)
@media (max-width: $size-sm - 1px)
.header
.menu
text-align: right
@ -107,7 +110,7 @@ a
padding: 20px 0
&.colored
background-color: #f2f2f2
background-color: $bg-color
@media (max-width: $size-md)
padding: 10px 0
@ -115,85 +118,7 @@ a
#content
padding-top: 90px
$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
.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: #798081
font-size: .8rem
*: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