diff --git a/main/models.py b/main/models.py
index f547cc8dc316d360858c05d89cc09f9cea36b003..9c3d90af93de6ffab16685607e884a13162cdb5a 100644
--- a/main/models.py
+++ b/main/models.py
@@ -212,13 +212,16 @@ class MainWorkPage(ExtendedMetadataPageMixin, SubpageMixin, MetadataPageMixin, P
current_month_data = self.get_empty_month_data(timezone.now().date())
- for idx, article in enumerate(sorted_article_qs):
- if article.date.month != current_month_data["month_text"]:
+ article_counter = 1
+ for article in sorted_article_qs:
+ if article.date.month != current_month_data["month_number"]:
article_data_list.append(current_month_data) # append completed month
current_month_data = self.get_empty_month_data(article.date)
+ article_counter = 1
- current_column = "left_column" if idx % 2 else "right_column"
+ current_column = "left_column" if article_counter % 2 else "right_column"
current_month_data[current_column].append(article)
+ article_counter += 1
article_data_list.append(current_month_data) # last iteration
diff --git a/main/static/main/css/styles.css b/main/static/main/css/styles.css
index c86c1433fd8a79ce0b5d79a1f71dc5d6e6b1d1fa..8d97531730f1a3676840d066611b1c9ea5150bce 100644
--- a/main/static/main/css/styles.css
+++ b/main/static/main/css/styles.css
@@ -1378,7 +1378,9 @@ video {
width: 882px;
}
-.container--medium {
+.container--medium{
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
margin: auto;
max-width: 1300px;
}
@@ -1425,24 +1427,17 @@ video {
max-width: 1150px;
}
-@responsive {
- @media (min-width: 1200px) {
- .grid-container {
- grid-template-columns: 240px 1fr 102px;
- grid-template-areas:
- "left-side content right-side";
- margin-left: 10%
+.grid-container.article-section {
+ max-width: 1400px;
}
- }
-}
.grid-content {
grid-area: content;
}
.grid-full {
- grid-column-start: left-side;;
- grid-column-end: right-side;
+ grid-column: left-side / right-side;
+ grid-row: left-side / right-side;
}
.grid-left-side {
@@ -1454,33 +1449,11 @@ video {
}
.grid-content-with-right-side {
- grid-column-start: content;
- grid-column-end: right-side;
-}
-
-@responsive {
- /* Removes default container padding from the element. */
- /* @note: needs to be kept in sync with tailwind configuration */
- .container-padding--zero {
- margin-left: -1rem;
- margin-right: -1rem;
- }
-
- @media (min-width: 1200px) {
- .container-padding--zero {
- margin-left: -2rem;
- margin-right: -2rem
- }
- }
-
- .container-padding--auto {
- margin-left: 0;
- margin-right: 0;
- }
+ grid-column: content / right-side;
}
.footer-section {
- height: 981px;
+ height: 450px;
}
.person-box-medium {
@@ -1502,7 +1475,7 @@ video {
}
.simple-header-height {
- height: 26rem;
+ height: 13rem;
}
.flag {
@@ -1891,6 +1864,14 @@ video {
max-width: 32rem;
}
+.checkbox label{
+ font-size: .875rem;
+}
+
+.checkbox label{
+ font-weight: 500;
+}
+
.checkbox label{
text-transform: uppercase;
}
@@ -1899,6 +1880,13 @@ video {
line-height: 1.25;
}
+@media (min-width: 1200px){
+
+ .checkbox label{
+ font-size: 1rem;
+ }
+}
+
.checkbox:after{
pointer-events: none;
}
@@ -2085,191 +2073,6 @@ video {
line-height: 1.25;
}
-@responsive {
- .head-alt-xl,
- .content-block .head-alt-xl{
- font-family: Bebas Neue, Helvetica, Arial, sans-serif;
- font-size: 5.3rem;
- font-weight: 400;
- line-height: 0.96;
- }
-
- .head-alt-lg,
- .content-block .head-alt-lg{
- font-family: Bebas Neue, Helvetica, Arial, sans-serif;
- font-size: 4rem;
- font-weight: 400;
- line-height: 0.96;
- }
-
- .head-alt-md,
- .content-block .head-alt-md{
- font-family: Bebas Neue, Helvetica, Arial, sans-serif;
- font-size: 2.45rem;
- font-weight: 400;
- line-height: 0.96;
- }
-
- .head-alt-base,
- .content-block .head-alt-base{
- font-family: Bebas Neue, Helvetica, Arial, sans-serif;
- font-size: 1.875rem;
- font-weight: 400;
- line-height: 0.96;
- }
-
- .head-alt-sm,
- .content-block .head-alt-sm{
- font-family: Bebas Neue, Helvetica, Arial, sans-serif;
- font-size: 1.6rem;
- font-weight: 400;
- line-height: 0.96;
- }
-
- .head-alt-xs,
- .content-block .head-alt-xs{
- font-family: Bebas Neue, Helvetica, Arial, sans-serif;
- font-size: 1.3rem;
- font-weight: 400;
- line-height: 0.96;
- }
-
- .head-alt-2xs,
- .content-block .head-alt-2xs{
- font-family: Bebas Neue, Helvetica, Arial, sans-serif;
- font-size: 1.125rem;
- font-weight: 400;
- line-height: 0.96;
- }
-
-
-
- .head-base,
- .content-block .head-base{
- font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
- font-size: 1.875rem;
- font-weight: 500;
- line-height: 1.25;
- }
-
- .head-sm,
- .content-block .head-sm{
- font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
- font-size: 1.6rem;
- font-weight: 500;
- line-height: 1.25;
- }
-
- .head-xs,
- .content-block .head-xs{
- font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
- font-size: 1.3rem;
- font-weight: 500;
- line-height: 1.25;
- }
-
- .head-2xs,
- .content-block .head-2xs{
- font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
- font-size: 1.125rem;
- font-weight: 500;
- line-height: 1.25;
- }
-
-
-
- .head-heavy-base,
- .content-block .head-heavy-base{
- font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
- font-size: 1.875rem;
- font-weight: 700;
- line-height: 1.25;
- }
-
- .head-heavy-sm,
- .content-block .head-heavy-sm{
- font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
- font-size: 1.6rem;
- font-weight: 700;
- line-height: 1.25;
- }
-
- .head-heavy-xs,
- .content-block .head-heavy-xs{
- font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
- font-size: 1.3rem;
- font-weight: 700;
- line-height: 1.25;
- }
-
- .head-heavy-2xs,
- .content-block .head-heavy-2xs{
- font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
- font-size: 1.125rem;
- font-weight: 700;
- line-height: 1.25;
- }
-
-
-
- .head-allcaps-2xs,
- .content-block .head-allcaps-2xs{
- font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
- font-size: 1.125rem;
- font-weight: 400;
- text-transform: uppercase;
- line-height: 1.25;
- }
-
- .head-allcaps-3xs,
- .content-block .head-allcaps-3xs{
- font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
- font-size: 1rem;
- font-weight: 400;
- text-transform: uppercase;
- line-height: 1.25;
- }
-
- .head-allcaps-4xs,
- .content-block .head-allcaps-4xs{
- font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
- font-size: .875rem;
- font-weight: 400;
- text-transform: uppercase;
- line-height: 1.25;
- }
-
-
-
-
- .head-allcaps-heavy-2xs,
- .content-block .head-allcaps-heavy-2xs{
- font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
- font-size: 1.125rem;
- font-weight: 700;
- text-transform: uppercase;
- line-height: 1.25;
- }
-
- .head-allcaps-heavy-3xs,
- .content-block .head-allcaps-heavy-3xs{
- font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
- font-size: 1rem;
- font-weight: 700;
- text-transform: uppercase;
- line-height: 1.25;
- }
-
- .head-allcaps-heavy-4xs,
- .content-block .head-allcaps-heavy-4xs{
- font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
- font-size: .875rem;
- font-weight: 700;
- text-transform: uppercase;
- line-height: 1.25;
- }
-}
-
.header-clip {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%);
@@ -2333,6 +2136,13 @@ video {
}
}
+@media (min-width: 1200px){
+
+ .head-4xl{
+ font-size: 2.45rem;
+ }
+}
+
.head-7xl{
font-family: Bebas Neue, Helvetica, Arial, sans-serif;
font-size: 1.875rem;
@@ -2341,13 +2151,28 @@ video {
letter-spacing: -0.025em;
}
-@media (min-width: 992px){
+@media (min-width: 1200px){
.head-7xl{
font-size: 5.3rem;
}
}
+.head-8xl{
+ font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+ font-size: 2.45rem;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: -0.025em;
+}
+
+@media (min-width: 1200px){
+
+ .head-8xl{
+ font-size: 6.25rem;
+ }
+}
+
p{
font-size: .875rem;
line-height: 1.5rem;
@@ -2382,6 +2207,13 @@ p{
text-transform: uppercase;
}
+@media (min-width: 576px){
+
+ .header-carousel .header-carousel--text{
+ font-size: 3rem;
+ }
+}
+
@media (min-width: 992px){
.header-carousel .header-carousel--text{
@@ -2390,21 +2222,28 @@ p{
}
.header-carousel .header-carousel--text {
- left: 10%;
max-width: 1200px;
position: absolute;
- top: 20%;
+ top: 35%;
+ margin-left: 15%;
}
@media (min-width: 576px) {
.header-carousel .header-carousel--text {
- top: 35%
+ margin-left: 10%
}
}
@media (min-width: 992px) {
+.header-carousel .header-carousel--text {
+ top: 30%
+ }
+ }
+
+@media (min-width: 1366px) {
+
.header-carousel .header-carousel--text {
top: 45%
}
@@ -2425,30 +2264,34 @@ p{
clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%);
}
+.header-carousel .slick-active {
+ z-index: 1000;
+ }
+
.header-carousel .slick-active img {
transform: scale(1, 1);
}
.header-carousel .slick-active .header-carousel--text {
- -webkit-animation: right_to_left 500ms ease;
- animation: right_to_left 500ms ease;
+ -webkit-animation: right_to_left 1s ease;
+ animation: right_to_left 1s ease;
}
@-webkit-keyframes right_to_left {
from {
- left: 15%;
+ margin-left: 20%;
}
to {
- left: 10%;
+ margin-left: 10%;
}
}
@keyframes right_to_left {
from {
- left: 15%;
+ margin-left: 20%;
}
to {
- left: 10%;
+ margin-left: 10%;
}
}
@@ -2536,14 +2379,23 @@ p{
}
.btn{
- display: inline-block;
- height: 2.75rem;
+ display: inline-flex;
+ height: 2rem;
+ align-items: center;
+ justify-content: center;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-family: Bebas Neue, Helvetica, Arial, sans-serif;
line-height: 2.25rem;
}
+@media (min-width: 1200px){
+
+ .btn{
+ height: 2.75rem;
+ }
+}
+
.btn__slide__wrap {
overflow: hidden;
position: relative;
@@ -2569,21 +2421,24 @@ p{
}
.switch{
- display: inline-flex;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
}
.switch__item{
margin-right: 0.5rem;
+ margin-bottom: 0.5rem;
cursor: pointer;
--tw-bg-opacity: 1;
background-color: rgb(236 236 236 / var(--tw-bg-opacity));
- padding-left: 2rem;
- padding-right: 2rem;
- padding-top: 1rem;
- padding-bottom: 1rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
text-align: center;
font-family: Bebas Neue, Helvetica, Arial, sans-serif;
- font-size: 1.3rem;
+ font-size: 1.125rem;
font-weight: 400;
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -2678,10 +2533,6 @@ p{
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
-.main-menu__main .menu-link{
- padding: 0.75rem;
-}
-
.main-menu__main .menu-link{
font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
}
@@ -2718,10 +2569,25 @@ p{
}
}
+.navbar-background {
+ background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%);
+}
+
+.main-menu-grid {
+ max-width: none;
+ grid-template-areas:
+ "content"
+}
+
+.menu-flag {
+ position: absolute;
+ left: 0;
+ width: 110px;
+}
+
.main-menu__external{
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
- padding: 0.75rem;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
grid-area: external;
@@ -2732,7 +2598,7 @@ p{
display: flex !important;
}
.main-menu {
- grid-template-areas: "logo main social external";
+ grid-template-areas: "main social external";
flex-wrap: nowrap;
}
@@ -2748,6 +2614,10 @@ p{
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
+
+ .menu-flag {
+ width: 260px;
+ }
}
/**
@@ -2783,38 +2653,22 @@ p{
grid-column-start: 2;
}
-.col-start-1{
- grid-column-start: 1;
-}
-
.col-end-13{
grid-column-end: 13;
}
-.col-end-2{
- grid-column-end: 2;
-}
-
-.col-end-4{
- grid-column-end: 4;
-}
-
.clear-both{
clear: both;
}
-.m-3{
- margin: 0.75rem;
-}
-
.mx-auto{
margin-left: auto;
margin-right: auto;
}
-.my-4{
- margin-top: 1rem;
- margin-bottom: 1rem;
+.my-2{
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
}
.mx-8{
@@ -2886,6 +2740,10 @@ p{
margin-right: 1.5rem;
}
+.mb-1{
+ margin-bottom: 0.25rem;
+}
+
.mb-16{
margin-bottom: 4rem;
}
@@ -2894,10 +2752,6 @@ p{
margin-right: 1.75rem;
}
-.mb-1{
- margin-bottom: 0.25rem;
-}
-
.mb-7{
margin-bottom: 1.75rem;
}
@@ -2906,10 +2760,6 @@ p{
margin-top: 6rem;
}
-.mb-24{
- margin-bottom: 6rem;
-}
-
.mb-32{
margin-bottom: 8rem;
}
@@ -2934,6 +2784,10 @@ p{
margin-right: 1.25rem;
}
+.mt-4{
+ margin-top: 1rem;
+}
+
.mb-3{
margin-bottom: 0.75rem;
}
@@ -2942,6 +2796,10 @@ p{
margin-bottom: 3.5rem;
}
+.mb-24{
+ margin-bottom: 6rem;
+}
+
.mb-40{
margin-bottom: 10rem;
}
@@ -2954,10 +2812,6 @@ p{
margin-top: 0.25rem;
}
-.mt-4{
- margin-top: 1rem;
-}
-
.block{
display: block;
}
@@ -3010,8 +2864,8 @@ p{
width: 100%;
}
-.w-60{
- width: 15rem;
+.w-10\/12{
+ width: 83.333333%;
}
.w-44{
@@ -3038,10 +2892,6 @@ p{
width: 5rem;
}
-.w-3\/4{
- width: 75%;
-}
-
.w-1\/2{
width: 50%;
}
@@ -3078,14 +2928,14 @@ p{
max-width: 24rem;
}
-.max-w-xs{
- max-width: 20rem;
-}
-
.max-w-md{
max-width: 28rem;
}
+.max-w-xs{
+ max-width: 20rem;
+}
+
.shrink-0{
flex-shrink: 0;
}
@@ -3158,10 +3008,6 @@ p{
justify-content: space-between;
}
-.justify-around{
- justify-content: space-around;
-}
-
.gap-3{
gap: 0.75rem;
}
@@ -3172,12 +3018,6 @@ p{
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
-.space-x-6 > :not([hidden]) ~ :not([hidden]){
- --tw-space-x-reverse: 0;
- margin-right: calc(1.5rem * var(--tw-space-x-reverse));
- margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
.space-x-3 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
@@ -3368,10 +3208,6 @@ p{
padding-top: 10rem;
}
-.pt-24{
- padding-top: 6rem;
-}
-
.pb-4{
padding-bottom: 1rem;
}
@@ -3392,14 +3228,6 @@ p{
padding-bottom: 13rem;
}
-.pt-8{
- padding-top: 2rem;
-}
-
-.pt-14{
- padding-top: 3.5rem;
-}
-
.text-center{
text-align: center;
}
@@ -3448,10 +3276,6 @@ p{
font-size: 2.45rem;
}
-.text-8xl{
- font-size: 6.25rem;
-}
-
.text-base{
font-size: 1rem;
}
@@ -3460,10 +3284,6 @@ p{
font-size: 1.3rem;
}
-.text-9xl{
- font-size: 7.5rem;
-}
-
.font-bold{
font-weight: 700;
}
@@ -3488,6 +3308,10 @@ p{
line-height: 1.25rem;
}
+.leading-4{
+ line-height: 1rem;
+}
+
.text-white{
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -3581,6 +3405,15 @@ p{
/* @note: needs to be kept in sync with tailwind configuration */
+@media (min-width: 1200px) {
+ .simple-header-height {
+ height: 26rem;
+ }
+ .footer-section {
+ height: 981px;
+ }
+ }
+
.head-alt-md,
.content-block .head-alt-md{
font-family: Bebas Neue, Helvetica, Arial, sans-serif;
@@ -3597,6 +3430,16 @@ p{
line-height: 0.96;
}
+@media (min-width: 1200px) {
+ .switch__item{
+ padding-left: 2rem;
+ padding-right: 2rem;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ font-size: 1.3rem;
+ }
+ }
+
.slick-track[data-v-e4caeaf8]{position:relative;top:0;left:0;display:block;transform:translateZ(0)}
.slick-track.slick-center[data-v-e4caeaf8]{margin-left:auto;margin-right:auto}
@@ -3840,6 +3683,11 @@ a.icon-link:hover span{
grid-column: span 3 / span 3;
}
+ .xl\:my-3{
+ margin-top: 0.75rem;
+ margin-bottom: 0.75rem;
+ }
+
.xl\:mb-20{
margin-bottom: 5rem;
}
@@ -3852,6 +3700,14 @@ a.icon-link:hover span{
margin-bottom: 1.5rem;
}
+ .xl\:mb-16{
+ margin-bottom: 4rem;
+ }
+
+ .xl\:mb-24{
+ margin-bottom: 6rem;
+ }
+
.xl\:mb-28{
margin-bottom: 7rem;
}
@@ -3860,10 +3716,18 @@ a.icon-link:hover span{
margin-bottom: 0px;
}
+ .xl\:mr-2{
+ margin-right: 0.5rem;
+ }
+
.xl\:mb-32{
margin-bottom: 8rem;
}
+ .xl\:mb-12{
+ margin-bottom: 3rem;
+ }
+
.xl\:block{
display: block;
}
@@ -3880,10 +3744,26 @@ a.icon-link:hover span{
height: 100vh;
}
+ .xl\:w-60{
+ width: 15rem;
+ }
+
.xl\:w-full{
width: 100%;
}
+ .xl\:w-1\/4{
+ width: 25%;
+ }
+
+ .xl\:max-w-xl{
+ max-width: 36rem;
+ }
+
+ .xl\:flex-row{
+ flex-direction: row;
+ }
+
.xl\:justify-end{
justify-content: flex-end;
}
@@ -3892,19 +3772,81 @@ a.icon-link:hover span{
gap: 1.25rem;
}
+ .xl\:space-x-3 > :not([hidden]) ~ :not([hidden]){
+ --tw-space-x-reverse: 0;
+ margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+ margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+ }
+
.xl\:bg-transparent{
background-color: transparent;
}
- .xl\:p-6{
- padding: 1.5rem;
+ .xl\:py-6{
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
}
.xl\:pt-0{
padding-top: 0px;
}
+ .xl\:pt-24{
+ padding-top: 6rem;
+ }
+
+ .xl\:pt-8{
+ padding-top: 2rem;
+ }
+
+ .xl\:pt-14{
+ padding-top: 3.5rem;
+ }
+
+ .xl\:text-4xl{
+ font-size: 2.45rem;
+ }
+
+ .xl\:text-9xl{
+ font-size: 7.5rem;
+ }
+
+ .xl\:text-base{
+ font-size: 1rem;
+ }
+
+ .xl\:text-xl{
+ font-size: 1.3rem;
+ }
+
+ .xl\:leading-6{
+ line-height: 1.5rem;
+ }
+
.xl\:duration-200{
transition-duration: 200ms;
}
+
+ .xl\:head-alt-lg,
+ .content-block .xl\:head-alt-lg{
+ font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+ font-size: 4rem;
+ font-weight: 400;
+ line-height: 0.96;
+ }
+}
+
+@media (min-width: 1366px){
+
+ .\32xl\:space-x-6 > :not([hidden]) ~ :not([hidden]){
+ --tw-space-x-reverse: 0;
+ margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+ margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+ }
+
+ .\32xl\:space-x-3 > :not([hidden]) ~ :not([hidden]){
+ --tw-space-x-reverse: 0;
+ margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+ margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+ }
}
diff --git a/main/templates/main/base.html b/main/templates/main/base.html
index b1c41ebb7bcb7de40a98ca4522dc5d33c4ad6cef..6809f48227ec80d31b43f45aa5d5085418fdcb53 100644
--- a/main/templates/main/base.html
+++ b/main/templates/main/base.html
@@ -25,8 +25,11 @@
<body>
{% include 'main/includes/layout/header.html' %}
-{% block content %}
-{% endblock content %}
+
+{% block content %}{% endblock content %}
+
+{% include 'main/includes/layout/footer.html' %}
+
{% block scripts %}{% endblock scripts %}
</body>
</html>
diff --git a/main/templates/main/includes/button_animated.html b/main/templates/main/includes/button_animated.html
new file mode 100644
index 0000000000000000000000000000000000000000..34c0802cfefaee5fe5abc215a9843905ab0b9b16
--- /dev/null
+++ b/main/templates/main/includes/button_animated.html
@@ -0,0 +1,8 @@
+<a href="" class="btn btn__slide__wrap {{ extra_classes }}">
+ <span class="btn text-sm bg-black text-white w-32 lg:text-base">
+ {{ btn_text | default_if_none:"Číst dále" }}
+ </span>
+ <span class="btn text-sm bg-white text-black w-32 lg:text-base">
+ {{ btn_text | default_if_none:"Číst dále" }}
+ </span>
+</a>
diff --git a/main/templates/main/includes/layout/footer.html b/main/templates/main/includes/layout/footer.html
new file mode 100644
index 0000000000000000000000000000000000000000..686de4399ed5dfd13068873f5e5cea701e718a79
--- /dev/null
+++ b/main/templates/main/includes/layout/footer.html
@@ -0,0 +1,227 @@
+<footer class="bg-black footer-clip text-white pt-12">
+ <div class="footer__container">
+ <div class="font-alt mb-10 text-right text-2xl">
+ Zůstaňte s námi v konaktu
+ </div>
+ <div class="flex justify-end mb-16 text-right">
+ <div>
+ <a href="" class="ml-8">
+ <i class="ico--facebook mr-1"></i>
+ @ceska.piratska.strana
+ </a>
+ </div>
+ <div>
+ <a href="" class="ml-8">
+ <i class="ico--twitter mr-1"></i>
+ #piratskastrana
+ </a>
+ </div>
+ <div>
+ <a href="" class="ml-8">
+ <i class="ico--instagram mr-1"></i>
+ @pirati.cz
+ </a>
+ </div>
+ <div>
+ <a href="" class="ml-8">
+ <i class="ico--youtube mr-1"></i>
+ pirati.cz
+ </a>
+ </div>
+ </div>
+ <div class="flex flex-wrap mb-16 w-full">
+ <div>
+ <h6 class="font-alt text-2xl mb-12">
+ Navigace
+ </h6>
+ <div class="grid grid-flow-col grid-rows-6 max-h-60">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Jak pracujeme
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Program
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ </div>
+ </div>
+ <div>
+ <h6 class="font-alt text-2xl mb-12">
+ Transparance
+ </h6>
+ <div class="grid grid-flow-col grid-rows-6 max-h-60">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Jak pracujeme
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Program
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ </div>
+ </div>
+ <div>
+ <h6 class="font-alt text-2xl mb-12">
+ Osobní stránky
+ </h6>
+ <div class="grid grid-flow-col grid-rows-6 max-h-60">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ olgarichterova.cz
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ gregorova.eu
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ mikulas-peksa.eu
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ kolaja.eu
+ </a>
+ </div>
+ </div>
+ <div>
+ <h6 class="font-alt text-2xl mb-12">
+ Další projekty
+ </h6>
+ <div class="grid grid-flow-col grid-rows-6 max-h-60">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Jak pracujeme
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Program
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ budoucnostresimeted.cz
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Jak pracujeme
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Program
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Jak pracujeme
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Program
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ voda.pirati.cz
+ </a>
+ </div>
+ </div>
+ <div>
+ <h6 class="font-alt text-2xl mb-12">
+ Média
+ </h6>
+ <div class="flex flex-col flex-wrap max-h-60">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Foto
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Video
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Newsletter
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Grafika
+ </a>
+ </div>
+ </div>
+ </div>
+ <div class="flex flex-wrap items-end pb-2">
+ <div class="text-grey-300 w-full lg:w-1/2">
+ © Piráti 2022. Všechna práva vyhlazena.<br>
+ Sdílejte a nechte ostatní sdílet za stejných podmínek.
+ </div>
+ <div class="flex justify-endw-full lg:w-1/2">
+ <div class="flex ml-4">
+ <div class="mr-5">
+ <img class="rounded-full shadow-sm w-20 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image">
+ </div>
+ <div class="flex flex-col">
+ <h6 class="font-alt text-2xl text-uppercase">
+ Veronika Šmídová
+ </h6>
+ <strong class="font-bold mb-1 text-grey-300">
+ Tisková mluvčí
+ </strong>
+ <span>
+ +420 778 111 466
+ </span>
+ <span class="text-turquoise-500">
+ veronika.smidova@pirati.cz
+ </span>
+ </div>
+ </div>
+ <div class="flex ml-4">
+ <div class="mr-5">
+ <img class="rounded-full shadow-sm w-20 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image">
+ </div>
+ <div class="flex flex-col">
+ <h6 class="font-alt text-2xl text-uppercase">
+ Veronika Šmídová
+ </h6>
+ <strong class="font-bold mb-1 text-grey-300">
+ Tisková mluvčí
+ </strong>
+ <span>
+ +420 778 111 466
+ </span>
+ <span class="text-turquoise-500">
+ veronika.smidova@pirati.cz
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</footer>
diff --git a/main/templates/main/includes/layout/header.html b/main/templates/main/includes/layout/header.html
index c65b21ab3e78ab0715e0691b6eb164cc566c7976..caa0fee2b2840fb5e97dc8d053afd2de414de6e4 100644
--- a/main/templates/main/includes/layout/header.html
+++ b/main/templates/main/includes/layout/header.html
@@ -1,32 +1,53 @@
{% load static %}
+
<!-- Navbar -->
-<nav class="text-white bg-black transition duration-200">
+<nav class="navbar-background bg-black xl:duration-200 xl:bg-transparent xl:absolute xl:z-50 xl:w-full hover:bg-black">
+ <!-- Logo -->
+ <a href="" class="menu-flag flex justify-center flag bg-white my-2 p-1 main-menu__logo xl:my-3">
+ <img src="{% static "shared/img/logo-full-black.svg" %}" alt="">
+ </a>
<!-- Flex container -->
- <div class="flex items-center justify-between">
- <!-- Logo -->
- <div class="logo flex bg-white px-12 w-80 h-16 my-8">
- <img src="{% static "shared/img/logo-full-black.svg" %}" alt="Pirátská strana" class="w-36"/>
- </div>
- <!-- Menu -->
- <div class="flex space-x-6 uppercase gap-8">
- <a href="#">Jak pracujeme</a>
- <a href="#">Program</a>
- <a href="#">O nás</a>
- <a href="#">Naloď se</a>
- <a href="#">Přispěj</a>
- <a href="#">Kontakty</a>
- </div>
- <!-- Social & Related -->
- <div>
- <a href="">FB</a>
- <a href="">TWITTER</a>
- <a href="">INSTAGRAM</a>
- <a href="#" class="px-12 py-3 bg-lightGreen mr-2">
- Dary
- </a>
- <a href="#" class="px-12 py-3 text-blue-100 bg-purple mr-2">
- Nalodění
- </a>
+ <div class="grid-container main-menu-grid">
+ <div class="main-menu grid-content-with-right-side grid justify-between items-center xl:py-6">
+ <!-- Hamburger Icon -->
+ <input class="hidden" type="checkbox" id="menuToggle"/>
+ <label class="p-3 hamb text-white col-start-2 xl:hidden" for="menuToggle">
+ <i class="ico--menu text-3xl"></i>
+ </label>
+ <!-- Menu -->
+ <div class="main-menu__main main-menu-items space-x-3 2xl:space-x-6 xl:flex">
+ <a href="#" class="menu-link">Jak pracujeme</a>
+ <a href="#" class="menu-link">Program</a>
+ <a href="#" class="menu-link">O nás</a>
+ <a href="#" class="menu-link">Naloď se</a>
+ <a href="#" class="menu-link">Kontakty</a>
+ </div>
+ <!-- Buttons & Social-->
+ <div class="main-menu__external main-menu-items items-center space-x-1 2xl:space-x-3 xl:flex">
+ <div class="flex space-x-3 mb-2 xl:mb-0 xl:mr-2">
+ <a href="" class="text-white hover:no-underline">
+ <i class="ico--facebook"></i>
+ </a>
+ <a href="" class="text-white hover:no-underline">
+ <i class="ico--twitter"></i>
+ </a>
+ <a href="" class="text-white hover:no-underline">
+ <i class="ico--instagram"></i>
+ </a>
+ </div>
+ <a href="#"
+ class="btn btn--green-500 btn--hoveractive font-condensed uppercase max-w-sm w-full">
+ <div class="btn__body-wrap h-full">
+ <div class="btn__body ">Dary</div>
+ </div>
+ </a>
+ <a href="#"
+ class="btn btn--violet-500 btn--hoveractive font-condensed uppercase max-w-sm w-full">
+ <div class="btn__body-wrap h-full">
+ <div class="btn__body ">Nalodění</div>
+ </div>
+ </a>
+ </div>
</div>
</div>
</nav>
diff --git a/main/templates/main/includes/layout/photo_page_header.html b/main/templates/main/includes/layout/photo_page_header.html
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/main/templates/main/includes/layout/simple_page_header.html b/main/templates/main/includes/layout/simple_page_header.html
new file mode 100644
index 0000000000000000000000000000000000000000..6dc4646e014b33c0ea71f3efc59b937b2d3fbbf3
--- /dev/null
+++ b/main/templates/main/includes/layout/simple_page_header.html
@@ -0,0 +1,9 @@
+<header class="bg-black flex items-center simple-header-height header-clip mb-8 xl:mb-24 xl:pt-24 w-full">
+ <div class="grid-container header-max-width">
+ <div class="grid-content">
+ <h1 class="head-8xl text-white">
+ {{ page.title }}
+ </h1>
+ </div>
+ </div>
+</header>
diff --git a/main/templates/main/includes/work_article_preview.html b/main/templates/main/includes/work_article_preview.html
new file mode 100644
index 0000000000000000000000000000000000000000..90c35f97d516146df4a83c376ed49a7203a82c40
--- /dev/null
+++ b/main/templates/main/includes/work_article_preview.html
@@ -0,0 +1,20 @@
+<div class="p-7 flex flex-col max-w-xl border border-grey-150 mb-8">
+ <img
+ src="https://i.picsum.photos/id/689/576/281.jpg?hmac=yIwOFV185zFy4fwVE3lF1UDqLDAm_bpLr9LZprQ26eo" alt=""
+ class="mb-7"
+ >
+ <h2 class="head-2xl mb-4">
+ {{ article_page.title }}
+ </h2>
+ <div class="flex font-bold mb-4 text-xs text-white uppercase">
+ {# TODO tags #}
+ {# <span class="bg-green-400 mr-1 p-2">Duben 2022</span>#}
+ {# <span class="bg-violet-400 mr-1 p-2">#ENERGETIKA</span>#}
+ </div>
+ <p class="mb-8">
+ {{ article_page.perex }}
+ </p>
+ <div>
+ {% include 'main/includes/button_animated.html' with btn_text="Číst dále" %}
+ </div>
+</div>
diff --git a/main/templates/main/main_work_page.html b/main/templates/main/main_work_page.html
index f9ff4d2c489a26b5b4744b26f4ece11f895559d8..436e75c78093cfec8f36a5cb5929c425007794b0 100644
--- a/main/templates/main/main_work_page.html
+++ b/main/templates/main/main_work_page.html
@@ -2,6 +2,8 @@
{% load wagtailcore_tags wagtailimages_tags shared_filters %}
{% block content %}
+ {% include 'main/includes/layout/simple_page_header.html' %}
+
<main role="main">
<div class="grid-container mb-2 xl:mb-12">
<div class="grid-left-side">
@@ -19,51 +21,38 @@
<div class="grid-container article-section">
<div class="grid-full mb-8">
- <div class="mb-4">
- <h3 class="head-7xl mb-4 xl:hidden">Červenec</h3>
- <div class="flex flex-col justify-between xl:flex-row">
- <div class="xl:pt-8">
- {{> molecules-work-article-preview }}
- {{> molecules-work-article-preview }}
- </div>
- <div class="relative border border-violet-400 mx-8 hidden xl:block">
- <div class="absolute bg-violet-400 p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">
- Červenec
+ {% for month_article_data in article_data_list %}
+ <div class="mb-4">
+ <h3 class="head-7xl mb-4 xl:hidden">
+ {{ month_article_data.month_text }}
+ </h3>
+ <div class="flex flex-col justify-between xl:flex-row">
+ <div class="xl:pt-8">
+ {% for article_page in month_article_data.left_column %}
+ {% include 'main/includes/work_article_preview.html' %}
+ {% empty %}
+ <div class="p-7 flex flex-col max-w-xl mb-8" />
+ {% endfor %}
+ </div>
+ <div class="relative border border-violet-400 mx-8 hidden xl:block">
+ <div class="absolute bg-violet-400 p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">
+ {{ month_article_data.month_text }}
+ </div>
+ </div>
+ <div class="xl:pt-14">
+ {% for article_page in month_article_data.right_column %}
+ {% include 'main/includes/work_article_preview.html' %}
+ {% empty %}
+ <div class="p-7 flex flex-col max-w-xl mb-8" />
+ {% endfor %}
+ </div>
</div>
</div>
- <div class="xl:pt-14">
- {{> molecules-work-article-preview }}
- {{> molecules-work-article-preview }}
- </div>
- </div>
- </div>
- <div class="mb-4">
- <h3 class="head-7xl mb-4 xl:hidden">Srpen</h3>
- <div class="flex flex-col justify-between xl:flex-row">
- <div class="xl:pt-8">
- {{> molecules-work-article-preview }}
- {{> molecules-work-article-preview }}
- </div>
- <div class="relative border border-violet-400 mx-8 hidden xl:block">
- <div class="absolute bg-violet-400 p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">
- Srpen
- </div>
- </div>
- <div class="xl:pt-14">
- {{> molecules-work-article-preview }}
- {{> molecules-work-article-preview }}
- </div>
- </div>
- </div>
+ {% endfor %}
<div class="flex justify-center">
- {{> atoms-button-animated(btn-text: "Zobrazit další", classes-btn-hidden: "bg-black") }}
+ {% include 'main/includes/button_animated.html' with btn_text="Zobrazit další" %}
</div>
</div>
</div>
</main>
- {% for month_article_data in article_data_list %}
- {{ month_article_data.month_text }}
- {{ month_article_data.left_column }}
- {{ month_article_data.right_column }}
- {% endfor %}
{% endblock content %}