index: en: yet another dirty one

src/_assets/css/base.css

@@ -61,6 +61,7 @@ h1 {
 }
 @media (max-width: 768px) {
   h1 {
+    font-size: calc(7 * var(--step));
     margin-block-end: calc(3 * var(--step));
   }
 }

src/_assets/css/layout.css

@@ -1,6 +1,7 @@
 .default-layout {
   box-sizing: border-box;
   height: 100%;
+  min-width: 300px;
   display: flex;
   flex-direction: row;
 }
@@ -11,7 +12,7 @@
 }
 @media (min-width: 1610px) {
   .default-layout {
-    width: 1366px;
+    width: 1201px;
     margin: 0 auto;
   }
 }

src/_assets/css/menu.css

@@ -29,6 +29,7 @@ header.menu {
     padding: 0;
 
     border-block-end: calc(0.5 * var(--step)) solid var(--color-fg);
+    border-block-start: calc(0.5 * var(--step)) solid var(--color-fg);
     background-color: var(--color-bg);
   }
 }

src/en/index.html

@@ -6,59 +6,63 @@ indexPage: true
 <style>
 .tower {
   width: calc(18 * var(--step));
-  margin-inline: calc(4 * var(--step));
+  margin: calc(4 * var(--step));
-  margin-block: calc(4 * var(--step));
 }
 @media (prefers-color-scheme: dark) {
   .tower {
     filter: invert(1);
   }
 }
+@media (max-width: 500px) {
+  .tower {
+    max-width: calc(10 * var(--step));
+    margin: calc(1 * var(--step));
+  }
+}
 </style>
 <style>
 .hero {
   position: relative;
+
   display: flex;
-  flex-direction: row-reverse;
+  flex-direction: row;
   align-items: flex-start;
 
+  padding: calc(0.5 * var(--step));
   --hero-border: calc(0.5 * var(--step)) solid var(--color-inactive);
 
   font-family: Xecut;
   font-size: calc(3 * var(--step));
 }
-
+@media (max-width: 500px) {
-.hero:before {
+  .hero {
-  content: '';
+    align-items: normal;
-
+    flex-direction: row-reverse;
-  position: absolute;
+    font-size: calc(2 * var(--step));
-  z-index: -1;
+  }
-
-  bottom: calc(1 * var(--step));
-  left: 0;
-
-  height: calc(1 * var(--step));
-  border-right: var(--hero-border);
-
-  width: 100%;
-  border-bottom: var(--hero-border);
-
 }
+
+.hero:before,
 .hero:after {
   content: '';
 
   position: absolute;
+  right: 0;
   z-index: -1;
 
-  top: 0;
+  width: 90%;
-  left: 0;
-
   height: calc(1 * var(--step));
   border-right: var(--hero-border);
-
+  border-left: var(--hero-border);
-  width: 100%;
+}
+.hero:before {
+  top: calc(0.5 * var(--step));
   border-top: var(--hero-border);
 }
+.hero:after {
+  bottom: calc(1 * var(--step));
+  border-bottom: var(--hero-border);
+}
 
 .tags {
   display: flex;
@@ -68,12 +72,16 @@ indexPage: true
 }
 
 .tag {
-  /* flex-grow: 1; */
   padding: calc(0.25 * var(--step)) calc(1.5 * var(--step));
   border: var(--hero-border);
   outline: var(--hero-border);
   background: var(--color-bg);
 }
+@media (max-width: 500px) {
+  .tag {
+    flex-grow: 1;
+  }
+}
 
 .tower_cell {
   box-sizing: border-box;
@@ -84,6 +92,11 @@ indexPage: true
   outline: var(--hero-border);
   background: var(--color-bg);
 }
+@media (max-width: 500px) {
+  .tower_cell {
+    align-items: flex-end;
+  }
+}
 </style>
 
 <h1>
@@ -91,6 +104,9 @@ indexPage: true
 </h1>
 
 <div class="hero">
+  <div class="tower_cell">
+    <img class="tower" src="/_assets/img/tower/tower_logo.svg">
+  </div>
   <div class="tags">
     <div class="tag">DIY</div>
     <div class="tag">Engineering</div>
@@ -104,20 +120,25 @@ indexPage: true
     <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>
+  <strong>Xecut</strong>&nbsp;&mdash; это <strong>место силы</strong> для заинтересованных в современных&nbsp;(и&nbsp;не&nbsp;очень) технологиях.
   Мы&nbsp;собираемся, чтобы делиться опытом,
   реализовывать идеи на&nbsp;практике и&nbsp;общаться.
 </p>
 <p>
-  Посетить хакспейс можно во время мероприятий или предварительно написав нам в <a>Чат</a>.
+  Посетить хакспейс можно во время <a href="/feed">мероприятий</a> или предварительно написав нам в <a>чат</a>.
 </p>
+
+<h2>
+  Contacts
+</h2>
+<ul>
+  <li>
+    <a target="_blank" href="{{ config.links.channel }}">Telegram: Канал</a>
+  </li>
+  <li>
+    <a target="_blank" href="{{ config.links.chat }}">Telegram: Чат</a>
+  </li>
+</ul>

src/index.html

@@ -0,0 +1 @@
+./en/index.html

src/index.md

@@ -1 +0,0 @@
-./en/index.md