Skip to content

Commit 7ea1896

Browse files
oscaroterooscarotero
committed
grid refactor
1 parent 2aaf076 commit 7ea1896

File tree

12 files changed

+166
-94
lines changed

12 files changed

+166
-94
lines changed

‎_includes/layouts/base.vto‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@
88
<link rel="stylesheet" href="/style.css">
99
</head>
1010

11-
<body>
11+
<body class="ly-main">
1212
{{ include "templates/navbar.vto" }}
1313

14-
<main>
14+
<main class="ly-main-main">
1515
{{ content }}
1616
</main>
1717

1818
<!-- FOOTER -->
19-
<footer>
19+
<footer class="ly-main-footer">
2020
<address>
2121
{{ t.footer.address |> md }}
2222
</address>

‎_includes/layouts/member_list.vto‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,13 @@
22
layout: ./base.vto
33
---
44
5-
<header class="header">
5+
<header class="ly-main-header header">
66
<h1 class="header-title">{{ title }}</h1>
77
8+
<div class="header-description">
9+
{{ description |> md }}
10+
</div>
11+
812
<div class="header-filter ly-tags">
913
{{ for tag of search.values("tags", "type=member lang=" + lang).sort() }}
1014
<span class="filter">{{ tag }}</span>

‎_includes/styles/components/header.css‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
.header {
22
display: grid;
3-
row-gap: var(--space-m);
3+
row-gap: var(--space-s);
44
margin-bottom: 100px;
5-
margin-left: 250px;
5+
grid-column: center-start / content-end;
6+
max-width: 800px;
67
}
78

89
.header-title {
@@ -12,6 +13,13 @@
1213
line-height: var(--line-xshort);
1314
margin: 0;
1415
}
16+
.header-description {
17+
font-size: var(--size-2);
18+
19+
p {
20+
margin: 0;
21+
}
22+
}
1523
.header-filter {
16-
max-width: 800px;
24+
margin-top: var(--space-m);
1725
}

‎_includes/styles/components/members.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@
2727
.member-header {
2828
margin: 0;
2929
grid-area: header;
30+
display: grid;
31+
row-gap: var(--space-3xs);
3032
}
3133

