Тема "Проект BIOFELL"

Вечный рост.

Эта тема была создана s n o w y и WhoYouCallinAPinHead.

To import this theme to your page, put the following text anywhere inside it:

---

[[include :ru-backrooms-wiki:theme:biofell]]

---

Примеры:

Исследование пещеры из плоти.

Горизонтальная линия может быть создана путём написания 5 дефисов подряд "-----" и она будет тянуться на всю страницу (только если не размещена в блоке цитаты). Линии, делящие документ на секции выглядят так:

---

Заголовки могут быть созданы путём постановки от 1 до 6 плюсов подряд "+" в начале строки

+ Заголовки

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвёртого уровня

Заголовок пятого уровня

Заголовок шестого уровня

Использованные шрифты

Основной шрифт: 'Jost'
Шрифт в шапке: 'Geologica'

Шрифт в заголовках: 'Overpass Mono'

Моноширный шрифт: 'PT Sans Narrow'

Вкладка

Это таблица с вкладками.

Обилие Вкладок

Смотрите, тут ещё текст.

Как неожиданно.

Длинная Вкладка

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

У этой пустой вкладки с какого-то перепуга очень длинное имя. Интересно...

Пустая Вкладка

Пустая Вкладка

Пустая Вкладка

Да вроде и не такая пустая, да? :)

Пустая Вкладка

Пустая Вкладка

Это блочная цитата, созданная путём размещения "> " в начале каждой строки.
Больше текста

---

Это горизонтальная линия

Блок в блоке¹

[[div class="lightblock"]]
Светлая Вспышка
[[/div]]

[[div class="styled-quote"]]
Стилизованная Вспышка
[[/div]]

[[div class="darkblock"]]
Тёмная Вспышка
[[/div]]

[[div class="dark-styled-quote"]]
Тёмная Стилизованная Вспышка
[[/div]]

---

А это	таблица
Вы наверняка	уже знаете
как их создавать

Тут есть
Текст
Так что вы
Можете увидеть
Как всё выглядит
В разных
форматах^и
прочих_вещах
Включая ссылки, которых нет
И те, которые есть!

---

[+] Код Темы

@import url('https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geologica:wght,CRSV,SHRP@600,0.5,100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow&display=swap');
 
@import url(https://backrooms-wiki.wdfiles.com/local--code/component%3Apatch/1);
 
@media screen and (prefers-reduced-motion: no-preference) {
    #page-title, #breadcrumbs, #page-content > * {
      animation-name: fadeIn;
      animation-duration: 1s;
      animation-iteration-count: 1;
      animation-timing-function: ease-out;
      animation-fill-mode: backwards;
    }
  }
  #page-title { animation-delay: 0s; }
 
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translate(0,30px);
    }
    to {
      opacity: 1;
      transform: translate(0,0);
    }
  }
 
#account-options {
   background-color: rgb(var(--dark-accent));
   border-color: rgb(var(--black-monochrome));
}
 
#account-options li a:hover {
   color: rgb(var(--bright-accent));
}
 
#side-bar:hover,
#side-bar:active {
   background-color: rgb(var(--swatch-background));
}
 
:root {
   --theme-base: "black-highlighter";
   --theme-id: "liminal";
   --theme-name: "Liminal Theme";
 
   --logo-image: url("http://backrooms-sandbox-2.wdfiles.com/local--files/collab%3Awhoyoucallinapinhead-and-snowy-biofell-theme/biofelllogo.png");
   --header-title: "Проект BIOFELL";
   --header-subtitle: "Вечный рост.";
 
   --body-font: 'Jost', sans-serif;
   --header-font: 'Geologica', sans-serif;
   --title-font: 'Overpass Mono', monospace;
   --mono-font: 'PT Sans Narrow', monospace;
 
   --white-monochrome: 255, 255, 255;
   --pale-gray-monochrome: 34, 34, 34;
   --light-gray-monochrome: 255, 255, 255;
   --gray-monochrome: 34, 34, 34;
   --black-monochrome: 255, 0, 0;
   --bright-accent: 140, 136, 126;
   --medium-accent: 0, 0, 0;
   --dark-accent: 82, 82, 82;
   --pale-accent: 140, 136, 126;
 
   --swatch-headerh1-color: 255, 255, 255;
   --swatch-headerh2-color: 255, 255, 255;
   --swatch-menutxt-light-color: 255, 255, 255;
   --swatch-menubg-medium-color: 34, 34, 34;
   --swatch-tertiary-color: 255, 255, 255;
   --swatch-border-color: 255, 255, 255;
   --swatch-text-general: 255, 255, 255;
   --swatch-text-light: 255, 146, 146;
   --swatch-text-tertiary-color: var(--swatch-menutxt-light-color);
   --swatch-background: 20, 20, 20;
   --header-gradient-color-bottom: 191, 191, 191;
   --swatch-primary: 255, 0, 0;
 
   --swatch-topmenu-border-color: var(--medium-accent);
 
   --link-color: 230, 23, 68;
   --visited-link-color: 190, 0, 28;
   --hover-link-color: 230, 23, 68;
 
   --background-gradient-distance: 0rem;
 
   --gradient-header: linear-gradient(to top,
      rgba(var(--medium-accent)) 0%,
      rgba(var(--medium-accent), 0.90) 100%
   );
   --diagonal-stripes: linear-gradient(transparent 0);
}
 
/*top-bar dropdown links border color fix*/
#top-bar {
    --dropdown-border-color: 255, 0, 0;
}
 
