Skip to content

Commit

Permalink
Merge pull request #1251 from twm/revis
Browse files Browse the repository at this point in the history
Restyle header
  • Loading branch information
twm authored Dec 17, 2024
2 parents b348bed + abfed11 commit dc723c2
Show file tree
Hide file tree
Showing 17 changed files with 422 additions and 536 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ jobs:
# that are expected to exist by the manifest.json view test.
- run: |
mkdir yarrharr/static
touch yarrharr/static/{icon,logotype,lettertype}-xyz.{ico,png,svg}
touch yarrharr/static/icon-xyz.{ico,png,svg}
touch yarrharr/static/{normalize,main,fonts}-xyz.css
touch yarrharr/static/{runtime,vendor,main}-xyz.js
Expand Down
15 changes: 13 additions & 2 deletions bin/compile-static.py
Original file line number Diff line number Diff line change
Expand Up @@ -337,6 +337,11 @@ async def process_fonts(root_dir: Path, w: Writer) -> None:
ic_var_name = hashname("inconsolata", "ttf", ic_var)
w.add_file_bytes(ic_var_name, ic_var)

montez_base = root_dir / "vendor" / "montez"
montez = (montez_base / "Montez-Regular.ttf").read_bytes()
montez_name = hashname("montez", "ttf", montez)
w.add_file_bytes(montez_name, montez)

css = (
f"""\
@font-face {{
Expand All @@ -362,6 +367,14 @@ async def process_fonts(root_dir: Path, w: Writer) -> None:
font-stretch: normal;
src: url('{ic_var_name}');
}}
@font-face {{
font-family: 'Montez';
font-weight: 400;
font-style: normal;
font-stretch: normal;
src: url('{montez_name}');
}}
"""
).encode()
w.add_file_bytes(hashname("fonts", "css", css), css)
Expand All @@ -378,8 +391,6 @@ async def _main(build_dir: Path, out_dir: Path, compress: bool) -> None:
await asyncio.gather(
process_svg(icon, w),
rasterize_favicon(icon, build_dir, w),
process_svg(repo_root / "img" / "lettertype.svg", w),
process_svg(repo_root / "img" / "logotype.svg", w),
process_glob((repo_root / "vendor" / "normalize.css").glob("normalize-*.css"), w),
process_css(repo_root / "css" / "main.css", w),
process_fonts(repo_root, w),
Expand Down
12 changes: 0 additions & 12 deletions bin/iterstatic.sh

This file was deleted.

80 changes: 63 additions & 17 deletions css/GlobalBar.css
Original file line number Diff line number Diff line change
@@ -1,39 +1,85 @@
.yarrharr-masthead {
#global-nav {
display: flex;
justify-content: space-between;
background: var(--footer-background-color);

--focus-offset: calc(2 * var(--focus-offset-in)); /* Don't clip focus ring. */

& > a[href],
& > button {
background: transparent;
border: none;
}

& > * {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}

& > * > .icon {
display: block;
font-size: var(--icon-size);
}

& > .square {
flex: 0 0 var(--bar-height);
}
}


#masthead {
display: flex;
flex: 0 0 auto;
font: 1.5rem Montez, sans-serif;
padding: 0 0.5rem;

img {
flex: 1 1 auto;
width: auto;
height: auto;
max-height: 100%;
filter: var(--logo-filter);
&:link {
text-decoration: none;
}

.logotype {
display: block;
width: 10rem;
}
.lettertype {
display: none;
width: 3rem;
}

@media (max-width: 30rem) {
.logotype { display: none; }
.lettertype { display: block; }
}
}

.global-links {
flex: 1 1 100%;
display: flex;
}

.global-link {
flex: 0 1 auto;
display: flex;
align-items: center;
justify-content: center;
--focus-offset: var(--focus-offset-in); /* Don't clip focus ring. */
padding: 1rem; /* Ensure spacing between */
font-variant: small-caps;
font-variation-settings: "opsz" 25;

.icon {
--icon-color: var(--selected-color);
}

span {
padding: 0 0 0 0.25rem;
}

@media (max-width: 30rem) {
display: flex;
padding: 0.25rem;
flex-flow: column nowrap;
align-items: center;

&.secondary {
display: none;
}

span {
padding: 0.25rem 0 0 0;
font-size: smaller;
}
}
}
1 change: 1 addition & 0 deletions css/icons.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
/* Icons have this class by default, which makes them a generic gray. */
.icon {
color: var(--icon-color);
transform: translateY(0.075em);
}

.icon-heart {
Expand Down
7 changes: 3 additions & 4 deletions css/inventory.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@
display: grid;
grid-template-columns: 1fr min-content;
align-items: center;
max-width: var(--layout-max-width);
margin: 0 auto;
padding: 0 0.5rem;
}


Expand Down Expand Up @@ -77,7 +76,7 @@
}

.feed-list-item-header {
text-transform: uppercase;
font-variant: small-caps;
font-size: smaller;
}

Expand Down Expand Up @@ -201,7 +200,7 @@
}

.label-list-item-header {
text-transform: uppercase;
font-variant: small-caps;
font-size: smaller;
}

Expand Down
43 changes: 2 additions & 41 deletions css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@
--icon-color: #666;
--icon-color-off: var(--border-color);

--logo-filter: none;

--heart-color: #c92ccc;
--check-color: #39cc5c;
--selected-color: hsl(24.1, 100%, 49.2%);
Expand Down Expand Up @@ -54,11 +52,6 @@
--icon-color: #eee;
--icon-color-off: #666;

/* Invert the logo image so that it is legible in the dark theme. We
* don't go 100% because it is pretty bold.
*/
--logo-filter: invert(90%);

--font-weight-mono: 300;

scrollbar-color: var(--quiet-text-color) var(--background-color);
Expand Down Expand Up @@ -263,40 +256,6 @@ select[multiple] {
}
}

.bar {
display: flex;
justify-content: space-between;
height: var(--bar-height);
max-width: var(--layout-max-width);
margin: 0 auto;
line-height: var(--bar-line-height);
contain: size layout;

--focus-offset: var(--focus-offset-in); /* Don't clip focus ring. */

& > a[href],
& > button {
background: transparent;
border: none;
}

& > * {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}

& > * > .icon {
display: block;
font-size: var(--icon-size);
}

& > .square {
flex: 0 0 var(--bar-height);
}
}

/* Mostly used for the login page. */
form.small-form {
display: block;
Expand All @@ -323,6 +282,8 @@ form.small-form {
padding: 1rem 1rem 0 0;
flex: 100 1 auto;

font: 3.5rem Montez, sans-serif;

text-align: center;

img {
Expand Down
97 changes: 45 additions & 52 deletions img/icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit dc723c2

Please sign in to comment.