logo fixed using code
@ -240,4 +240,92 @@
|
|||||||
.carousel-item { width: 85%; }
|
.carousel-item { width: 85%; }
|
||||||
.section-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
|
.section-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* css for logo */
|
||||||
|
|
||||||
|
.logo-wrapper {
|
||||||
|
--logo-scale: 0.35;
|
||||||
|
font-size: calc(40px * var(--logo-scale));
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.8em;
|
||||||
|
color: #132238;
|
||||||
|
text-decoration: none;
|
||||||
|
direction: ltr;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Refined Geometry */
|
||||||
|
.logo-wrapper {
|
||||||
|
--t: 0.52em;
|
||||||
|
--gap: 0.42em;
|
||||||
|
--width: 3.2em;
|
||||||
|
--r: 0.85em;
|
||||||
|
/* Width of the text block - adjust this to make text wider/narrower */
|
||||||
|
--text-width: 3.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- SYMBOL CONSTRUCTION --- */
|
||||||
|
.symbol {
|
||||||
|
position: relative;
|
||||||
|
width: var(--width);
|
||||||
|
height: calc((var(--t) * 4) + (var(--gap) * 3));
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b { position: absolute; background: currentColor; }
|
||||||
|
.top-left { top: 0; left: 0; width: 0.80em; height: var(--t); }
|
||||||
|
.top-right { top: 0; right: 0; width: 1.88em; height: var(--t); }
|
||||||
|
.middle { top: calc(var(--t) + var(--gap)); left: 0; width: 100%; height: var(--t); }
|
||||||
|
.stem { top: calc(var(--t) + var(--gap)); bottom: 0; left: 0.80em; width: var(--t); }
|
||||||
|
.inner { top: calc((var(--t) * 2) + (var(--gap) * 2)); right: 0; width: 1.65em; height: var(--t); }
|
||||||
|
.bottom-base { bottom: 0; left: 0; right: var(--r); height: var(--t); }
|
||||||
|
.right-wall { top: calc((var(--t) * 2) + (var(--gap) * 2)); bottom: var(--r); right: 0; width: var(--t); }
|
||||||
|
|
||||||
|
.corner-arc {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0; right: 0;
|
||||||
|
width: var(--r); height: var(--r);
|
||||||
|
border-bottom: var(--t) solid currentColor;
|
||||||
|
border-right: var(--t) solid currentColor;
|
||||||
|
border-bottom-right-radius: var(--r);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- STRETCHED TEXT GROUP --- */
|
||||||
|
.brand-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: var(--text-width); /* Fixed width for both to fill */
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arabic {
|
||||||
|
font-family: 'Cairo', sans-serif;
|
||||||
|
font-size: 0.9em; /* Larger to feel balanced with English height */
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1;
|
||||||
|
text-align: justify;
|
||||||
|
text-align-last: justify; /* Stretches the Arabic characters */
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0.4em;
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.english {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
font-size: 0.8em; /* Smaller font stretched wide looks more premium */
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between; /* Stretches English letters to edges */
|
||||||
|
width: 100%;
|
||||||
|
line-height: 1;
|
||||||
|
direction: ltr;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.logo-wrapper { --logo-scale: 0.25; }
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 473 B After Width: | Height: | Size: 340 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 459 B |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
@ -17,20 +17,34 @@
|
|||||||
<link rel="manifest" href="{% static 'images/site.webmanifest' %}">
|
<link rel="manifest" href="{% static 'images/site.webmanifest' %}">
|
||||||
|
|
||||||
<link rel="stylesheet" href="{% static 'css/main.css' %}">
|
<link rel="stylesheet" href="{% static 'css/main.css' %}">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<div class="container nav-inner">
|
<div class="container nav-inner">
|
||||||
<a href="#" class="logo">
|
|
||||||
{% if settings and settings.logo %}
|
|
||||||
<img src="{{ settings.logo.url }}" alt="Logo">
|
|
||||||
{% else %}
|
|
||||||
<div style="width:32px; height:32px; background:var(--primary); border-radius:6px; display:flex; align-items:center; justify-content:center; color:white; font-weight:900;">T</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
</a>
|
|
||||||
|
|
||||||
|
<a href="/" class="logo" aria-label="Tenhal Home">
|
||||||
|
<div class="logo-wrapper">
|
||||||
|
<div class="brand-text">
|
||||||
|
<div class="arabic">تـنـحـل</div>
|
||||||
|
<div class="english">
|
||||||
|
<span>T</span><span>E</span><span>N</span><span>H</span><span>A</span><span>L</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="symbol">
|
||||||
|
<div class="b top-left"></div>
|
||||||
|
<div class="b top-right"></div>
|
||||||
|
<div class="b middle"></div>
|
||||||
|
<div class="b inner"></div>
|
||||||
|
<div class="b bottom-base"></div>
|
||||||
|
<div class="b right-wall"></div>
|
||||||
|
<div class="b stem"></div>
|
||||||
|
<div class="corner-arc"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
<div style="display: flex; align-items: center;">
|
<div style="display: flex; align-items: center;">
|
||||||
<nav class="nav-links">
|
<nav class="nav-links">
|
||||||
<a href="#services">{% trans "Services" %}</a>
|
<a href="#services">{% trans "Services" %}</a>
|
||||||
|
|||||||