July 19 2023

.gitignore

@@ -39,6 +39,8 @@ miscellany/websites/status cafe/img/
 # ---> piclog
 miscellany/websites/piclog/*.css
 miscellany/websites/piclog/*.css.*
+miscellany/websites/piclog/_generic/*.css
+miscellany/websites/piclog/_generic/*.css.*
 miscellany/websites/piclog/img/
 
 # ---> Thunar

miscellany/websites/piclog/2023-07.scss

@@ -33,6 +33,10 @@ main {
   gap: math.div($padding, 2);
 }
 
+@media screen and (max-width: 480px) {
+  main { grid-template-columns: 1fr 1fr }
+}
+
 // --- about section
 
 p.about, p:nth-of-type(2) {
@@ -66,12 +70,16 @@ div.nuAboutTbl {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: $padding;
-  div.nuAboutTbl {
+  div.nuAboutTblItem {
     width: 100%;
     text-align: center;
   }
 }
 
+@media screen and (max-width: 480px) {
+  div.nuAboutTbl { grid-template-columns: 1fr 1fr }
+}
+
 // --- gallery
 article {
   padding: math.div($padding, 2);

miscellany/websites/piclog/README

@@ -1 +1,7 @@
 Files in this folder are CC0 licensed
+
+Files in folder `_generic` are intended to be templates for
+other people to modify, whereas the year-month named files
+in this folder are just my own themes published for
+posterity purposes (but feel free to edit those if you
+want, too)

miscellany/websites/piclog/_generic/fourSquareGridGallery.scss

@@ -0,0 +1,159 @@
+/*
+
+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;
+}

miscellany/websites/status cafe/README

@@ -1 +1,7 @@
 Files in this folder are CC0 licensed
+
+Files in folder `_generic` are intended to be templates for
+other people to modify, whereas the year-month named files
+in this folder are just my own themes published for
+posterity purposes (but feel free to edit those if you
+want, too)