index: en: dirty one

src/en/index.html

@@ -0,0 +1,143 @@
+---
+layout: layouts/base.njk
+indexPage: true
+---
+
+<style>
+.tower {
+  width: calc(18 * var(--step));
+  margin-inline: calc(4 * var(--step));
+  margin-block: calc(4 * var(--step));
+  /* padding-block-start: calc(8 * var(--step)); */
+  /* padding-block-end: 0; */
+}
+@media (prefers-color-scheme: dark) {
+  .tower {
+    filter: invert(1);
+  }
+}
+</style>
+<style>
+.hero {
+  position: relative;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
+
+  --hero-border: calc(0.5 * var(--step)) solid var(--color-inactive);
+  /* border-bottom: var(--hero-border); */
+  /* border-width: calc(1 * var(--step)); */
+  /* outline: calc(1 * var(--step)) solid var(--color-inactive); */
+
+  font-family: Xecut;
+  /* text-transform: uppercase; */
+  /* font-size: calc(3.5 * var(--step)); */
+  font-size: calc(3 * var(--step));
+}
+
+.hero:before {
+  content: '|||||||||||';
+  content: '';
+  position: absolute;
+  bottom: 0;
+  bottom: calc(1 * var(--step));
+  right: 0;
+  height: calc(1 * var(--step));
+  /* height: 50%; */
+  width: 100%;
+  /* width: calc(100 * var(--step)); */
+  border-right: var(--hero-border);
+  border-bottom: var(--hero-border);
+  /* border-width: calc(1 * var(--step)); */
+  /* border-color: var(--color-fg); */
+  z-index: -1;
+  /* height: calc(10 * var(--step)); */
+  /* height: 10%; */
+  /* width: calc(0.5 * var(--step)); */
+  /* width: 10%; */
+  color: var(--color-inactive);
+  /* opacity: 0.5; */
+}
+.hero:after {
+  content: '';
+  position: absolute;
+  top: 10px;
+  top: 0px;
+  right: 0;
+  height: calc(1 * var(--step));
+  /* height: 50%; */
+  width: calc(0.5 * var(--step));
+  width: 100%;
+  border-right: var(--hero-border);
+  border-top: var(--hero-border);
+  /* border-width: calc(1 * var(--step)); */
+  /* border-color: var(--color-fg); */
+  z-index: -1;
+  /* background: var(--color-fg); */
+  /* opacity: 0.5; */
+}
+
+.tags {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  /* background: var(--color-inactive); */
+}
+
+.tag {
+  /* flex-grow: 1; */
+  padding: calc(0.25 * var(--step)) calc(1.5 * var(--step));
+  /* text-align: center; */
+  border: var(--hero-border);
+  outline: var(--hero-border);
+  background: var(--color-bg);
+}
+
+.tower_cell {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  display: flex;
+  align-items: flex-end;
+  align-items: center;
+  border: var(--hero-border);
+  outline: var(--hero-border);
+  background: var(--color-bg);
+}
+</style>
+
+<h1>
+  Hackspace
+</h1>
+
+<div class="hero">
+  <div class="tags">
+    <div class="tag">DIY</div>
+    <div class="tag">Engineering</div>
+    <div class="tag">Embedded</div>
+    <div class="tag">FPGA</div>
+    <div class="tag">IoT</div>
+    <div class="tag">AI/ML</div>
+    <div class="tag">LLM</div>
+    <div class="tag">Wireless</div>
+    <div class="tag">Reverse Engineering</div>
+    <div class="tag">Information Security</div>
+    <div class="tag">Open-Source</div>
+  </div>
+
+  <div class="tower_cell">
+    <img class="tower" src="/_assets/img/tower/tower_logo.svg">
+  </div>
+</div>
+
+<br>
+<p>
+  <strong>Место силы</strong> для заинтересованных в современных&nbsp;(и&nbsp;не&nbsp;очень) технологиях.
+</p>
+<p>
+  Мы&nbsp;собираемся, чтобы делиться опытом,
+  реализовывать идеи на&nbsp;практике и&nbsp;общаться.
+</p>
+<p>
+  Посетить хакспейс можно во время мероприятий или предварительно написав нам в <a>Чат</a>.
+</p>

src/en/index.md

@@ -1,7 +0,0 @@
----
-layout: layouts/base.njk
-title: English
-indexPage: true
----
-
-# English

src/ru/index.njk

@@ -23,6 +23,7 @@ indexPage: true
     .hero {
       margin-inline: auto;
       padding-inline: 0;
+      padding-block-start: 0em;
     }
   }
   @media (min-width: 1300px) {
@@ -51,7 +52,7 @@ indexPage: true
   }
 
   .hero .description {
-    font-size: 28px;
+    font-size: 23px;
     margin-block-end: 2em;
     flex-grow: 1;
   }
@@ -62,6 +63,13 @@ indexPage: true
   }
   @media (min-width: 1300px) {
     .hero .description {
+      display: flex;
+      flex-direction: column;
+    }
+    .hero .description div {
+      margin-top: auto;
+      margin-bottom: 1.0em;
+      font-size: 28px;
     }
   }
 
@@ -90,12 +98,19 @@ indexPage: true
     }
   }
 
+  .tags {
+    font-family: Xecut;
+    font-size: calc(3.2 * var(--step));
+  }
 </style>
 
 <div class="hero">
   <div class="description">
     <h1>Hackspace</h1>
-    <strong>Место силы</strong> для заинтересованных в современных&nbsp;(и&nbsp;не&nbsp;очень) технологиях.
+    <p class="tags">
+      FPGA, Information Security, Engineering, DIY, Embedded,
+      Reverse Engineering, Wireless, IoT, Open-Source, AI/ML, LLM.
+    </p>
   </div>
   <div class="tower-wrap">
     <img class="tower" src="/_assets/img/tower/tower_logo.svg">
@@ -110,17 +125,19 @@ indexPage: true
 <!--<p>
   Цель хакерспейса - .
 </p>-->
+
+  <!--<p>
+  Наши текущие направления: <br>
+  </p>-->
+    <div>
+      <strong>Место силы</strong> для заинтересованных в современных&nbsp;(и&nbsp;не&nbsp;очень) технологиях.
+    </div>
   <p>
     Мы&nbsp;собираемся, чтобы делиться опытом,
     реализовывать идеи на&nbsp;практике и&nbsp;общаться.
   </p>
   <p>
-  Наши текущие направления: <br>
+    Посетить хакспейс можно во время мероприятий или предварительно написав нам в <a>Чат</a>.
-  FPGA, information security, engineering, DIY, embedded,
-reverse engineering, wireless, IoT, open-source, AI/ML, LLM
-  </p>
-  <p>
-  Посетить хакспейс можно во время мероприятий или предварительно написав нам в <a>Чат</a>.
   </p>
 <!--  <p>
   Поддержать развитие хакспейса можно оставив донат