July 19 2023
This commit is contained in:
parent
114096b698
commit
0eca73b1d3
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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