Skip to content

Instantly share code, notes, and snippets.

@anybodesign

anybodesign/gist:ec50d08f9fbabc0882f36e56da8b4156

Last active August 26, 2018 20:33
Show Gist options
  • Save anybodesign/ec50d08f9fbabc0882f36e56da8b4156 to your computer and use it in GitHub Desktop.
Save anybodesign/ec50d08f9fbabc0882f36e56da8b4156 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. anybodesign revised this gist Aug 26, 2018. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -23,11 +23,11 @@
    flex: 1; // @fix: and stretching
    align-items: flex-end;

    a {
    display: flex; // @fix: stretching <a>
    flex-direction: column; // @fix: along all
    flex: 1; // @fix: the height
    }
    a {
    display: flex; // @fix: stretching <a>
    flex-direction: column; // @fix: along all
    flex: 1; // @fix: the height
    }
    }

    img {
  2. anybodesign revised this gist Aug 26, 2018. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -19,14 +19,14 @@
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column; // @fix: direction
    flex: 1; // @fix: and stretching
    flex-direction: column; // @fix: direction
    flex: 1; // @fix: and stretching
    align-items: flex-end;

    a {
    display: flex; // @fix: stretching <a>
    flex-direction: column; // @fix: along all
    flex: 1; // @fix: the height
    display: flex; // @fix: stretching <a>
    flex-direction: column; // @fix: along all
    flex: 1; // @fix: the height
    }
    }

    @@ -38,8 +38,8 @@

    figcaption {
    position: absolute;
    bottom: 0; // @fix: positionning
    left: 0; // @fix: the caption
    bottom: 0; // @fix: positionning
    left: 0; // @fix: the caption
    width: 100%;
    max-height: 100%;
    overflow: auto;
  3. anybodesign created this gist Aug 26, 2018.
    107 changes: 107 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,107 @@
    .wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    // allow gallery items to go edge to edge
    margin: 0 -8px 0 -8px;

    .blocks-gallery-image,
    .blocks-gallery-item {
    margin: 8px;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    position: relative;

    figure {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column; // @fix: direction
    flex: 1; // @fix: and stretching
    align-items: flex-end;

    a {
    display: flex; // @fix: stretching <a>
    flex-direction: column; // @fix: along all
    flex: 1; // @fix: the height
    }
    }

    img {
    display: block;
    max-width: 100%;
    height: auto;
    }

    figcaption {
    position: absolute;
    bottom: 0; // @fix: positionning
    left: 0; // @fix: the caption
    width: 100%;
    max-height: 100%;
    overflow: auto;
    padding: 40px 10px 5px;
    color: $white;
    text-align: center;
    font-size: $default-font-size;
    background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 60%, transparent);

    img {
    display: inline;
    }
    }
    }

    // Cropped
    &.is-cropped .blocks-gallery-image,
    &.is-cropped .blocks-gallery-item {
    a,
    img {
    flex: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;

    }
    }

    // Responsive fallback value, 2 columns
    & .blocks-gallery-image,
    & .blocks-gallery-item {
    width: calc(100% / 2 - 16px);
    }

    &.columns-1 .blocks-gallery-image,
    &.columns-1 .blocks-gallery-item {
    width: calc(100% / 1 - 16px);
    }

    @include break-small {
    @for $i from 3 through 8 {
    &.columns-#{ $i } .blocks-gallery-image,
    &.columns-#{ $i } .blocks-gallery-item {
    width: calc(100% / #{ $i } - 16px);
    }
    }
    }

    // Make the "Add new Gallery item" button full-width (so it always appears
    // below other items).
    .blocks-gallery-item {
    &.has-add-item-button {
    width: 100%;
    }
    }

    // Apply max-width to floated items that have no intrinsic width
    [data-align="left"] &,
    [data-align="right"] &,
    &.alignleft,
    &.alignright {
    max-width: $content-width / 2;
    width: 100%;
    }
    }