Merge pull request #48 from stepanzh/47-update-styles-on-recipes-page

47 update styles on recipes page
stepanzh · Feb 15, 2024 · f88f3e2 · f88f3e2
2 parents 27f2fc0 + a6004fe
commit f88f3e2
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 67 deletions.
diff --git a/static/css/base.css b/static/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/static/css/examples.css b/static/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/static/css/promo.css b/static/css/promo.css
@@ -1,8 +1,3 @@
-.page {
-  max-width: 600px;
-  margin: 0 auto;
-}
-
 .page-content {
   display: flex;
   flex-direction: column;

diff --git a/templates/base.html b/templates/base.html
@@ -73,20 +73,22 @@
   <div class='page'>
     {% block page_top %}
     <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='{{ links.payment }}' target='_blank'>Задонатить</a>
-      </nav>
+      <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='{{ links.payment }}' target='_blank'>Задонатить</a>
+        </nav>
+      </div>
     </div>
     {% endblock %}
 

diff --git a/templates/examples.html b/templates/examples.html
@@ -7,26 +7,31 @@
 {% block pagecss %}<link rel="stylesheet" href="css/examples.css">{% endblock %}
 
 {% block page_content %}
-<h1>Примеры рецептов {{ longdash }} Пропорцио</h1>
-<p>Выберите пример (рецепт) из списка, загрузите на компьютер или телефон и импортируйте в <a href="index.html" target="_blank">Пропорцио</a>.</p>
-<div id="examples">
+<header class='content-block surface full-width'>
+  <h1>Примеры рецептов</h1>
+  <p>Здесь идеи применения Пропорцио, которые пришли нам в голову.</p>
+  <p>Вы можете просмотреть рецепт и сохранить файл для импорта в Пропорцио.</p>
+</header>
+
+<div class='recipes-list'>
   {% for example in recipe_examples %}
-    <section>
-      <h2>{{ example.title }}</h2>
-      {% if not example.credits.is_empty %}
-      <p>
-        <span>Источник: </span>
-        {% if example.credits.author %}
-          {{ example.credits.author }}{% if example.credits.recipe_url %}, <a href="{{ example.credits.recipe_url }}" target="_blank">ссылка</a>{% endif %}.
-        {% else %}
-           <a href="{{ example.credits.recipe_url }}" target="_blank">ссылка</a>.
-        {% endif %}
-      </p>
+  <section class='content-block surface'>
+    <h2>{{ example.title }}</h2>
+    {% if not example.credits.is_empty %}
+    <p>
+      <span>Источник: </span>
+      {% if example.credits.author %}
+        {{ example.credits.author }}{% if example.credits.recipe_url %}, <a href="{{ example.credits.recipe_url }}" target="_blank">ссылка</a>{% endif %}.
+      {% else %}
+         <a href="{{ example.credits.recipe_url }}" target="_blank">ссылка</a>.
       {% endif %}
-      <p>{{ example.ingredients_as_string }}.</p>
-      <div class="default-button command-download" data-href="{{ example.relative_url }}">Скачать</div>
-    </section>
+    </p>
+    {% endif %}
+    <p>{{ example.ingredients_as_string }}.</p>
+    <div class="default-button command-download" data-href="{{ example.relative_url }}">Скачать</div>
+  </section>
   {% endfor %}
 </div>
+
 <script type="text/javascript" src="js/examples.js"></script>
 {% endblock %}