dotfiles/miscellany/websites/piclog/_generic/fourSquareGridGallery.scss

/*

four-column square-grid gallery template
  for piclog, by ngoomie

compile to standard CSS and put in your 'about'
  section within <style> tags. you most likely
  will want to minify it as well (this removes
  the comments and linebreaks)

i've included some comments to hopefully make
  altering it how you want easier

*/
@use "sass:math";

$border: 1px solid black;
$padding: 1.2rem;

.main-header, main, .main-footer {
  //? default width is a touch too small
  max-width: 60rem;
}

h1:nth-of-type(1), p.rss, div#nuAboutCont,
div.pagination, p.about {
  //? this makes all of the listed elements span
  //?   the width of all columns, so they are the
  //?   only elements occupying their row
  grid-column: 1/-1;
}

.main-header, h1:nth-of-type(1), p.rss {
  text-align: center;
}

// ------ main body
//? `grid-template-columns` specifies the amount
//?   of columns the layout will use. `1fr` is
//?   specified once per column, and means that
//?   the column width will be one even fraction
//?   of the whole.
//? f'ex, `1fr 1fr 1fr 1fr` means each column,
//?   of which there are four, will take up one
//?   fourth (1/4) of space exactly.
main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: math.div($padding, 2);
}

@media screen and (max-width: 480px) {
  //? this changes the amount of columns for
  //?   users who are on mobile. the global
  //?   default of 4 is cramped on narrow screens
  //?   but 2 is okay. you may however want to
  //?   shrink this to 1 column, depending on
  //?   your preferences.
  main { grid-template-columns: 1fr 1fr }
}

// --- about section
//! the about section is intended to be enclosed
//!   within divs, like the following:
/*
<div id="fsAboutCont">
  <div id="fsAboutInnr">
    <div class="fsAboutSec">
      Hi there... I'm Jon Arbuckle. I'm a cartoonist, and
      here I post pictures of my cat, Garfield.
    </div>
    <div class="fsAboutSec">
      <h3 class="fsAboutHdr">My Links</h3>
      <div class="fsAboutTbl">
        <div class="fsAboutTblItm"><a href="https://www.gocomics.com/garfield">Read my comic "Garfield"!</a></div>
        <div class="fsAboutTblItm"><a href="https://www.garfield.com/">garfield.com</a></div>
        <div class="fsAboutTblItm"><a href="https://en.wikipedia.org/wiki/Paws,_Inc.">About Paws, Inc.</a></div>
      </div>
    </div>
  </div>
</div>
*/
//! this adds some extra styling.
//! if you don't care about this, and just want
//!   to use the normal "about" div, remove all
//!   the code in this section

p.about, p:nth-of-type(2) {
  //? hide the "about" div as it will be empty
  //?   once you add the divs
  display: none
}

div#fsAboutCont {
  display: flex;
  justify-content: center;
}

div#fsAboutInnr {
  max-width: 35rem;
  border: $border;
}

div.fsAboutSec {
  padding: $padding;
  border-top: 1px solid black;
}

div.fsAboutSec:nth-of-type(1) {
  border-top: none;
}

h3.fsAboutHdr {
  margin-top: 0;
}

div.fsAboutTbl {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: $padding;
  div.fsAboutTblItm {
    width: 100%;
    text-align: center;
  }
}

@media screen and (max-width: 480px) {
  //? this changes the amount of columns for
  //?   users who are on mobile. the global
  //?   default of 4 is cramped on narrow screens
  //?   but 2 is okay
  div.fsAboutTbl {
    grid-template-columns: 1fr 1fr;
  }
}

// --- gallery
article {
  padding: math.div($padding, 2);
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: scroll;
  img { max-width: 100% }
  border: $border;
}

h2.title {
  font-size: 1rem;
}

p.description {
  font-size: 0.8rem;
  padding: 0;
}

div.meta {
  font-size: 0.8rem;
  font-style: italic;
}