Update documentation

stepanzh · Feb 15, 2024 · 3faa779 · 3faa779
1 parent 664f400
commit 3faa779
Show file tree

Hide file tree

Showing 5 changed files with 211 additions and 189 deletions.
diff --git a/css/base.css b/css/base.css
@@ -129,10 +129,24 @@ a { color: var(--ui-accent-color); }
 
 .surface.full-width { width: 100%; }
 
+.page-top-content {
+  max-width: 960px;
+  margin: 0 auto;
+}
+
 .page-content {
-  margin: 12px;
+  max-width: 960px;
+  margin: 12px auto;
 }
 
+/* Switch to a minimum margin when screen is small. */
+@media only screen and (max-width: 960px){
+  .page-content { margin: 12px; }
+}
+
+.content-block > :first-child { margin-top: 0; }
+.content-block > :last-child { margin-bottom: 0; }
+
 .header {
   display: flex;
   flex-direction: row;

diff --git a/css/examples.css b/css/examples.css
@@ -1,34 +1,10 @@
-#examples
-{
+.recipes-list {
   display: grid;
-  row-gap: 16px;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-top: 12px;
 }
 
-section
-{
-  display: grid;
-  row-gap: 8px;
-}
-
-section:last-child
-{
-  margin-bottom: 0;
-}
-
-section *
-{
-  margin: 0;
-  padding: 0;
-}
-
-#shell
-{
-  max-width: 600px;
-  margin: 16px auto;
-}
-
-@media only screen and (max-width: 600px){
-  #shell {
-    margin: 16px;
-  }
+@media only screen and (max-width: 700px){
+  .recipes-list { grid-template-columns: 1fr; }
 }
diff --git a/css/promo.css b/css/promo.css
@@ -1,8 +1,3 @@
-.page {
-  max-width: 600px;
-  margin: 0 auto;
-}
-
 .page-content {
   display: flex;
   flex-direction: column;

diff --git a/examples.html b/examples.html
@@ -60,139 +60,169 @@
 </head>
 <body>
 
-  <div id="shell">
-    <h1>Примеры рецептов &#8212; Пропорцио</h1>
-    <p>Выберите пример (рецепт) из списка, загрузите на компьютер или телефон и импортируйте в <a href="index.html" target="_blank">Пропорцио</a>.</p>
-    <div id="examples">
-
-        <section>
-          <h2>Инвестиции &#8212; агрессивный портфель на 2023 год</h2>
-
-          <p>
-            <span>Источник: </span>
-
-              Тинькофф Инвестиции, <a href="https://www.tinkoff.ru/invest/research/strategy/2022-december/" target="_blank">ссылка</a>.
-
-          </p>
-
-          <p>Размер портфеля, облигации usd/cny, облигации rub, зарубежные акции, российские акции, золото, наличные средства.</p>
-          <div class="default-button command-download" data-href="example_recipes/Инвестиции - агрессивный портфель.json">Скачать</div>
-        </section>
-
-        <section>
-          <h2>Инвестиции &#8212; консервативный портфель на 2023 год</h2>
-
-          <p>
-            <span>Источник: </span>
-
-              Тинькофф Инвестиции, <a href="https://www.tinkoff.ru/invest/research/strategy/2022-december/" target="_blank">ссылка</a>.
-
-          </p>
-
-          <p>Размер портфеля, облигации usd/cny, облигации rub, зарубежные акции, российские акции, золото, наличные средства.</p>
-          <div class="default-button command-download" data-href="example_recipes/Инвестиции - консервативный портфель.json">Скачать</div>
-        </section>
-
-        <section>
-          <h2>Инвестиции &#8212; сбалансированный портфель на 2023 год</h2>
-
-          <p>
-            <span>Источник: </span>
-
-              Тинькофф Инвестиции, <a href="https://www.tinkoff.ru/invest/research/strategy/2022-december/" target="_blank">ссылка</a>.
-
-          </p>
-
-          <p>Размер портфеля, облигации usd/cny, облигации rub, зарубежные акции, российские акции, золото, наличные средства.</p>
-          <div class="default-button command-download" data-href="example_recipes/Инвестиции - сбалансированный портфель.json">Скачать</div>
-        </section>
-
-        <section>
-          <h2>Лимонад</h2>
-
-          <p>
-            <span>Источник: </span>
-
-              Borsch, <a href="https://youtu.be/d-wwvL1BOXs" target="_blank">ссылка</a>.
-
-          </p>
-
-          <p>Объём лимонада, газированная вода, сахар, лимон (средний), мята.</p>
-          <div class="default-button command-download" data-href="example_recipes/Лимонад.json">Скачать</div>
-        </section>
-
-        <section>
-          <h2>Паста алла грича</h2>
-
-          <p>
-            <span>Источник: </span>
-
-              Marco Cervetti, <a href="https://youtu.be/xOT80siP1v8" target="_blank">ссылка</a>.
-
-          </p>
-
-          <p>Порция, паста, жирная копчёная грудинка, чёрный перец, сыр (пекорино, пармезан).</p>
-          <div class="default-button command-download" data-href="example_recipes/Паста алла грича.json">Скачать</div>
-        </section>
-
-        <section>
-          <h2>Паста аль помодорро</h2>
-
-          <p>
-            <span>Источник: </span>
-
-              Пропорцио.
-
-          </p>
-
-          <p>Порция, спагетти, томаты (среднего размера), чеснок, травы (базилик или кинза), соль, сахар (если томаты кислые), кетчуп (если томаты кислые).</p>
-          <div class="default-button command-download" data-href="example_recipes/Паста помодорро.json">Скачать</div>
-        </section>
-
-        <section>
-          <h2>Тесто для пиццы</h2>
-
-          <p>
-            <span>Источник: </span>
-
-              Borsch, <a href="https://youtu.be/wIJUqI8xDKE" target="_blank">ссылка</a>.
-
-          </p>
-
-          <p>Тесто для пиццы, мука, манная крупа, дрожжи, сахар, соль, масло оливковое, вода тёплая.</p>
-          <div class="default-button command-download" data-href="example_recipes/Тесто для пиццы.json">Скачать</div>
-        </section>
-
-        <section>
-          <h2>Тесто на оладьи</h2>
-
-          <p>
-            <span>Источник: </span>
-
-              Borsch, <a href="https://youtu.be/14Q6O4ADt8g" target="_blank">ссылка</a>.
-
-          </p>
-
-          <p>Мука, молоко, яйцо, сахар, соль, разрыхлитель, масло подсолнечное.</p>
-          <div class="default-button command-download" data-href="example_recipes/Тесто на оладьи.json">Скачать</div>
-        </section>
-
-        <section>
-          <h2>Чихиртрамен (куриный суп с лапшой)</h2>
-
-          <p>
-            <span>Источник: </span>
-
-              CHEF MARAT, <a href="https://youtu.be/1u8sFwbBPuA" target="_blank">ссылка</a>.
-
-          </p>
-
-          <p>Цыплёнок, лук репчатый, чеснок, сливочное масло, вода, соевый соус, чёрный перец, соль, мука, яйцо, манка.</p>
-          <div class="default-button command-download" data-href="example_recipes/Чихиртрамён.json">Скачать</div>
-        </section>
+  <div class='page'>
+
+    <div class='page-top surface top-tight full-width'>
+      <div class='page-top-content'>
+        <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>
+
+
+    <div class='page-content'>
+
+<header class='content-block surface full-width'>
+  <h1>Примеры рецептов</h1>
+  <p>Здесь идеи применения Пропорцио, которые пришли нам в голову.</p>
+  <p>Вы можете просмотреть рецепт и сохранить файл для импорта в Пропорцио.</p>
+</header>
+
+<div class='recipes-list'>
+
+  <section class='content-block surface'>
+    <h2>Инвестиции &#8212; агрессивный портфель на 2023 год</h2>
+
+    <p>
+      <span>Источник: </span>
+
+        Тинькофф Инвестиции, <a href="https://www.tinkoff.ru/invest/research/strategy/2022-december/" target="_blank">ссылка</a>.
+
+    </p>
+
+    <p>Размер портфеля, облигации usd/cny, облигации rub, зарубежные акции, российские акции, золото, наличные средства.</p>
+    <div class="default-button command-download" data-href="example_recipes/Инвестиции - агрессивный портфель.json">Скачать</div>
+  </section>
+
+  <section class='content-block surface'>
+    <h2>Инвестиции &#8212; консервативный портфель на 2023 год</h2>
+
+    <p>
+      <span>Источник: </span>
+
+        Тинькофф Инвестиции, <a href="https://www.tinkoff.ru/invest/research/strategy/2022-december/" target="_blank">ссылка</a>.
+
+    </p>
+
+    <p>Размер портфеля, облигации usd/cny, облигации rub, зарубежные акции, российские акции, золото, наличные средства.</p>
+    <div class="default-button command-download" data-href="example_recipes/Инвестиции - консервативный портфель.json">Скачать</div>
+  </section>
+
+  <section class='content-block surface'>
+    <h2>Инвестиции &#8212; сбалансированный портфель на 2023 год</h2>
+
+    <p>
+      <span>Источник: </span>
+
+        Тинькофф Инвестиции, <a href="https://www.tinkoff.ru/invest/research/strategy/2022-december/" target="_blank">ссылка</a>.
+
+    </p>
+
+    <p>Размер портфеля, облигации usd/cny, облигации rub, зарубежные акции, российские акции, золото, наличные средства.</p>
+    <div class="default-button command-download" data-href="example_recipes/Инвестиции - сбалансированный портфель.json">Скачать</div>
+  </section>
+
+  <section class='content-block surface'>
+    <h2>Лимонад</h2>
+
+    <p>
+      <span>Источник: </span>
+
+        Borsch, <a href="https://youtu.be/d-wwvL1BOXs" target="_blank">ссылка</a>.
+
+    </p>
+
+    <p>Объём лимонада, газированная вода, сахар, лимон (средний), мята.</p>
+    <div class="default-button command-download" data-href="example_recipes/Лимонад.json">Скачать</div>
+  </section>
+
+  <section class='content-block surface'>
+    <h2>Паста алла грича</h2>
+
+    <p>
+      <span>Источник: </span>
+
+        Marco Cervetti, <a href="https://youtu.be/xOT80siP1v8" target="_blank">ссылка</a>.
 
+    </p>
+
+    <p>Порция, паста, жирная копчёная грудинка, чёрный перец, сыр (пекорино, пармезан).</p>
+    <div class="default-button command-download" data-href="example_recipes/Паста алла грича.json">Скачать</div>
+  </section>
+
+  <section class='content-block surface'>
+    <h2>Паста аль помодорро</h2>
+
+    <p>
+      <span>Источник: </span>
+
+        Пропорцио.
+
+    </p>
+
+    <p>Порция, спагетти, томаты (среднего размера), чеснок, травы (базилик или кинза), соль, сахар (если томаты кислые), кетчуп (если томаты кислые).</p>
+    <div class="default-button command-download" data-href="example_recipes/Паста помодорро.json">Скачать</div>
+  </section>
+
+  <section class='content-block surface'>
+    <h2>Тесто для пиццы</h2>
+
+    <p>
+      <span>Источник: </span>
+
+        Borsch, <a href="https://youtu.be/wIJUqI8xDKE" target="_blank">ссылка</a>.
+
+    </p>
+
+    <p>Тесто для пиццы, мука, манная крупа, дрожжи, сахар, соль, масло оливковое, вода тёплая.</p>
+    <div class="default-button command-download" data-href="example_recipes/Тесто для пиццы.json">Скачать</div>
+  </section>
+
+  <section class='content-block surface'>
+    <h2>Тесто на оладьи</h2>
+
+    <p>
+      <span>Источник: </span>
+
+        Borsch, <a href="https://youtu.be/14Q6O4ADt8g" target="_blank">ссылка</a>.
+
+    </p>
+
+    <p>Мука, молоко, яйцо, сахар, соль, разрыхлитель, масло подсолнечное.</p>
+    <div class="default-button command-download" data-href="example_recipes/Тесто на оладьи.json">Скачать</div>
+  </section>
+
+  <section class='content-block surface'>
+    <h2>Чихиртрамен (куриный суп с лапшой)</h2>
+
+    <p>
+      <span>Источник: </span>
+
+        CHEF MARAT, <a href="https://youtu.be/1u8sFwbBPuA" target="_blank">ссылка</a>.
+
+    </p>
+
+    <p>Цыплёнок, лук репчатый, чеснок, сливочное масло, вода, соевый соус, чёрный перец, соль, мука, яйцо, манка.</p>
+    <div class="default-button command-download" data-href="example_recipes/Чихиртрамён.json">Скачать</div>
+  </section>
+
+</div>
+
+<script type="text/javascript" src="js/examples.js"></script>
+
     </div>
   </div>
-  <script type="text/javascript" src="js/examples.js"></script>
-
+
 </body>