Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: EHRI/ehri-nn-hugo-theme
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: de422a18d520221bd76a21c1697d48c676b5b8aa
Choose a base ref
...
head repository: EHRI/ehri-nn-hugo-theme
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: 378fbaf05fb2ee2f2f5a504f07c9f52c116813a5
Choose a head ref
  • 1 commit
  • 1 file changed
  • 1 contributor

Commits on Dec 5, 2024

  1. Copy the full SHA
    378fbaf View commit details
Showing with 35 additions and 25 deletions.
  1. +35 −25 assets/scss/components/_figures.scss
60 changes: 35 additions & 25 deletions assets/scss/components/_figures.scss
Original file line number Diff line number Diff line change
@@ -2,36 +2,46 @@
@import "../mixins";

// A figure with the caption on the side
.fig-side {
display: flex;
flex-direction: row;
flex-flow: row wrap;
img {
flex: 2;
}
figcaption {
flex: 1;
}
}
// NB: these are typically used via the
// figure shortcodes in the Markdown content
// and are thus scoped to the page-content class.
// Without the page-content class, the styles
// will not apply because they are overridden by
// the more specific styles on the figure element
// in the _page-content.scss file.
.page-content {
.fig-side {
display: flex;
flex-direction: row;
flex-flow: row wrap;

.fig-float,
.fig-right
{
float: none;
margin: 0 0 1rem 0;
width: 100%;
}
img {
flex: 2;
}

@media (min-width: $breakpoint-tablet) {
.fig-float {
float: left;
margin: 0 1rem 1rem 0;
width: calc(50% - .5rem);
figcaption {
flex: 1;
}
}

.fig-float,
.fig-right {
float: right;
margin: 0 0 1rem 1rem;
float: none;
margin: 0 0 1rem 0;
width: 100%;
}

@media (min-width: $breakpoint-tablet) {
.fig-float {
float: left;
margin: 0 1rem 1rem 0;
width: calc(50% - .5rem);
}

.fig-right {
float: right;
margin: 0 0 1rem 1rem;
}
}
}