New article: carefree mountain

src/components/Note.astro

@@ -16,5 +16,6 @@ const { date, title, href } = Astro.props
   .note {
     display: flex;
     gap: 6px;
+    margin-bottom: 5px;
   }
 </style>

src/components/NoteMetadata.astro

@@ -9,7 +9,7 @@ const { createdAt, updatedAt } = Astro.props
 
 <div class="metadata">
   <p>Дата создания: { createdAt }</p>
-  <p>Последнее обновление: { updatedAt }</p>
+  { updatedAt !== createdAt && <p>Последнее обновление: { updatedAt }</p> }
 </div>
 
 <style>

src/pages/index.astro

@@ -14,6 +14,11 @@ import Note from '../components/Note.astro'
   </p>
 
   <h2>Заметки</h2>
+  <Note
+    date="16 октября 2023"
+    title="Беспечная Гляденовская гора"
+    href="/notes/carefree-mountain/"
+  />
   <Note
     date="27 августа 2023"
     title="Свободные альтернативы популярным сервисам"

src/pages/notes/carefree-mountain.astro

@@ -0,0 +1,112 @@
+---
+import Layout from '../../layouts/Layout.astro'
+import NoteMetadata from '../../components/NoteMetadata.astro'
+---
+
+<Layout title="Беспечная Гляденовская гора">
+  <h1>Беспечная Гляденовская гора</h1>
+
+  <NoteMetadata createdAt="16 октября 2023" updatedAt="16 октября 2023" />
+
+  <p>
+    Гляденовская гора - это красивый лес в Перми, за которым прячется деревянная часовня.
+    Здесь не будет рассказов про историю горы, ведь я не являюсь ни историком, ни археологом,
+    оставлю это занятие более компетентным людям.
+    Я всего лишь хочу показать вам это место от лица обывателя,
+    и, может быть, это сподвигнет вас отправиться когда-нибудь в небольшое путешествие.
+  </p>
+
+  <img
+    src="/carefree-mountain/1.webp"
+    alt="Фотография поля с видом на пермский аэропорт"
+    class="wideImg"
+    loading="lazy"
+  />
+  <p>
+    Гляденовская гора находится недалеко от пермского аэропорта.
+    Если до него самого добраться не составит большого труда, то дальше придётся идти вдоль дороги, хоть и совсем недолго.
+    Вскоре вы зайдете в лес, тогда идти станет проще и интереснее.
+  </p>
+
+  <p>
+    Теперь, когда мы наконец-то в лесу, где нет проезжающих мимо машин, можно расслабиться.
+    Дальнейший путь представляет из себя череду деревянных ступенек.
+    Спускаться по ним довольно легко, но ещё проще подскользнуться.
+  <p>
+
+  <div class="firstPhotoGroup">
+    <div>
+      <img
+        src="/carefree-mountain/2.webp"
+        alt="Деревянные ступеньки в лесу"
+        loading="lazy"
+      />
+    </div>
+    <div>
+      <img
+        src="/carefree-mountain/3.webp"
+        alt="Белочка"
+        loading="lazy"
+      />
+    </div>
+    <div>
+      <img
+        src="/carefree-mountain/4.webp"
+        alt="Деревянные ступеньки в лесу"
+        loading="lazy"
+      />
+    </div>
+  </div>
+
+  <p>
+    В конце пути нас ожидает деревянная церковь.
+    Теперь можно неспеша осмотреться вокруг.
+    В таких местах почти ничего не просиходит, внешнего мира как будто не существует.
+    Он остался там, за горой, здесь же царит тишина и спокойствие.
+  </p>
+
+  <img
+    src="/carefree-mountain/5.webp"
+    alt="Деревянная церковь в лесу"
+    class="wideImg"
+    loading="lazy"
+  />
+
+  <p><i>Удивительное рядом.</i></p>
+</Layout>
+
+<style>
+  .wideImg {
+    width: 100%;
+  }
+
+  .firstPhotoGroup {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 450px 310px;
+    grid-template-areas:
+      "first first"
+      "second third";
+    gap: 10px;
+  }
+
+  .firstPhotoGroup > div {
+    position: relative;
+  }
+
+  .firstPhotoGroup > div > img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+
+  .firstPhotoGroup > div:nth-child(1) {
+    grid-area: first;
+  }
+  .firstPhotoGroup > div:nth-child(2) {
+    grid-area: second;
+  }
+  .firstPhotoGroup > div:nth-child(3) {
+    grid-area: third;
+  }
+</style>