Skip to content

Commit ac9d6a4

Browse files
dafidafi
committed
changed style
1 parent 1c63aba commit ac9d6a4

File tree

8 files changed

+311
-91
lines changed

8 files changed

+311
-91
lines changed

‎_config.yml‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ navigation_links:
4949
social_links:
5050
- label: Twitter
5151
link: *x_link
52-
icon_class: fa-twitter
52+
icon_class: fa-x-twitter
5353
- label: GitHub
5454
link: *github_link
5555
icon_class: fa-github
@@ -69,4 +69,3 @@ toc:
6969
# Set 'type' to false to turn toc generation off globally
7070
# Supported types: 'js' or 'plugin'
7171
type: js
72-

‎_includes/content.html‎

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,26 @@
1-
<header>
2-
<h2>{{ page.title }}</h2>
3-
</header>
4-
<div class="row">
5-
<div class="12u">
6-
7-
<!-- Text -->
8-
<section class="box">
9-
{% case site.toc.type %}
10-
{% when 'plugin' %}
11-
{{ content | toc_generate }}
12-
{% when 'js' %}
13-
<div id="toc-container"></div>
14-
{{ content }}
15-
{% else %}
16-
{{ content }}
17-
{% endcase %}
18-
</section>
19-
20-
</div>
1+
<section class="relative">
2+
<div class="relative">
3+
<div class="flex flex-col gap-10 lg:flex-row">
4+
{% if (site.toc.type == 'js' and (page.noToc == null or page.noToc == false)) or page.fake_toc_title %}
5+
<aside class="lg:w-72 lg:flex-none order-first">
6+
<div id="toc-container" class="sticky top-28 space-y-3 text-sm text-brand-900">
7+
{% if page.fake_toc_title %}
8+
<div class="font-semibold text-brand-800">{{ page.fake_toc_title }}</div>
9+
{% else %}
10+
<div class="font-semibold text-brand-800">On this page</div>
11+
{% endif %}
2112
</div>
13+
</aside>
14+
{% endif %}
15+
16+
<article class="prose prose-lg max-w-none prose-a:text-brand-700 prose-a:font-semibold prose-a:no-underline hover:prose-a:text-brand-800 prose-strong:text-brand-800 prose-headings:text-slate-900">
17+
{% case site.toc.type %}
18+
{% when 'plugin' %}
19+
{{ content | toc_generate }}
20+
{% else %}
21+
{{ content }}
22+
{% endcase %}
23+
</article>
24+
</div>
25+
</div>
26+
</section>

‎_includes/footer.html‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
1-
<footer id="footer">
2-
<ul class="icons">
3-
{% for l in site.social_links %}
4-
<li><a href="{{l.link}}" class="icon {{l.icon_class}}"><span class="label">{{l.label}}</span></a></li>
5-
{% endfor %}
6-
</ul>
7-
<ul class="copyright">
8-
<li>&copy; {{site.title}}. All rights reserved.</li><li>Design: <a href="https://html5up.net">HTML5 UP</a></li>
9-
</ul>
10-
</footer>
1+
<footer class="mt-12 border-t border-brand-100 bg-white/70 backdrop-blur">
2+
<div class="max-w-6xl mx-auto px-6 lg:px-12 py-10 flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
3+
<div class="space-y-1">
4+
<p class="text-sm font-semibold text-brand-800">&copy; {{site.title}}</p>
5+
<p class="text-sm text-slate-600">Documentation and support for VisualDiffer.</p>
6+
</div>
7+
<div class="flex items-center gap-3">
8+
{% for l in site.social_links %}
9+
<a href="{{l.link}}" class="flex h-10 w-10 items-center justify-center rounded-full border border-brand-100 bg-white text-brand-700 shadow-sm transition hover:-translate-y-0.5 hover:bg-brand-50 hover:text-brand-900">
10+
<i class="fa-brands {{l.icon_class}}"></i>
11+
<span class="sr-only">{{l.label}}</span>
12+
</a>
13+
{% endfor %}
14+
</div>
15+
</div>
16+
</footer>

‎_includes/header.html‎

