Link to article: Peppo Card Grid.
/*-----------*\
* Font *
\*-----------*/
@import url('https://fonts.googleapis.com/css?family=Teko:300,400,600&display=swap');
/*------------------------*\
* Card Containers *
\*------------------------*/
/* Below is the overall container that holds the card grid. */
.card-box {
padding: 10px 10px;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* Below is the first container for an individual card, followed by the containers that are automatically generated by the listpages module. */
.card {
color: white;
padding: 0px;
display: flex;
}
.list-pages-box {
color: inherit;
padding: inherit;
display: inherit;
}
.list-pages-item {
display: inherit;
}
/* Below is a second container for an individual card. You need these containers to bookend the listpages containers because... Well, because Wikidot. */
.floater {
width: 100%;
background: {$cardBG};
background-image:url("http://topia.wikidot.com/local--files/peppo-woowoo/noise.png");
margin: 0px;
box-shadow: 0px 3px 15px rgba(0,0,0,0.3);
border-radius: 20px;
transition: transform .2s;
position: relative;
overflow:hidden;
}
/* Below is the part that enlarges the card when moused over. */
.floater:hover {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-ms-transform:scale(1.3);
transform: scale(1.3);
z-index:5555555 !important;
box-shadow: 0px 3px 15px rgba(0,0,0,0.9);
}
/*---------------------------------*\
* Picture Shadow (Mobile) *
\*---------------------------------*/
/* This bit below creates a gradient shadow on top of the card image in the mobile view. */
.picShadow {
position: absolute;
width:100%;
height:100%;
visibility:hidden;
}
/*--------------*\
* Picture *
\*--------------*/
.pic { text-align:center; }
.pic img {
width: 100%;
height:auto;
margin:auto;
}
/* This bit below removes the line break that Wikidot automatically generates. */
.pic br {display:none;}
/* Below is an alternate class which replaces .pic in the mobile view. */
.noPic { display: none; }
/*------------------------------------*\
* Card header (Number line) *
\*------------------------------------*/
/* Below is the SCP designation line. Alternately, it can say "Tale" or the name of the GOI the format is for. */
.cardHead {
background: {$color2};
border-radius: 20px 20px 0px 0px;
}
.cardHead p{
padding: 8px 0px 3px 0px;
margin: 0px;
color: {$color1};
line-height: 0.8em;
font-size: 1.9em;
letter-spacing: 0.02em;
font-family: 'Teko', sans-serif;
font-weight: 600;
}
/*-------------*\
* Rating *
\*-------------*/
/* Below is the ribbon that displays the article's rating. */
.howItRate {
position: absolute;
width: fit-content;
top: 9rem;
left: 0;
background-color: {$color1};
text-align: left;
padding: 0.55em 0.5em 0.3em 0.8em;
margin: 0px;
-webkit-box-shadow: 1px 3px 12px 3px rgba(21, 3, 3,0.65);
-moz-box-shadow: 1px 3px 12px 3px rgba(21, 3, 3,0.65);
box-shadow: 1px 3px 12px 3px rgba(21, 3, 3,0.65);
}
.howItRate p {
font-family: 'Teko', sans-serif;
font-weight: 300;
font-size: 1.45em;
letter-spacing: 0.06em;
line-height: 0.9em;
text-align: center;
margin: 0;
padding: 0;
}
/* Below is the alternate code for the rating ribbon when the card has no picture. */
.howItRate2 {
top: -0.2rem;
position: relative;
border-top: {$color1} 0.2rem solid;
margin-bottom: -0.3rem
}
.howItRate2 p {
font-weight: 900;
color: {$color1};
margin: 0;
text-align: center;
padding: 0.3em 0.8em 0.2em 0.3em;
background: white;
}
/*-------------------*\
* Article name *
\*-------------------*/
.article-name {
background: {$color1};
position:relative;
top: 0;
padding: 5px 15px;
}
.article-name p{
margin: 0px;
font-family: 'Teko', sans-serif;
font-size: 1.8em;
letter-spacing: 0.02em;
font-weight: 300;
line-height: 0.8em;
padding: 3px 0 0 0;
color: {$color2};
}
/*--------------------*\
* Article Quote *
\*--------------------*/
.article-quote {
position: relative;
top: 0;
padding: 0% 3%;
margin-bottom: 0.75rem;
}
.article-quote p {
font-size: 0.95em;
margin-bottom: 0px;
line-height: 1.3em;
}
/*-----------------*\
* Credit Line *
\*-----------------*/
.article-credit {
color: #8c8c8c;
font-size: 75%;
position: relative;
z-index:2;
padding: 0% 3%;
top: -0.1em;
}
.article-credit p {
margin: 0px 0px 5px 0px;
}
.article-credit a,
.article-credit a:visited {
color: #8c8c8c;
}
.article-credit a:hover {
color: firebrick;
}
/*----------------*\
* Card link *
\*----------------*/
/* This part below makes it so that you go to the card's article link when you click anywhere on the card (except the credit link if there is one). */
.image-holder {
height: 0px;
}
.linkle {
position:absolute;
width:100%;
height:100%;
display: inline;
top:0;
left: 0;
opacity: 0;
z-index: 1;
/* fixes overlap error in IE7/8,
make sure you have an empty gif */
background-image: url('empty.gif');
}
/*-----------------*\
* Responsive *
\*-----------------*/
/* Alternate card style for mobile view. */
@media (max-width: 640px) {
.list-pages-box {width:100%;}
.list-pages-item {width:100%;}
.floater:hover {
-webkit-box-shadow: -8px 10px 17px -3px rgba(0,0,0,0.28);
-moz-box-shadow: -8px 10px 17px -3px rgba(0,0,0,0.28);
box-shadow: -8px 10px 17px -3px rgba(0,0,0,0.28);
transform: scale(1.05);
box-shadow: 0px 3px 15px rgba(137,30,7,0.9);
}
.picShadow {
visibility: visible;
background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 10%);
}
.pic {
height:100%;
width:auto;
max-width:40% !important;
position:absolute;
top: 0;
right:0;
z-index:1;
border-radius: 0px 20px 20px 0px;
overflow:hidden;
}
.pic img {
height:100%;
width:auto;
object-fit: cover;
object-position:center;
}
.cardHead {
padding: 0.3rem 0.1rem 0.5rem 4%;
}
.cardHead p {
text-align:left !important;
font-size: 1.7em;
}
.card-box {
grid-template-columns: 100%;
}
.article-name {
top:-0.2rem;
background: {$color1};
border-top: {$color2}; 3px solid;
padding: 0.5em 0 0.2em 1em;
}
.article-name p {
text-align:left !important;
width: 55%;
font-size: 3em;
line-height: 0.9em;
color: white;
}
.article-quote {top:-0.5em;}
.article-quote p {
font-size: 1.1em;
margin: 1em 0 0.5em 0;
line-height: 1.5em;
width:55%;
}
.howItRate {
padding: 0;
position:absolute;
right:0;
left: initial;
top:auto;
bottom:2.5em;
z-index:1;
height:fit-content;
-webkit-box-shadow: -4px 2px 9px 1px rgba(16, 4, 4, 0.5);
-moz-box-shadow: -4px 2px 9px 1px rgba(16, 4, 4, 0.5);
box-shadow: -4px 2px 9px 1px rgba(16, 4, 4, 0.5);
}
.howItRate p {
font-size: 1.4em;
padding: 0.4em 0.6em 0.2em 0.5em;
font-family: 'Teko', sans-serif;
}
.howItRate2 {
top: initial;
bottom: 2rem;
position: absolute;
border: none;
right: 0;
background: {$color1};
color: {$color2};
padding: 0.1rem 1.5rem 0rem 1rem;
-webkit-box-shadow: -4px 2px 9px 1px rgba(16, 4, 4, 0.5);
-moz-box-shadow: -4px 2px 9px 1px rgba(16, 4, 4, 0.5);
box-shadow: -4px 2px 9px 1px rgba(16, 4, 4, 0.5);
}
.howItRate2 p {
text-align: right;
background: inherit;
color: inherit;
font-size: 2em;
padding: 0;
font-family: 'Teko', sans-serif;
font-weight: initial;
}
.article-credit {
width: 55%;
}
}