feat: update styles of recipes page

Closes #47
stepanzh · Feb 15, 2024 · a6004fe · a6004fe
1 parent 0cb3bfd
commit a6004fe
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 47 deletions.
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/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 %}