45 lines
2.2 KiB
HTML
45 lines
2.2 KiB
HTML
{% import "competition/card.html" as card %}
|
|
|
|
{% macro section(competitions) -%}
|
|
<section class="c_cr9xg">
|
|
<div class="c_s7it2">
|
|
<div class="c_fwe1m">
|
|
<h2 class="b_p0hpm">Конкурсы</h2>
|
|
</div>
|
|
</div>
|
|
<div class="c_dbu4q">
|
|
{% for competition in competitions %}
|
|
{{card.section(competition, False, "/competition/{}".format(competition._id))}}
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
{%- endmacro %}
|
|
|
|
{% macro style() -%}
|
|
{{card.style()}}
|
|
<style>/* Base (common) styles */
|
|
.b_p0hpm { color: #5F1798; font-family: Inter; font-size: 42px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; }
|
|
/* Mobile */
|
|
@media (max-width: 699px) {
|
|
.c_dbu4q { align-content: flex-start; align-items: flex-start; align-self: stretch; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
|
|
.c_fwe1m { align-items: center; display: flex; flex-direction: column; gap: 20px; width: 335px; }
|
|
.c_s7it2 { align-items: flex-start; align-self: stretch; display: flex; gap: 20px; justify-content: center; }
|
|
.c_cr9xg { align-items: center; background: #FFF; display: flex; flex-direction: column; gap: 30px; }
|
|
}
|
|
|
|
/* Tablet */
|
|
@media (min-width: 700px) and (max-width: 900px) {
|
|
.c_dbu4q { align-content: flex-start; align-items: flex-start; align-self: stretch; display: flex; flex-wrap: wrap; gap: 20px; }
|
|
.c_fwe1m { align-items: flex-start; display: flex; flex-direction: column; gap: 20px; width: 335px; }
|
|
.c_s7it2 { align-items: flex-start; align-self: stretch; display: flex; gap: 20px; }
|
|
.c_cr9xg { align-items: center; background: #FFF; display: flex; flex-direction: column; gap: 30px; padding-left: 50px; }
|
|
}
|
|
|
|
/* Desktop */
|
|
@media (min-width: 901px) {
|
|
.c_dbu4q { align-content: flex-start; align-items: flex-start; display: flex; flex-wrap: wrap; gap: 20px; width: 100%; }
|
|
.c_fwe1m { align-items: flex-start; display: flex; flex-direction: column; flex-shrink: 0; gap: 20px; width: 335px; }
|
|
.c_s7it2 { align-items: flex-start; display: flex; gap: 20px; width: 100%; }
|
|
.c_cr9xg { align-items: center; background: #FFF; display: flex; flex-direction: column; gap: 30px; padding-left: 100px;}
|
|
}</style>
|
|
{%- endmacro %} |