Обсуждение:КЗ Армовича 2 версия: различия между версиями

← Предыдущая правка

ВизуальныйВики-текст

Текущая версия от 06:20, 10 февраля 2026

--Armowich (обсуждение) 06:53, 4 февраля 2026 (UTC)--Armowich (обсуждение) 06:53, 4 февраля 2026 (UTC)

ДОБРО ПОЖАЛОВАТЬ НА SIERRA-CELADON SS-13

Центральный блок (50%)

Левый блок (50%)
Контент первой части
Может быть любой текст
Распределяется по высоте

Правый блок (50%)
Контент второй части
Одинаковая ширина
Автоматическая высота

Контент синего блока
Многострочный текст
Разная высота
Еще строка
Еще
И еще
Автоматически растягивается
Не выходит за пределы

Левый блок
Контент первой части
Может быть любой текст
Распределяется по высоте

Центральный блок
Контент первой части
Может быть любой текст
Распределяется по высоте

Правый блок
Контент второй части
Одинаковая ширина
Автоматическая высота

Левый блок
Контент первой части
Может быть любой текст
Распределяется по высоте

Центральный блок
Контент первой части
Может быть любой текст
Распределяется по высоте

Правый блок
Контент второй части
Одинаковая ширина
Автоматическая высота

Контент синего блока
Многострочный текст
Разная высота
Еще строка
Еще
И еще
Автоматически растягивается
Не выходит за пределы

@@ Строка 1: / Строка 1: @@
-<div style="background-color: #f3b867; border-radius: 50px;">
+--[[Участник:Armowich|Armowich]] ([[Обсуждение участника:Armowich|обсуждение]]) 06:53, 4 февраля 2026 (UTC)--[[Участник:Armowich|Armowich]] ([[Обсуждение участника:Armowich|обсуждение]]) 06:53, 4 февраля 2026 (UTC)
-<strong style="
+<div style="display: flex; align-items: center; height: 36px;">
-    font-size: 2.5em;
+<div style="width: 30px; height: 100%; background-color: #{{MainColors|Header}}; border-radius: 30px 0 0 30px; margin-right: 5px"></div>
-    margin-left:30px;
+<strong style="color: #{{MainColors|Header}}; font-size: 40px">ДОБРО ПОЖАЛОВАТЬ НА SIERRA-CELADON SS-13</strong>
-    background-color: var(--background-color-base);
+<div style="flex: 1; height: 100%; background-color: #{{MainColors|Header}}; border-radius: 0 30px 30px 0; margin-left: 5px"></div>
-    color: #f3b867;
-    display: inline-block;
+</div>
-    line-height: 0.85;
+<div>
-    padding: 0.1em 0.2em;
-    max-width: calc(100vw - 100px);
-    box-sizing: border-box;
-">
-ДОБРО ПОЖАЛОВАТЬ НА SIERRA-CELADON
-</strong>
 </div>
+<div style="position: relative; margin-top: 16px">
 <div style="font-size: 0; position:relative;">
-<div style="background-color: #fff; width: calc(10% - 8px); display: inline-block; font-size: 4px; margin-right: 8px; border-top-left-radius: 50px"><br></div>
+<div style="background-color: #{{MainColors|Block1|First}}; width: calc(5% - 8px); display: inline-block; font-size: 4px; margin-right: 8px;"><br></div>
-<div style="background-color: red; width: calc(35% - 8px); display: inline-block; font-size: 4px; margin-right: 8px;"><br></div>
+<div style="background-color: #{{MainColors|Block1|Second}}; width: calc(40% - 8px); display: inline-block; font-size: 4px; margin-right: 8px;"><br></div>
-<div style="background-color: red; width: calc(5% - 8px); display: inline-block; font-size: 4px; margin-right: 8px;"><br></div>
+<div style="background-color: #{{MainColors|Block2|First}}; width: calc(2% - 8px); display: inline-block; font-size: 4px; margin-right: 8px;"><br></div>
-<div style="background-color: #fff; width: calc(10% - 8px); display: inline-block; font-size: 4px; margin-right: 8px;"><br></div>
+<div style="background-color: #{{MainColors|Block1|Fourth}}; width: calc(33% - 8px); display: inline-block; font-size: 4px; margin-right: 8px;"><br></div>
-<div style="background-color: yellow; width: calc(40% - 8px); display: inline-block; font-size: 4px; border-top-right-radius: 50px"><br></div>
+<div style="background-color: #{{MainColors|Block1|Five}}; width: 20%; position: absolute; z-index:3; height: 38px; display: inline-block; font-size: 4px; border-top-right-radius: 30px"><br></div>
 </div>
