ResiLien/resilien
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Mise à jour du design

Browse Source
This commit is contained in:
Simon
2021-10-22 16:43:20 +02:00
parent 337571376a
commit e13339fec0
6 changed files with 137 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
assets/styles/font.sass Normal file
View File

@ -0,0 +1,12 @@
html
font-size: 1.25rem
line-height: 1.15
body
font-size: 1.125rem
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
@media screen and (max-width: $size-small)
font-size: .9rem
p
line-height: 1.4

108
assets/styles/main.sass
View File

@ -1,23 +1,34 @@
$size-small: 400px
$size-small: 500px
@import "font"
body
color: #2d3824
background: #fff8eb
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
--color-background: #fff8eb
--color-paragraph: #2d3824
--color-highlight: #c14508
--border-style: dashed
--border-size: 4px
--link-style: dotted
--tile: 2rem
color: var(--color-paragraph)
background: var(--color-background)
margin: 0 auto
padding: 0 1rem
padding: 0 var(--tile)
max-width: 800px
font-size: 1.125rem
// background-image: repeating-conic-gradient(#fff 0 9deg, rgba(0, 0, 0, .1) 9deg 18deg)
// background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyIiBoZWlnaHQ9IjEiIGZpbGw9IiNjY2MiPjwvcmVjdD4KPHJlY3QgeD0iNSIgeT0iNSIgd2lkdGg9IjIiIGhlaWdodD0iMSIgZmlsbD0iI2NjYyI+PC9yZWN0Pgo8L3N2Zz4=")
@media screen and (max-width: $size-small)
font-size: 1rem
--border-size: 2px
--tile: 1rem
hr
background: repeating-linear-gradient(90deg, transparent, transparent 9px, black 10px)
height: 12px
margin: 2em auto
position: relative
border: 0
border-bottom: var(--border-size) var(--border-style) var(--color-highlight)
margin: var(--tile) auto
@media screen and (max-width: $size-small)
margin: calc(var(--tile)*2) calc(var(--tile)*-1)
ul.no-style
margin: 0
@ -25,41 +36,90 @@ ul.no-style
list-style-type: none
a, h1, h2, h3
color: #c14508
color: var(--color-highlight)
h1
a
text-decoration: underline var(--link-style)
&:hover
text-decoration: underline
h1, h2, h3
text-align: center
h2
margin: calc(var(--tile)*1.5) auto
h3
border: var(--border-size) var(--border-style) var(--color-highlight)
// display: inline-block
margin: calc(var(--tile)*1.5) auto var(--tile)
padding: var(--tile)
.footer
font-size: 0.8rem
.services
margin: 0
@media screen and (max-width: $size-small)
.cell, .cell.-right
text-align: center
flex: 0 0 100%
.flex
--margin-tile: calc(var(--tile)/2)
margin: calc(var(--margin-tile) * -1)
padding: 0
list-style-type: none
$tile: 1rem
width: calc(100% + 2*$tile)
margin-left: -$tile
width: calc(100% + 2 * var(--margin-tile))
display: flex
flex-wrap: wrap
li
text-align: center
padding: $tile
flex: 0 0 calc(100% * 6 / 12)
padding: var(--margin-tile)
flex: 0 0 50%
box-sizing: border-box
img
max-width: 100%
width: 40%
.contacts
width: 100%
@media screen and (max-width: $size-small)
margin: 0
width: 100%
li
flex: 0 0 100%
.quote
border: var(--border-size) var(--border-style) var(--color-highlight)
padding: var(--tile)
margin: calc(1.5 * var(--tile)) 0
position: relative
text-align: center
h2
color: var(--color-paragraph)
margin: 0
strong
color: var(--color-highlight)
font-size: 130%
// &::before
// content: ""
// position: absolute
// width: 100%
// height: 100%
// right: -1rem
// bottom: -1rem
// background-color: var(--color-highlight)
// mask: url(/icons/quote.svg) no-repeat 100px 100px
// mask-size: 80px
// opacity: .2
// transform: rotate(180deg)
// Grid
.grid { display: flex; flex-wrap: wrap; }
.grid.\-middle { align-items: center; }
.grid.\-bottom { align-items: end; }
.cell { flex: 1; box-sizing: border-box; }
.cell.\-left { text-align: left ;}
.cell.\-right { text-align: right; }