pix.md

title	layout	theme
Photography	base	dark

<style> .my-card-columns { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 1.25rem; -moz-column-gap: 1.25rem; column-gap: 1.25rem; orphans: 1; widows: 1; } .card-columns .card { display: inline-block; width: 100%; } .my-card { padding: 1em; background-color: black; } body { background-color: black; } .active { text-decoration-color: white !important; } </style> <script type="text/javascript"> document.addEventListener( "DOMContentLoaded", function () { /* Get the `columns` query string param if set */ const urlParams = new URLSearchParams(window.location.search); const numColumns = urlParams.get('columns') || 3; console.log('columns', numColumns); const slider = document.getElementById("slider"); const numColumnsSpan = document.getElementById("num-columns"); const cardsDiv = document.getElementById( "my-card-columns", ); function setColumnsCount(value) { cardsDiv.style.columnCount = value; numColumnsSpan.textContent = value; slider.value = value; urlParams.set('columns', value); const newURL = `${window.location.pathname}?${urlParams.toString()}`; window.history.pushState({}, '', newURL); } slider.addEventListener("input", () => setColumnsCount(slider.value), ); setColumnsCount(numColumns); } ); </script>

i'm a vsco girl.. in a vosco world...

---

Set number of columns in grid (between 1 and 8), currently :

---

{% for pic in site.data.pix %}

{% endfor %}