Skip to content
Snippets Groups Projects
Commit f7fa121a authored by alexisben's avatar alexisben
Browse files

grid

parent a8fa2ac2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 457 additions and 159 deletions
assets/sass/_theme/_configuration.sass
+ 47
− 8
View file @ f7fa121a
// TODO: ranger
// MAIN COLORS
$main-color: black !default // Text color
$main-background-color: white !default // Background color
......@@ -14,16 +16,19 @@ $link-color: $main-color !default
$body-font-family: "Georgia", serif !default
$heading-font-family: "Helvetica", "Arial", sans-serif !default
$font-size-base: 1rem
$line-height-base: 1.4
// Fonts sizes
$body-font-size: 16 !default
$small-font-size: 14 !default
$body-font-size: 16px !default
$small-font-size: 14px !default
$h1-size: 60 !default
$h2-size: 40 !default
$h3-size: 30 !default
$h4-size: 20 !default
$h5-size: 18 !default
$h6-size: 14 !default
$h1-size: px2rem(60) !default
$h2-size: px2rem(40) !default
$h3-size: px2rem(30) !default
$h4-size: px2rem(20) !default
$h5-size: px2rem(18) !default
$h6-size: px2rem(16) !default
// Font weight
$heading-font-weight: normal !default
......@@ -45,6 +50,10 @@ $spacing3: 64px !default
$spacing4: 128px !default
$spacing5: 256px !default
// Grid
$grid-gutter: 60px
$grid-max-width: 1980px
// Z-index
$zindex-nav-accessibility: 1010 !default
......@@ -53,6 +62,9 @@ $header-color: $main-color !default
$header-hover-color: rgba($main-color, 0.7) !default // TODO : Réflechir à plus élégant / générique
$header-background-color: $main-background-color !default
$header-sticky-enabled: true
$header-sticky-transition: 0.3s
$header-height: 74px
$header-height-md: 74px
// Footer
$footer-color: $main-color !default
......@@ -92,3 +104,30 @@ $icons: map-merge($icons, ("twitter": "\e90d"))
// Breakpoints
// TODO: réécrire en sass les mixins bootstrap
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
// BLOCKS
// Block call to action
$block-call-to-action-background: $main-background-color !default
$block-call-to-action-color: $main-color !default
// Block pages
$block-pages-card-background: lighten($main-background-color, 1) !default
$block-pages-card-page-background: white !default
$block-pages-card-page-color: $main-color !default
$block-pages-card-page-background-hover: lighten($main-background-color, 2) !default
$block-pages-card-page-color-hover: white !default
// Block timeline
$block-timeline-horizontal-background: black !default
$block-timeline-horizontal-color: white !default
// Sections
$post-media-background: darken($main-background-color, 2) !default
$post-media-aspect-ratio: 50%
// MISC
// Animations
$arrow-ease-transition: cubic-bezier(0, 0.65, 0.4, 1.2) !default
$arrow-ease-transition-2: cubic-bezier(0, 0.65, 0.4, 1) !default
\ No newline at end of file
assets/sass/_theme/_utils.sass
+ 43
− 18
View file @ f7fa121a
// TODO : ranger
@function px2rem($size)
$remSize: $size / 16
@return #{$remSize}rem
......@@ -8,7 +10,7 @@
@function col($nb, $base: 12)
$nb: $nb/$base * 12
$nbCol: calc( (100% + #{$grid-gutter-width}) / 12 * #{$nb} )
$nbCol: calc( (100% + #{$grid-gutter}) / 12 * #{$nb} )
@return #{$nbCol}
@mixin in-page-with-aside
......@@ -39,29 +41,52 @@
&::#{$pseudo}
transform: translateX(#{px2rem($distance)})
@mixin sticky($top-md: calc(#{$header-height-md} + #{$grid-gutter-width}), $top-sm: calc(#{$header-height} + #{$grid-gutter-width}))
@mixin sticky($top-md: calc(#{$header-height-md} + #{$spacing1}), $top-sm: calc(#{$header-height} + #{$spacing1}))
position: sticky
top: $grid-gutter-width
@if $enable-header-sticky
transition: top $header-transition
top: $spacing1
@if $header-sticky-enabled
transition: top $header-sticky-transition
html:not(.is-scrolling-down) &
top: $top-sm
@include media-breakpoint-up(md)
top: $top-md
// NEW UTILS
@mixin icon($icon-name: '', $pseudo-element: before)
&::#{$pseudo-element}
display: inline-block
font-family: 'Icon'
font-style: normal
font-variant: normal
font-weight: normal
line-height: 1
speak: never
text-transform: none
vertical-align: middle
content: map-get($icons, $icon-name)
@mixin container
max-width: $grid-max-width
padding-left: $grid-gutter
padding-right: $grid-gutter
margin-left: auto
margin-right: auto
width: 100%
@mixin grid($cols: 12)
@include media-breakpoint-up(md)
display: grid
grid-gap: 0 $grid-gutter
grid-template-columns: repeat($cols, 1fr)
// NEW UTILS
@mixin icon($icon-name)
display: inline-block
font-family: 'Icon'
font-style: normal
font-variant: normal
font-weight: normal
line-height: 1
speak: never
text-transform: none
vertical-align: middle
content: map-get($icons, $icon-name)
font-family: $font-icons-code
\ No newline at end of file
@mixin stretched-link($pseudo-element: after)
&::#{$pseudo-element}
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: 2
content: ""
assets/sass/_theme/blocks/chapter.sass
+ 27
− 29
View file @ f7fa121a
// .block-chapter
// blockquote
// @extend .blockquote
// p:last-child
// margin-bottom: 0
// .notes
// @extend .small
// margin-top: $grid-gutter-width
// picture
// display: block
// margin-top: $grid-gutter-width
// img
// @extend .img-fluid
// figcaption
// @extend .small
// margin-top: .5rem
.block-chapter
blockquote
@extend .blockquote
p:last-child
margin-bottom: 0
.notes
@extend .small
margin-top: $spacing1
picture
display: block
margin-top: $spacing1
figcaption
@extend .small
margin-top: 0.5rem
// @include media-breakpoint-up(md)
// @include in-page-without-aside
// .block-content
// @include make-row()
// > *
// @include make-col-ready()
// @include make-col(8)
// &--with-image
// .block-content
// align-items: center
// > *
// @include make-col(6)
@include media-breakpoint-up(md)
@include in-page-without-aside
.block-content
> *
width: col(8)
// @include make-col-ready()
// @include make-col(8)
&--with-image
.block-content
align-items: center
> *
width: col(6)
// @include make-col(6)
assets/sass/_theme/blocks/pages.sass
+ 77
− 75
View file @ f7fa121a
// .block-pages
// .main-page
// @include media-breakpoint-up(lg)
// > div:first-child
// padding-right: $grid-gutter-width
// .title
// a::before
// content: none
.block-pages
.pages
@include grid(2)
// &--list
// .block-content
// @include media-breakpoint-up(lg)
// align-items: flex-start
// display: flex
// > *
// flex: 1
// .pages
// --bs-gutter-y: 0
// @include media-breakpoint-up(lg)
// margin-top: 4.5rem
// > *
// margin-top: px2rem(10)
// width: 100%
.block-pages
.main-page
@include media-breakpoint-up(lg)
> div:first-child
padding-right: $spacing1
.title
a::before
content: none
&--list
.block-content
@include media-breakpoint-up(lg)
align-items: flex-start
display: flex
> *
flex: 1
// .page
// .title
// a
// font-size: px2rem(18)
// text-decoration-color: transparent
// @include hover-translate-icon(before, 3)
// &:hover
// text-decoration-color: black
// .page
// > div
// padding: 0
.pages
--bs-gutter-y: 0
@include media-breakpoint-up(lg)
margin-top: 4.5rem
> *
margin-top: px2rem(10)
width: 100%
.page
.title
@extend .h4
a
@include hover-translate-icon(before, 3)
font-size: px2rem(18)
text-decoration-color: transparent
&:hover
text-decoration-color: black
.page
> div
padding: 0
// &--cards
// background-color: $block-pages-card-background
// padding-bottom: $grid-gutter-width
// padding-top: $grid-gutter-width
// .pages
// --bs-gutter-y: #{$grid-gutter-width}
// > *
// @extend .col-lg-4
// .page
// aspect-ratio: 0.887
// background-color: $block-pages-card-page-background
// transition: background .3s, color .3s
// &,
// a
// color: $block-pages-card-page-color
// a
// transition: text-decoration-color .3s ease, color .3s
// .more
// @include link
// text-decoration-color: $block-pages-card-page-color
// > div:first-child
// display: flex
// flex-direction: column
// .title
// a
// text-decoration: none
// + p:not(.more)
// margin-bottom: 1rem
// &:hover
// background-color: $block-pages-card-page-background-hover
// &,
// a
// color: $block-pages-card-page-color-hover
// .more
// text-decoration-color: $block-pages-card-page-color-hover
// > div:first-of-type
// padding: $card-spacer-y $card-spacer-x
// .page
// .title
// a::before
// content: none
&--cards
background-color: $block-pages-card-background
padding-bottom: $grid-gutter
padding-top: $grid-gutter
.pages
> *
@include grid(4)
.page
aspect-ratio: 0.887
background-color: $block-pages-card-page-background
transition: background 0.3s, color 0.3s
&,
a
color: $block-pages-card-page-color
a
transition: text-decoration-color .3s ease, color .3s
.more
@include link
text-decoration-color: $block-pages-card-page-color
> div:first-child
display: flex
flex-direction: column
.title
a
text-decoration: none
+ p:not(.more)
margin-bottom: 1rem
&:hover
background-color: $block-pages-card-page-background-hover
&,
a
color: $block-pages-card-page-color-hover
.more
text-decoration-color: $block-pages-card-page-color-hover
> div:first-of-type
padding: $spacing1
.page
.title
a::before
content: none
\ No newline at end of file
assets/sass/_theme/blocks/posts.sass
+ 3
− 0
View file @ f7fa121a
.block-posts
.posts
@include grid(3)
assets/sass/_theme/design-system/breadcrumb.sass
+ 2
− 1
View file @ f7fa121a
......@@ -14,7 +14,8 @@
flex-shrink: 0
white-space: nowrap
&-item + &-item
&:before
padding-left: 0.5rem
&::before
color: lighten($breadcrumb-color, 0.5)
content: "/"
padding-right: 0.5rem
assets/sass/_theme/design-system/grid.sass
+ 22
− 0
View file @ f7fa121a
.container
@include container
.content-blocks
position: relative
> aside
@include container
pointer-events: none
@include media-breakpoint-up(md)
height: 100%
left: 50%
position: absolute
transform: translateX(-50%)
width: 100%
> div
@include sticky
> *
width: col(4)
pointer-events: auto
> .blocks
.block-content
padding-left: col(4)
assets/sass/_theme/design-system/header.sass
+ 3
− 2
View file @ f7fa121a
......@@ -3,7 +3,7 @@ header[role="banner"]
background-color: $header-background-color
position: sticky
top: 0
transition: transform 0.3s
transition: transform $header-sticky-transition
z-index: 10
html.is-scrolling-down:not(.is-menu-open) &
&:not(:hover)
......@@ -15,7 +15,8 @@ header[role="banner"]
nav[role="navigation"]
.container
display: flex
padding: $spacing1
padding-bottom: $grid-gutter / 2
padding-top: $grid-gutter / 2
justify-content: space-between
button[type="button"]
display: none
......
assets/sass/_theme/design-system/layout.sass
+ 22
− 1
View file @ f7fa121a
*,
*::before,
*::after
box-sizing: border-box
body
color: $body-color
background: $body-background-color
@media (prefers-reduced-motion: reduce)
*
transition-duration: 0s !important
&:not(.is-loaded)
*
transition-duration: 0s !important
figure
margin: 0
img
max-width: 100%
height: auto
\ No newline at end of file
height: auto
&::selection
background: transparent
.container
@include container
ul
padding-left: px2rem(15)
assets/sass/_theme/design-system/nav.sass
+ 12
− 9
View file @ f7fa121a
......@@ -21,23 +21,26 @@
.dropdown-menu
display: none
background: $header-background-color
padding-bottom: $spacing1
padding-top: $spacing1
inset: 100% 0 auto 0
position: absolute
.nav-level-1
display: flex
> li > a
padding: $spacing1
> li
> a
padding: $spacing1
&:last-child a
padding-right: 0
li.has-children:hover
.dropdown-menu
padding: $spacing1
inset: 100% 0 auto 0
display: block
position: absolute
.nav-level-2
@include media-breakpoint-up(lg)
display: grid
grid-gap: $spacing1 $spacing1
grid-template-columns: repeat(4, 1fr)
@include media-breakpoint-up(md)
@include container
@include grid(4)
> li
&,
& > a,
......
assets/sass/_theme/design-system/reset.sass 0 → 100644
+ 45
− 0
View file @ f7fa121a
// // http://meyerweb.com/eric/tools/css/reset/
// // v2.0 | 20110126
// // License: none (public domain)
// html, body, div, span, applet, object, iframe,
// h1, h2, h3, h4, h5, h6, p, blockquote, pre,
// a, abbr, acronym, address, big, cite, code,
// del, dfn, em, img, ins, kbd, q, s, samp,
// small, strike, strong, sub, sup, tt, var,
// b, u, i, center,
// dl, dt, dd, ol, ul, li,
// fieldset, form, label, legend,
// table, caption, tbody, tfoot, thead, tr, th, td,
// article, aside, canvas, details, embed,
// figure, figcaption, footer, header, hgroup,
// menu, nav, output, ruby, section, summary,
// time, mark, audio, video
// border: 0
// font: inherit
// margin: 0
// padding: 0
// vertical-align: baseline
// // HTML5 display-role reset for older browsers
// article, aside, details, figcaption, figure,
// footer, header, hgroup, menu, nav, section
// display: block
// body
// line-height: 1
// ol, ul
// list-style: none
// blockquote, q
// quotes: none
// blockquote:before, blockquote:after,
// q:before, q:after
// content: ''
// content: none
// table
// border-collapse: collapse
// border-spacing: 0
assets/sass/_theme/design-system/typography.sass
+ 78
− 15
View file @ f7fa121a
%heading
font-family: $heading-font-family
h1,
.h1
h1, .h1
@extend %heading
font-size: $h1-size
h2,
.h2
h2, .h2
@extend %heading
font-size: $h2-size
h3,
.h3
h3, .h3
@extend %heading
font-size: $h3-size
h4,
.h4
h4, .h4
@extend %heading
font-size: $h4-size
h5,
.h5
h5, .h5
@extend %heading
font-size: $h5-size
h6,
.h6
h6, .h6
@extend %heading
font-size: $h6-size
h1, .h1,
h2, .h2
a
text-decoration-thickness: 0
&:hover
text-decoration-thickness: 1px
body
font-family: $body-font-family
-moz-osx-font-smoothing: grayscale
-webkit-font-smoothing: antialiased
font-variant-ligatures: common-ligatures
text-rendering: optimizelegibility
line-height: $line-height-base
p
p, .p
font-size: $body-font-size
small
small, .small
font-size: $small-font-size
a, .link
blockquote, .blockquote
font-style: italic
cite
font-size: px2rem(18)
font-style: normal
a,
.link
@include link
overflow-wrap: break-word
&[target="_blank"]
@include icon("link-blank", "after")
&::after
font-size: px2rem(10)
margin-left: px2rem(5)
&[href^="mailto"]
&::after
content: none
.link-more
@include link
@include icon('arrow', before)
&::before
font-size: px2rem(10)
margin-right: px2rem(5)
::selection
background: rgba($main-color, .7)
color: $main-background-color
text-shadow: none
*:focus-visible
outline-color: gray
outline-offset: 5px
outline-style: dashed
outline-width: 1px
@media (prefers-reduced-motion: no-preference)
*:focus-visible
transition: outline-offset .3s ease
// ICONS
@font-face
font-display: block
font-family: 'Icon'
font-style: normal
font-weight: 400
src: url('../fonts/icons/icomoon.woff') format("woff")
@each $name in $icons
.icon-#{$name}
@include icon($name)
.btn-#{$name}
@include icon($name)
&::before
margin-right: px2rem(5)
\ No newline at end of file
assets/sass/_theme/hugo-osuny.sass
+ 2
− 0
View file @ f7fa121a
// @import "normalize.css/normalize.css" // TODO: fix normalize npm issue
@import "_todo/normalize"
// @import "normalize-scss//normalize"
@import "_todo/bootstrap-breakpoints"
@import "glightbox/dist/css/glightbox"
......@@ -9,6 +10,7 @@
@import "configuration"
// Design System
@import "design-system/reset"
@import "design-system/layout"
@import "design-system/a11y"
@import "design-system/breadcrumb"
......
assets/sass/_theme/sections/pages.sass
+ 31
− 0
View file @ f7fa121a
.page
position: relative
> div:first-of-type
padding-left: 0
padding-right: 0
.media
// @extend .card-media
.title
@extend .h4
margin-bottom: 0
a
@include stretched-link()
@extend .link-more
font-size: px2rem(22)
line-height: px2rem(30)
& + p
margin-top: .5rem
& ~ .more
margin-top: auto
.more
@extend .small
text-decoration-line: underline
text-decoration-thickness: 1px
text-underline-offset: 3px
.pages
@include grid(2)
assets/sass/_theme/sections/posts.sass
+ 37
− 0
View file @ f7fa121a
.post
display: flex
flex-direction: column
.media
background: $post-media-background
order: -1
&::before
content: ""
display: block
padding-top: $post-media-aspect-ratio
a
@include stretched-link
.author,
.post-categories
// @extend .card-text
@extend .small
&,
a
// color: $gray-700
.posts
@include grid(3)
.post-categories
@extend .small
list-style: none
margin: 0
padding: 0
li
display: inline-block
vertical-align: middle
&::after
content: ', '
margin-left: -3px
&:last-child
&::after
content: none
package.json
+ 1
− 1
View file @ f7fa121a
......@@ -10,6 +10,6 @@
"glightbox": "^3.1.0",
"intersection-observer": "^0.12.0",
"js-cookie": "^3.0.1",
"normalize.css": "^8.0.1"
"normalize-scss": "^7.0.1"
}
}
yarn.lock
+ 5
− 0
View file @ f7fa121a
......@@ -27,6 +27,11 @@ js-cookie@^3.0.1:
resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
normalize-scss@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/normalize-scss/-/normalize-scss-7.0.1.tgz#74485e82bb5d0526371136422a09fdb868ffc1a4"
integrity sha512-qj16bWnYs+9/ac29IgGjySg4R5qQTp1lXfm7ApFOZNVBYFY8RZ3f8+XQNDDLHeDtI3Ba7Jj4+LuPgz9v/fne2A==
normalize.css@^8.0.1:
version "8.0.1"
resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment