July 19 2023
This commit is contained in:
parent
114096b698
commit
0eca73b1d3
|
@ -39,6 +39,8 @@ miscellany/websites/status cafe/img/
|
||||||
# ---> piclog
|
# ---> piclog
|
||||||
miscellany/websites/piclog/*.css
|
miscellany/websites/piclog/*.css
|
||||||
miscellany/websites/piclog/*.css.*
|
miscellany/websites/piclog/*.css.*
|
||||||
|
miscellany/websites/piclog/_generic/*.css
|
||||||
|
miscellany/websites/piclog/_generic/*.css.*
|
||||||
miscellany/websites/piclog/img/
|
miscellany/websites/piclog/img/
|
||||||
|
|
||||||
# ---> Thunar
|
# ---> Thunar
|
||||||
|
|
|
@ -33,6 +33,10 @@ main {
|
||||||
gap: math.div($padding, 2);
|
gap: math.div($padding, 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
main { grid-template-columns: 1fr 1fr }
|
||||||
|
}
|
||||||
|
|
||||||
// --- about section
|
// --- about section
|
||||||
|
|
||||||
p.about, p:nth-of-type(2) {
|
p.about, p:nth-of-type(2) {
|
||||||
|
@ -66,12 +70,16 @@ div.nuAboutTbl {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||||
gap: $padding;
|
gap: $padding;
|
||||||
div.nuAboutTbl {
|
div.nuAboutTblItem {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
div.nuAboutTbl { grid-template-columns: 1fr 1fr }
|
||||||
|
}
|
||||||
|
|
||||||
// --- gallery
|
// --- gallery
|
||||||
article {
|
article {
|
||||||
padding: math.div($padding, 2);
|
padding: math.div($padding, 2);
|
||||||
|
|
|
@ -1 +1,7 @@
|
||||||
Files in this folder are CC0 licensed
|
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)
|
|
@ -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;
|
||||||
|
}
|
|
@ -1 +1,7 @@
|
||||||
Files in this folder are CC0 licensed
|
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)
|
Loading…
Reference in New Issue