159 lines
3.6 KiB
SCSS
159 lines
3.6 KiB
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;
|
|
} |