From 9c907ada94d53177a07b8324c03d2b0d1d50a680 Mon Sep 17 00:00:00 2001 From: Sp1cyP3pp3r Date: Thu, 7 Mar 2024 18:22:27 +0400 Subject: [PATCH] Added funk pop content --- index.html | 128 ++++++++++++++++++++++++++--------------------------- style.less | 118 +++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 159 insertions(+), 87 deletions(-) diff --git a/index.html b/index.html index 724944e..be586de 100644 --- a/index.html +++ b/index.html @@ -31,106 +31,100 @@

-
+

Что такое СБИШ?

- Сборник Бесконечно Интересных Штук -- это мой блог, в котором я буду выкладывать ну уж очень важныТатере. Я планирую сделать это место заменой как раз того сайта на фэндоме. (потому что я хочу полную власть над сиэсэсом АХХАХАХАХАХААХАХАХХА) + Сборник Бесконечно Интересных Штук -- это мой блог, в котором я буду выкладывать ну уж очень важные штуки. От своих игрушек, до полной коллекции карточек и полноценных романов о Татере. Я планирую сделать это пространство заменой как раз того сайта на фэндоме (потому что я хочу полную власть над сиэсэсом АХХАХАХАХАХААХАХАХХА).

Так же нужно написать отдельную страницу с биографией, и целую галлерею с моими бесконечно интересными штуками.

+

+ О! Ещё нужно сделать целую страницу где буду писать концептики для моей следующей игры про паркур по крышам и граффити. +

-
+

- СПАСИТЕ ПРОШУ НЕТ НЕ НАДО ПРОШУ НЕЕТ НЕЕТ ПОЖАЛУЙСТА НЕ НАДО НЕТ НЕТ НЕТ НЕТ НЕТ НЕТ НЕТ НЕТ + Фанк Поп Трейсинг Тэг Паркур

-

- Сборник Бесконечно Интересных Штук -- это мой блог, в котором я буду выкладывать ну уж очень важныТатере. Я планирую сделать это место заменой как раз того сайта на фэндоме. (потому что я хочу полную власть над сиэсэсом АХХАХАХАХАХААХАХАХХА) + В альтернативном таймлайне, в недалёком будущем, есть город посреди пустыни. Часть проекта компании WeDoEvil по источении ресурсов пустыни Хаст. Весь город — огромный бур-насос, из чего оправдывается его вертикальная архитектура.

+

Слои города

- Так же нужно написать отдельную страницу с биографией, и целую галлерею с моими бесконечно интересными штуками. + Город разделён на три слоя, в каждом живут люди разделённые на классы:

-
-
-
-

- СПАСИТЕ ПРОШУ НЕТ НЕ НАДО ПРОШУ НЕЕТ НЕЕТ ПОЖАЛУЙСТА НЕ НАДО НЕТ НЕТ НЕТ НЕТ НЕТ НЕТ НЕТ НЕТ -

-
+
    +
  1. + Нижний слой — слой бедных и рабочих на фабрике. Очень неприятное место. +
    2. +
  2. + Средний слой — слой среднего класса, застрявшие в рутине. Иногда дым нижнего слоя поднимается и образует непроницаемую пелену. +
    3. +
  3. + Верхний слой — слой элиты общества, касающийся облаков. Сюда запрещено входить людям слоёв ниже без приглашения. +
    4. +
+

+ Нижний Слой +

+

- Сборник Бесконечно Интересных Штук -- это мой блог, в котором я буду выкладывать ну уж очень важныТатере. Я планирую сделать это место заменой как раз того сайта на фэндоме. (потому что я хочу полную власть над сиэсэсом АХХАХАХАХАХААХАХАХХА) + Основание города, самый просторный и большой слой города по площади. Однако, большой процент этого слоя занимают фабрики, заводы и заброшенные здания, не говоря уже об абсолютно разрушенных природой руин.

- Так же нужно написать отдельную страницу с биографией, и целую галлерею с моими бесконечно интересными штуками. + Каждый здесь мечтает перебраться на средний слой. Но по сравнению, что они получают здесь и с тем, какие цены на жильё там, это может занять пол жизни. И многие просто либо сдаются, либо уходят в криминал.

-
-
-
-

- Сборник Бесконечно Интересных Штук -- это мой блог, в котором я буду выкладывать ну уж очень важные штуки. От своих игрушек, карточек и прочего до целых романов о Татере. Я планирую сделать это место заменой как раз того саА) -

-

- Так же нужно написать отдельную страницу с биографией, и целую галлерею с моими бесконечно интересными штуками. -

-
-
-

- Сборник Бесконечно Интересных Штук -- это мой блог, в котором я буду выкладывать ну уж очень важные штуки. От своих игрушек, карточек и прочего до целых романов о Татере. Я планирую сделать это место заменой как раз того саА) -

-

- Так же нужно написать отдельную страницу с биографией, и целую галлерею с моими бесконечно интересными штуками. -

-
-
-

