Skip to content

Commit a6f7d62

Browse files
lucassm02lucassm02
authored
chore: merge pull request #5 from lucassm02/refactor/website
Fix Website Menu Responsiveness (#4)
2 parents c5017a5 + ff347ea commit a6f7d62

File tree

7 files changed

+529
-306
lines changed

7 files changed

+529
-306
lines changed

‎asset/banners/banner-gray.png

22.8 KB
Loading

‎asset/icon/icon.ico renamed to ‎asset/icons/icon.ico

File renamed without changes.

‎asset/icon/icon.png renamed to ‎asset/icons/icon.png

File renamed without changes.

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,10 @@
4242
"package.json"
4343
],
4444
"win": {
45-
"icon": "asset/icon/icon.ico"
45+
"icon": "asset/icons/icon.ico"
4646
},
4747
"linux": {
48-
"icon": "asset/icon/icon.png",
48+
"icon": "asset/icons/icon.png",
4949
"target": [
5050
"AppImage",
5151
"deb",

‎website/index.html

+20-304
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@
2020
<meta name="viewport" content="width=device-width, initial-scale=1" />
2121

2222
<!-- Open Graph / Facebook -->
23+
<meta property="og:type" content="website" />
24+
<meta property="og:url" content="https://lucassm02.github.io/mem-gui/" />
2325
<meta
2426
property="og:title"
2527
content="MemGUI - The Ultimate GUI for Memcached"
@@ -30,10 +32,24 @@
3032
/>
3133
<meta
3234
property="og:image"
33-
content="https://raw.githubusercontent.com/lucassm02/mem-gui/main/asset/images/logo-white.svg"
35+
content="https://raw.githubusercontent.com/lucassm02/mem-gui/main/asset/banners/banner-gray.png"
3436
/>
35-
<meta property="og:url" content="https://github.com/lucassm02/mem-gui" />
37+
38+
<!-- Twitter -->
3639
<meta name="twitter:card" content="summary_large_image" />
40+
<meta name="twitter:url" content="https://lucassm02.github.io/mem-gui/" />
41+
<meta
42+
name="twitter:title"
43+
content="MemGUI - The Ultimate GUI for Memcached"
44+
/>
45+
<meta
46+
name="twitter:description"
47+
content="Easily manage and monitor your Memcached servers with MemGUI. Supports SASL authentication, auto-update, advanced search, and more."
48+
/>
49+
<meta
50+
name="twitter:image"
51+
content="https://raw.githubusercontent.com/lucassm02/mem-gui/main/asset/banners/banner-gray.png"
52+
/>
3753

3854
<title>
3955
MemGUI - Download Page | Manage Your Memcached Servers Efficiently
@@ -44,308 +60,7 @@
4460
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
4561
rel="stylesheet"
4662
/>
47-
<style>
48-
/* ROOT VARIABLES */
49-
:root {
50-
--bg-color: #121212;
51-
--header-bg: #1e1e1e;
52-
--nav-bg: rgba(30, 30, 30, 0.8);
53-
--card-bg: #1f1f1f;
54-
--primary-color: #007acc;
55-
--primary-hover: #005a9e;
56-
--text-color: #e0e0e0;
57-
--subtext-color: #a0a0a0;
58-
--border-color: #007acc;
59-
--shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
60-
--transition: 0.3s ease;
61-
--heading-font: "Roboto", sans-serif;
62-
--body-font: "Roboto", sans-serif;
63-
}
64-
65-
* {
66-
margin: 0;
67-
padding: 0;
68-
box-sizing: border-box;
69-
}
70-
71-
html {
72-
scroll-behavior: smooth;
73-
}
74-
75-
body {
76-
font-family: var(--body-font);
77-
background-color: var(--bg-color);
78-
color: var(--text-color);
79-
line-height: 1.6;
80-
}
81-
82-
/* HERO SECTION */
83-
.hero {
84-
display: flex;
85-
flex-direction: column;
86-
align-items: center;
87-
text-align: center;
88-
position: relative;
89-
padding: 80px 20px;
90-
background: linear-gradient(150deg, var(--header-bg) 50%, #181818 100%);
91-
overflow: hidden;
92-
}
93-
.hero::before {
94-
content: "";
95-
position: absolute;
96-
top: -150px;
97-
left: -150px;
98-
width: 400px;
99-
height: 400px;
100-
background: var(--primary-color);
101-
opacity: 0.1;
102-
border-radius: 50%;
103-
filter: blur(60px);
104-
}
105-
.hero::after {
106-
content: "";
107-
position: absolute;
108-
bottom: -150px;
109-
right: -150px;
110-
width: 400px;
111-
height: 400px;
112-
background: var(--primary-color);
113-
opacity: 0.1;
114-
border-radius: 50%;
115-
filter: blur(60px);
116-
}
117-
.hero img {
118-
width: 90px;
119-
height: 90px;
120-
margin-bottom: 20px;
121-
animation: floatLogo 3s ease-in-out infinite;
122-
}
123-
@keyframes floatLogo {
124-
0%,
125-
100% {
126-
transform: translateY(0);
127-
}
128-
50% {
129-
transform: translateY(-8px);
130-
}
131-
}
132-
.hero h1 {
133-
font-size: 3rem;
134-
color: var(--primary-color);
135-
font-family: var(--heading-font);
136-
margin-bottom: 15px;
137-
}
138-
.hero p {
139-
font-size: 1.2rem;
140-
color: var(--subtext-color);
141-
max-width: 700px;
142-
margin: 0 auto 30px auto;
143-
}
144-
.hero .cta-buttons {
145-
display: flex;
146-
gap: 20px;
147-
flex-wrap: wrap;
148-
justify-content: center;
149-
}
150-
.hero .cta-buttons a {
151-
display: inline-block;
152-
padding: 14px 30px;
153-
color: #fff;
154-
text-decoration: none;
155-
background: var(--primary-color);
156-
border-radius: 6px;
157-
box-shadow: var(--shadow);
158-
transition:
159-
background-color var(--transition),
160-
transform var(--transition);
161-
}
162-
.hero .cta-buttons a:hover {
163-
background: var(--primary-hover);
164-
transform: translateY(-3px);
165-
}
166-
167-
/* NAVBAR */
168-
nav {
169-
position: sticky;
170-
top: 0;
171-
background-color: var(--nav-bg);
172-
backdrop-filter: blur(10px);
173-
padding: 10px 0;
174-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
175-
z-index: 100;
176-
}
177-
nav ul {
178-
list-style: none;
179-
display: flex;
180-
justify-content: center;
181-
align-items: center;
182-
}
183-
nav ul li {
184-
margin: 0 15px;
185-
}
186-
nav ul li a {
187-
text-decoration: none;
188-
color: var(--text-color);
189-
font-weight: 500;
190-
position: relative;
191-
transition: color var(--transition);
192-
padding: 5px 0;
193-
}
194-
nav ul li a:hover {
195-
color: var(--primary-color);
196-
}
197-
nav ul li a::after {
198-
content: "";
199-
position: absolute;
200-
bottom: -3px;
201-
left: 0;
202-
width: 0;
203-
height: 2px;
204-
background: var(--primary-color);
205-
transition: width var(--transition);
206-
}
207-
nav ul li a:hover::after {
208-
width: 100%;
209-
}
210-
211-
/* MAIN CONTENT */
212-
main {
213-
max-width: 1100px;
214-
margin: 50px auto;
215-
padding: 0 20px;
216-
}
217-
section {
218-
margin-bottom: 60px;
219-
}
220-
section h2 {
221-
font-size: 2rem;
222-
color: var(--primary-color);
223-
margin-bottom: 20px;
224-
display: inline-block;
225-
padding-bottom: 5px;
226-
border-bottom: 2px solid var(--border-color);
227-
}
228-
section p {
229-
margin-bottom: 15px;
230-
font-size: 1rem;
231-
}
232-
section ul {
233-
list-style: disc;
234-
padding-left: 20px;
235-
}
236-
section ul li {
237-
margin-bottom: 10px;
238-
}
239-
.sub-heading {
240-
color: var(--subtext-color);
241-
margin-top: -5px;
242-
margin-bottom: 20px;
243-
font-size: 0.95rem;
244-
}
245-
246-
/* CARDS / HIGHLIGHTS (OPTIONAL FEATURE SECTION) */
247-
.features-grid {
248-
display: grid;
249-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
250-
gap: 20px;
251-
}
252-
.feature-card {
253-
background: var(--card-bg);
254-
border-radius: 8px;
255-
box-shadow: var(--shadow);
256-
padding: 20px;
257-
transition: transform var(--transition);
258-
}
259-
.feature-card h3 {
260-
color: var(--primary-color);
261-
margin-bottom: 10px;
262-
font-size: 1.3rem;
263-
}
264-
.feature-card p {
265-
color: var(--subtext-color);
266-
}
267-
.feature-card:hover {
268-
transform: translateY(-5px);
269-
}
270-
271-
/* DOWNLOAD BUTTON STYLE (GLOBAL REUSE) */
272-
.download-button {
273-
display: inline-block;
274-
background-color: var(--primary-color);
275-
color: #fff;
276-
padding: 15px 30px;
277-
font-size: 1.1rem;
278-
text-decoration: none;
279-
border-radius: 5px;
280-
transition:
281-
background-color var(--transition),
282-
transform var(--transition);
283-
box-shadow: var(--shadow);
284-
}
285-
.download-button:hover {
286-
background-color: var(--primary-hover);
287-
transform: translateY(-3px);
288-
}
289-
290-
/* SCREENSHOT SECTION */
291-
.screenshot {
292-
text-align: center;
293-
}
294-
.screenshot img {
295-
max-width: 100%;
296-
border: 2px solid var(--primary-color);
297-
border-radius: 8px;
298-
box-shadow: var(--shadow);
299-
transition: transform var(--transition);
300-
}
301-
.screenshot img:hover {
302-
transform: scale(1.02);
303-
}
304-
305-
/* FOOTER */
306-
footer {
307-
background-color: var(--header-bg);
308-
text-align: center;
309-
padding: 30px;
310-
font-size: 0.9rem;
311-
border-top: 1px solid var(--primary-color);
312-
}
313-
footer p {
314-
margin-bottom: 5px;
315-
color: var(--subtext-color);
316-
}
317-
footer a {
318-
color: var(--primary-color);
319-
text-decoration: none;
320-
transition: color var(--transition);
321-
}
322-
footer a:hover {
323-
color: var(--primary-hover);
324-
}
325-
326-
/* RESPONSIVE */
327-
@media (max-width: 600px) {
328-
.hero h1 {
329-
font-size: 2.2rem;
330-
}
331-
.hero p {
332-
font-size: 1rem;
333-
}
334-
nav ul li {
335-
margin: 0 10px;
336-
}
337-
section h2 {
338-
font-size: 1.8rem;
339-
}
340-
.download-button {
341-
padding: 12px 24px;
342-
font-size: 1rem;
343-
}
344-
.feature-card h3 {
345-
font-size: 1.15rem;
346-
}
347-
}
348-
</style>
63+
<link rel="stylesheet" href="styles.css" />
34964
</head>
35065
<body>
35166
<!-- HERO / HEADER -->
@@ -591,5 +306,6 @@ <h2>Contact</h2>
591306
<a href="#top">Back to Top</a>
592307
</p>
593308
</footer>
309+
<script src="script.js"></script>
594310
</body>
595311
</html>

0 commit comments

Comments
 (0)