Artwork Hub

Link to article: Artwork Hub.


.content-panel .content-type-title > p {
  margin: 0;
}
.content-panel .content-type-title {
  font-size: 120%;
  font-weight: bold;
  padding: 5px 20px;
  background-color: #666;
  color: #fff;
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.8),
    inset 0 15px 1px rgba(255,255,255,.2),
    inset 0 15px 10px rgba(255,255,255,.2);
}
.content-panel .content-type-description {
padding: 0 20px;
text-align: justify;
}
.content-panel.content-row .content-type-description {
padding: 5px 20px;
}
.content-panel.content-row .content-type-description-2 {
padding: 0 20px;
text-align: justify;
}
.art-container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
    align-self: flex-end
    gap: 1rem 1rem;
}
.art-container .art {
    flex: 0 1 200px;
    text-align: center;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.art-container .art .image-container {
    padding: 0;
    min-height: 100%;
    max-width: 100%;
}

@media not all and (max-width: 767px) {
#main-content {
    max-width: min(57.5rem,calc(100% - 3rem));
}
}

:root { --box-accent: #3d8554; }

.tale-list {
    display: grid;
    gap: .75rem;
    margin-block: 1.5rem;
}
.tale-list .pager { border-block-start: .225rem solid var(--box-accent); }

.tale-block {
    background-color: #fff;
    box-shadow: 0 0 0.325rem rgb(0 0 0 / 0.25);
    contain: paint;
    display: grid;
    grid-template-areas:
        "title date"
        "meta meta";
    grid-template-columns: 1fr max-content;
    gap: .425rem;
    padding: .625rem;
    --box-accent: inherit;
}

.tale-block  .title {
    grid-area: title;
    display: flex;
    gap: .325ex 0.75ex;
    align-items: center;
    flex-wrap: wrap;
}
.tale-block .title > a {
    font-weight: bold;
    font-size: 1.075em;
}
.tale-block .title > .author { font-size: .775em; flex-grow: 1; }
.author .printuser {
    display: inline-flex;
    align-items: baseline;
    gap: .325em;
}
.author .printuser img {
    margin: 0;
    padding: 0;
    padding-left: .475rem;
}

.tale-block .date {
    grid-area: date;
    font-feature-settings: 'case','ss01','ss04','tnum';
    font-size: .725em;
}

.tale-block .meta {
    grid-area: meta;
    display: flex;
    font-size: .775em;
    gap: .75rem;
    justify-content: space-between;
}
.meta .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: flex-start;
}
.tag-list a {
    display: block;
    border-radius: 1.5rem;
    padding: .125em .675em;
    text-decoration: none;
    font-weight: 550;
    color: var(--box-accent);
    background-color: #3b5c970f;
}
.tag-list a:is(:hover,:focus) {
    color: white;
    background-color: var(--box-accent);
}

.meta .sec-info {
    display: grid;
    grid-template-columns: 3rem 3.5rem;
    align-items: center;
    text-align: end;
    gap: .25rem;
    min-width: max-content;
    align-self: flex-end;
}
.sec-info > br { display: none; }
.sec-info .comments > span { font-size: 0; }

.tale-block .description {
    grid-column: 1/-1;
}
.description > :not(.preview) { display: none; }
.description:not(:has(> .preview)) { display: none; } /* progressive enhancement */
.description > .preview {
    display: block;
    font-size: .9125em;
    padding-block-start: .425rem;
    border-block-start: .05rem solid #ddd;
}
.description > .preview > p:first-child { margin-block-start: 0.25em; }
.description > .preview > p:last-child { margin-block-end: 0.25em; }


div.tag-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
    font-size: .9125em;
    margin-block: .5rem;
}
div.tag-nav br { display: none; }
div.tag-nav p { display: contents; }


div.year {
    font-weight: bold;
    flex-flow: wrap-reverse row-reverse;
}
.year a {
    padding-inline-end: .25rem;
    border-inline-end: solid 2px #333;
}

.m-wrapper {
}

.m-wrapper .yui-navset .yui-content {
    display: contents;
    background-color: transparent;
    padding: 0;
    border: none;
}
.m-wrapper .yui-navset .yui-nav {
    border: none;
    text-align: center;
    margin: 0.2rem;
}
#page-content .m-wrapper .yui-navset .yui-nav li {
    margin: 0;
    padding: 0;
}

