Skip to content

Commit 397bf6c

Browse files
elcuervoelcuervo
authored
Merge pull request #108 from rubyuy/restyle
2 parents d88296c + 9e6b40d commit 397bf6c

File tree

7 files changed

+174
-113
lines changed

7 files changed

+174
-113
lines changed

‎_includes/meetups.html‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,30 @@ <h1>EDICIONES PASADAS</h1>
44
<p>Conocé el contenido de las ediciones pasadas.</p>
55
</header>
66

7-
<ul>
8-
{% for meetup in site.meetups reversed %}
9-
<li class="meetup-event">
10-
<a href="{{ meetup.url }}" class="meetup-event__link">
11-
<span class="meetup-event__date">
12-
{{ meetup.date | date_to_string }}
13-
</span>
14-
<span class="meetup-event__company">
15-
{{ meetup.title }}
16-
<img src="/assets/images/arrow.svg" aria-hidden="true">
17-
</span>
18-
</a>
19-
</li>
20-
{% endfor %}
21-
</ul>
7+
{% assign meetups_sorted = site.meetups | sort: "date" | reverse %}
8+
9+
{% assign meetups_by_year = meetups_sorted
10+
| group_by_exp: "m", "m.date | date: '%Y'"
11+
| sort: "name"
12+
| reverse %}
13+
14+
{% for year in meetups_by_year | reverse %}
15+
<h2 class="meetup-event__date_year">{{ year.name }}</h2>
16+
17+
<ul>
18+
{% for meetup in year.items %}
19+
<li class="meetup-event">
20+
<a href="{{ meetup.url }}" class="meetup-event__link">
21+
<span class="meetup-event__date">
22+
{{ meetup.date | date_to_string }}
23+
</span>
24+
<span class="meetup-event__company">
25+
{{ meetup.title }}
26+
<img src="/assets/images/arrow.svg" aria-hidden="true">
27+
</span>
28+
</a>
29+
</li>
30+
{%- endfor -%}
31+
</ul>
32+
{%- endfor -%}
2233
</section>

‎_includes/nav.html‎

Lines changed: 9 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,9 @@
1-
<nav>
2-
<ul>
3-
<li>
4-
<a href="/"><img src="/assets/images/blackstar.svg" alt="Logo" /></a>
5-
</li>
6-
<li>
7-
Ruby UY
8-
</li>
9-
<li>
10-
<a href="/">HOME</a>
11-
</li>
12-
<li>
13-
<a href="/#about">ABOUT</a>
14-
</li>
15-
<li>
16-
<a href="/#contact">CONTACT</a>
17-
</li>
18-
<li>
19-
<button onclick="toggleNavLinks()" aria-label="Open Menu">
20-
<img class="barBurger" src="/assets/images/menu.svg" alt="Open Menu Icon" aria-hidden="true" focusable="false" />
21-
</button>
22-
</li>
23-
</ul>
24-
</nav>
1+
<header class="meetup__default">
2+
<div>
3+
<h1> </h1>
4+
5+
<a href="/">
6+
<img src="{{ "logo.svg" | image_asset | buster }}" aria-hidden="true" focuseable="false"/>
7+
</a>
8+
</div>
9+
</header>

‎_layouts/default.html‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,8 @@
33
{% include head.html %}
44

55
<body>
6-
{% include nav.html %}
7-
8-
<main>
9-
{{ content }}
10-
</main>
6+
<main> {{ content }} </main>
117

128
{% include footer.html %}
139
</body>
14-
1510
</html>

‎_layouts/meetup.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,4 +59,5 @@ <h3><span>{{ talk.title }}</span> - {{ speakers | join: ", " }}</h3>
5959
</main>
6060
</body>
6161

62+
{% include footer.html %}
6263
</html>

‎_sass/header.scss‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,21 @@ body {
1919
color: #fcc24e;
2020
font: 700 6rem/1 'Syncopate', sans-serif;
2121
margin-left: 52px;
22-
padding: 250px 0;
22+
padding: 150px 0;
2323
width: 55%;
2424

2525
@media (max-width: 992px) {
2626
font-size: 75px;
2727
}
2828

2929
@media (max-width: 768px) {
30-
font-size: 2rem;
31-
margin: 0;
32-
padding: 36px 0;
33-
width: 85%;
30+
display: none;
3431
}
3532
}
3633

3734
img {
3835
position: absolute;
39-
top: 53%;
36+
top: 36%;
4037
left: 57%;
4138
width: 550px;
4239
z-index: 1;
@@ -53,7 +50,9 @@ body {
5350
}
5451

5552
@media (max-width: 768px) {
56-
display: none;
53+
position: relative;
54+
left: 0;
55+
padding: 15px;
5756
}
5857
}
5958

‎_sass/meetups.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,14 @@
3434
}
3535
}
3636

