logo fixed using code
@ -241,3 +241,91 @@
|
||||
.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="stylesheet" href="{% static 'css/main.css' %}">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<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 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;">
|
||||
<nav class="nav-links">
|
||||
<a href="#services">{% trans "Services" %}</a>
|
||||
|
||||