#page-content .m-wrapper .yui-navset .yui-nav li a em {
     margin: 0 0 0 auto;
     padding: 0;
     width: max-content;
}
.m-wrapper .yui-navset .yui-nav a,
.m-wrapper .yui-navset .yui-nav a:hover,
.m-wrapper .yui-navset .yui-nav a em {
    border: none;
    background: #FCFCFC !important;
}
#page-content .m-wrapper .yui-navset .yui-nav li a:hover,
#page-content .m-wrapper .yui-navset .yui-nav li a:focus,
#page-content .m- wrapper .yui-navset .yui-nav li a:active {
    color: #000
    text-decoration: underline;
}

#page-content .m-wrapper .yui-navset .yui-nav li a {
    color: #a01;
}

.m-wrapper .yui-navset .yui-nav .selected {
    display: none;
}

.m-wrapper .yui-navset .yui-content > div:first-child > p { display: contents; }

```
height:300px;
```
```
height:300px;
```
```
height:200px;
```

fragment:nav-generic-css

```
art-container
```
```
art
```
```
art
```
```
art
```
```
tag-nav
```
```
tag-list
```
```
tag-nav
```
```
tag-list
```
```
tag-nav
```
```
tag-list
```
```
m-wrapper
```
```
standalone
```
```
series
```
```
tale-list
```
```
content-type-description
```
```
tale-block
```
```
%%tags%%
```
```
title
```
```
author
```
```
date
```
```
meta
```
```
tag-list
```
```
sec-info
```
```
rating
```
```
comments
```
```
tale-list
```
```
content-type-description
```
```
tale-block
```
```
%%tags%%
```
```
title
```
```
author
```
```
date
```
```
meta
```
```
tag-list
```
```
sec-info
```
```
rating
```
```
comments
```

