diff --git a/_includes/meetups.html b/_includes/meetups.html index d866f85..19e3446 100644 --- a/_includes/meetups.html +++ b/_includes/meetups.html @@ -4,19 +4,30 @@

EDICIONES PASADAS

Conocé el contenido de las ediciones pasadas.

- + {% assign meetups_sorted = site.meetups | sort: "date" | reverse %} + + {% assign meetups_by_year = meetups_sorted + | group_by_exp: "m", "m.date | date: '%Y'" + | sort: "name" + | reverse %} + + {% for year in meetups_by_year | reverse %} +

{{ year.name }}

+ + + {%- endfor -%} diff --git a/_includes/nav.html b/_includes/nav.html index e95ae05..9f985a3 100644 --- a/_includes/nav.html +++ b/_includes/nav.html @@ -1,24 +1,9 @@ - +
+
+

+ + + + +
+
diff --git a/_layouts/default.html b/_layouts/default.html index 8b66cd6..bf3eaab 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -3,13 +3,8 @@ {% include head.html %} - {% include nav.html %} - -
- {{ content }} -
+
{{ content }}
{% include footer.html %} - diff --git a/_layouts/meetup.html b/_layouts/meetup.html index f2feb13..3c3615a 100644 --- a/_layouts/meetup.html +++ b/_layouts/meetup.html @@ -59,4 +59,5 @@

{{ talk.title }} - {{ speakers | join: ", " }}

+ {% include footer.html %} diff --git a/_sass/header.scss b/_sass/header.scss index 88d2e8c..f0598fa 100644 --- a/_sass/header.scss +++ b/_sass/header.scss @@ -19,7 +19,7 @@ body { color: #fcc24e; font: 700 6rem/1 'Syncopate', sans-serif; margin-left: 52px; - padding: 250px 0; + padding: 150px 0; width: 55%; @media (max-width: 992px) { @@ -27,16 +27,13 @@ body { } @media (max-width: 768px) { - font-size: 2rem; - margin: 0; - padding: 36px 0; - width: 85%; + display: none; } } img { position: absolute; - top: 53%; + top: 36%; left: 57%; width: 550px; z-index: 1; @@ -53,7 +50,9 @@ body { } @media (max-width: 768px) { - display: none; + position: relative; + left: 0; + padding: 15px; } } diff --git a/_sass/meetups.scss b/_sass/meetups.scss index 603a60c..349b8f8 100644 --- a/_sass/meetups.scss +++ b/_sass/meetups.scss @@ -34,6 +34,14 @@ } } + .meetup-event__date_year { + align-items: center; + display: flex; + padding: 1.5rem 8rem; + font-weight: bold; + justify-content: space-between; + } + ul { li { align-items: center; diff --git a/_sass/nav.scss b/_sass/nav.scss index 0fe28ca..b5f8780 100644 --- a/_sass/nav.scss +++ b/_sass/nav.scss @@ -1,82 +1,144 @@ -nav { - ul { +.meetup__default { + display: flex; + flex-direction: column; + font: 1rem 'Syncopate', sans-serif; + width: 100%; + + > div { display: flex; - height: 5rem; - color: #2E2E2E; - font-size: 1.5rem; - font-family: 'Syncopate', sans-serif; - border: 4px solid #2E2E2E; - box-sizing: border-box; - - li { - border-right: 4px solid #2E2E2E; - height: 100%; - justify-content: center; + width: 100%; + + &:first-child { + background: #3967D1; align-items: center; - display: flex; - background: #fff; - box-sizing: border-box; + position: relative; - &:first-child { flex: 3; background: #F6EEEC; a:hover { background-color: inherit; } } - &:nth-child(2) { background: #F6EEEC; flex: 10; } - &:nth-child(n+3):not(:last-child) { flex: 6 } - &:nth-last-child(2) { border: 0; } - &:last-child { display: none; } + h1 { + color: #fcc24e; + font: 700 6rem/1 'Syncopate', sans-serif; + margin-left: 52px; + padding: 50px 0; + width: 55%; - img { - width: 35px; + @media (max-width: 992px) { + font-size: 75px; + } + + @media (max-width: 768px) { + font-size: 2rem; + margin: 0; + padding: 36px 0; + width: 85%; + } } - a { - align-items: center; - color: inherit; - display: flex; - height: 100%; - justify-content: center; - text-decoration: none; - width: 100%; + img { + position: absolute; + right: 15%; + width: 350px; + z-index: 1; + + @media (max-width: 1300px) { + top: 68%; + width: 430px; + right: 15%; + } - &:hover { - background-color: rgba(57, 126, 120, 0.5); + @media (max-width: 992px) { + top: 75%; + width: 330px; + right: 10%; + } + + @media (max-width: 768px) { + position: relative; + left: -25%; + padding: 15px; } } - button { - background: transparent; - width: 100%; - height: 100%; - border: 0; + @media (max-width: 768px) { + justify-content: center; } } - @media (max-width: 712px) { - li { - &:nth-child(n+3):not(:last-child) { - position: absolute; - height: 4rem; - width: 100%; - border-left: 4px solid #2E2E2E; - border-right: 4px solid #2E2E2E; - left: 0; - display: none; - z-index: 10; - } + &:last-child { + flex-direction: row; + + div { + align-items: center; + border: 4px solid #2E2E2E; + display: flex; + flex-wrap: wrap; + flex-basis: 50%; + padding: 96px 0; + + &:first-child { + border-left-width: 0; + background-color: #F6EEEC; + justify-content: flex-start; + + h2 { + color: #3967D1; + font: 900 4rem/1 'Syncopate', sans-serif; + margin-left: 52px; + width: 35%; + + @media (max-width: 992px) { + font-size: 2.5rem; + margin-left: 26px; + } - &:nth-last-child(2) { - border-bottom: 4px solid #2E2E2E; + @media (max-width: 768px) { + font-size: 1.5rem; + } + } + + @media (max-width: 768px) { + width: 100%; + padding: 30px 0; + } } &:last-child { - display: flex; - border: 0; - flex: 2; - background: #F6EEEC; - } - } + background: rgb(57, 126, 120); + border-width: 4px 0; + justify-content: flex-start; + padding: 4rem 2rem; + gap: 1rem; + + @media (max-width: 992px) { + justify-content: space-around; + padding: 2rem 1rem; + gap: 0; + } + + a { + align-items: center; + border: 3.3px solid #FFF; + border-radius: 59.396px; + color: #fff; + display: inline-flex; + font-weight: 900; + padding: 0.75rem 1.5rem; + text-decoration: none; + min-width: 9rem; + justify-content: space-between; + + &:hover { + background-color: rgba(0,0,0,0.5); + } + + @media (max-width: 992px) { + font-size: 14px; + margin-top: 12px; + } - @for $i from 3 through 5 { - li:nth-child(#{$i}) { - top: calc(5rem + if($i == 3, 5rem, 4rem) * ($i - 3)); + img { + width: 2rem; + padding-left: 0.5rem; + } + } } } }