diff --git a/assets/styles/main.sass b/assets/styles/main.sass index c1e3f2a..d8cf7c3 100644 --- a/assets/styles/main.sass +++ b/assets/styles/main.sass @@ -1,12 +1,6 @@ $line-height: 1.15 $size-small: 600px - -html - font-size: 1.25rem - line-height: $line-height - -p, li - line-height: 1.4 +$layout-size: 960px // COLOR @@ -17,7 +11,7 @@ $color-main: #abd1c6 $color-light: #e8e4e6 $color-lightest: #fffffe $color-secondary: #f9bc60 -$color-tertiary: #A91804 +$color-tertiary: #A61A07 @mixin theme // https://www.happyhues.co/palettes/10 @@ -28,8 +22,8 @@ $color-tertiary: #A91804 --color-tertiary: #{$color-tertiary} --color-background: #{$color-dark} - --color-headline: #{$color-lightest} - --color-paragraph: var(--color-secondary) + --color-headline: var(--color-highlight) + --color-paragraph: var(--color-main) --color-link: var(--color-highlight) --color-button: var(--color-highlight) --color-button-text: var(--color-stroke) @@ -39,7 +33,7 @@ $color-tertiary: #A91804 --color-card-paragraph: #{$color-darken} --color-card-link: var(--color-background) --color-card-button: var(--color-background) - --color-card-button-text: var(--color-headline) + --color-card-button-text: #{$color-lightest} --color-secondary-background: var(--color-secondary) @@ -67,7 +61,7 @@ $color-tertiary: #A91804 color: var(--color-button-text) a color: var(--color-link) - .card, .cards > * + .card, .cards > *, .footnotes color: var(--color-card-paragraph) background: var(--color-card-background) h1, h2, h3, h4, h5, h6 @@ -88,6 +82,8 @@ $color-tertiary: #A91804 color: var(--color-link) @mixin theme-secondary + --color-link: var(--color-secondary-link) + --color-headline: var(--color-secondary-headline) color: var(--color-secondary-paragraph) background: var(--color-secondary-background) h1, h2, h3, h4, h5, h6 @@ -97,9 +93,10 @@ $color-tertiary: #A91804 color: var(--color-secondary-button-text) a color: var(--color-secondary-link) - .card, .cards > * + .card, .cards > *, .footnotes color: var(--color-secondary-card-paragraph) background: var(--color-secondary-card-background) + border-radius: var(--border-radius) h1, h2, h3, h4, h5, h6 color: var(--color-secondary-card-headline) button, .button @@ -108,31 +105,66 @@ $color-tertiary: #A91804 a color: var(--color-secondary-card-link) -svg - height: 120px - .st0 - fill: var(--color-paragraph) - .st1 - fill: var(--color-link) +// HTML TAG + +html + font-size: 1.25rem + line-height: $line-height body @include theme @include theme-primary -.theme-secondary - @include theme-secondary +p, li + line-height: 1.6 -.card, .cards > * - padding: 1rem - margin: 1rem +.cards + display: grid + grid-auto-columns: 1fr + grid-template-columns: 1fr 1fr + grid-template-rows: auto auto auto + column-gap: var(--tile) + row-gap: var(--tile) + margin: 0 + padding: 0 + list-style-type: none + + @media screen and (max-width: 800px) + grid-template-columns: 1fr + +.cards > *, .card + padding: calc(var(--tile)) + border-radius: var(--border-radius) + + header + display: grid + column-gap: 1rem + grid-template-columns: 70px auto + align-items: center + margin-bottom: 1rem + + p + display: inline-block + + img + width: 70px + height: 70px + + p, h1, h2, h3 + margin: 0 + padding: 0 + + @media screen and (max-width: 800px) + text-align: center body + --tile: 2rem + --border-style: dashed --border-size: 4px + --border-radius: calc(var(--tile)/2) --link-style: dotted - --tile: 2rem - 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" @@ -145,31 +177,37 @@ body --tile: 1rem font-size: .9rem -.content - max-width: 800px - padding: var(--tile) - margin: 0 auto - -img - max-width: 100% - @media screen and (max-width: $size-small) - max-width: calc(100% + 1rem) - margin-left: -.5rem - -hr - 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) - -.center +h1 + margin: 0 auto calc(var(--tile)*2) + padding: calc(var(--tile)*2.5) 0 0 text-align: center -p + ol, p + ul - margin: 0 - > li:first-child - padding-top: 0 +h2 + margin: 0 auto calc(var(--tile)*1.5) + padding: calc(var(--tile)*2) 0 0 + +h3 + margin: 0 auto var(--tile) + padding: calc(var(--tile)*1.5) 0 0 + +h1 + h2, h2 + h3, h3 + h4 + padding-top: 0 + +a + text-decoration: none + border-bottom: 2px var(--link-style) + &:hover + border-bottom: 2px solid + + &:active, &:visited + border-bottom: 2px dashed + +a[href^="http"]::after + content: "\2197" + font-size: .8rem + display: inline-block + position: relative + margin-left: .2em ol, ul padding-left: 1.2rem @@ -185,65 +223,83 @@ ul.no-style li padding: 0 - line-height: $line-height - -a - text-decoration: underline var(--link-style) - &:hover - text-decoration: underline - -.header .title - font-size: 2.25rem - font-weight: 700 - margin: 1.5rem 0 - -h2 - margin: calc(var(--tile)*1.5) auto - -h3 - // display: inline-block - margin: calc(var(--tile)*1.5) auto var(--tile) - -.frame - border: var(--border-size) var(--border-style) var(--color-highlight) - padding: var(--tile) - -.footer - font-size: 0.8rem - padding-bottom: calc(var(--tile)/2) +img + max-width: 100% @media screen and (max-width: $size-small) - .cell, .cell.-right - text-align: center - flex: 0 0 100% - padding-bottom: calc(var(--tile)/2) - -.flex - --margin-tile: calc(var(--tile)/2) - margin: calc(var(--margin-tile) * -1) - padding: 0 - list-style-type: none - width: calc(100% + 2 * var(--margin-tile)) - display: flex - flex-wrap: wrap - li - text-align: center - padding: var(--margin-tile) - flex: 0 0 50% - box-sizing: border-box - - img - max-width: 100% - width: 40% + max-width: calc(100% + 1rem) + margin-left: -.5rem +hr + 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) + +.theme-primary + @include theme-primary + +.theme-secondary + @include theme-secondary + +.half + max-width: 50% + margin: 0 auto + +.center + text-align: center + +.header + justify-content: space-between + + .title + font-size: 2.25rem + font-weight: 700 margin: 0 - width: 100% + padding: 0 + a + border: none + text-align: center + + img + height: 120px + max-width: 100% + margin: 0 auto + + @media screen and (max-width: $size-small) + flex-direction: column + justify-content: space-around + + .title + a + display: block + width: 100% + +.menu + ul + margin: 0 + padding: 0 + list-style-type: none + + li + padding: 0 + margin-top: .3rem + + a + padding: .3rem calc(var(--tile)/4) + + @media screen and (max-width: $size-small) + ul + display: flex + flex-direction: row-reverse li - flex: 0 0 100% + display: inline + margin: var(--tile) auto .quote border: var(--border-size) var(--border-style) var(--color-highlight) + border-radius: var(--border-radius) padding: var(--tile) margin: calc(1.5 * var(--tile)) 0 position: relative @@ -251,25 +307,62 @@ h3 h2 margin: 0 + padding: 0 strong font-size: 130% +.content + max-width: $layout-size + padding: var(--tile) + margin: 0 auto + + .blogDate:first-child + h1 + padding-top: var(--tile) + + h1:first-child + padding-top: 0 + + .quote:first-child + margin-top: 0 + +.footnotes + font-size: .8rem + padding: var(--tile) + + hr + border: none + margin: 0 + p + margin: 0 + +.footer + font-size: 0.8rem + padding-bottom: calc(var(--tile)/2) + font-family: monospace + line-height: 1.2 + + @media screen and (max-width: $size-small) + .cell, .cell.-right + text-align: center + flex: 0 0 100% + padding-bottom: calc(var(--tile)/2) + + ul + ul + border-top: 2px dotted + padding-top: var(--tile) + margin-top: var(--tile) + .blogDate font-style: italic font-size: 0.9rem display: block margin-top: 1.5rem - -.footnotes - font-size: .8rem - p - margin: 0 + text-align: center // 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 ;} diff --git a/config/_default/config.yml b/config/_default/config.yml index 716f94a..f03cf11 100644 --- a/config/_default/config.yml +++ b/config/_default/config.yml @@ -15,8 +15,8 @@ permalinks: blog: /blog/:title/ params: - FaviconFile: logo.svg - ImageSize: 800x + FaviconFile: /favicon.svg + ImageSize: 960x minify: tdewolff: diff --git a/content/_index.md b/content/_index.md index 4ffeee2..2b02e8c 100644 --- a/content/_index.md +++ b/content/_index.md @@ -24,40 +24,56 @@ RésiLien est géré par un **collectif** d'entreprises de l'**Économie Sociale
Publié le {{ if isset .Params "auteur" }} - {{ .Params.auteur }}{{ end }}
{{ .Content }} -