[[# showcase]]

= Featured Artists and Artwork are selected by [http://05command.wikidot.com/community-outreach-main Community Outreach] each month.
[[div class="art-container"]]  
[[div class="art"]]  
[[image https://scp-wiki.wikidot.com/local--files/soicodoc/yoshihide1.webp link="https://scp-wiki.wikidot.com/soicodoc" style="height:300px;"]] 
Artwork depicting [[[yoshihides-proposal|SCP-001: A Portrait Of Hell]]] by [[*user soidaudan.]]. Go to the [[[https://scp-wiki.wikidot.com/soicodoc|SIGMA ALPHA WOLF GALLERY]]] for more by this artist.
[[/div]] 

[[div class="art"]]  
[[image https://scp-wiki.wikidot.com/local--files/art:079gallery/6d24ed7da6daf5cc08cb85afb5b9dd73.webp link="https://scp-wiki.wikidot.com/art:079gallery" style="height:300px;"]] 
[[[art:079gallery|Artwork]]] of [[[SCP-079]]] by [[*user Relliorca]]. Go to [[[art:relliorcaartwork|these]]] [[[art:relliorcarolledawaywithherart|pages]]] for more by this artist.
[[/div]]

[[div class="art"]]  
[[image https://scp-wiki.wikidot.com/local--files/o9-ppt/69808b564b846.webp link="https://scp-wiki.wikidot.com/o9-ppt" style="height:200px;"]] 
A design created for the SCP Foundation Chinese Wiki 2026 Chinese New Year Gala by [[*user OxygenNine]]. Go to [[[o9-ppt| Foundation Related Logos]]] or [[[scp-cn-3969-art| SCP-CN-3969 Artwork collection]]] for more by this artist.
[[/div]] 
[[/div]]
= [[[artist-showcase-archive| Go to the Artist Showcase Archive to see the art featured in previous months.]]]

----
[[# art]]

= [[size 200%]]**Art Pages**[[/size]]

By default, all artist pages, artworks and comics are shown on this page, starting with the most recently created, although a listing by date of last edit is also available. This list can be filtered by selecting one of the tags below. See the [[[Art Tagging Guide]]] for more information on how to use and apply these tags.

A list of artists and their associated styles can also be found on the [[[Artist Directory]]].

[[=]]
[[div_ class="tag-nav tag-list"]]
[/artwork-hub#art Reset filter]
[/artwork-hub/tag/artist#art Artist Pages]
[/artwork-hub/tag/artwork#art Artwork Pages]
[/artwork-hub/tag/comic#art Comics]
[/artwork-hub/tag/illustrated#art Illustrated Articles]
[[/div]]

++* Art Style
[[div_ class="tag-nav tag-list"]]
[/artwork-hub/tag/animated#art Animated]
[/artwork-hub/tag/cel-shaded#art Cel Shaded]
[/artwork-hub/tag/image-editing#art Image Editing]
[/artwork-hub/tag/painted#art Painted]
[/artwork-hub/tag/pixel-art#art Pixel Art]
[/artwork-hub/tag/sketched#art Sketched]
[/artwork-hub/tag/-scp,-goi-format,-supplement,-tale,-hub,-site,-resource,-guide,-essay,video#art Video]
[[/div]]

++* Art Content
[[div_ class="tag-nav tag-list"]]
[/artwork-hub/tag/logo#art Logo]
[/artwork-hub/tag/poster#art Poster]
[/artwork-hub/tag/goi-art#art GoI Art]
[/artwork-hub/tag/personnel-art#art Personnel Art]
[/artwork-hub/tag/scp-art#art SCP Art]
[/artwork-hub/tag/task-force-art#art Task Force Art]
[[/div]]

[[module CountPages order="created_at desc" wrapper="no" category="*" separate="false" perPage="20" tags="@URL|artwork artist comic"]]
Currently listing %%total%% pages.
[[/module]]
[[/=]]

[[div class="m-wrapper standalone series"]]
[[tabview]]

[[tab Order by Date of Creation]]
[[div class="tale-list content-type-description"]]
[[module ListPages order="created_at desc" wrapper="no" category="*" separate="false" perPage="20" tags="@URL|artwork artist comic"]]

[[div class="tale-block %%tags%%"]]
[[div_ class="title"]]
%%linked_title%% [[span class="author"]]by %%created_by_linked%%[[/span]]
[[/div]]
[[div_ class="date"]]
%%created_at|%Y %b %e|agohover%%
[[/div]]

[[div_ class="meta"]]
[[span class="tag-list"]]%%tags_linked|artwork-hub/tag/-scp,-goi-format,-supplement,-tale,-hub,-site,-resource,-guide,-essay,%%[[/span]]
[[div_ class="sec-info"]]
[[span class="rating"]][[#ifexpr %%rating%% > -1 | + | - ]][[#expr abs(%%rating%%)]][[/span]]
[[span class="comments"]]%%comments%% [[span]]Comments[[/span]]💬︎[[/span]]
[[/div]]
[[/div]]

[[/div]]

[[/module]]
[[/div]]
[[/tab]]

[[tab Order by Recent Edits]]
[[div class="tale-list content-type-description"]]
[[module ListPages category="_default" order="updated_at desc" wrapper="no" category="*" separate="false" perPage="20" tags="@URL|artwork artist comic"]]

[[div class="tale-block %%tags%%"]]
[[div_ class="title"]]
%%linked_title%% [[span class="author"]]by %%created_by_linked%%[[/span]]
[[/div]]
[[div_ class="date"]]
%%created_at|%Y %b %e|agohover%%
[[/div]]

[[div_ class="meta"]]
[[span class="tag-list"]]%%tags_linked|artwork-hub/tag/-scp,-goi-format,-supplement,-tale,-hub,-site,-resource,-guide,-essay,%%[[/span]]
[[div_ class="sec-info"]]
[[span class="rating"]][[#ifexpr %%rating%% > -1 | + | - ]][[#expr abs(%%rating%%)]][[/span]]
[[span class="comments"]]%%comments%% [[span]]Comments[[/span]]💬︎[[/span]]
[[/div]]
[[/div]]

[[/div]]

[[/module]]
[[/div]]
[[/div]]
[[/tab]]

[[/tabview]]

----

[[# posting]]

[[=]]
++* Posting Your Own Art
[[/=]]

If you'd like to post your own art to the site, please check out [[[how-to-post-your-art-to-the-scp-wiki |this guide first!]]] It goes over image hosting, basic CSS formatting, customization, and posting requirements. You're free to personalize the page however you like, but note that artwork and artist pages are subject to the [[[deletions-guide|Deletions process]]] like any other posted page.

[[include fragment:nav-generic-css]]

[[module css]]

.content-panel .content-type-title > p {
  margin: 0;
}
.content-panel .content-type-title {
  font-size: 120%;
  font-weight: bold;
  padding: 5px 20px;
  background-color: #666;
  color: #fff;
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.8),
    inset 0 15px 1px rgba(255,255,255,.2),
    inset 0 15px 10px rgba(255,255,255,.2);
}
.content-panel .content-type-description {
padding: 0 20px;
text-align: justify;
}
.content-panel.content-row .content-type-description {
padding: 5px 20px;
}
.content-panel.content-row .content-type-description-2 {
padding: 0 20px;
text-align: justify;
}
.art-container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
    align-self: flex-end
    gap: 1rem 1rem;
}
.art-container .art {
    flex: 0 1 200px;
    text-align: center;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.art-container .art .image-container {
    padding: 0;
    min-height: 100%;
    max-width: 100%;
}

@media not all and (max-width: 767px) {
#main-content {
    max-width: min(57.5rem,calc(100% - 3rem));
}
}

:root { --box-accent: #3d8554; }

.tale-list {
    display: grid;
    gap: .75rem;
    margin-block: 1.5rem;
}
.tale-list .pager { border-block-start: .225rem solid var(--box-accent); }

.tale-block {
    background-color: #fff;
    box-shadow: 0 0 0.325rem rgb(0 0 0 / 0.25);
    contain: paint;
    display: grid;
    grid-template-areas:
        "title date"
        "meta meta";
    grid-template-columns: 1fr max-content;
    gap: .425rem;
    padding: .625rem;
    --box-accent: inherit;
}

.tale-block  .title {
    grid-area: title;
    display: flex;
    gap: .325ex 0.75ex;
    align-items: center;
    flex-wrap: wrap;
}
.tale-block .title > a {
    font-weight: bold;
    font-size: 1.075em;
}
.tale-block .title > .author { font-size: .775em; flex-grow: 1; }
.author .printuser {
    display: inline-flex;
    align-items: baseline;
    gap: .325em;
}
.author .printuser img {
    margin: 0;
    padding: 0;
    padding-left: .475rem;
}

.tale-block .date {
    grid-area: date;
    font-feature-settings: 'case','ss01','ss04','tnum';
    font-size: .725em;
}

.tale-block .meta {
    grid-area: meta;
    display: flex;
    font-size: .775em;
    gap: .75rem;
    justify-content: space-between;
}
.meta .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: flex-start;
}
.tag-list a {
    display: block;
    border-radius: 1.5rem;
    padding: .125em .675em;
    text-decoration: none;
    font-weight: 550;
    color: var(--box-accent);
    background-color: #3b5c970f;
}
.tag-list a:is(:hover,:focus) {
    color: white;
    background-color: var(--box-accent);
}

.meta .sec-info {
    display: grid;
    grid-template-columns: 3rem 3.5rem;
    align-items: center;
    text-align: end;
    gap: .25rem;
    min-width: max-content;
    align-self: flex-end;
}
.sec-info > br { display: none; }
.sec-info .comments > span { font-size: 0; }

.tale-block .description {
    grid-column: 1/-1;
}
.description > :not(.preview) { display: none; }
.description:not(:has(> .preview)) { display: none; } /* progressive enhancement */
.description > .preview {
    display: block;
    font-size: .9125em;
    padding-block-start: .425rem;
    border-block-start: .05rem solid #ddd;
}
.description > .preview > p:first-child { margin-block-start: 0.25em; }
.description > .preview > p:last-child { margin-block-end: 0.25em; }


div.tag-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
    font-size: .9125em;
    margin-block: .5rem;
}
div.tag-nav br { display: none; }
div.tag-nav p { display: contents; }


div.year {
    font-weight: bold;
    flex-flow: wrap-reverse row-reverse;
}
.year a {
    padding-inline-end: .25rem;
    border-inline-end: solid 2px #333;
}

.m-wrapper {
}

.m-wrapper .yui-navset .yui-content {
    display: contents;
    background-color: transparent;
    padding: 0;
    border: none;
}
.m-wrapper .yui-navset .yui-nav {
    border: none;
    text-align: center;
    margin: 0.2rem;
}
#page-content .m-wrapper .yui-navset .yui-nav li {
    margin: 0;
    padding: 0;
}

#page-content .m-wrapper .yui-navset .yui-nav li a em {
     margin: 0 0 0 auto;
     padding: 0;
     width: max-content;
}
.m-wrapper .yui-navset .yui-nav a,
.m-wrapper .yui-navset .yui-nav a:hover,
.m-wrapper .yui-navset .yui-nav a em {
    border: none;
    background: #FCFCFC !important;
}
#page-content .m-wrapper .yui-navset .yui-nav li a:hover,
#page-content .m-wrapper .yui-navset .yui-nav li a:focus,
#page-content .m- wrapper .yui-navset .yui-nav li a:active {
    color: #000
    text-decoration: underline;
}

#page-content .m-wrapper .yui-navset .yui-nav li a {
    color: #a01;
}

.m-wrapper .yui-navset .yui-nav .selected {
    display: none;
}

.m-wrapper .yui-navset .yui-content > div:first-child > p { display: contents; }
[[/module]]

Artwork Hub

Module Styles

Inline Styles

Includes

CSS Classes

Page Source