dotfiles/miscellany/websites/piclog/2023-07.scss

@use "sass:math";

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

// ------ page-wide or multi-element
html, body {
  font-family: sans-serif;
}

a {
  text-decoration: none;
  font-family: monospace;
  font-weight: bold;
}

.main-header, main, .main-footer {
  max-width: 60rem;
}

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

h1:nth-of-type(1), p.rss, div#nuAboutCont, div.pagination {
  grid-column: 1/-1;
}

// ------ main body
main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  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) {
  display: none
}

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

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

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

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

h3.nuAboutHdr {
  margin-top: 0;
}

div.nuAboutTbl {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: $padding;
  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);
  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;
}