27 lines
1.4 KiB
HTML
27 lines
1.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Brand — Logos</title>
|
|
<link rel="stylesheet" href="../colors_and_type.css" />
|
|
<style>
|
|
html, body { margin: 0; padding: 0; background: var(--background); }
|
|
.card { padding: 22px 24px; display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 1fr 1fr; gap: 14px; box-sizing: border-box; }
|
|
.cell { border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; padding: 14px 20px; overflow: hidden; }
|
|
.cell.light { background: var(--surface-container-low); }
|
|
.cell.dark { background: #1f1f1b; }
|
|
.cell img { max-height: 84px; max-width: 100%; display: block; }
|
|
.cell.icon img { max-height: 104px; }
|
|
/* Recolor the black master to cream (#fffcf7) via CSS filter. */
|
|
.cell.dark img { filter: brightness(0) invert(1) sepia(0.08) saturate(2) hue-rotate(350deg); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="cell icon light"><img src="../assets/fenja-icon-black.svg" alt="Fenja icon" /></div>
|
|
<div class="cell light"><img src="../assets/fenja-wordmark-black.svg" alt="Fenja wordmark" /></div>
|
|
<div class="cell icon dark"><img src="../assets/fenja-icon-black.svg" alt="Fenja icon, white" /></div>
|
|
<div class="cell dark"><img src="../assets/fenja-wordmark-black.svg" alt="Fenja wordmark, white" /></div>
|
|
</div>
|
|
</body>
|
|
</html>
|