37+
.meetup-event__date_year {
38+
align-items: center;
39+
display: flex;
40+
padding: 1.5rem 8rem;
41+
font-weight: bold;
42+
justify-content: space-between;
43+
}
44+
3745
ul {
3846
li {
3947
align-items: center;

‎_sass/nav.scss‎

Lines changed: 123 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,144 @@
1-
nav {
2-
ul {
1+
.meetup__default {
2+
display: flex;
3+
flex-direction: column;
4+
font: 1rem 'Syncopate', sans-serif;
5+
width: 100%;
6+
7+
> div {
38
display: flex;
4-
height: 5rem;
5-
color: #2E2E2E;
6-
font-size: 1.5rem;
7-
font-family: 'Syncopate', sans-serif;
8-
border: 4px solid #2E2E2E;
9-
box-sizing: border-box;
10-
11-
li {
12-
border-right: 4px solid #2E2E2E;
13-
height: 100%;
14-
justify-content: center;
9+
width: 100%;
10+
11+
&:first-child {
12+
background: #3967D1;
1513
align-items: center;
16-
display: flex;
17-
background: #fff;
18-
box-sizing: border-box;
14+
position: relative;
1915

20-
&:first-child { flex: 3; background: #F6EEEC; a:hover { background-color: inherit; } }
21-
&:nth-child(2) { background: #F6EEEC; flex: 10; }
22-
&:nth-child(n+3):not(:last-child) { flex: 6 }
23-
&:nth-last-child(2) { border: 0; }
24-
&:last-child { display: none; }
16+
h1 {
17+
color: #fcc24e;
18+
font: 700 6rem/1 'Syncopate', sans-serif;
19+
margin-left: 52px;
20+
padding: 50px 0;
21+
width: 55%;
2522

26-
img {
27-
width: 35px;
23+
@media (max-width: 992px) {
24+
font-size: 75px;
25+
}
26+
27+
@media (max-width: 768px) {
28+
font-size: 2rem;
29+
margin: 0;
30+
padding: 36px 0;
31+
width: 85%;
32+
}
2833
}
2934

30-
a {
31-
align-items: center;
32-
color: inherit;
33-
display: flex;
34-
height: 100%;
35-
justify-content: center;
36-
text-decoration: none;
37-
width: 100%;
35+
img {
36+
position: absolute;
37+
right: 15%;
38+
width: 350px;
39+
z-index: 1;
40+
41+
@media (max-width: 1300px) {
42+
top: 68%;
43+
width: 430px;
44+
right: 15%;
45+
}
3846

39-
&:hover {
40-
background-color: rgba(57, 126, 120, 0.5);
47+
@media (max-width: 992px) {
48+
top: 75%;
49+
width: 330px;
50+
right: 10%;
51+
}
52+
53+
@media (max-width: 768px) {
54+
position: relative;
55+
left: -25%;
56+
padding: 15px;
4157
}
4258
}
4359

44-
button {
45-
background: transparent;
46-
width: 100%;
47-
height: 100%;
48-
border: 0;
60+
@media (max-width: 768px) {
61+
justify-content: center;
4962
}
5063
}
5164

52-
@media (max-width: 712px) {
53-
li {
54-
&:nth-child(n+3):not(:last-child) {
55-
position: absolute;
56-
height: 4rem;
57-
width: 100%;
58-
border-left: 4px solid #2E2E2E;
59-
border-right: 4px solid #2E2E2E;
60-
left: 0;
61-
display: none;
62-
z-index: 10;
63-
}
65+
&:last-child {
66+
flex-direction: row;
67+
68+
div {
69+
align-items: center;
70+
border: 4px solid #2E2E2E;
71+
display: flex;
72+
flex-wrap: wrap;
73+
flex-basis: 50%;
74+
padding: 96px 0;
75+
76+
&:first-child {
77+
border-left-width: 0;
78+
background-color: #F6EEEC;
79+
justify-content: flex-start;
80+
81+
h2 {
82+
color: #3967D1;
83+
font: 900 4rem/1 'Syncopate', sans-serif;
84+
margin-left: 52px;
85+
width: 35%;
86+
87+
@media (max-width: 992px) {
88+
font-size: 2.5rem;
89+
margin-left: 26px;
90+
}
6491

65-
&:nth-last-child(2) {
66-
border-bottom: 4px solid #2E2E2E;
92+
@media (max-width: 768px) {
93+
font-size: 1.5rem;
94+
}
95+
}
96+
97+
@media (max-width: 768px) {
98+
width: 100%;
99+
padding: 30px 0;
100+
}
67101
}
68102

69103
&:last-child {
70-
display: flex;
71-
border: 0;
72-
flex: 2;
73-
background: #F6EEEC;
74-
}
75-
}
104+
background: rgb(57, 126, 120);
105+
border-width: 4px 0;
106+
justify-content: flex-start;
107+
padding: 4rem 2rem;
108+
gap: 1rem;
109+
110+
@media (max-width: 992px) {
111+
justify-content: space-around;
112+
padding: 2rem 1rem;
113+
gap: 0;
114+
}
115+
116+
a {
117+
align-items: center;
118+
border: 3.3px solid #FFF;
119+
border-radius: 59.396px;
120+
color: #fff;
121+
display: inline-flex;
122+
font-weight: 900;
123+
padding: 0.75rem 1.5rem;
124+
text-decoration: none;
125+
min-width: 9rem;
126+
justify-content: space-between;
127+
128+
&:hover {
129+
background-color: rgba(0,0,0,0.5);
130+
}
131+
132+
@media (max-width: 992px) {
133+
font-size: 14px;
134+
margin-top: 12px;
135+
}
76136

77-
@for $i from 3 through 5 {
78-
li:nth-child(#{$i}) {
79-
top: calc(5rem + if($i == 3, 5rem, 4rem) * ($i - 3));
137+
img {
138+
width: 2rem;
139+
padding-left: 0.5rem;
140+
}
141+
}
80142
}
81143
}
82144
}

0 commit comments

Comments
 (0)