Selaa lähdekoodia

Added Koenig gallery card support (#475)

no issue

- Update CSS and JS for new gallery card
- Updates CSS to support new gallery card
- Adds JS to support grid layout for gallery view
- Fix gallery breakout size
- Refining styles for gallery card
master
Kevin Ansfield 2 vuotta sitten
committed by Katharina Irrgang
vanhempi
commit
7a88c88ea2
4 muutettua tiedostoa jossa 46 lisäystä ja 4 poistoa
  1. +1
    -1
      assets/built/screen.css
  2. +1
    -1
      assets/built/screen.css.map
  3. +32
    -2
      assets/css/screen.css
  4. +12
    -0
      default.hbs

+ 1
- 1
assets/built/screen.css
File diff suppressed because it is too large
Näytä tiedosto


+ 1
- 1
assets/built/screen.css.map
File diff suppressed because it is too large
Näytä tiedosto


+ 32
- 2
assets/css/screen.css Näytä tiedosto

@@ -1855,11 +1855,13 @@ Usage (In Ghost editor):
text-align: center;
}

.kg-image-card {
.kg-image-card,
.kg-gallery-card {
margin: 0 0 1.5em;
}

.kg-image-card figcaption {
.kg-image-card figcaption,
.kg-gallery-card figcaption {
margin: -1.0em 0 1.5em;
}

@@ -1891,6 +1893,34 @@ Usage (In Ghost editor):
}
}

.kg-gallery-container {
display: flex;
flex-direction: column;
margin: 1.5em auto;
max-width: 1040px;
width: 100vw;
}

.kg-gallery-row {
display: flex;
flex-direction: row;
justify-content: center;
}

.kg-gallery-image img {
display: block;
margin: 0;
width: 100%;
height: 100%;
}

.kg-gallery-row:not(:first-of-type) {
margin: 0.75em 0 0 0;
}

.kg-gallery-image:not(:first-of-type) {
margin: 0 0 0 0.75em;
}

/* 8. Author Template
/* ---------------------------------------------------------- */


+ 12
- 0
default.hbs Näytä tiedosto

@@ -55,6 +55,18 @@
</div>
{{/if}}

<script>
var images = document.querySelectorAll('.kg-gallery-image img');
images.forEach(function (image) {
var container = image.closest('.kg-gallery-image');
var width = image.attributes.width.value;
var height = image.attributes.height.value;
var ratio = width / height;
container.style.flex = ratio + ' 1 0%';
})
</script>


{{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"


Ladataan…
Peruuta
Tallenna