mirror of
https://github.com/nicoverbruggen/ebook-fonts-showcase.git
synced 2026-03-22 21:10:08 +01:00
Added OFL logo, various style improvements
This commit is contained in:
6
assets/ofl.svg
Normal file
6
assets/ofl.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
@@ -83,6 +83,8 @@ label {
|
||||
label .value {
|
||||
float: right;
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
text-transform: none;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@@ -94,7 +96,7 @@ input[type="range"] {
|
||||
padding: 6px 10px;
|
||||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
accent-color: var(--accent);
|
||||
accent-color: #999;
|
||||
}
|
||||
|
||||
select {
|
||||
@@ -107,11 +109,16 @@ select {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.sidebar-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.sidebar-controls {
|
||||
@@ -122,6 +129,12 @@ select {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.sidebar-controls label {
|
||||
margin-bottom: 0;
|
||||
font-size: 0.9rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.sidebar-controls > div {
|
||||
padding-top: 0;
|
||||
}
|
||||
@@ -168,7 +181,7 @@ select {
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
width: 170px;
|
||||
padding: 9px 6px;
|
||||
padding: 15px 6px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
@@ -195,8 +208,9 @@ select {
|
||||
width: calc(50% - 8px);
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
transition: transform 0.2s ease;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: none;
|
||||
transition: transform 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.toggle-input:not(:checked) + .toggle-track .toggle-option--left {
|
||||
@@ -211,6 +225,48 @@ select {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
/* Screen toggle: Light = white thumb, Dark = black thumb */
|
||||
#darkModeToggle + .toggle-track .toggle-thumb {
|
||||
background: var(--screen-bg);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#darkModeToggle:not(:checked) + .toggle-track .toggle-option--left {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
#darkModeToggle:checked + .toggle-track .toggle-thumb {
|
||||
background: var(--screen-bg-dark);
|
||||
border-color: #333;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#darkModeToggle:checked + .toggle-track .toggle-option--right {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Bezel toggle: Black = dark thumb, White = white thumb */
|
||||
#bezelToggle + .toggle-track .toggle-thumb {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#bezelToggle:not(:checked) + .toggle-track .toggle-option--left {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#bezelToggle:checked + .toggle-track .toggle-thumb {
|
||||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#bezelToggle:checked + .toggle-track .toggle-option--right {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
|
||||
.badge {
|
||||
padding: 6px 10px;
|
||||
@@ -229,14 +285,18 @@ select {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.device-footer p:first-of-type {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.device-footer a {
|
||||
color: var(--accent);
|
||||
color: #4672ad;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.device-footer a:hover {
|
||||
color: var(--cta-hover);
|
||||
color: #35567f;
|
||||
}
|
||||
|
||||
.attribution {
|
||||
@@ -252,6 +312,36 @@ select {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.sidebar-notice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 14px 18px 0;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.sidebar-notice img {
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.sidebar-notice p {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.sidebar-notice a {
|
||||
color: #336699;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar-notice a:hover {
|
||||
color: #264d73;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -461,6 +551,17 @@ select {
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 6px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.quick-star {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
summary.quick-title {
|
||||
@@ -482,9 +583,14 @@ details .quick-title::after {
|
||||
content: "Show";
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--muted);
|
||||
color: var(--border);
|
||||
text-transform: uppercase;
|
||||
margin-left: auto;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
details .quick-title:hover::after {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
details .quick-title::before {
|
||||
@@ -566,10 +672,12 @@ details[open] .quick-title {
|
||||
background: #fff;
|
||||
color: var(--ink);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease-out, border-color 0.15s ease-out;
|
||||
}
|
||||
|
||||
.font-card:hover {
|
||||
border-color: var(--accent);
|
||||
border-color: var(--accent-soft);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.font-card.is-active {
|
||||
|
||||
10
index.php
10
index.php
@@ -19,6 +19,7 @@ require __DIR__ . '/web/load_fonts.php';
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="layout">
|
||||
<div class="sidebar-column">
|
||||
<section class="panel sidebar">
|
||||
<div class="mobile-only">
|
||||
<label for="fontSelect">Font</label>
|
||||
@@ -27,7 +28,7 @@ require __DIR__ . '/web/load_fonts.php';
|
||||
<div class="desktop-only">
|
||||
<div class="font-sections">
|
||||
<div class="quick-group">
|
||||
<div class="quick-title">Core Collection</div>
|
||||
<div class="quick-title"><span class="quick-star">★</span> Core Collection</div>
|
||||
<div class="font-list" id="fontListCore"></div>
|
||||
</div>
|
||||
<details class="quick-group" id="extraFonts">
|
||||
@@ -89,6 +90,13 @@ require __DIR__ . '/web/load_fonts.php';
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="sidebar-notice">
|
||||
<a href="https://openfontlicense.org" target="_blank" rel="noreferrer">
|
||||
<img src="assets/ofl.svg" alt="Open Font License" />
|
||||
</a>
|
||||
<p>The majority of the fonts included in the collection are licensed under the OFL. <a href="https://github.com/nicoverbruggen/ebook-fonts?tab=readme-ov-file#how-are-these-fonts-licensed" target="_blank" rel="noreferrer">Learn more</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="preview">
|
||||
<div class="reader is-bezel-dark">
|
||||
|
||||
Reference in New Issue
Block a user