Update documentation

stepanzh · Feb 15, 2024 · 664f400 · 664f400
1 parent 4237ce8
commit 664f400
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 22 deletions.
diff --git a/css/base.css b/css/base.css
@@ -21,6 +21,7 @@
 
   --corner-radius: 8px;
   --corner-radius-half: 4px;
+  --corner-radius-surface: 12px;
 
   --icon-line-thickness: 2px;
   --icon-line-length: 60%;
@@ -37,7 +38,7 @@ h2 { font-size: var(--font-h2-size); }
 
 body {
   font-family: Inter, sans-serif;
-  background: white;
+  background: var(--ui-gray-m1-color);
   padding: 0;
   margin: 0;
 }
@@ -114,3 +115,70 @@ a { color: var(--ui-accent-color); }
   color: var(--ui-gray-3-color);
   margin: 8px 0;
 }
+
+.surface {
+  background-color: white;
+  padding: 12px;
+  border-radius: var(--corner-radius-surface);
+  box-sizing: border-box;
+}
+
+.surface.top-tight {
+  border-radius: 0 0 var(--corner-radius-surface) var(--corner-radius-surface);
+}
+
+.surface.full-width { width: 100%; }
+
+.page-content {
+  margin: 12px;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Header home button */
+
+.home-button {
+  text-decoration: none;
+}
+
+.proportio-logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.logo-img {
+  height: 52px;
+  width: 52px;
+}
+
+.logo-text {
+  font-family: "Montserrat Alternates", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+
+  color: var(--text-body-color);
+  font-size: 32px;
+}
+
+/* Nav */
+
+.nav {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.nav-item {
+  padding: 2px 0;
+  text-decoration: none;
+  color: var(--text-accent-color);
+  font-size: 16px;
+}
+
+.nav-item:hover { color: var(--ui-accent-color); }
diff --git a/css/index.css b/css/index.css
@@ -1,3 +1,5 @@
+body { background-color: white; }
+
 #app {
   max-width: 600px;
   margin: 16px auto;

diff --git a/css/promo.css b/css/promo.css
@@ -1,17 +1,24 @@
-#shell
-{
-  padding: 0 16px 16px 16px;
+.page {
+  max-width: 600px;
+  margin: 0 auto;
+}
 
+.page-content {
   display: flex;
   flex-direction: column;
   align-items: center;
+}
 
+/* Здесь всего один блок. */
+.content-block {
   max-width: 400px;
-  margin: 0 auto;
 }
 
-#promo
-{
-  border-radius: 0 0 16px 16px;
-  width: 100%;
+.content-block p {
+  margin-bottom: 0;
+}
+
+.promo-img {
+  border-radius: 16px;
+  max-width: 100%;
 }
diff --git a/examples.html b/examples.html
@@ -40,8 +40,10 @@
   <title>Примеры рецептов &#8212; Пропорцио</title>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
-  <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap'); </style>
+  <style>
+   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
+   @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap');
+  </style>
 
   <!-- Style -->
   <link rel="stylesheet" href="css/base.css">

diff --git a/index.html b/index.html
@@ -40,8 +40,10 @@
   <title>Пересчитать рецепт &#8212; Пропорцио</title>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
-  <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap'); </style>
+  <style>
+   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
+   @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap');
+  </style>
 
   <!-- Style -->
   <link rel="stylesheet" href="css/base.css">
@@ -148,7 +150,7 @@
           <header>Помощь проекту</header>
           <!-- Help by donation -->
           <div class="app-menu-item">
-            <a href="https://www.tinkoff.ru/cf/7T9naweBKz8" target="_blank">
+            <a href="https://pay.cloudtips.ru/p/01aa1961" target="_blank">
               <span class="app-menu-item__icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
   <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
 </svg></span>

diff --git a/promo.html b/promo.html
@@ -40,8 +40,10 @@
   <title>Подарки &#8212; Пропорцио</title>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
-  <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap'); </style>
+  <style>
+   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
+   @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap');
+  </style>
 
   <!-- Style -->
   <link rel="stylesheet" href="css/base.css">
@@ -58,12 +60,32 @@
 </head>
 <body>
 
-  <div id="shell">
-    <image id="promo" src="promo.jpg" alt="чистая линия промокод скидка SML766278"/>
-    <p class="caption">Мы не всегда успеваем обновлять промокод на подарок, а вот промокод на скидку SML766278 работает всегда!</p>
-    <a class="default-button" href="https://omoloko.ru/" target="_blank">Интернет-магазин «Чистая Линия»</a>
-    <a class="default-button" href="https://vk.com/@proportioapp-usloviya-akcii-ot-chistoi-linii" target="_blank">Почему мы делимся промокодами?</a>
-    <a class="default-button" href="index.html">Вернуться в Пропорцио</a>
+  <div class='page'>
+    <div class='page-top surface top-tight full-width'>
+      <header class='header'>
+        <a class='home-button' href='index.html'>
+          <span class='proportio-logo'>
+            <img class='logo-img' src='icon.svg' alt='логотип пропорцио'>
+            <span class='logo-text'>Пропорцио</span>
+          </span>
+        </a>
+      </header>
+      <nav class='nav'>
+        <a class='nav-item' href='index.html'>Приложение</a>
+        <a class='nav-item' href='promo.html'>Подарки</a>
+        <a class='nav-item' href='examples.html'>Рецепты</a>
+        <a class='nav-item' href='https://pay.cloudtips.ru/p/01aa1961' target='_blank'>Задонатить</a>
+      </nav>
+    </div>
+
+    <div class='page-content'>
+      <section class='content-block surface'>
+        <image class='promo-img' src="promo.jpg" alt="чистая линия промокод скидка SML766278"/>
+        <p class="caption">Мы не всегда успеваем обновлять промокод на подарок, а вот промокод на скидку SML766278 работает всегда!</p>
+        <p><a class="" href="https://omoloko.ru/" target="_blank">Интернет-магазин «Чистая Линия»</a></p>
+        <p><a class="" href="https://vk.com/@proportioapp-usloviya-akcii-ot-chistoi-linii" target="_blank">Почему мы делимся промокодами?</a></p>
+      </section>
+    </div>
   </div>
 
 </body>