Skip to content

Commit 507d35b

Browse files
clementbironclementbiron
committed
WIP improve menu
1 parent 9aa4584 commit 507d35b

File tree

6 files changed

+120
-204
lines changed

6 files changed

+120
-204
lines changed

‎themes/opentermsarchive/assets/css/base.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ html {
1010
}
1111

1212
body {
13-
background-color: var(--colorWhite);
1413
font-family: var(--defaultFontFamily);
1514
font-size: var(--defaultFontSize);
15+
font-weight: normal;
16+
line-height: 1.6;
1617
color: var(--colorBlack900);
17-
line-height: 1.5;
1818
letter-spacing: -0.2px;
19-
font-weight: normal;
19+
background-color: var(--colorWhite);
2020
}

‎themes/opentermsarchive/assets/css/components/aside.css‎

Lines changed: 39 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
flex-shrink: 0;
33
margin-right: var(--mXL);
44
@mixin grid 3, 2;
5-
border: 1px solid var(--colorBlack200);
6-
border-radius: 4px;
75
}
86

97
@media (--tabletSmall) {
@@ -14,157 +12,56 @@
1412
}
1513

1614
.aside_nav {
17-
> ul > li > details > ul > li:last-child,
18-
> ul > li > details > ul > li:not(:last-child) > ul {
19-
margin-bottom: var(--mS);
20-
}
21-
2215
ul {
2316
color: var(--colorBlack600);
2417
display: flex;
18+
gap:var(--m3XS);
2519
flex-direction: column;
2620

2721
li {
28-
position: relative;
29-
border-bottom: 1px solid var(--colorBlack200);
30-
31-
&:last-child {
32-
border: none;
33-
}
34-
35-
a {
36-
padding: var(--mXS) var(--mS);
37-
display: inline-block;
38-
width: 100%;
39-
}
40-
41-
.aside_item-current {
42-
color: var(--colorBlack800);
43-
44-
&::before {
45-
content: '';
46-
position: absolute;
47-
left: 0;
48-
width: 4px;
49-
background-color: var(--colorPrimary);
50-
border-radius: 0 10px 10px 0;
51-
z-index: 1;
52-
top: var(--m2XS);
53-
bottom: var(--m2XS);
54-
}
55-
56-
&::after {
57-
content: '';
58-
position: absolute;
59-
background-color: var(--colorBlack200);
60-
border-radius: 4px;
61-
z-index: -1;
62-
left: var(--mXS);
63-
right: var(--m2XS);
64-
top: var(--m2XS);
65-
bottom: var(--m2XS);
66-
}
67-
}
68-
69-
&.aside_item-current-section {
70-
&::before {
71-
content: '';
72-
position: absolute;
73-
left: 0;
74-
top: 0;
75-
bottom: 0;
76-
width: 1px;
77-
background-color: var(--colorPrimary);
78-
border-radius: 0;
79-
}
80-
81-
& .aside_item-current {
82-
&::before {
83-
top: 2px;
84-
bottom: 2px;
85-
}
86-
87-
&::after {
88-
top: 0;
89-
bottom: 0;
90-
right: var(--mXS);
22+
& ul {
23+
& li {
24+
& ul {
25+
border-left:1px solid var(--colorBlack300);
26+
padding-left:var(--pXS);
9127
}
9228
}
9329
}
94-
95-
details {
96-
position: relative;
97-
98-
summary {
99-
padding: var(--mXS) var(--mS);
100-
list-style: none;
101-
cursor: pointer;
102-
103-
&::marker,
104-
&::-webkit-details-marker {
105-
display: none;
106-
}
107-
108-
& svg {
109-
position: absolute;
110-
right: 10px;
111-
top: 14px;
112-
font-size: 0.8em;
113-
color: var(--colorBlack400);
114-
transition: transform 0.2s ease;
115-
}
116-
117-
&:hover::after {
118-
content: '';
119-
position: absolute;
120-
inset: 0;
121-
background-color: var(--colorBlack100);
122-
z-index: -1;
123-
}
124-
}
125-
126-
&[open] summary > svg {
127-
transform: rotate(180deg);
128-
}
129-
}
130-
131-
span {
132-
display: inline-block;
133-
}
13430
}
31+
}
32+
}
13533

136-
ul {
137-
li {
138-
border: none;
139-
140-
a {
141-
padding: var(--p3XS) var(--mL);
142-
border-radius: 4px;
143-
}
144-
145-
> span,
146-
a {
147-
padding-left: var(--mS);
148-
}
149-
150-
> a {
151-
padding-top: var(--p3XS);
152-
padding-bottom: var(--p3XS);
153-
}
154-
155-
ul {
156-
padding-top: 0;
34+
.aside_item-current {
35+
font-weight: bold;
36+
z-index:1;
37+
position:relative;
38+
39+
& a{
40+
color: var(--colorBlack800);
41+
}
42+
43+
&:before{
44+
content:"";
45+
position:absolute;
46+
left:calc(var(--xs) * -1);
47+
right:0;
48+
top:calc(var(--3xs) * -1);
49+
bottom:calc(var(--3xs) * -1);
50+
width:calc(100% + var(--xs));
51+
height:calc(100% + var(--2xs));
52+
z-index:-1;
53+
background-color: var(--colorBlack200);
54+
}
55+
}
15756

158-
li {
159-
padding: 0;
57+
.aside_item-section{
58+
display:inline-block;
59+
margin-top:var(--mXS);
60+
color: var(--colorBlack600);
61+
}
16062

161-
a {
162-
padding: var(--p3XS) var(--mL);
163-
border-radius: 4px;
164-
}
165-
}
166-
}
167-
}
168-
}
169-
}
63+
.aside_item-subsection{
64+
display:inline-block;
65+
margin-top:var(--m2XS);
66+
color: var(--colorBlack600);
17067
}

‎themes/opentermsarchive/assets/css/components/textContent.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.textContent {
2-
border:1Px solid var(--colorBlack200);
3-
padding:var(--mL);
2+
border:1Px solid var(--colorBlack300);
3+
padding:var(--pL);
44
overflow-x: hidden;
55
max-width: 100%;
66
width: 100%;

‎themes/opentermsarchive/assets/css/custom-properties.css‎

Lines changed: 35 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -13,43 +13,56 @@
1313
--gridGutterWidth: 24px;
1414

1515
/* Colors */
16-
--colorPrimary: #0496ff;
16+
--colorPrimary: #2d63ff;
17+
--colorPrimary300: #c5d9ff;
1718
--colorSecondary: #0b08a0;
1819
--colorTertiary: #f9dd3f;
19-
--colorDarkedSecondary: #b4656f;
2020
--colorError: #ec368d;
2121
--colorSuccess: #11ebc3;
2222
--colorBlack900: #010613;
2323
--colorBlack850: #171717;
2424
--colorBlack800: #333;
25+
--colorBlack700: #454545;
2526
--colorBlack600: #5e5e5e;
2627
--colorBlack400: #999;
2728
--colorBlack300: #d6d6d6;
2829
--colorBlack200: #f5f5f5;
2930
--colorBlack100: #fafafa;
3031
--colorWhite: #fefffd;
3132

33+
/* Sizes */
34+
--3xs: 2px;
35+
--2xs: 4px;
36+
--xs: 8px;
37+
--s: 12px;
38+
--m: 16px;
39+
--l: 24px;
40+
--xl: 36px;
41+
--2xl: 48px;
42+
--3xl: 64px;
43+
--4xl: 96px;
44+
3245
/* Padding & margin */
33-
--p3XS: 2px;
34-
--p2XS: 4px;
35-
--pXS: 8px;
36-
--pS: 12px;
37-
--pM: 16px;
38-
--pL: 24px;
39-
--pXL: 36px;
40-
--p2XL: 48px;
41-
--p3XL: 64px;
42-
--p4XL: 96px;
43-
--m3XS: 2px;
44-
--m2XS: 4px;
45-
--mXS: 8px;
46-
--mS: 12px;
47-
--mM: 16px;
48-
--mL: 24px;
49-
--mXL: 36px;
50-
--m2XL: 48px;
51-
--m3XL: 64px;
52-
--m4XL: 96px;
46+
--p3XS: var(--3xs);
47+
--p2XS: var(--2xs);
48+
--pXS: var(--xs);
49+
--pS: var(--s);
50+
--pM: var(--m);
51+
--pL: var(--l);
52+
--pXL: var(--xl);
53+
--p2XL: var(--2xl);
54+
--p3XL: var(--3xl);
55+
--p4XL: var(--4xl);
56+
--m3XS: var(--3xs);
57+
--m2XS: var(--2xs);
58+
--mXS: var(--xs);
59+
--mS: var(--s);
60+
--mM: var(--m);
61+
--mL: var(--l);
62+
--mXL: var(--xl);
63+
--m2XL: var(--2xl);
64+
--m3XL: var(--3xl);
65+
--m4XL: var(--4xl);
5366

5467
/* Breakpoints */
5568
--bpMobileSmall: 320px;

‎themes/opentermsarchive/assets/css/elements/links.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ a {
77
color: var(--colorSecondary);
88
transition: all 0.25s easeoutcirc;
99
}
10+
11+
&:active {
12+
color: var(--colorSecondary);
13+
}
1014
}
1115

1216
.a--small {

‎themes/opentermsarchive/layouts/partials/aside.html‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,39 @@
1-
<aside class="aside">
2-
{{ $currentPageSection := .Section }}
3-
{{ $currentPageRelPermalink := .RelPermalink }}
1+
{{ $currentPageSection := .Section }}
2+
{{ $currentPageRelPermalink := .RelPermalink }}
43

5-
<nav class="aside_nav">
6-
<ul>
7-
<li ><b><a class="{{ if eq $currentPageRelPermalink .Site.Home.RelPermalink }}aside_item-current{{ end }}" href="{{ .Site.Home.RelPermalink }}">{{ .Site.Home.LinkTitle }}</a></b></li>
8-
{{ range .Site.Sections.ByWeight }}
9-
<li class="{{ if eq $currentPageSection .Section }}aside_item-current-section{{ end }}">
10-
<details {{ if eq $currentPageSection .Section }}open{{ end }}>
11-
<summary><b>{{ .LinkTitle | markdownify }}</b> <i class="icon" data-lucide="chevron-down"></i></summary>
12-
<ul>
13-
{{ $allPages := .RegularPages.ByWeight | append .Sections.ByWeight }}
14-
{{ $allPages := sort $allPages "Weight" }}
15-
{{ range $allPages }}
16-
<li>
17-
{{ if .Content }}
18-
<a class="{{ if eq $currentPageRelPermalink .RelPermalink }}aside_item-current{{ end }}" href="{{ .RelPermalink }}">{{ .LinkTitle | markdownify }}</a>
19-
{{ else }}
20-
<span class="{{ if eq $currentPageRelPermalink .RelPermalink }}aside_item-current{{ end }}">{{ .LinkTitle | markdownify }}</span>
21-
{{ end }}
22-
{{ if .IsSection }}
23-
<ul>
24-
{{ range .RegularPages.ByWeight }}
25-
<li><a class="{{ if eq $currentPageRelPermalink .RelPermalink }}aside_item-current{{ end }}" href="{{ .RelPermalink }}">{{ .LinkTitle | markdownify }}</a></li>
26-
{{ end }}
27-
</ul>
28-
{{ end }}
29-
</li>
30-
{{ end }}
31-
</ul>
32-
</details>
33-
</li>
34-
{{ end }}
35-
</ul>
36-
</nav>
4+
<aside class="aside">
5+
<nav class="aside_nav">
6+
<ul>
7+
{{ range where .Site.Pages "Section" "" }}
8+
<li {{ if eq $currentPageRelPermalink .RelPermalink }}class="aside_item-current"{{ end }}>
9+
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
10+
</li>
11+
{{ end }}
12+
{{ range .Site.Sections.ByWeight }}
13+
<li {{ if eq $currentPageSection .Section }}class="aside_item-current-section"{{ end }}>
14+
{{ $allPages := .RegularPages.ByWeight | append .Sections.ByWeight }}
15+
{{ $allPages := sort $allPages "Weight" }}
16+
<span class="aside_item-section"><b>{{ .LinkTitle | markdownify }}</b></span>
17+
<ul>
18+
{{ range $allPages }}
19+
{{ if .Content }}
20+
<li {{ if eq $currentPageRelPermalink .RelPermalink }}class="aside_item-current"{{ end }}><a href="{{ .RelPermalink }}">{{ .LinkTitle | markdownify }}</a></li>
21+
{{ else }}
22+
<li><span class="aside_item-subsection">{{ .LinkTitle | markdownify }}</span></li>
23+
{{ end }}
24+
{{ if .IsSection }}
25+
<li>
26+
<ul>
27+
{{ range .RegularPages.ByWeight }}
28+
<li {{ if eq $currentPageRelPermalink .RelPermalink }}class="aside_item-current"{{ end }}><a href="{{ .RelPermalink }}">{{ .LinkTitle | markdownify }}</a></li>
29+
{{ end }}
30+
</ul>
31+
</li>
32+
{{ end }}
33+
{{ end }}
34+
</ul>
35+
</li>
36+
{{ end }}
37+
</ul>
38+
</nav>
3739
</aside>

0 commit comments

Comments
 (0)