diff --git a/assets/js/theme/design-system/components/toc.js b/assets/js/theme/design-system/components/toc.js index 0ed5ba5b7..c0794117b 100644 --- a/assets/js/theme/design-system/components/toc.js +++ b/assets/js/theme/design-system/components/toc.js @@ -163,7 +163,10 @@ window.osuny.TableOfContents.prototype.updateScrollspy = function (scroll) { var container = this.state.isOffcanvas ? this.elements.nav : this.elements.content; if (this.state.currentLink && scroll > window.innerHeight) { var progress = this.getAbsoluteOffsetTop(this.state.currentLink) - container.offsetHeight / 2; - progress = this.state.isOffcanvas ? progress : progress - scroll; + var scrollLimit = this.elements.root.offsetTop + window.innerHeight; + if (!this.state.isOffcanvas) { + progress = progress - Math.min(scrollLimit, scroll); + } container.scrollTo({ top: progress }); diff --git a/assets/sass/_theme/design-system/layout.sass b/assets/sass/_theme/design-system/layout.sass index e1f122048..8bd7051ed 100644 --- a/assets/sass/_theme/design-system/layout.sass +++ b/assets/sass/_theme/design-system/layout.sass @@ -73,6 +73,8 @@ ol @include in-page-with-sidebar .heading h2, .block .block-content padding-left: offset(4) + .section-sidebar + margin-top: 0 details &:not([open]):hover diff --git a/assets/sass/_theme/design-system/meta.sass b/assets/sass/_theme/design-system/meta.sass index b1cac5465..2c4a2ea07 100644 --- a/assets/sass/_theme/design-system/meta.sass +++ b/assets/sass/_theme/design-system/meta.sass @@ -13,7 +13,7 @@ &:not(:first-child) padding-top: $spacing-2 border-top: var(--border-width) solid var(--color-border) - > ul + > ul, > :last-child text-align: right &.taxonomies padding-top: 0 diff --git a/assets/sass/_theme/design-system/single/sidebar.sass b/assets/sass/_theme/design-system/single/sidebar.sass new file mode 100644 index 000000000..94c6f47d0 --- /dev/null +++ b/assets/sass/_theme/design-system/single/sidebar.sass @@ -0,0 +1,7 @@ +.section-sidebar + @include in-page-with-sidebar + @include sidebar + @include in-page-without-sidebar + @include aside-full-width + @include media-breakpoint-down(desktop) + @include container diff --git a/assets/sass/_theme/design-system/table_of_contents.sass b/assets/sass/_theme/design-system/table_of_contents.sass index ed43851a6..2a9fb9558 100644 --- a/assets/sass/_theme/design-system/table_of_contents.sass +++ b/assets/sass/_theme/design-system/table_of_contents.sass @@ -133,11 +133,14 @@ .toc-content overflow-y: auto max-height: calc(100vh - var(--header-height)) + padding-top: var(--grid-gutter) + margin-top: var(--grid-gutter-negative) padding-bottom: $spacing-4 pointer-events: auto @include sticky($spacing-3) + transition: top $header-sticky-transition, max-height $header-sticky-transition html.is-scrolling-down & - max-height: calc(100vh - #{$spacing-3}) + max-height: calc(100vh) .toc-title color: var(--color-text-alt) button diff --git a/assets/sass/_theme/hugo-osuny.sass b/assets/sass/_theme/hugo-osuny.sass index 52708ded1..20c84fbc0 100644 --- a/assets/sass/_theme/hugo-osuny.sass +++ b/assets/sass/_theme/hugo-osuny.sass @@ -43,6 +43,7 @@ @import design-system/offcanvas @import design-system/pagination @import design-system/print +@import design-system/single/sidebar @import design-system/table @import design-system/table_of_contents @import design-system/taxonomies diff --git a/assets/sass/_theme/sections/events/single.sass b/assets/sass/_theme/sections/events/single.sass index ad0c27b3c..eb5075cbe 100644 --- a/assets/sass/_theme/sections/events/single.sass +++ b/assets/sass/_theme/sections/events/single.sass @@ -73,9 +73,6 @@ &.image-square width: columns(6) @include h3 - &:not(.full-width) - .section-sidebar - @include sidebar .programme-btn @extend .button--alt @extend .button--small diff --git a/assets/sass/_theme/sections/jobs.sass b/assets/sass/_theme/sections/jobs.sass index fa30ff35c..d2d4a7099 100644 --- a/assets/sass/_theme/sections/jobs.sass +++ b/assets/sass/_theme/sections/jobs.sass @@ -8,17 +8,3 @@ + time &::before content: ' • ' - -// sidebar -.jobs__page - &:not(.full-width) - .section-sidebar - @include sidebar - - &.full-width - .job-sidebar - @include media-breakpoint-down(desktop) - @include container - - @include media-breakpoint-up(desktop) - @include aside-full-width \ No newline at end of file diff --git a/assets/sass/_theme/sections/organizations.sass b/assets/sass/_theme/sections/organizations.sass index 79ae5ff49..f86ec23b3 100644 --- a/assets/sass/_theme/sections/organizations.sass +++ b/assets/sass/_theme/sections/organizations.sass @@ -116,15 +116,8 @@ margin-top: $spacing-4 .organizations__page - .lead - font-family: $lead-sidebar-font-family - font-weight: $lead-sidebar-weight - line-height: $lead-sidebar-line-height - margin-bottom: $spacing-3 - @include media-breakpoint-up(desktop) - font-size: $lead-sidebar-size-desktop .document-content - [itemprop="articleBody"] + .organization-logo + .organization-presentation + .organization-logo figcaption text-align: right @include meta @@ -147,6 +140,9 @@ margin-top: 0 &:not(:first-child) margin-top: $spacing-5 + &:not(.full-width) + .organization-presentation + padding-left: offset(4) @include media-breakpoint-down(md) .document-content .organization-logo @@ -159,12 +155,7 @@ display: flex justify-content: space-between gap: var(--grid-gutter) - [itemprop="articleBody"] + .organization-presentation width: columns(8) + .organization-logo - width: columns(3) - .contacts-details - ul - @include grid(2) - li - margin-top: 0 + width: columns(3) \ No newline at end of file diff --git a/assets/sass/_theme/sections/persons/single.sass b/assets/sass/_theme/sections/persons/single.sass index 7d45f15b4..b5f249bed 100644 --- a/assets/sass/_theme/sections/persons/single.sass +++ b/assets/sass/_theme/sections/persons/single.sass @@ -43,7 +43,6 @@ .blocks margin-top: $spacing-5 .person-objects - margin-top: $spacing-5 > * + * margin-top: $spacing-5 .top h2 a @@ -99,25 +98,26 @@ @include small &:hover color: var(--color-accent) + @include media-breakpoint-down(lg) .roles margin-top: $spacing-4 - @include media-breakpoint-up(lg) - .informations - @include grid - margin-bottom: $spacing-4 - .roles - grid-column: 1 / -1 - .biography - grid-column: 1 / 9 - + .roles - grid-column: 9 / 13 - text-align: right - .lead + div - margin-top: $spacing-4 - @include media-breakpoint-up(md) - .contacts-details - ul - @include grid(3) - li - margin-top: 0 + + @include media-breakpoint-up(desktop) + &.full-width + .informations + @include grid + margin-bottom: $spacing-4 + .roles + grid-column: 1 / -1 + .biography + grid-column: 1 / 9 + + .roles + grid-column: 9 / 13 + text-align: right + .lead + div + margin-top: $spacing-4 + &:not(.full-width) + .informations, + .person-objects + padding-left: offset(4) diff --git a/assets/sass/_theme/sections/posts.sass b/assets/sass/_theme/sections/posts.sass index d38f393b9..4e4d9fd98 100644 --- a/assets/sass/_theme/sections/posts.sass +++ b/assets/sass/_theme/sections/posts.sass @@ -229,9 +229,6 @@ // Safe spacing if post is empty .document-content @include document-min-height(600px) - &:not(.full-width) - .post-sidebar - @include sidebar .block-signatures .signatures border-top: var(--border-width) solid var(--color-border) @@ -263,14 +260,6 @@ + li margin-top: $spacing-3 - &.full-width - .post-sidebar - @include media-breakpoint-down(desktop) - @include container - - @include media-breakpoint-up(desktop) - @include aside-full-width - .related margin-top: $spacing-3 .posts diff --git a/assets/sass/_theme/sections/projects.sass b/assets/sass/_theme/sections/projects.sass index eef1ea66d..c203c9a26 100644 --- a/assets/sass/_theme/sections/projects.sass +++ b/assets/sass/_theme/sections/projects.sass @@ -171,19 +171,6 @@ flex-wrap: wrap li white-space: nowrap - - &:not(.full-width) - .project-sidebar - @include sidebar - - &.full-width - .project-sidebar - @include media-breakpoint-down(desktop) - @include container - - @include media-breakpoint-up(desktop) - @include aside-full-width - @include media-breakpoint-up(sm) .hero .project-infos diff --git a/assets/sass/_theme/utils/sidebar.sass b/assets/sass/_theme/utils/sidebar.sass index 5d0de5f9c..3c22cd341 100644 --- a/assets/sass/_theme/utils/sidebar.sass +++ b/assets/sass/_theme/utils/sidebar.sass @@ -35,12 +35,13 @@ @content @mixin sticky($offset-y: 0px) + --sticky-offset-y: #{$offset-y} position: sticky - top: $offset-y + top: var(--sticky-offset-y) @if $header-sticky-enabled transition: top $header-sticky-transition html:not(.is-scrolling-down) & - top: calc(var(--header-height) + #{$offset-y}) + top: calc(var(--header-height) + var(--sticky-offset-y)) @mixin sidebar($side: start) @include media-breakpoint-down(desktop) @@ -58,25 +59,23 @@ height: 100% position: absolute width: columns(4) - & > div - @include sticky($spacing-3) .toc-container - position: static + @include sticky + height: auto margin-left: 0 - &:has(aside) - .toc-container - border-top: var(--border-width) solid var(--color-border) - padding-top: $spacing-3 + &.section-sidebar--with-toc + .meta-container + margin-bottom: var(--grid-gutter) @mixin aside-full-width @include container - > div - align-items: baseline - display: flex - margin-bottom: $spacing-5 + align-items: baseline + display: flex + margin-bottom: $spacing-5 .toc-cta margin-bottom: 0 padding-right: 0 + padding-left: 0 aside flex-shrink: 0 @include media-breakpoint-down(desktop) diff --git a/bin/osuny.js b/bin/osuny.js index f2fe6cad6..a9f13f90c 100644 --- a/bin/osuny.js +++ b/bin/osuny.js @@ -39,10 +39,10 @@ let pagefindExclude = ` .block-projects, .block-publications, .block-volumes, - .persons-papers, - .persons-posts, - .persons-programs, - .persons-publications, + .person-papers, + .person-posts, + .person-programs, + .person-publications, .post-sidebar, .events, .exhibitions, diff --git a/layouts/_partials/commons/section/sidebar.html b/layouts/_partials/commons/section/sidebar.html new file mode 100644 index 000000000..03d82bd33 --- /dev/null +++ b/layouts/_partials/commons/section/sidebar.html @@ -0,0 +1,15 @@ +{{ $with_toc := partial "toc/helpers/IsPresent" .context }} +{{ $class := partial "commons/single/sidebar/helpers/GetClass" (dict + "with_meta" false + "with_toc" $with_toc + "context" .context +) }} + +{{ if $with_toc }} +