Skip to content

Style changes #108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
elcuervo merged 6 commits into from
May 13, 2025
Merged

Style changes #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d52f7d4
Main page does not have menu
elcuervo May 13, 2025
5d82367
Basic logo for meetup pages
elcuervo May 13, 2025
316838b
Like I know css
elcuervo May 13, 2025
671352f
Editions per year
elcuervo May 13, 2025
e0a0a77
Not so aggressive padding
elcuervo May 13, 2025
9e6b40d
Make the order make sense
elcuervo May 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 26 additions & 15 deletions _includes/meetups.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,30 @@ <h1>EDICIONES PASADAS</h1>
<p>Conocé el contenido de las ediciones pasadas.</p>
</header>

<ul>
{% for meetup in site.meetups reversed %}
<li class="meetup-event">
<a href="{{ meetup.url }}" class="meetup-event__link">
<span class="meetup-event__date">
{{ meetup.date | date_to_string }}
</span>
<span class="meetup-event__company">
{{ meetup.title }}
<img src="/assets/images/arrow.svg" aria-hidden="true">
</span>
</a>
</li>
{% endfor %}
</ul>
{% 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 %}
<h2 class="meetup-event__date_year">{{ year.name }}</h2>

<ul>
{% for meetup in year.items %}
<li class="meetup-event">
<a href="{{ meetup.url }}" class="meetup-event__link">
<span class="meetup-event__date">
{{ meetup.date | date_to_string }}
</span>
<span class="meetup-event__company">
{{ meetup.title }}
<img src="/assets/images/arrow.svg" aria-hidden="true">
</span>
</a>
</li>
{%- endfor -%}
</ul>
{%- endfor -%}
</section>
33 changes: 9 additions & 24 deletions _includes/nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,9 @@
<nav>
<ul>
<li>
<a href="/"><img src="/assets/images/blackstar.svg" alt="Logo" /></a>
</li>
<li>
Ruby UY
</li>
<li>
<a href="/">HOME</a>
</li>
<li>
<a href="/#about">ABOUT</a>
</li>
<li>
<a href="/#contact">CONTACT</a>
</li>
<li>
<button onclick="toggleNavLinks()" aria-label="Open Menu">
<img class="barBurger" src="/assets/images/menu.svg" alt="Open Menu Icon" aria-hidden="true" focusable="false" />
</button>
</li>
</ul>
</nav>
<header class="meetup__default">
<div>
<h1> </h1>

<a href="/">
<img src="{{ "logo.svg" | image_asset | buster }}" aria-hidden="true" focuseable="false"/>
</a>
</div>
</header>
7 changes: 1 addition & 6 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,8 @@
{% include head.html %}

<body>
{% include nav.html %}

<main>
{{ content }}
</main>
<main> {{ content }} </main>

{% include footer.html %}
</body>

</html>
1 change: 1 addition & 0 deletions _layouts/meetup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,4 +59,5 @@ <h3><span>{{ talk.title }}</span> - {{ speakers | join: ", " }}</h3>
</main>
</body>

{% include footer.html %}
</html>
13 changes: 6 additions & 7 deletions _sass/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,24 +19,21 @@ 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) {
font-size: 75px;
}

@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;
Expand All @@ -53,7 +50,9 @@ body {
}

@media (max-width: 768px) {
display: none;
position: relative;
left: 0;
padding: 15px;
}
}

Expand Down
8 changes: 8 additions & 0 deletions _sass/meetups.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
184 changes: 123 additions & 61 deletions _sass/nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
}
Expand Down