+<!-- 1 БЛОК -->
-<div style="font-size: 0; position: relative">
+<div style="position: relative; padding-right: 20%">
 <div style="
-width: calc(60% - 8px);
-display: inline-block;
 font-size: 16px;
-margin-right: 8px;
+background: var(--background-color-base);
+padding: 10px;
+margin-right: -5%;
+position: relative;
+z-index: 5;
+border-radius: 0 20px 20px 0;
 ">
+<div style="display: flex; width: 100%;">
+<!-- Левый блок -->
+<div style="flex: 1;box-sizing: border-box; border: 1px solid ; height: 100%">
+Центральный блок (50%)<br>
+<div style="display: flex; width: 100%;">
+<!-- Левый-Левый блок -->
+<div style="flex: 1;box-sizing: border-box; border: 1px solid ; height: 100%">
+Левый блок (50%)<br>
+Контент первой части<br>
+Может быть любой текст<br>
+Распределяется по высоте<br><br><br><br><br><br><br><br><br><br>
+</div>
+<!-- Правый-Левый блок -->
+<div style="flex: 1; box-sizing: border-box;">
+Правый блок (50%)<br>
+Контент второй части<br>
+Одинаковая ширина<br>
+Автоматическая высота
+</div>
+</div>
+</div>
+<!-- Правый блок -->
+<div style="flex: 1; box-sizing: border-box; border: 1px solid ; height: 100%">
+Правый блок (50%)<br>
+Контент второй части<br>
+Одинаковая ширина<br>
+Автоматическая высота
+</div>
+</div>
+</div>
 <div style="
 position: absolute;
-background: var(--background-color-base);
+right: 0;
-width: calc(60% + 30px);
-left: 0;
 top: 0;
+width: 20%;
 font-size: 16px;
-z-index: 20;
+color: white;
-border-radius: 0 20px 20px 0;
+z-index: 1;
+height: 100%;
+box-sizing: border-box;
+display: flex;
+flex-direction: column;
+">
+<div style="
+background-color: none;
+height: 30px;
+min-height: 30px;
+flex-shrink: 0;
+display: flex;
+align-items: center;
+box-sizing: border-box;
+margin-bottom:8px;
 ">
-<br><br><br><br><br><br>
+<br>
 </div>
+<!-- БОКОВОЙ БЛОК -->
+<div style="
+background-color: #{{MainColors|Block1Bot|First}};
+flex: 1;
+padding: 0 5% 0 25%;
+box-sizing: border-box;
+overflow: auto;
+">
+Контент синего блока<br>
+Многострочный текст<br>
+Разная высота<br>
+Еще строка<br>
+Еще<br>
+И еще<br>
+Автоматически растягивается<br>
+Не выходит за пределы
 </div>
-<div style="background-color: yellow; width: calc(40% - 8px); display: inline-block; font-size: 16px; color: var(--background-color-base); padding: 0 10px 0 40px;">
-ЖЕЛТЫЙ БЛОКЖЕЛТЫЙ БЛОКЖЕЛТЫЙ БЛОКЖЕЛТЫЙ БЛОКЖЕЛТЫЙ БЛОКЖЕЛТЫЙ БЛОКЖЕЛТЫЙ БЛОКЖЕЛТЫЙ БЛОКЖЕЛТЫЙ БЛОК<br><br><br><br>
+<div style="
+height: 60px;
+min-height: 30px;
+flex-shrink: 0;
+display: flex;
+align-items: center;
+box-sizing: border-box;
+margin-top:8px;
+">
+<br>
 </div>
 </div>
-<div style="font-size: 0; position:relative; z-index: 10;">
-<div style="background-color: #fff; width: calc(10% - 8px); display: inline-block; font-size: 4px; margin-right: 8px; border-bottom-left-radius: 50px"><br></div>
-<div style="background-color: red; width: calc(40% - 8px); display: inline-block; font-size: 4px; margin-right: 8px;"><br></div>
-<div style="background-color: #fff; width: calc(10% - 8px); display: inline-block; font-size: 4px; margin-right: 8px;"><br></div>
-<div style="background-color: yellow; width: calc(40% - 8px); display: inline-block; font-size: 4px; border-bottom-right-radius: 50px"><br></div>
 </div>
