Przykłady

Pozioma linia może zostać stworzona z 5 myślników "-----" rozciąga się ona na całą szerokość strony, jeśli nie jest umieszczona wewnątrz elementu (np. blockquote). Linie oddzielające sekcje dokumentu są liniami poziomymi.

Logo po prostu

Tytuły można stworzyć dodając od 1 do 6 plusów “+” na początku linijki.

+ Tytuły

Stwórz tu tekst.

To jest cytat tworzysz go za pomocą “>” na początku linijki.
Tekst

Pozioma linia

Robimy czarną dziurę cytat w cytacie

Kolejny cytat w cytacie¹

To jest	tabela
Jest czysta	bez polotu
idź dalej

Przypis jakiś²

[[div class="lightblock"]]

[[/div]]

[[div class="darkblock"]]

[[/div]]

[[div class="lightstyled-quote"]]

[[/div]]

[[div class="darkstyled-quote"]]

[[/div]]

Pokaż Kod

Ukryj Kod

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
:root {
   --fade-in-delay: 0.1s;
 
    --theme-base: "white-highlighter";
    --theme-id: "KPNB";
    --theme-name: "KPNB Theme";
 
    /* Header */
    --logo-image: url("https://i.imgur.com/xrRk0vQ.png");
    --header-title: "Kolektyw Polskich Naukowców Backrooms";
    --header-subtitle: "Technologia. Przetrwanie. Ochrona";
 
   --body-font: VT323, monospace;
   --header-font: VT323, monospace;
   --title-font: VT323, monospace;
   --mono-font: VT323, monospace;
   --base-font-size: 1.2rem;
   --text-shadow: 2px 2px #2E86C1;
 
   --white-monochrome: 175, 200, 255;
   --pale-gray-monochrome: 10, 10, 20;
   --light-gray-monochrome: 160, 180, 200;
   --gray-monochrome: 50, 60, 80;
   --black-monochrome: 10, 10, 20;
   --bright-accent: 70, 130, 180;
   --medium-accent: 50, 90, 140;
   --custom-text: 140, 160, 220; 
   --dark-accent: 30, 60, 100;
   --pale-accent: 90, 110, 140;
 
   /* Primary Theme Colors */
   --swatch-background: var(--black-monochrome);
   --swatch-primary: var(--bright-accent);
   --swatch-primary-darker: var(--medium-accent);
   --swatch-primary-darkest: var(--black-monochrome);
 
   /* Primary Text Colors */
   --swatch-text-dark: var(--custom-text);
   --swatch-text-light: var(--medium-accent);
   --swatch-important-text: var(--medium-accent);
   --barColour: var(--white-monochrome);
   --linkColour: var(--pale-accent);
 
   /* Primary Menu Colors */
   --swatch-menubg-color: var(--black-monochrome);
   --swatch-menubg-light-color: var(--dark-gray-monochrome);
   --swatch-menubg-medium-color: var(--medium-accent);
   --swatch-menubg-medium-dark-color: var(--gray-monochrome);
   --swatch-menubg-dark-color: var(--gray-monochrome);
   --swatch-menubg-black-color: var(--black-monochrome);
   --swatch-menubg-hover-color: var(--black-monochrome);
   --swatch-menutxt-light-color: var(--white-monochrome);
   --swatch-border-color: var(--bright-accent);
   --swatch-topmenu-border-color: var(--white-monochrome);
   --swatch-topmenu-bg-color: var(--black-monochrome);
 
   /* Primary Header Colors */
    --swatch-headerh1-color: var(--white-monochrome);
    --swatch-headerh2-color: var(--white-monochrome);
    --swatch-topmenu-border-color: var(--bright-accent);
    --swatch-topmenu-bg-color: var(--black-monochrome);
 
   /* Link Colors */
   --link-color: var(--bright-accent);
   --visited-link-color: var(--medium-accent);
   --hover-link-color: var(--white-monochrome);
   --link-color-bright: var(--medium-accent);
   --sidebar-links-text: var(--swatch-menutxt-dark-color);
 
   /* Rating Module Colors */
   --rating-module-button-color: var(--bright-accent);
   --rating-module-text-color: var(--white-monochrome);
   --rating-module-text-hover-color: var(--white-monochrome);
 
   /* Header Gradients */
   --gradient-header: none;
   --diagonal-stripes: none;
 
}
 
#side-bar {color:white !important}
.side-block {color:white !important}
.menu-item p, .menu-item a {color:white !important}
 
/* sd banner colours */
.sd-container {
--sd-border: var(--white-monochrome);
--sd-text: var(--white-monochrome); 
--sd-symbol: var(--white-monochrome);
--sd-bullets: var(--white-monochrome);
   }
}
 
 #extrac-div-1 {
    position: fixed;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .15) 50%, rgba(0, 0, 0, 0));
    background-size: auto 8px;
    opacity: 0.7;
}
 
#extrac-div-2 {
    position: fixed;
    width: 100vw;
    height: 1rem;
    top: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(60, 120, 200) 0%, rgba(60, 120, 200, 1) 50%, rgba(60, 120, 200, 0.98) 51%, rgba(60, 120, 200) 100%);
    opacity: .1;
    animation: scanm 6s linear infinite;
}
 
@keyframes scanm {
    0% { top: -1rem; opacity: .05; }
    25% { top: 50%; opacity: .03; }
    37.5% { top: 75%; opacity: 0.06; }
    50% { top: 100%; opacity: .03; }
    100% { top: 100%; }
}
 
.lightstyled-quote {
    background-color: rgb(100, 120, 220); /* Ciemniejszy */
    color: rgb(0, 0, 0);
    border-left: 0.5rem solid rgba(50, 50, 100);
}
 
.darkstyled-quote {
    background-color: rgb(40, 50, 90); /* Ciemniejszy */
    border-left: 0.5rem solid rgba(100, 120, 220);
    color: rgb(180, 200, 255);
}
 
.lightblock {
    background-color: rgb(100, 120, 220);
    color: rgb(0, 0, 0);
}
 
.darkblock {
    background-color: rgb(40, 50, 90);
    color: rgb(180, 200, 255);
}
 
.border-logoblock {
    background-color: rgb(40, 50, 90);
    border: solid 0.3rem rgb(100, 120, 220);
}
 
@media only screen and (max-width: 768px) {
    :root { --header-title: "K.P.N.B."; }
}