Lines changed: 88 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,92 @@
1-
<header id="header" class="skel-layers-fixed">
2-
<h1><span class="image header"><img src="{{ site.header.logo_image }}"/></span><a href="index.html">{{ site.header.title }}</a> {{ site.header.subtitle }}</h1>
3-
<nav id="nav">
4-
<ul>
1+
<header class="sticky top-0 z-50 border-b border-brand-100/80 bg-white/80 backdrop-blur">
2+
<div class="w-full px-6 lg:px-12">
3+
<div class="flex items-center gap-4 py-4">
4+
{% assign page_title = page.title | default: site.header.subtitle %}
5+
{% assign page_description = page.subtitle | default: page.description | default: site.description %}
6+
7+
<div class="flex items-center gap-3">
8+
<a href="index.html" class="flex items-center gap-3">
9+
<span class="flex h-12 w-12 items-center justify-center rounded-2xl bg-brand-100 ring-1 ring-brand-200 shadow-inner">
10+
<img src="{{ site.header.logo_image }}" alt="{{ site.title }} logo" class="h-9 w-9 object-contain" loading="lazy" />
11+
</span>
12+
<div class="leading-tight">
13+
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-brand-700">{{ site.header.title }}</p>
14+
<p class="text-xl font-bold text-slate-900">{{ page_title }}</p>
15+
<p class="text-sm text-slate-600">{{ page_description }}</p>
16+
</div>
17+
</a>
18+
</div>
19+
20+
<div class="flex items-center gap-3 ml-auto">
21+
{% if site.common_links and site.common_links.size > 0 %}
22+
{% assign primary_link = site.common_links[0] %}
23+
<div class="hidden md:flex md:flex-col md:items-start md:gap-1">
24+
<a href="{{ primary_link.link }}" class="rounded-full bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-glow transition hover:bg-brand-700">
25+
{{ primary_link.title }}
26+
</a>
27+
</div>
28+
{% endif %}
29+
30+
<nav class="hidden md:flex items-center gap-3 ml-auto">
31+
<ul class="flex items-center gap-3">
532
{% for i in site.navigation_links %}
6-
{% if i.link %}
7-
<li><a href="{{ i.link }}">{{ i.title }}</a></li>
8-
{% else if i.submenus %}
9-
<li><a href="" class="icon fa-angle-down">{{ i.title }}</a>
10-
<ul>
11-
{% for sub in i.submenus %}
12-
<li><a href="{{ sub.link }}">{{ sub.title }}</a></li>
13-
{% endfor %}
14-
</ul>
15-
</li>
16-
{% endif %}
33+
{% if i.link %}
34+
<li>
35+
<a href="{{ i.link }}" class="rounded-full bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-glow transition hover:bg-brand-700">
36+
{{ i.title }}
37+
</a>
38+
</li>
39+
{% elsif i.submenus %}
40+
<li class="relative group">
41+
<div class="flex items-center gap-2 rounded-full bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-glow transition hover:bg-brand-700">
42+
<span>{{ i.title }}</span>
43+
<i class="fa-solid fa-chevron-down text-xs text-white/80"></i>
44+
</div>
45+
<div class="absolute right-0 mt-3 flex flex-col gap-1 rounded-xl border border-brand-100 bg-white p-3 shadow-lg opacity-0 pointer-events-none group-hover:pointer-events-auto group-hover:opacity-100 group-hover:translate-y-0 transition transform translate-y-1">
46+
{% for sub in i.submenus %}
47+
<a href="{{ sub.link }}" class="rounded-lg px-3 py-2 text-slate-700 transition hover:bg-brand-50 hover:text-brand-800 whitespace-nowrap">{{ sub.title }}</a>
48+
{% endfor %}
49+
</div>
50+
</li>
51+
{% endif %}
1752
{% endfor %}
1853
</ul>
1954
</nav>
20-
</header>
55+
56+
<button id="menu-toggle" class="inline-flex h-11 w-11 items-center justify-center rounded-xl border border-brand-100 bg-white text-brand-700 shadow-sm transition hover:border-brand-200 hover:text-brand-900 md:hidden" aria-label="Apri o chiudi il menu di navigazione">
57+
<span class="sr-only">Menu</span>
58+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
59+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
60+
</svg>
61+
</button>
62+
</div>
63+
</div>
64+
65+
<nav id="nav-links" class="hidden flex-col gap-2 rounded-2xl border border-brand-100 bg-white/95 p-4 text-sm font-semibold text-slate-800 shadow-glow md:hidden">
66+
<ul class="flex flex-col gap-2 w-full">
67+
{% for i in site.navigation_links %}
68+
{% if i.link %}
69+
<li>
70+
<a href="{{ i.link }}" class="flex items-center justify-between rounded-full bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-glow transition hover:bg-brand-700">
71+
<span>{{ i.title }}</span>
72+
<span class="text-brand-100 md:hidden">↗</span>
73+
</a>
74+
</li>
75+
{% elsif i.submenus %}
76+
<li class="relative group">
77+
<div class="flex items-center justify-between rounded-full bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-glow transition hover:bg-brand-700">
78+
<span>{{ i.title }}</span>
79+
<i class="fa-solid fa-chevron-down text-xs text-white/80"></i>
80+
</div>
81+
<div class="mt-2 flex flex-col gap-1 rounded-xl border border-brand-100 bg-white/95 p-3 shadow-lg md:absolute md:left-1/2 md:top-11 md:w-56 md:-translate-x-1/2 md:translate-y-2 md:border-brand-100 md:opacity-0 md:pointer-events-none md:group-hover:pointer-events-auto md:group-hover:opacity-100 md:group-hover:translate-y-0 md:transition">
82+
{% for sub in i.submenus %}
83+
<a href="{{ sub.link }}" class="rounded-lg px-3 py-2 text-slate-700 transition hover:bg-brand-50 hover:text-brand-800">{{ sub.title }}</a>
84+
{% endfor %}
85+
</div>
86+
</li>
87+
{% endif %}
88+
{% endfor %}
89+
</ul>
90+
</nav>
91+
</div>
92+
</header>

