Skip to content

Commit 6d1b231

Browse files
igor-soldevigor-soldev
committed
feat: replace text header with logo image and update brand layout styling
1 parent f86eff2 commit 6d1b231

3 files changed

Lines changed: 66 additions & 41 deletions

File tree

‎static/images/logo_transparent.png‎

188 KB
Loading

‎static/style.css‎

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -53,18 +53,34 @@ header {
5353

5454
.logo {
5555
display: flex;
56+
flex-direction: column;
5657
align-items: center;
57-
/* Back to center for better overall feel */
5858
justify-content: center;
5959
gap: 0.75rem;
60-
margin-bottom: 1.25rem;
60+
margin-bottom: 2rem;
61+
}
62+
63+
.main-brand-row {
64+
display: flex;
65+
align-items: center;
66+
justify-content: center;
67+
gap: 0;
68+
}
69+
70+
.main-logo {
71+
width: auto;
72+
height: 110px; /* Slightly refined size for better symmetry */
73+
max-width: 100%;
74+
display: block;
75+
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
76+
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
6177
}
6278

6379
.github-stars-badge {
6480
display: flex;
6581
align-items: center;
6682
transition: transform 0.2s ease;
67-
margin-left: 0.5rem;
83+
opacity: 0.9;
6884
}
6985

7086
.github-stars-badge:hover {
@@ -87,10 +103,10 @@ header {
87103
}
88104

89105
.brand-divider {
90-
height: 18px;
106+
height: 40px; /* Taller divider for the larger logo */
91107
width: 1px;
92108
background: var(--border);
93-
margin: 0 0.75rem 0 0;
109+
margin: 0 1.5rem; /* Symmetric horizontal spacing */
94110
}
95111

96112
.logo-link {
@@ -99,20 +115,21 @@ header {
99115
display: inline-block;
100116
}
101117

102-
h1 {
103-
font-size: 1.75rem;
104-
font-weight: 800;
105-
line-height: 1.1;
106-
background: linear-gradient(to right, #818cf8, #c084fc);
107-
-webkit-background-clip: text;
108-
background-clip: text;
109-
-webkit-text-fill-color: transparent;
110-
letter-spacing: -0.025em;
111-
transition: all 0.3s ease;
118+
.logo-link:hover .main-logo {
119+
transform: scale(1.02) translateY(-4px);
120+
filter: drop-shadow(0 12px 24px rgba(99, 102, 241, 0.5)) brightness(1.1);
112121
}
113122

114-
.logo-link:hover h1 {
115-
filter: brightness(1.2);
123+
.sr-only {
124+
position: absolute;
125+
width: 1px;
126+
height: 1px;
127+
padding: 0;
128+
margin: -1px;
129+
overflow: hidden;
130+
clip: rect(0, 0, 0, 0);
131+
white-space: nowrap;
132+
border-width: 0;
116133
}
117134

118135
.subtitle {

‎templates/index.html‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,35 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<meta name="description" content="InfraScan is an open-source Infrastructure as Code scanner that identifies security vulnerabilities, cost optimization opportunities, and compliance issues in Terraform, CloudFormation, Kubernetes, and Dockerfile. Scan GitHub repositories for free.">
8-
<meta name="keywords" content="IaC scanner, Terraform security, CloudFormation audit, Kubernetes scanning, infrastructure audit, security scanner, cost optimization">
7+
<meta name="description"
8+
content="InfraScan is an open-source Infrastructure as Code scanner that identifies security vulnerabilities, cost optimization opportunities, and compliance issues in Terraform, CloudFormation, Kubernetes, and Dockerfile. Scan GitHub repositories for free.">
9+
<meta name="keywords"
10+
content="IaC scanner, Terraform security, CloudFormation audit, Kubernetes scanning, infrastructure audit, security scanner, cost optimization">
911
<meta name="author" content="SolDevelo">
1012
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
11-
13+
1214
<!-- Open Graph / Facebook -->
1315
<meta property="og:type" content="website">
1416
<meta property="og:url" content="{{ site_domain }}/">
1517
<meta property="og:title" content="InfraScan - Free Infrastructure as Code Security Scanner">
16-
<meta property="og:description" content="Scan Infrastructure as Code for security vulnerabilities and cost optimization. Supports Terraform, CloudFormation, Kubernetes, and more.">
17-
18+
<meta property="og:description"
19+
content="Scan Infrastructure as Code for security vulnerabilities and cost optimization. Supports Terraform, CloudFormation, Kubernetes, and more.">
20+
1821
<!-- Twitter -->
1922
<meta property="twitter:card" content="summary">
2023
<meta property="twitter:url" content="{{ site_domain }}/">
2124
<meta property="twitter:title" content="InfraScan - Free Infrastructure as Code Security Scanner">
22-
<meta property="twitter:description" content="Scan Infrastructure as Code for security vulnerabilities and cost optimization. Supports Terraform, CloudFormation, Kubernetes, and more.">
23-
25+
<meta property="twitter:description"
26+
content="Scan Infrastructure as Code for security vulnerabilities and cost optimization. Supports Terraform, CloudFormation, Kubernetes, and more.">
27+
2428
<!-- Canonical -->
2529
<link rel="canonical" href="{{ site_domain }}/">
26-
30+
2731
<!-- Language -->
2832
<meta http-equiv="content-language" content="en-US">
29-
33+
3034
<title>InfraScan - Free Infrastructure as Code Security Scanner | Terraform & CloudFormation Auditor</title>
31-
35+
3236
{% if google_tag_id %}
3337
<!-- Google tag (gtag.js) -->
3438
<script async src="https://www.googletagmanager.com/gtag/js?id={{ google_tag_id }}"></script>
@@ -40,7 +44,7 @@
4044
gtag('config', '{{ google_tag_id }}');
4145
</script>
4246
{% endif %}
43-
47+
4448
<!-- JSON-LD Structured Data -->
4549
<script type="application/ld+json">
4650
{
@@ -64,12 +68,12 @@
6468
"featureList": ["Terraform scanning", "CloudFormation audit", "Kubernetes manifest analysis", "Dockerfile security scan", "Cost optimization detection", "Security vulnerability detection"]
6569
}
6670
</script>
67-
71+
6872
<link rel="preconnect" href="https://fonts.googleapis.com">
6973
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
7074
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
7175
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}?v={{ static_version }}">
72-
76+
7377
<!-- Preload critical resources -->
7478
<link rel="preload" as="style" href="{{ url_for('static', filename='style.css') }}?v={{ static_version }}">
7579
</head>
@@ -78,20 +82,24 @@
7882
<div class="container">
7983
<header>
8084
<div class="logo">
81-
<a href="{{ url_for('index') }}" class="logo-link">
82-
<h1>InfraScan</h1>
83-
</a>
85+
<div class="main-brand-row">
86+
<a href="{{ url_for('index') }}" class="logo-link">
87+
<img src="{{ url_for('static', filename='images/logo_transparent.png') }}" alt="InfraScan"
88+
class="main-logo" loading="eager" decoding="async">
89+
<h1 class="sr-only">InfraScan</h1>
90+
</a>
91+
<div class="soldevelo-brand">
92+
<span class="brand-divider"></span>
93+
<a href="https://soldevelo.com?utm_source=infrascan&utm_medium=referral&utm_campaign=app_transition&utm_content=header-logo"
94+
target="_blank">
95+
<img src="{{ url_for('static', filename='images/soldevelo.png') }}" alt="SolDevelo"
96+
class="header-logo">
97+
</a>
98+
</div>
99+
</div>
84100
<a href="https://github.com/SolDevelo/InfraScan" target="_blank" class="github-stars-badge">
85101
<img src="https://img.shields.io/github/stars/SolDevelo/InfraScan?style=social" alt="GitHub stars">
86102
</a>
87-
<div class="soldevelo-brand">
88-
<span class="brand-divider"></span>
89-
<a href="https://soldevelo.com?utm_source=infrascan&utm_medium=referral&utm_campaign=app_transition&utm_content=header-logo"
90-
target="_blank">
91-
<img src="{{ url_for('static', filename='images/soldevelo.png') }}" alt="SolDevelo"
92-
class="header-logo">
93-
</a>
94-
</div>
95103
</div>
96104
<p class="subtitle">Open Source Infrastructure Auditor by <strong>SolDevelo</strong></p>
97105

0 commit comments

Comments
 (0)
⚡