- Сборник Бесконечно Интересных Штук -- это мой блог, в котором я буду выкладывать ну уж очень важные штуки. От своих игрушек, карточек и прочего до целых романов о Татере. Я планирую сделать это место заменой как раз того саА) -

-

- Так же нужно написать отдельную страницу с биографией, и целую галлерею с моими бесконечно интересными штуками. -

-
-
-

- Сборник Бесконечно Интересных Штук -- это мой блог, в котором я буду выкладывать ну уж очень важные штуки. От своих игрушек, карточек и прочего до целых романов о Татере. Я планирую сделать это место заменой как раз того сайта на фэндоме. (потому что я хочу полную власть над сиэсэсом АХХАХАХАХАХААХАХАХХА) + Дети часто выростают беспризорниками и с бандитскими замашками. Устраивают группировки и решают собственные проблемы безаконнья. Они даже пытаются завоевать земли среднего класса, но кроме здешних руин им ещё ничего не получилось взять силой.

-

- Что такое СБИШ? -

+

Средний слой +

+

- Так же нужно написать отдельную страницу с биографией, и целую галлерею с моими бесконечно интересными штуками. + Люди из среднего слоя всё ещё работают руками, но занимаются менее грязной работой. А кто-то работает в сфере услуг и компьютерных технологий. Почти у каждого дома есть телевизоры и компьютер. +

+

+ Люди здесь уже не волнуются о выживании так сильно, как люди нижнего слоя. Могут позволить поход в кино или ресторан пару раз за месяц. Люди впринципе довольны своей жизни и мало кто стремится к верхнему слою. А тот кто, всё таки желает попасть туда, вынужден смерится с жестокой реальностью бетона. +

+

+ Верхний слой +

+ +

+ Жемчужина по среди пустыни, в гнезде орла. Прекрасное место коррупции и непотизма, достигающего облаков. Самый малый из слоёв, которым руководят 5 семей, чётко разделившие слой на районы между собой. +

+

+ Чтобы оказаться на верхнею слою, нужно либо в нём родится, либо получить приглашение, подписанное тремя из пяти семей. В верхний слой ведут 5 лифтов из среднего слоя, каждый в 5 районов. Чтобы перемещаться между ними, нужно тоже иметь разрешение соответствующей семьи. +

+

Конечно есть и парочка незаконных путей: через внутренний стержень города — канализацию и системные помещения, а так же по воздуху. Главное чтобы никто не заметил, и не выглядеть подозрительно.

+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet malesuada feugiat. Curabitur fermentum bibendum nulla, non dictum ipsum tincidunt non. Quisque convallis pharetra tempor. Donec id pretium leo. Pellentesque luctus massa non elit viverra pellentesque. Cras vitae neque molestie, rhoncus ipsum sit amet, lobortis dui. Fusce in urna sem. Vivamus vehicula dignissim augue et scelerisque. Etiam quam nisi, molestie ac dolor in, tincidunt tincidunt arcu. Praesent sed justo finibus, fringilla velit quis, porta erat. Donec blandit metus ut arcu iaculis iaculis. Cras nec dolor fringilla justo ullamcorper auctor. Aliquam eget pretium velit. Morbi urna justo, pulvinar id lobortis in, aliquet placerat orci. + Etiam nisi turpis, eleifend nec tellus id, efficitur pellentesque dolor. Proin vitae massa a augue sagittis vulputate. Duis vel fringilla magna, sit amet vestibulum enim. Fusce laoreet accumsan nisl eu sagittis. Morbi hendrerit sapien eget efficitur imperdiet. Aenean vitae nisl id est placerat congue a et nisi. Suspendisse vitae quam ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse eu risus lacus. Ut tristique libero eget est dictum, commodo malesuada orci elementum. Proin molestie eu mi in tempus. + In hac habitasse platea dictumst. Cras augue nisl, cursus mattis mattis id, lacinia nec augue. Integer nec augue non metus interdum rhoncus. Proin non imperdiet ante. Sed mollis, justo ac dapibus auctor, tellus mi congue nisl, nec commodo ex justo ut eros. Etiam fringilla porta dolor vitae gravida. Nulla facilisi. Nam dui eros, mattis ut turpis at, eleifend accumsan odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed id ultrices erat, vehicula viverra ante. Etiam sit amet dignissim tellus, ac laoreet ligula. Aenean fringilla sodales lorem, ac maximus est hendrerit in. + In hac habitasse platea dictumst. Cras augue nisl, cursus mattis mattis id, lacinia nec augue. Integer nec augue non metus interdum rhoncus. Proin non imperdiet ante. Sed mollis, justo ac dapibus auctor, tellus mi congue nisl, nec commodo ex justo ut eros. Etiam fringilla porta dolor vitae gravida. Nulla facilisi. Nam dui eros, mattis ut turpis at, eleifend accumsan odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed id ultrices erat, vehicula viverra ante. Etiam sit amet dignissim tellus, ac laoreet ligula. Aenean fringilla sodales lorem, ac maximus est hendrerit in. +