3234
.member-name {

‎_includes/styles/components/menu.css‎

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,17 @@
11
.menu {
22
--gap: var(--space-m-xl);
33
display: flex;
4-
align-items: start;
54
column-gap: var(--gap);
65

76
> :where(ul) {
87
list-style-type: "";
98
margin: 0;
109
padding: 0;
1110
display: grid;
11+
grid-template-columns: max-content;
1212
row-gap: var(--space-2xs);
13-
max-width: 200px;
14-
}
15-
16-
li {
17-
display: flex;
18-
align-items: center;
19-
column-gap: 0.5em;
20-
21-
&::before {
22-
display: block;
23-
content: "";
24-
flex: 0 0 auto;
25-
width: 0.4rem;
26-
height: 0.6rem;
27-
background: currentColor;
28-
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
29-
opacity: 0;
30-
}
31-
&:has(.is-selected)::before {
32-
opacity: 1;
33-
}
13+
column-gap: var(--space-xl);
14+
align-content: start;
3415
}
3516

3617
a {
@@ -46,10 +27,20 @@
4627
font-size: var(--size-1);
4728
font-weight: var(--font-bold);
4829
line-height: var(--line-short);
30+
31+
@media (width > 900px) {
32+
grid-template-columns: repeat(2, max-content);
33+
}
4934
}
5035
.menu-projects {
5136
font-size: var(--size-0);
5237
line-height: var(--line-short);
38+
border-left: solid 1px;
39+
padding-left: var(--space-m-xl);
40+
41+
> li {
42+
max-width: 200px;
43+
}
5344
}
5445
.menu-languages {
5546
font-size: var(--size-0);
@@ -59,4 +50,24 @@
5950
.is-selected {
6051
font-weight: var(--font-bold);
6152
}
53+
54+
li {
55+
display: flex;
56+
align-items: center;
57+
column-gap: 0.5em;
58+
59+
&::before {
60+
display: block;
61+
content: "";
62+
flex: 0 0 auto;
63+
width: 0.4rem;
64+
height: 0.6rem;
65+
background: currentColor;
66+
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
67+
opacity: 0;
68+
}
69+
&:has(.is-selected)::before {
70+
opacity: 1;
71+
}
72+
}
6273
}

‎_includes/styles/layouts/grid.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@
77
grid-template-columns: repeat(auto-fit, minmax(min(var(--width), 100%), 1fr));
88
column-gap: var(--column-gap);
99
row-gap: var(--row-gap);
10+
grid-column: content;
1011
}

‎_includes/styles/layouts/main.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.ly-main {
2+
--lateral: clamp(90px, 20vw, 190px);
3+
display: grid;
4+
grid-template-columns:
5+
[full-start] 1fr [content-start] var(--lateral) [center-start] minmax(
6+
0,
7+
1000px
8+
) [center-end] var(--lateral) [content-end] 1fr [full-end];
9+
grid-template-areas:
10+
". logo menu menu . ."
11+
"main main main main main main"
12+
". . footer footer footer .";
13+
justify-content: center;
14+
align-items: start;
15+
align-content: start;
16+
gap: var(--space-m-xl);
17+
margin-block: var(--space-m-xl);
18+
}
19+
20+
.ly-main-logo {
21+
grid-area: logo;
22+
23+
svg {
24+
display: block;
25+
width: 100%;
26+
height: auto;
27+
}
28+
}
29+
30+
.ly-main-menu {
31+
grid-area: menu;
32+
}
33+
34+
.ly-main-main {
35+
grid-area: main;
36+
display: grid;
37+
grid-template-columns: subgrid;
38+
align-items: start;
39+
align-content: start;
40+
margin-top: var(--space-m-xl);
41+
}
42+
43+
.ly-main-footer {
44+
grid-area: footer;
45+
}
46+
47+
.ly-main-header {
48+
grid-column: center-start / center-end;
49+
}

‎_includes/styles/reset.css‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,8 @@ h1, h2, h3, h4, h5, h6, strong, b {
1515
}
1616

1717
body {
18-
--gap: var(--space-m-xl);
19-
display: grid;
20-
grid-template-columns: 0 minmax(0, 1400px) 0;
21-
justify-content: space-between;
22-
column-gap: var(--gap);
23-
padding-block: var(--gap);
2418
-moz-osx-font-smoothing: grayscale;
2519
text-rendering: optimizeLegibility;
26-
27-
> * {
28-
grid-column: 2;
29-
}
3020
}
3121

3222
a {

‎_includes/styles/variables.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,4 +64,5 @@
6464
/* Custom pairs */
6565
--space-s-l: clamp(1rem, 0.6522rem + 1.7391vw, 2rem);
6666
--space-m-xl: clamp(1.5rem, 0.9783rem + 2.6087vw, 3rem);
67+
--space-m-2xl: clamp(1.5rem, 0.6304rem + 4.3478vw, 4rem);
6768
}

‎_includes/templates/navbar.vto‎

Lines changed: 56 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -17,61 +17,62 @@ menu:
1717
home: /es/
1818
---
1919
20-
<header class="navbar">
21-
<!-- Logo DAG -->
22-
<a class="navbar-logo" href="{{ menu.languages[lang].home }}">
23-
<img src="/img/icons/dag.svg" alt="Asociación Galega de Deseño" inline>
24-
</a>
20+
<!-- Logo DAG -->
21+
<a class="ly-main-logo" href="{{ menu.languages[lang].home }}">
22+
<img src="/img/icons/dag.svg" alt="Asociación Galega de Deseño" inline>
23+
</a>
2524
26-
<nav class="menu navbar-menu">
27-
<!-- Menú seccións principais -->
28-
<ul class="menu-main">
29-
{{ for id of menu.sections }}
30-
{{ set page = search.page(`id=${id} lang=${lang}`) }}
31-
<li class="{{ main_menu == page.main_menu ? 'is-selected' : '' }}">
32-
<a href="{{ page.url }}">{{ page.title }}</a>
33-
</li>
34-
{{ /for }}
35-
</ul>
25+
<nav class="ly-main-menu menu">
26+
<!-- Menú seccións principais -->
27+
<ul class="menu-main">
28+
{{ for id of menu.sections }}
29+
{{ set page = search.page(`id=${id} lang=${lang}`) }}
30+
<li class="{{ main_menu == page.main_menu ? 'is-selected' : '' }}">
31+
<a href="{{ page.url }}">{{ page.title }}</a>
32+
</li>
33+
{{ /for }}
34+
<li>
35+
<strong>Buscar</strong>
36+
</li>
37+
</ul>
3638
37-
<!-- Menú iniciativas -->
38-
<ul class="menu-projects">
39-
{{
40-
for page of search.pages(`type=project in_menu=true lang=${lang}`, "year=desc")
41-
}}
42-
<li>
43-
<a href="{{ page.external_url }}">{{ page.title }}</a>
44-
</li>
45-
{{ /for }}
46-
</ul>
39+
<!-- Menú iniciativas -->
40+
<ul class="menu-projects">
41+
{{
42+
for page of search.pages(`type=project in_menu=true lang=${lang}`, "year=desc")
43+
}}
44+
<li>
45+
<a href="{{ page.external_url }}">{{ page.title }}</a>
46+
</li>
47+
{{ /for }}
48+
</ul>
4749
48-
<!-- Menú idiomas -->
49-
<ul class="menu-languages">
50-
{{ for code, {name, home} of menu.languages }}
51-
{{ set alternate = alternates.find((page) => page.lang === code) }}
52-
<li>
53-
{{ if alternate }}
54-
<a
55-
class="{{ code == lang ? 'is-selected' : '' }}"
56-
rel="alternate"
57-
hreflang="{{ code }}"
58-
lang="{{ code }}"
59-
href="{{ alternate.url }}"
60-
>
61-
{{ name }}
62-
</a>
63-
{{ else }}
64-
<a
65-
class="{{ code == lang ? 'is-selected' : '' }}"
66-
hreflang="{{ code }}"
67-
lang="{{ code }}"
68-
href="{{ home }}"
69-
>
70-
{{ name }}
71-
</a>
72-
{{ /if }}
73-
</li>
74-
{{ /for }}
75-
</ul>
76-
</nav>
77-
</header>
50+
<!-- Menú idiomas -->
51+
<ul class="menu-languages">
52+
{{ for code, {name, home} of menu.languages }}
53+
{{ set alternate = alternates.find((page) => page.lang === code) }}
54+
<li>
55+
{{ if alternate }}
56+
<a
57+
class="{{ code == lang ? 'is-selected' : '' }}"
58+
rel="alternate"
59+
hreflang="{{ code }}"
60+
lang="{{ code }}"
61+
href="{{ alternate.url }}"
62+
>
63+
{{ name }}
64+
</a>
65+
{{ else }}
66+
<a
67+
class="{{ code == lang ? 'is-selected' : '' }}"
68+
hreflang="{{ code }}"
69+
lang="{{ code }}"
70+
href="{{ home }}"
71+
>
72+
{{ name }}
73+
</a>
74+
{{ /if }}
75+
</li>
76+
{{ /for }}
77+
</ul>
78+
</nav>

0 commit comments

Comments
 (0)