body #content-wrap .yui-navset .yui-nav .selected a {
    color: rgb(var(--white-monochrome)) !important; 
}
 
#main-content {
    --tabs-selected-bg: 0,0,0;
    --tabs-selected-outline: 0,0,0;
}
 
#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(229, 34, 80) 0%,rgba(229, 140, 36,1) 50%,rgba(229, 140, 36,0.98) 51%,rgba(229, 140, 36) 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%;}
}
 
#extrac-div-3 {
    position: fixed;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background-image: radial-gradient(circle, rgb(229, 140, 36) 4%, rgb(0,0,0) 45%, rgb(229, 140, 36) 95%);
    opacity: 0.25;
    mix-blend-mode: color-dodge;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 30;
}
 
#page-content > :nth-child(1) { animation-delay: calc(1 * var(--fade-in-delay)); }
#page-content > :nth-child(2) { animation-delay: calc(2 * var(--fade-in-delay)); }
#page-content > :nth-child(3) { animation-delay: calc(3 * var(--fade-in-delay)); }
#page-content > :nth-child(4) { animation-delay: calc(4 * var(--fade-in-delay)); }
#page-content > :nth-child(5) { animation-delay: calc(5 * var(--fade-in-delay)); }
#page-content > :nth-child(6) { animation-delay: calc(6 * var(--fade-in-delay)); }
#page-content > :nth-child(7) { animation-delay: calc(7 * var(--fade-in-delay)); }
#page-content > :nth-child(8) { animation-delay: calc(8 * var(--fade-in-delay)); }
#page-content > :nth-child(9) { animation-delay: calc(9 * var(--fade-in-delay)); }
#page-content > :nth-child(10) { animation-delay: calc(10 * var(--fade-in-delay)); }
#page-content > :nth-child(11) { animation-delay: calc(11 * var(--fade-in-delay)); }
#page-content > :nth-child(12) { animation-delay: calc(12 * var(--fade-in-delay)); }
#page-content > :nth-child(13) { animation-delay: calc(13 * var(--fade-in-delay)); }
#page-content > :nth-child(14) { animation-delay: calc(14 * var(--fade-in-delay)); }
#page-content > :nth-child(15) { animation-delay: calc(15 * var(--fade-in-delay)); }
#page-content > :nth-child(n+15) { animation-delay: calc(16 * var(--fade-in-delay)); }
 
#skrollr-body {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("http://backrooms-sandbox-2.wdfiles.com/local--files/collab%3Awhoyoucallinapinhead-and-snowy-biofell-theme/gh.png");
 background-repeat: repeat-x;
background-size: inherit;
}
 
#container {
   background-image: radial-gradient(circle, rgb(var(--medium-accent), 0.05) 50%, transparent 0);
   background-size: 0.25em 0.25em;
   background-repeat: repeat;
   background-attachment: fixed;
}
 
#header, #top-bar {
   background-attachment: scroll;
}
 
#header {
   background-image: none;
}
 
#header::before {
   content: "";
   position: absolute;
   height: 100%;
   width: 100%;
   left: 11rem;
   top: -1rem;
   max-width: calc(100% - 11rem);
   background-image: var(--logo-image);
   background-size: auto 8.5rem;
   background-position: left;
   background-repeat: no-repeat;
   opacity: 1;
}
 
#header h1, #header h1 a {
   position: absolute;
   top: 1rem;
   margin: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   z-index: 0;
}
 
#header h2, #header h2 span, #header h2 span::before {
   position: absolute;
   top: 2rem;
   margin: 0;
   width: 100%;
   display: flex;
   justify-content: center;
}
 
#header h1 a::before, #header h2 span::before {
   text-shadow: .7rem .7rem .9rem #000000;
}
 
a.newpage {
   background: transparent;
   text-decoration: none
}
 
a.newpage {
   color: rgb(var(--newpage-color))
}
 
div.block-center {
   min-width: 30%
}
 
@media only screen and (max-width:768px) {
   div.block-center {
      min-width: 40%
   }
   #header::before {
   left: 1rem;
   top: 0;
   max-width: calc(100% - 1rem);
   }
}
 
blockquote {
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-quote {
   background-color:rgb(var(--gray-monochrome));
   border-left: 0.5rem solid rgba(var(--white-monochrome));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
 
.titleblock {
        background-color: rgb(var(--dark-gray-monochrome));
        color:rgb(var(--white-monochrome));
        padding: 0.5rem 1rem 0.10rem;
        margin: 1.5rem 0rem 0.5rem 0rem;
        box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
        border: solid rgb(var(--bright-accent)) 2px;
     }
 
     .titlebox{
       color: rgb(var(--dark-gray-monochrome));
       position: relative;
       top: -1.6rem;
       background-color: rgb(var(--bright-accent));
       padding: 0.25rem 1rem;
       line-height: 0.1rem;
     }
 
.dark-styled-quote {
   background-color:rgb(var(--red-monochrome));
   border-left: 0.5rem solid rgba(var(--swatch-headerh1-color));
   color:rgb(var(--white-monochrome));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.dark-styled-quote a {
color: rgb(var(--swatch-menubg-medium-color));
}
 
.lightblock {
   background-color:rgb(var(--gray-monochrome));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.darkblock {
   background-color:rgb(var(--red-monochrome));
   color:rgb(var(--white-monochrome));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.darkblock a {
color: rgb(var(--swatch-menubg-medium-color));
}
 
/* ==SD CLASS CODE== */
 
.sd-container {
   --sd-bullets:167,12,10;
}

---

Лицензии на изображения

Логотип создан s n o w y

Сноски

1. А вот и сноска!