‎_includes/stylesheets.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
<link rel="stylesheet" type="text/css" media="screen" href="css/wiki/vd.css"/>
2-
<link rel="stylesheet" type="text/css" media="screen" href="css/wiki/toc.css"/>
1+
<link rel="stylesheet" type="text/css" media="screen" href="css/theme.css"/>

‎_layouts/default.html‎

Lines changed: 58 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,75 @@
1-
<!DOCTYPE HTML>
2-
<!--
3-
Alpha by HTML5 UP
4-
html5up.net | @n33co
5-
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
6-
-->
7-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en">
83
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
96
<title>{{ site.title }}{% if page.title %} - {% endif %}{{ page.title }}</title>
10-
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
11-
<meta name="description" content="{% if page.description %}{{ page.description }}{% else if page.subtitle %}{{ page.subtitle }}{% else if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}" >
7+
<meta name="description" content="{% if page.description %}{{ page.description }}{% else if page.subtitle %}{{ page.subtitle }}{% else if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
128
<meta name="keywords" content="{{ site.keywords }}" />
139
<link rel="shortcut icon" href="{{ site.favicon }}" type="image/x-icon"/>
1410
<link rel="icon" href="{{ site.favicon }}" type="image/x-icon"/>
15-
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
16-
<script src="js/jquery.min.js"></script>
17-
<script src="js/jquery.dropotron.min.js"></script>
18-
<script src="js/jquery.scrollgress.min.js"></script>
19-
<script src="js/skel.min.js"></script>
20-
<script src="js/skel-layers.min.js"></script>
21-
<script src="js/init.js"></script>
22-
<noscript>
23-
<link rel="stylesheet" href="css/skel.css" />
24-
<link rel="stylesheet" href="css/style.css" />
25-
<link rel="stylesheet" href="css/style-wide.css" />
26-
</noscript>
27-
<link rel="stylesheet" href="css/top-extras.css" />
28-
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
11+
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap" rel="stylesheet">
15+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
16+
17+
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
18+
<script>
19+
tailwind.config = {
20+
theme: {
21+
extend: {
22+
colors: {
23+
brand: {
24+
50: '#ecfdf3',
25+
100: '#d1fadf',
26+
200: '#a7f3c7',
27+
300: '#6ee7b7',
28+
400: '#34d399',
29+
500: '#10b981',
30+
600: '#059669',
31+
700: '#047857',
32+
800: '#065f46',
33+
900: '#064e3b'
34+
}
35+
},
36+
fontFamily: {
37+
sans: ['"Manrope"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
38+
display: ['"Manrope"', 'ui-sans-serif', 'system-ui', 'sans-serif']
39+
},
40+
boxShadow: {
41+
glow: '0 20px 60px -25px rgba(16, 185, 129, 0.55)'
42+
}
43+
}
44+
}
45+
}
46+
</script>
2947

3048
{% include stylesheets.html %}
49+
<script src="js/jquery.min.js"></script>
3150
{% include scripts.html %}
3251
{% include cookiesdirective.html %}
33-
3452
{% include analytics.html %}
35-
3653
</head>
37-
<body>
54+
<body class="min-h-screen bg-white text-slate-900 antialiased">
3855

39-
<!-- Header -->
4056
{% include header.html %}
4157

42-
<!-- Main -->
43-
<section id="main" class="container">
44-
{% include content.html %}
45-
</section>
58+
<main id="main" class="w-full px-6 lg:px-12 py-10 lg:py-14">
59+
{% include content.html %}
60+
</main>
4661

47-
<!-- Footer -->
4862
{% include footer.html %}
63+
64+
<script>
65+
const menuToggle = document.getElementById('menu-toggle');
66+
const navLinks = document.getElementById('nav-links');
67+
if (menuToggle && navLinks) {
68+
menuToggle.addEventListener('click', () => {
69+
navLinks.classList.toggle('hidden');
70+
navLinks.classList.toggle('flex');
71+
});
72+
}
73+
</script>
4974
</body>
50-
</html>
75+
</html>

0 commit comments

Comments
 (0)