Repository: itmo-kulibin/kulibin-first
Pull request #33: Main Page
Author: login: ksvluc
Created: 2025-03-30T21:58:20Z | Merged: 2025-04-07T20:01:42Z

Единственный момент с margin не получилось нормально растянуть портрет, иначе Navigation упирался бы в края


Diff:
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fa17b22..6b3905d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1 +1,106 @@
-<h1>Welcome to SvelteKit</h1>
+<script>
+    import Navigation from '$lib/components/Navigation.svelte';
+</script>
+
+<main class="main-content">
+    <div class="main">
+        <div class="portrait-container">
+            <img src="/images/portrait.png" alt="Портрет Иван Петрович Кулибин" class="portrait" />
+            <div class="name-overlay">
+                <h2>Иван Петрович Кулибин</h2>
+            </div>
+        </div>
+        <p class="bio-text">
+            Гений-самоучка, опередивший своё время, — Иван Кулибин создавал удивительные механизмы, которые могли бы изменить мир. Узнайте, как изобретатель без академического образования стал символом русской инженерной мысли!
+        </p>
+    </div>
+    <div class="nav">
+        <Navigation />
+    </div>
+</main>
+
+<style>
+    .main-content {
+        margin: 0 auto;
+        text-align: center;
+        background: #000957;
+        color: #fff2f2;
+        padding: 20px;
+    }
+    .nav{
+        margin: 0 auto;
+        max-width: 600px;
+    }
+    
+    .main {
+        margin-left: -20px;
+        margin-right: -20px;
+    }
+    @media (max-width: 700px) {
+        h1 {
+            margin-left: 15px;
+        }
+        .bio-text {
+            padding: 10px 15px;
+            font-size: 15px;
+        }
+    }
+
+    .portrait-container {
+        position: relative;
+        width: 400px;
+        height: 600px;
+        margin: 0 auto 30px auto;
+        overflow: hidden;
+        box-shadow: 0 0px 20px #00095700;
+    }
+    .bio-text {
+        font-size: 20px;
+        max-width: 100%;
+        margin-bottom: 20px;
+        padding: 20px;
+    }
+    h2 {
+        font-size: 42px;
+        font-weight: 600;
+        margin: 0;
+    }
+    .portrait {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .name-overlay {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 60%;
+        background: linear-gradient(180deg, #00095700, #000957);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-end;
+        box-sizing: border-box;
+        padding: 10px
+    }
+
+    @media (max-width: 700px) {
+        .portrait-container {
+            width: 100%;
+            height: auto;
+        }
+        
+        .portrait {
+            width: 100%;
+            height: auto;
+            aspect-ratio: 3/4;
+        }
+        
+        .name-overlay {
+            height: 50%;
+        }
+    }
+
+</style>
diff --git a/static/Images/portrait.png b/static/Images/portrait.png
new file mode 100644
index 0000000..51728a6
Binary files /dev/null and b/static/Images/portrait.png differ


Reviews:
user: login: SemyonHoyrish
body: Задача была сверстать страницу, не компонент.

Насчет `@media`- запросов, они не обязательны, для компов всё равно будет специальный просмотрщик. Но можете оставить.

Стоит всё-таки попробовать разместить картинку в стык к краям экрана.
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-04-02T13:31:48Z
user: login: unbanan
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-03T11:27:54Z
user: login: ksvluc
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-03T12:18:54Z

Review comments:
diff_hunk: @@ -0,0 +1,102 @@
+<script>
+    export let name = "Иван Петрович Кулибин";
+    export let imageSrc = "/Images/portrait.png";
+</script>
+<nav class="navbar">
+        <h1>Кулибин</h1>
+        <svg class="menu-icon" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path stroke-width="2" stroke-linecap="round" d="M3 12h18M3 6h18M3 18h18"/>
+        </svg>
+    </nav>
path: src/lib/components/MainPage.svelte
user: login: SemyonHoyrish
body: Нужно убрать, header находиться в layout и рендерится автоматически для всех страниц
created_at: 2025-04-02T13:18:20Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,102 @@
+<script>
+    export let name = "Иван Петрович Кулибин";
+    export let imageSrc = "/Images/portrait.png";
+</script>
+<nav class="navbar">
+        <h1>Кулибин</h1>
+        <svg class="menu-icon" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path stroke-width="2" stroke-linecap="round" d="M3 12h18M3 6h18M3 18h18"/>
+        </svg>
+    </nav>
+<div class="portrait-container">
+    <img src={imageSrc} alt="Портрет {name}" class="portrait" />
+    <div class="name-overlay">
+        <h2>{name}</h2>
+    </div>
+</div>
+<p class="bio-text">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+</p>
+
+<style>
+    .portrait-container {
+        position: relative;
+        width: 400px;
+        height: 600px;
+        margin: 0 auto 30px auto;
+        overflow: hidden;
+        box-shadow: 0 0px 20px #00095700;
+    }
+    .bio-text {
+        font-size: 20px;
+        max-width: 100%;
+        margin-bottom: 20px;
+    }
+        h2 {
+        font-family: 'Montserrat', sans-serif;
path: src/lib/components/MainPage.svelte
user: login: SemyonHoyrish
body: Шрифт будет установлен глобально
created_at: 2025-04-02T13:22:03Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,102 @@
+<script>
+    export let name = "Иван Петрович Кулибин";
+    export let imageSrc = "/Images/portrait.png";
+</script>
+<nav class="navbar">
+        <h1>Кулибин</h1>
+        <svg class="menu-icon" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path stroke-width="2" stroke-linecap="round" d="M3 12h18M3 6h18M3 18h18"/>
+        </svg>
+    </nav>
+<div class="portrait-container">
+    <img src={imageSrc} alt="Портрет {name}" class="portrait" />
+    <div class="name-overlay">
+        <h2>{name}</h2>
+    </div>
+</div>
+<p class="bio-text">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+</p>
+
+<style>
+    .portrait-container {
+        position: relative;
+        width: 400px;
+        height: 600px;
+        margin: 0 auto 30px auto;
+        overflow: hidden;
+        box-shadow: 0 0px 20px #00095700;
+    }
+    .bio-text {
+        font-size: 20px;
+        max-width: 100%;
+        margin-bottom: 20px;
+    }
+        h2 {
+        font-family: 'Montserrat', sans-serif;
+        font-size: 42px;
+        font-weight: 600;
+        margin: 0;
+    }
+    .portrait {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .name-overlay {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 60%;
+        background: linear-gradient(180deg, #00095700, #000957);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-end;
+        box-sizing: border-box;
+    }
+    
+    .navbar {
+        display: flex;
+        justify-content: space-between;
+        background-color: #000957;
+        color: white;
+    }
+
+    .menu-icon {
+        cursor: pointer;
+        margin-top: 10px;
+        margin-right: 10px;
+    }
+    
+    h1 {
+        font-family: 'Montserrat', sans-serif;
path: src/lib/components/MainPage.svelte
user: login: SemyonHoyrish
body: аналогично
created_at: 2025-04-02T13:22:13Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,40 @@
+<script>
+    import MainPage from '$lib/components/MainPage.svelte';
+    import Navigation from '$lib/components/Navigation.svelte';
+</script>
+
+<main class="main-content">
+    
+    <MainPage />
+    
+    <Navigation />
+</main>
+
+<style>
+    body {
+        font-family: 'PT Sans', sans-serif;
path: src/routes/__components-demo/main/+page.svelte
user: login: SemyonHoyrish
body: также шрифт
created_at: 2025-04-02T13:22:22Z
author_association: MEMBER
diff_hunk: @@ -1 +1,40 @@
-<h1>Welcome to SvelteKit</h1>
+<script>
+    import MainPage from '$lib/components/MainPage.svelte';
+    import Navigation from '$lib/components/Navigation.svelte';
+</script>
+
+<main class="main-content">
+    <div class = "main">
+    <MainPage />
+    </div>
+    <div class = "nav">
+    <Navigation />
+    </div>
+</main>
+
+<style>
+
+    .main-content {
+        max-width: 1205px;
path: src/routes/+page.svelte
user: login: unbanan
body: А почему только 1205? Просто на широких устройствах как-то странно выглядит, что слева и справа белые полосы появляются.
created_at: 2025-04-03T11:27:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1 +1,40 @@
-<h1>Welcome to SvelteKit</h1>
+<script>
+    import MainPage from '$lib/components/MainPage.svelte';
+    import Navigation from '$lib/components/Navigation.svelte';
+</script>
+
+<main class="main-content">
+    <div class = "main">
+    <MainPage />
+    </div>
+    <div class = "nav">
+    <Navigation />
+    </div>
+</main>
+
+<style>
+
+    .main-content {
+        max-width: 1205px;
path: src/routes/+page.svelte
user: login: ksvluc
body: Делал просто под планшеты, но согласен, лучше поставить больше на всякий


created_at: 2025-04-03T12:18:54Z
author_association: CONTRIBUTOR

PR comments:
user: login: ksvluc
created_at: 2025-04-02T16:49:09Z
body: > Задача была сверстать страницу, не компонент.

То есть правильно понимаю, что надо не в src/lib/components сохранять, а просто в src/? Или надо из routes/__components-demo перенести в routes/ в +page.svelte?
author_association: CONTRIBUTOR
user: login: unbanan
created_at: 2025-04-03T11:30:23Z
body: @SemyonHoyrish а желтым цветом только лифт выделяется или то на что наводятся/нажимают?
author_association: CONTRIBUTOR
user: login: unbanan
created_at: 2025-04-04T16:47:05Z
body: Кнопки на широких экранах во всю длину странно смотрятся. А так вроде классно выглядит. Кстати @SemyonHoyrish  какой текст будет тут вместо шаблонного? 
author_association: CONTRIBUTOR
user: login: SemyonHoyrish
created_at: 2025-04-05T18:18:04Z
body: > @SemyonHoyrish а желтым цветом только лифт выделяется или то на что наводятся/нажимают?

только лифт
author_association: MEMBER
user: login: SemyonHoyrish
created_at: 2025-04-05T18:18:21Z
body: > Кнопки на широких экранах во всю длину странно смотрятся. А так вроде классно выглядит. Кстати @SemyonHoyrish какой текст будет тут вместо шаблонного?

пока его нет
author_association: MEMBER