Carte d'Identité

EH TOI LÀ !

Cette page est utilisée pour le fonctionnement du site,

MERCI DE NE PAS MODIFIER CETTE PAGE
SANS LA PERMISSION DU STAFF.

Ce modèle est utilisé pour créer des cartes d'identité décoratives.

idcard.png

[[include :scp-wiki:component:id-card |css=--
|photo=https://scp-wiki.wdfiles.com/local--files/estrellayoshte/u.png
|level=3 Va de 1 jusqu'à 5
|name=Suong Yvonne
|dept=du Design |position=Iconographe
|id-number= 3492-775201
|expiry=06/2029
]]

Si plusieurs cartes figurent sur une même page, vous n'avez pas besoin de définir le paramètre css plusieurs fois, il peut être supprimé dans les [[include]]s qui sont ajoutés après le premier.

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+128&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
 
:root {
    --id-card-five-color: 196,2,51;
    --id-card-four-color: 255,109,0;
    --id-card-three-color: 255,211,0;
    --id-card-two-color: 0,135,189;
    --id-card-one-color: 0,159,107;
 
    --id-card-margin: min(1.5rem, calc(1.75vw + 0.325rem));
    --id-card-border-color: 210,210,210;
    --id-card-text-color: 20,20,20;
    --id-card-subtext-color: 140,140,140;
    --id-card-background-color: 252,252,252;
    --id-card-background-logo: url('https://scp-wiki.wdfiles.com/local--files/component%3Aid-card/SCP_F.png');
    --id-card-background-logo-opacity: 0.075;
}
 
#page-content .foundation-id-card {
    max-width: calc(var(--id-card-margin)*24.5);
}
.foundation-id-card {
    display: grid;
    grid-template-areas:
        "pfp level"
        "pfp info"
        "extra extra";
    grid-template-columns: 30% 1fr;
    grid-template-rows: calc(var(--id-card-margin)*3) auto auto;
    grid-gap: calc(var(--id-card-margin)*0.625);
    box-sizing: border-box;
    padding: var(--id-card-margin);
    margin: 1.5rem auto;
    border-radius: calc(var(--id-card-margin)*0.75);
    box-shadow: 0 0 0.325rem rgba(0,0,0,0.175);
    line-height: 1.125;
    font-family: 'Lexend', sans-serif;
    color: rgb(var(--id-card-text-color));
    background-color: rgb(var(--id-card-background-color));
    position: relative;
    z-index: 0;
    overflow: hidden;
}
.foundation-id-card::before {
    content: "";
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--id-card-background-logo-opacity);
    background-image: var(--id-card-background-logo);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 150% 50%;
    z-index: -1;
}
 
.foundation-id-card .profile-picture {
    grid-area: pfp;
    box-sizing: border-box;
    border: solid 0.125rem rgb(var(--id-card-border-color));
    border-radius: calc(var(--id-card-margin)*0.385);
    aspect-ratio: 4/5;
    overflow: hidden;
    position: relative;
}
.foundation-id-card .profile-picture img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
 
.foundation-id-card .level-container {
    grid-area: level;
    display: flex;
    grid-gap: calc(var(--id-card-margin)*0.325);
    align-items: center;
}
.foundation-id-card .level-container .levels {
    display: flex;
    flex-direction: column;
    grid-gap: calc(var(--id-card-margin)*0.285);
    max-height: calc(var(--id-card-margin)*3);
    justify-content: flex-start;
    flex-grow: 1;
}
.foundation-id-card .level-container .levels .level {
    flex-basis: calc(var(--id-card-margin)*0.5);
    flex-shrink: 1;
}
.foundation-id-card .level-container .levels.l-1 .level:is(:nth-child(1)) {
    display: block;
    background-color: rgb(var(--id-card-one-color));
}
.foundation-id-card .level-container .levels.l-2 .level:is(:nth-child(1), :nth-child(2)) {
    display: block;
    background-color: rgb(var(--id-card-two-color));
}
.foundation-id-card .level-container .levels.l-3 .level:is(:nth-child(1), :nth-child(2), :nth-child(3)) {
    display: block;
    background-color: rgb(var(--id-card-three-color));
}
.foundation-id-card .level-container .levels.l-4 .level:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)) {
    display: block;
    background-color: rgb(var(--id-card-four-color));
}
.foundation-id-card .level-container .levels.l-5 .level {
    display: block;
    background-color: rgb(var(--id-card-five-color));
}
 
.foundation-id-card .access {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    top: 0;
    right: 0;
    text-align: right;
    text-transform: uppercase;
    font-size: calc(var(--id-card-margin)*1.5);
    line-height: calc(var(--id-card-margin)*1.4);
}
.foundation-id-card .access > * { font-weight: bold; }
.foundation-id-card .access span { font-size: 80%; }
.foundation-id-card .access br { display: none; }
 
.foundation-id-card .info {
    grid-area: info;
    display: flex;
    flex-wrap: wrap;
    grid-gap: calc(var(--id-card-margin)*0.375);
}
.foundation-id-card .info > * {
    flex-grow: 1;
}
.foundation-id-card .info > .fullname {
    flex-basis: 100%;
}
.foundation-id-card .info > * br { display: none; }
.foundation-id-card .info > * .heading {
    display: block;
    text-transform: uppercase;
    font-size: calc(var(--id-card-margin)*0.675 + 0.075rem);
    letter-spacing: -0.025em;
    color: rgb(var(--id-card-subtext-color));
}
.foundation-id-card .info > * .fill-info {
    font-size: calc(var(--id-card-margin) + 0.05rem);
    font-weight: bold;
    line-height: 1.05;
}
.foundation-id-card .info > .fullname .fill-info {
    font-size: calc(var(--id-card-margin)*1.1 + 0.125rem);
}
 
.foundation-id-card .card-end {
    grid-area: extra;
    display: flex;
    height: calc(var(--id-card-margin)*2);
    align-items: center;
    padding-top: calc(var(--id-card-margin)*0.625);
    grid-gap: calc(var(--id-card-margin)*0.375);
    border-top: solid 0.125rem rgb(var(--id-card-border-color));
    overflow: hidden;
}
.foundation-id-card .card-end .barcode {
    font-family: 'Libre Barcode 128', cursive;
    user-select: none;
    height: 100%;
    flex-basis: 67.5%;
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    font-size: calc(var(--id-card-margin)*3.5);
    line-height: 1;
    align-self: flex-start;
    box-sizing: border-box;
}
.foundation-id-card .card-end .expire {
    color: rgb(var(--id-card-subtext-color));
    font-size: calc(var(--id-card-margin)*0.525);
    font-family: 'Share Tech Mono', monospace;
    align-self: flex-end;
    text-align: right;
    min-width: max-content;
}
.foundation-id-card .card-end .expire .id .sublead { font-size: 80%; margin-right: 0.75ch; }
.foundation-id-card .card-end .expire .id { font-size: 115%; }
{$photo}
Accès de
Niveau {$level}
Nom Complet
{$name}
Département
{$dept}
Fonction
{$position}
{$id-number}{$id-number}
ID No{$id-number}
Valable jusqu'au {$expiry}
modèle
Sauf mention contraire, le contenu de cette page est protégé par la licence Creative Commons Attribution-ShareAlike 3.0 License