+
- + + + diff --git a/style.less b/style.less index 1aa96b2..a46a8e5 100644 --- a/style.less +++ b/style.less @@ -1,5 +1,5 @@ @import url("reset.css"); -@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Russo+One&family=Scada:ital,wght@0,400;0,700;1,400;1,700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Overpass:ital,wght@0,100..900;1,100..900&family=Russo+One&family=Scada:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap'); :root { --clr-accent: #dcac7f; @@ -14,23 +14,15 @@ } html { - height: 100%; + height: max-content; + min-height: 100%; width: 100%; - writing-mode: vertical-lr; -} - -a:link { - color: var(--clr-int); - text-decoration: none; -} - -a:visited { - color: var(--clr-vis); } body { display: flex; height: 100%; + min-height: 100vh; flex-flow: column nowrap; align-content: space-between; justify-content: space-between; @@ -40,6 +32,15 @@ body { writing-mode: horizontal-tb; } +a:link { + color: var(--clr-int); + text-decoration: none; +} + +a:visited { + color: var(--clr-vis); +} + /* HEADER */ header { background-color: var(--clr-accent); @@ -123,8 +124,48 @@ h1 { } article { - max-width: 68ch; + max-width: 70ch; + width: 100vw; animation: article-folds-out 1s; + z-index: 10; + min-height: 80vh; + font-family: 'Source Sans 3', sans-serif; + box-shadow: 0 1mm 0px 0 color-mix(in oklab, var(--clr-accent), rgba(0, 0, 0, 0.5) 30%); + + p { + line-height: 1.25em; + + &:not(:last-child) { + margin-block-end: 1em; + } + } + + h2 { + font-size: 1.4em; + background-image: linear-gradient(0.25turn in oklab, var(--h1-bg), transparent); + padding-inline-start: 0.5em; + margin-inline: -0.7em; + margin-block-end: 0.5em; + color: var(--clr-pure); + font-family: "Russo One", sans-serif; + text-shadow: .18ch .18ch color-mix(in oklab, var(--h1-bg), var(--clr-bother)); + } + + h3 { + display: inline-block; + font-size: 1.1em; + background-color: var(--h1-bg); + padding-inline: 0.25em; + padding-block: 0.15em; + margin-block-end: 0.5em; + color: var(--clr-pure); + font-family: "Russo One", sans-serif; + text-shadow: .18ch .18ch color-mix(in oklab, var(--h1-bg), var(--clr-bother)); + } + + &:not(p + :where(h2, h3, h4, h5, h6)) :where(h2, h3, h4, h5, h6) { + margin-block-start: 0.5em; + } } article > section { @@ -154,11 +195,12 @@ article:has(> *:first-child:is(h1)) > h1 { font-family: "Russo One", sans-serif; font-size: 3vh; color: var(--clr-pure); - text-shadow: .18ch .18ch color-mix(in oklab, var(--clr-int), var(--clr-bother)); + text-shadow: .18ch .18ch color-mix(in oklab, var(--h1-bg), var(--clr-bother)); overflow: auto; display: block; background-color: var(--h1-bg); scrollbar-color: color-mix(in oklab, var(--h1-bg), black 10%) var(--h1-bg); + scrollbar-width: thin; } @@ -167,9 +209,9 @@ article:has(> *:first-child:is(h1)):has(img) > h1 { scrollbar-width: none; } -#Агония, -button[onClick*="Агония"] { - --h1-bg: var(--clr-err) +#Funk, +button[onClick*="Funk"] { + --h1-bg: var(--clr-comp) } #Main, @@ -192,17 +234,47 @@ button[onClick*="Main"] { } article img { + border: 6px solid var(--h1-bg); + margin: 1em; + margin-block-start: 0.5em; + + &.right { + float: inline-end; + margin-inline-end: -1em; + } + + &.left { + float: inline-start; + margin-inline-start: -1em; + } +} + +:where(article, section) > *:first-child:is(img) { float: inline-end; width: 200px; - margin: 1em; margin-block-start: -3.5em; margin-inline-end: -1em; - border: 6px solid var(--h1-bg); +} + +article :where(ol, ul) { + margin-inline-start: 1em; + + li:not(:first-child) { + margin-block-start: 0.5em; + } +} + +article ol { + list-style: decimal; +} + +article ul { + list-style: square; } /* Style the tab */ .tab { - overflow: auto; + overflow: visible; display: flex; flex-flow: column nowrap; } @@ -216,10 +288,14 @@ article img { border: none; font-size: 1.2em; height: 50px; - text-overflow: ellipsis; padding-inline-start: 0.5em; box-shadow: 0 1mm 5px 0 color-mix(in oklab, var(--button-color), rgba(0, 0, 0, 0.5) 30%); background-color: var(--button-color); + max-width: 6em; + text-overflow: clip; + overflow: auto; + scrollbar-color: color-mix(in oklab, var(--button-color), black 30%) color-mix(in oklab, var(--button-color), black 10%); + scrollbar-width: thin; } .tab (@indexstart, @index) when (@indexstart < @index ) {