122 lines
2.3 KiB
CSS
122 lines
2.3 KiB
CSS
/*
|
|
|
|
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
|
|
|
|
*/
|
|
.main-header, main, .main-footer {
|
|
max-width: 60rem;
|
|
}
|
|
|
|
h1:nth-of-type(1), p.rss, div#nuAboutCont,
|
|
div.pagination, p.about {
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
.main-header, h1:nth-of-type(1), p.rss {
|
|
text-align: center;
|
|
}
|
|
|
|
main {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
@media screen and (max-width: 480px) {
|
|
main {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
/*
|
|
<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>
|
|
*/
|
|
p.about, p:nth-of-type(2) {
|
|
display: none;
|
|
}
|
|
|
|
div#fsAboutCont {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
div#fsAboutInnr {
|
|
max-width: 35rem;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
div.fsAboutSec {
|
|
padding: 1.2rem;
|
|
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: 1.2rem;
|
|
}
|
|
div.fsAboutTbl div.fsAboutTblItm {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
@media screen and (max-width: 480px) {
|
|
div.fsAboutTbl {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
article {
|
|
padding: 0.6rem;
|
|
width: 100%;
|
|
aspect-ratio: 1/1;
|
|
overflow: scroll;
|
|
border: 1px solid black;
|
|
}
|
|
article img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
h2.title {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
p.description {
|
|
font-size: 0.8rem;
|
|
padding: 0;
|
|
}
|
|
|
|
div.meta {
|
|
font-size: 0.8rem;
|
|
font-style: italic;
|
|
}/*# sourceMappingURL=fourSquareGridGallery.css.map */ |