Single post in Cele's Scrolls
Forum Index > PokéFarm > Journals > Staff > Cele's Scrolls >
PFQ Goals Mini Card Site Skin ver. (Grey = Done)
Free to use, free to edit, just leave my little credits bar content alone* ✌️ * = You can add additional credits to it if you need to, just leave what I put there.[sc=minicard][* There should be no more than 5 Pokemon per row. *][
][sc=title]Melanistic Goals 2024[/sc][sc=container]
[* Row 1: *]
[sc=box][pkmn=Seel(M)][sc=text][/sc][/sc]
[sc=box][pkmn=Horsea(M)][sc=text][/sc][/sc]
[sc=box][pkmn=Dratini(M)][sc=text][/sc][/sc]
[sc=box][pkmn=Cubone(M)][sc=text][/sc][/sc]
[sc=box][pkmn=Chikorita(M)][sc=text][/sc][/sc]
[* Row 2: *]
[sc=box][pkmn=Hoothoot(M)][sc=text][/sc][/sc]
[sc=box][pkmn=Chinchou(M)][sc=text][/sc][/sc]
[sc=box][pkmn=Misdreavus(M)][sc=text][/sc][/sc]
[sc=box][pkmn=Sneasel(M)/Hisuian Forme][sc=text][/sc][/sc]
[sc=box][pkmn=Corsola(M)][sc=text][/sc][/sc]
[* Row 3: *]
[sc=box][pkmn=Skitty(M)][sc=text][/sc][/sc]
[sc=box][pkmn=Numel(M)(F)][sc=text][/sc][/sc]
[sc=box][sc=done][img]https://pfq-static.com/img/pkmn/q/g/k.png[/img][sc=text]Free[/sc][/sc][/sc]
[sc=box][pkmn=Swablu(M)][sc=text][/sc][/sc]
[sc=box][pkmn=Spheal(M)][sc=text][/sc][/sc]
[* Row 4: *]
[sc=box][pkmn=Beldum(M)][sc=text][/sc][/sc]
[sc=box][pkmn=Shinx(M)(F)][sc=text][/sc][/sc]
[sc=box][pkmn=Cherubi(M)][sc=text][/sc][/sc]
[sc=box][pkmn=Venipede(M)][sc=text][/sc][/sc]
[* Row 5: *]
[sc=box][pkmn=Pumpkaboo(M)/Average Size][sc=text][/sc][/sc]
[sc=box][pkmn=Smoliv(M)][sc=text][/sc][/sc]
[sc=box][pkmn=Tinkatink(M)][sc=text][/sc][/sc]
[sc=box][pkmn=Cyclizar(M)][sc=text][/sc][/sc]
[sc=box][pkmn=Cetoddle(M)][sc=text][/sc][/sc]
[sc=box][sc=done][pkmn=Pixrine(M)/][sc=text]Done[/sc][/sc][/sc]
[/sc][sc=credit][url=/user/:L6k]coder[/url] | [url=/forum/post/7304540]code[/url] | inspired by [url=/forum/post/7288831]PFQ Goals card[/url][/sc][/sc]
[style]
/* You can edit anything you want - not my fault if it breaks \o */
@black = black;
@white = white;
@grey = grey;
@box-bg = @col-bg1;
@box-bg2 = @col-bg2;
@border-color = @col-border2;
@border = 5px @col-border2 solid;
@border-curve = 10px;
@border-curve2 = 10px;
@pkmn-shadow = @col-bg2;
@pkmn-shadow2 = @col-bg1;
@text-shadow = @col-bg1;
@text-color = @col-fg1;
@text-color2 = @col-fg2;
@done-bg = @grey;
@done-bg2 = @grey;
@done-text = @white;
@done-text2 = @black;
@done-text-shadow = @black;
@done-text-shadow2 = @black;
@done-pkmn-shadow = @white;
@done-pkmn-shadow2 = @black;
@font: Arial, Helvetica, sans-serif;
.minicard {
.title {
width: 300px;
height: auto;
background: @box-bg;
text-align: center;
line-height: 80px;
font-size: 15pt;
color: @text-color2;
border: @border;
border-radius: @border-curve2 @border-curve2 0px 0px;
}
.credit {
display: block;
width: 300px;
height: auto;
background: @box-bg;
font-size: 10pt;
text-align: center;
color: @text-color2;
border: @border;
border-radius: 0px 0px @border-curve2 @border-curve2;
& > a, a:visited, a:link, a:hover, a:active {
color: @text-color2;
}
}
.container {
--col: 60px;
--row: 60px;
--gap: 0px;
place-items: center;
grid-template-columns: repeat(5, var(--col));
grid-template-rows: repeat(5, var(--row));
grid-gap: var(--gap);
display: grid;
overflow-x: auto;
overflow-y: clip;
background: @box-bg;
width: 300px;
height: auto;
text-align: justify;
color: @border-color;
font-size: 10pt;
border: @border;
.box {
position: relative;
height: 60px;
width: 60px;
display: inline-block;
overflow: clip;
text-align: center;
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(3px -3px @pkmn-shadow);
}
.text {
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow:
1px 1px 1px @text-shadow,
-1px 1px 1px @text-shadow,
-1px -1px 0 @text-shadow,
1px -1px 0 @text-shadow;
}
}
.box:nth-child(odd) {
background: @box-bg2;
& img {
filter: drop-shadow(3px -3px @pkmn-shadow2);
}
.done {
position: relative;
height: 60px;
width: 60px;
display: inline-block;
overflow: clip;
text-align: center;
background-color: @done-bg !important;
color: @done-text !important;
& img {
filter: drop-shadow(3px -3px @done-pkmn-shadow);
position: absolute !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text {
color: @done-text;
text-shadow:
1px 1px 1px @done-text-shadow,
-1px 1px 1px @done-text-shadow,
-1px -1px 0 @done-text-shadow,
1px -1px 0 @done-text-shadow;
}
}
}
.done {
position: relative;
height: 60px;
width: 60px;
display: inline-block;
overflow: clip;
text-align: center;
background-color: @done-bg2 !important;
color: @done-bg !important;
& img {
filter: drop-shadow(5px -5px @done-pkmn-shadow2);
position: absolute !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text {
color: @done-text2;
text-shadow:
1px 1px 1px @done-text-shadow2,
-1px 1px 1px @done-text-shadow2,
-1px -1px 0 @done-text-shadow2,
1px -1px 0 @done-text-shadow2;
}
}
}
.container--full {
--col: 0px;
--row: 0px;
--gap: 0px;
}
}
.code {
font-family: Meiryo, Verdana, sans-serif;
text-size: 12pt;
border: 1px @col-border solid;
height: 100px;
overflow-y: auto;
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
}
[/style]
for Market equiv. 
sig code and sig bg image made by me