ben7sys/web7sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

language switch functionality added

Browse Source
This commit is contained in:
ben7sys
2024-11-25 00:17:13 +01:00
parent 083e9fd771
commit 558df41289
14 changed files with 579 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
public/css/header.css
View File

@@ -10,7 +10,7 @@ header {
left: 0;
right: 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: var(--theme-transition), transform 0.7s var(--transition-timing), box-shadow 0.7s var(--transition-timing);
transition: var(--theme-transition);
transform: var(--gpu-accelerated);
padding-left: var(--safe-area-inset-left);
padding-right: var(--safe-area-inset-right);
@@ -51,6 +51,13 @@ header {
padding-top: var(--space-md);
}
.nav-controls {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-left: var(--space-lg);
}
.nav-menu a {
color: var(--text);
text-decoration: none;
@@ -100,7 +107,6 @@ header {
position: relative;
width: calc(var(--space-xl) * 1.25);
height: calc(var(--space-xl) * 1.25);
margin-left: var(--space-sm);
}
.theme-toggle:hover {
@@ -157,3 +163,40 @@ header {
cursor: pointer;
padding: var(--space-sm);
}
/* Mobile Menu Adjustments */
@media (max-width: 768px) {
.mobile-menu-toggle {
display: block;
}
.nav-menu {
display: none;
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
background: var(--bg-card);
padding: var(--space-xl) var(--space-md);
flex-direction: column;
align-items: center;
gap: var(--space-lg);
}
.nav-menu.active {
display: flex;
}
.nav-controls {
flex-direction: row;
gap: var(--space-md);
margin: var(--space-md) 0;
padding-top: var(--space-md);
border-top: 1px solid var(--border-color);
}
.nav-menu a {
width: 100%;
text-align: center;
}
}

98
public/css/language-switcher.css Normal file
View File

@@ -0,0 +1,98 @@
.language-switcher {
display: flex;
gap: var(--space-xs);
padding: var(--space-xs);
border-radius: var(--radius-sm);
transition: var(--theme-transition);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.lang-btn {
background: none;
border: 2px solid var(--lang-switcher-border);
color: var(--lang-switcher-text);
padding: var(--space-xxs) var(--space-xs);
cursor: pointer;
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
transition: all var(--transition-speed) var(--transition-timing);
min-width: 40px;
min-height: 32px;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.lang-btn:hover {
background-color: var(--lang-switcher-active-bg);
color: var(--lang-switcher-active-text);
opacity: var(--lang-switcher-hover-opacity);
}
.lang-btn.active {
background-color: var(--lang-switcher-active-bg);
color: var(--lang-switcher-active-text);
}
/* Tablet Devices */
@media (max-width: 768px) {
.lang-btn {
font-size: var(--font-size-xs);
min-width: 36px;
min-height: 28px;
}
}
/* Mobile Devices */
@media (max-width: 480px) {
.language-switcher {
padding: var(--space-xxs);
}
}
/* Small Mobile Devices */
@media (max-width: 320px) {
.language-switcher {
padding: var(--space-xxs);
}
}
/* Ensure touch targets are large enough on mobile */
@media (hover: none) {
.lang-btn {
min-width: 44px;
min-height: 44px;
padding: var(--space-xs);
}
}
/* Animations */
.lang-btn {
position: relative;
overflow: hidden;
}
.lang-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: var(--lang-switcher-active-bg);
opacity: 0;
transform: translate(-50%, -50%) scale(0);
transition: transform var(--transition-speed) var(--transition-timing),
opacity var(--transition-speed) var(--transition-timing);
border-radius: var(--radius-sm);
pointer-events: none;
}
.lang-btn:active::after {
opacity: 0.1;
transform: translate(-50%, -50%) scale(1);
}

44
public/css/responsive.css
View File

@@ -91,6 +91,23 @@
background-color: var(--bg-hover-rgb);
}
.nav-controls {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--space-md);
width: 100%;
padding: var(--space-md) 0;
border-top: 1px solid var(--border-color);
margin-top: var(--space-md);
}
.language-switcher {
margin: 0;
padding: 0;
}
.contact-block {
flex-direction: column;
align-items: center;
@@ -176,6 +193,10 @@
padding: var(--space-lg);
margin: 0;
}
.nav-controls {
padding: var(--space-sm) 0;
}
}
/* Small Mobile Devices */
@@ -208,6 +229,10 @@
font-size: var(--font-size-xs);
padding: var(--space-sm);
}
.nav-controls {
gap: var(--space-sm);
}
}
/* Ensure touch targets are large enough on mobile */
@@ -228,10 +253,6 @@
.service-card:hover {
transform: none;
}
header:hover {
transform: none;
}
}
/* Fix for notched phones */
@@ -248,6 +269,21 @@
}
}
/* Ensure consistent nav-controls across all pages */
.nav-controls {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-left: var(--space-lg);
}
.language-switcher {
display: flex;
gap: var(--space-xs);
padding: var(--space-xs);
border-radius: var(--radius-sm);
}
@keyframes fadeIn {
from {
opacity: 0;

22
public/css/variables.css
View File

@@ -63,10 +63,10 @@
/* Light Theme Colors (default) */
--primary: #3a7be0;
--primary-gradient-1: #112fcf;
--primary-gradient-2: #3b3bc8;
--primary-gradient-3: #5743ed;
--primary-gradient-4: #784dd9;
--primary-gradient-1: rgba(17,47, 237); /* #112fed; */
--primary-gradient-2: rgba(59, 59, 237); /* #3b3bed; */
--primary-gradient-3: rgba(87, 67, 237); /* #5743ed; */
--primary-gradient-4: rgba(120, 77, 237); /* #784ded; */
--bg-main: #f8f8f8;
--bg-card: #f1f1f1;
@@ -78,12 +78,22 @@
--bg-hover-rgb: 237, 237, 237;
--bg-hover-nav: 207, 207, 207;
/* Language Switcher Specific */
--lang-switcher-bg: var(--bg-card);
--lang-switcher-text: var(--text);
--lang-switcher-border: var(--primary);
--lang-switcher-active-bg: var(--primary);
--lang-switcher-active-text: var(--bg-main);
--lang-switcher-shadow: rgba(0, 0, 0, 0.1);
--lang-switcher-hover-opacity: 0.9;
/* Z-index Scale */
--z-below: -1;
--z-normal: 1;
--z-above: 10;
--z-header: 100;
--z-modal: 1000;
--z-language-switcher: 1001;
}
/* Dark Theme */
@@ -96,6 +106,10 @@
--header-gradient-2: rgba(41, 41, 41, 0.9);
--bg-hover-rgb: 17, 17, 17;
--bg-hover-nav: 20, 20, 20;
/* Language Switcher Dark Theme */
--lang-switcher-bg: var(--bg-card);
--lang-switcher-shadow: rgba(0, 0, 0, 0.2);
}
/* Responsive Adjustments */