+<div style="font-size: 0; position:relative;">
+<div style="background-color: #{{MainColors|Block1Bot|Third}}; width: calc(50% - 8px); position: absolute; left: 0; top: 0; height: 108px; font-size: 4px; border-top-left-radius: 30px; z-index: 2;"><br></div>
+<div style="background-color: #{{MainColors|Block1Bot|Third}}; width: calc(25% - 8px); display: inline-block; font-size: 4px; margin-left: 50%;"><br></div>
+<div style="background-color: #{{MainColors|Block1Bot|Fourth}}; width: calc(5% - 8px); display: inline-block; font-size: 4px; margin-left: 8px;"><br></div>
+<div style="background-color: #{{MainColors|Block1Bot|First}}; width: 20%; position: absolute; z-index: 3; right: 0; bottom: 0; height: 68px; font-size: 4px; border-bottom-right-radius: 30px;"><br></div>
+</div>
+<!-- БЛОК-2 -->
+<div style="position: relative; padding-left: 30%;">
+<div style="
+position: absolute;
+left: 0;
+top: 0;
+width: 30%;
+font-size: 16px;
+color: white;
+z-index: 1;
+height: 100%;
+box-sizing: border-box;
+display: flex;
+flex-direction: column;
+">
+<div style="
+height: 100px;
+min-height: 100px;
+flex-shrink: 0;
+display: flex;
+align-items: center;
+box-sizing: border-box;
+margin-bottom:8px;
+">
+<br>
+</div>
+<!-- БОКОВОЙ БЛОК -->
+<div style="
+background-color: #{{MainColors|Block2|First}};
+flex: 1;
+padding: 0 15% 0 3%;
+box-sizing: border-box;
+overflow: auto;
+">
+Контент синего блока<br>
+Многострочный текст<br>
+Разная высота<br>
+Еще строка<br>
+Еще<br>
+И еще<br>
+Автоматически растягивается<br>
+Не выходит за пределы
+</div>
+</div>
+<div style="
+font-size: 16px;
+background: var(--background-color-base);
+padding: 10px;
+margin-left: -5%;
+position: relative;
+z-index: 2;
+border-radius: 20px 0 0 20px;
+">
+<div style="display: flex; width: 100%;">
+<!-- Левый блок -->
+<div style="flex: 1; box-sizing: border-box;">
+Левый блок<br>
+Контент первой части<br>
+Может быть любой текст<br>
+Распределяется по высоте<br><br><br><br><br><br><br><br><br><br>
+</div>
+<!-- Центральный блок -->
+<div style="flex: 1; box-sizing: border-box;">
+Центральный блок<br>
+Контент первой части<br>
+Может быть любой текст<br>
+Распределяется по высоте
+</div>
+<!-- Правый блок -->
+<div style="flex: 1; box-sizing: border-box;">
+Правый блок<br>
+Контент второй части<br>
+Одинаковая ширина<br>
+Автоматическая высота
+</div>
+</div>
+</div>
+</div>
+<div style="font-size: 0; position:relative;">
+<div style="background-color: #{{MainColors|Block2|First}}; width: calc(50% - 8px); display: inline-block; font-size: 25px; margin-right: 8px; border-bottom-left-radius: 30px"><br></div>
+<div style="background-color: #{{MainColors|Block2|Second}}; width: calc(25% - 8px); display: inline-block; font-size: 25px; margin-right: 8px;"><br></div>
+<div style="background-color: #{{MainColors|Block2|Third}}; width: 25%; display: inline-block; font-size: 25px; border-radius: 0 50px 50px 0"><br></div>
+</div><!-- 3 БЛОК -->
+<div style="position: relative; margin-top: 16px">
-<div style="display: flex; align-items: flex-start;">
+<div style="font-size: 0; position:relative;">
-<div style="background-color: #fff; flex: 10; border-top-left-radius: 50px"><br></div>
+<div style="background-color: #{{MainColors|Block3|First}}; width: calc(5% - 8px); display: inline-block; font-size: 4px; margin-right: 8px;"><br></div>
-<div style="width: 8px;"></div>
+<div style="background-color: #{{MainColors|Block3|Second}}; width: calc(20% - 8px); display: inline-block; font-size: 4px; margin-right: 8px;"><br></div>
-<div style="background-color: red; flex: 45;"><br></div>
+<div style="background-color: #{{MainColors|Block3|Third}}; width: calc(25% - 8px); display: inline-block; font-size: 4px; margin-right: 8px;"><br></div>
-<div style="width: 8px;"></div>
+<div style="background-color: #{{MainColors|Block3|Fourth}}; width: 50%;  position: absolute; z-index:3; height: 88px; display: inline-block; font-size: 4px; border-top-right-radius: 30px"><br></div>
-<div style="background-color: red; flex: 2;"><br></div>
-<div style="width: 8px;"></div>
-<div style="background-color: #fff; flex: 13;"><br></div>
-<div style="width: 8px;"></div>
-<div style="background-color: yellow; flex: 30;"><br><br><br></div>
 </div>
-<div style="display: flex; position: relative;">
+<div style="position: relative; padding-right: 30%;">
-<div style="flex: 70;
-margin: -70px 0 -70px -100px;
+<div style="
-right: -70px;
+font-size: 16px;
-padding-left: 100px;
+background: var(--background-color-base);
-background: var(--background-color-base);
+padding: 10px;
-border-radius: 20px;
+margin-right: -5%;
 position: relative;
-z-index: 10;">
+z-index: 5;
-ДВИГАЮЩИЙ БЛОК
+border-radius: 0 20px 20px 0;
+">
+<div style="display: flex; width: 100%;">
+<!-- Левый блок -->
+<div style="flex: 1; box-sizing: border-box;">
+Левый блок<br>
+Контент первой части<br>
+Может быть любой текст<br>
+Распределяется по высоте<br><br><br><br><br><br><br><br><br><br>
+</div>
+<!-- Центральный блок -->
+<div style="flex: 1; box-sizing: border-box;">
+Центральный блок<br>
+Контент первой части<br>
+Может быть любой текст<br>
+Распределяется по высоте
+</div>
+<!-- Правый блок -->
+<div style="flex: 1; box-sizing: border-box;">
+Правый блок<br>
+Контент второй части<br>
+Одинаковая ширина<br>
+Автоматическая высота
 </div>
-<div style="width: 32px;"></div>
-<div style="background-color: yellow; flex: 30; color: var(--background-color-base); position: relative; z-index: 5;">
-ЖЕЛТЫЙ БЛОК<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 </div>
 </div>
-<div style="display: flex; align-items: flex-end;">
+<div style="
-<div style="background-color: #fff; flex: 35;"><br></div>
+position: absolute;
-<div style="width: 8px;"></div>
+right: 0;
-<div style="background-color: red; flex: 15;"><br></div>
+top: 0;
-<div style="width: 8px;"></div>
+width: 30%;
-<div style="background-color: #fff; flex: 20;"><br></div>
+font-size: 16px;
-<div style="background-color: #fff; width: 8px;"><br></div>
+color: white;
-<div style="width: 8px;"></div>
+z-index: 1;
-<div style="background-color: yellow; flex: 30;"><br><br><br></div>
+height: 100%;
+box-sizing: border-box;
+display: flex;
+flex-direction: column;
+">
+<div style="
+height: 80px;
+min-height: 80px;
+flex-shrink: 0;
+display: flex;
+align-items: center;
+box-sizing: border-box;
+margin-bottom:8px;
+">
+<br>
 </div>
+<!-- БОКОВОЙ -->
+<div style="
+background-color: #{{MainColors|Block3Bot|Third}};
+flex: 1;
+padding: 0 3% 0 15%;
+box-sizing: border-box;
+overflow: auto;
+">
+Контент синего блока<br>
+Многострочный текст<br>
+Разная высота<br>
+Еще строка<br>
+Еще<br>
+И еще<br>
+Автоматически растягивается<br>
+Не выходит за пределы
+</div>
-<div class="wiki-mainpage-column" style="width: 49.5%; float:left; border:2px solid #01568A; border-radius: 10px" align="center">
-[[файл:Sierra_Logo.png|300px|center]]
-<div style="padding: 0 10px; width:100%;">
-{{#tag:inputbox
-|type=search
-|width=100%
-}}
 </div>
 </div>
-<div class="wiki-mainpage-column" style="width: 49.5%; float:right; border:5px double #48765E" align="left">
+<div style="font-size: 0; position:relative;">
-<strong style="font-size: 1.4em;">О сервере</strong><br>
+<div style="background-color: #{{MainColors|Block3Bot|First}}; width: calc(25% - 8px); display: inline-block; font-size: 25px; margin-right: 8px; border-radius: 30px 0 0 30px"><br></div>
-Sierra Celadon - сервер Space Station 13 основанный на вселенной Бэй12.
+<div style="background-color: #{{MainColors|Block3Bot|Second}}; width: calc(25% - 8px); display: inline-block; font-size: 25px; margin-right: 8px;"><br></div>
+<div style="background-color: #{{MainColors|Block3Bot|Third}}; width: 50%; display: inline-block; font-size: 25px; border-bottom-right-radius: 30px"><br></div>
+</div>
-<strong>Наш сервер находится:</strong>
-* byond://play.celadon.pro:1350
-* byond://game.celadon.pro:1350
 </div>