Skip to content

Initial mess on with some remaining stuff to do #796

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SimonS wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Initial mess on with some remaining stuff to do #796

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 30 additions & 14 deletions packages/bdt-astro/public/style/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,23 @@
--s4: calc(var(--s3) * var(--ratio));
--s5: calc(var(--s4) * var(--ratio));

--measure: 70ch;
--measure: 60ch;

--colour-shade-light: #BFD7EA;
--colour-accent-sub: #087E8B;
--colour-accent-main: #B81007;
--colour-shade-dark: #060707;
}

* {
background-color: #f7f5e8;
background-color: var(--colour-shade-light);
box-sizing: border-box;
color: #050704;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: var(--colour-shade-dark);
font-family: "Hind Madurai", sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.6;

font-size: var(--s0);
margin: 0;
padding: 0;
Expand All @@ -44,11 +52,11 @@ img {

a,
button {
color: #b81007;
}
color: var(--colour-accent-main);

text-decoration-color: var(--colour-accent-sub);
text-underline-offset: var(--s-4);

a:visited {
color: #345693;
}

nav button {
Expand All @@ -59,26 +67,34 @@ nav button {
h1,
h2,
h3 {
font-family: Actor;
color: #111;
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-optical-sizing: auto;
font-style: normal;

margin: 0;
padding: 0;

}

h1 {
font-size: var(--s3);
line-height: 1;
letter-spacing: -2px;
line-height: 1.1;
}

h2 {
font-size: var(--s2);
letter-spacing: -1px;
}

.listing h2 {
font-size: var(--s1);
}

.selected-media h2 {
border-bottom: 2px #dfcc4c solid;
border-bottom: 2px var(--colour-accent-sub) solid;
padding-bottom: var(--s0);
}

Expand Down Expand Up @@ -124,7 +140,7 @@ dd {
}

footer {
border-top: 4px #dfcc4c solid;
border-top: 4px var(--colour-accent-sub) solid;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
Expand All @@ -139,7 +155,7 @@ footer * {

/* SVG overrides for recharts */
.recharts-cartesian-axis-tick-value tspan {
fill: #050704;
fill: var(--colour-shade-dark);
font-size: var(--s-1);
}

Expand Down
33 changes: 24 additions & 9 deletions packages/bdt-astro/src/layouts/BaseLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
import Nav from "@components/nav/nav";
import { AstroLogo } from "../components/AstroLogo";
import { ViewTransitions } from 'astro:transitions';
import { ViewTransitions } from "astro:transitions";

const { title } = Astro.props;
const path = new URL(Astro.url.pathname, Astro.site);
Expand All @@ -14,31 +14,46 @@ const path = new URL(Astro.url.pathname, Astro.site);
<title>{title}</title>
<ViewTransitions />

<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<!-- TODO: make dynamic :D -->
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🥪</text></svg>"
/>

<!-- TODO: delete me -->
<link
href="https://fonts.googleapis.com/css2?family=Actor&display=swap"
rel="stylesheet"
/>

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>

<style lang="scss" is:global>
@use "../../../bdt-components/src/styles/style.scss";
@use "../../public/style/global.scss";
</style>
<slot name="head_after" />
</head>
<body>
<!-- TODO: Fix this DIVitus -->
<div class="shell">
<div class="sidebar left">
<div class="">
<div>
<div>
<div class="stack" >
<AstroLogo client:load />
<Nav url={path} />
</div>
</div>
<div>
<main class="stack">
<!-- TODO: delete logo and tidy up -->
<!-- <AstroLogo client:load /> -->
<Nav url={path} />
<!-- TODO: style me/fix me -->
<p>Simon Scarfe writes here sometimes</p>
<slot />
<footer>
<!-- TODO: do something with this -->
<span class="footer-item">
<a
rel="license"
Expand Down
8 changes: 5 additions & 3 deletions packages/bdt-components/src/logo/logo.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
.logo {
border-bottom: 4px #dfcc4c solid;
border-bottom: 4px var(--colour-accent-sub) solid;
display: block;
max-width: 9.3rem; /* Yes, this is hacky as fuck (and probably brittle),
I just like the way the type falls. */
padding-bottom: var(--s1);
text-decoration: none;
}
Expand All @@ -14,6 +12,10 @@
overflow-wrap: break-word;
}

.logo span {
display: block;
}

.logo .highlighted {
color: #b81007;
}
8 changes: 5 additions & 3 deletions packages/bdt-components/src/logo/logo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,14 @@ export const Logo = ({ highlight }: LogoProps): JSX.Element => {
return (
<a href="/" className={logo}>
<span className={highlightedMeal === "Breakfast" ? highlighted : ""}>
Breakfast
🥣 Breakfast
</span>
<span className={highlightedMeal === "Dinner" ? highlighted : ""}>
Dinner
🍴 Dinner
</span>
<span className={highlightedMeal === "Tea" ? highlighted : ""}>
🫖 Tea
</span>
<span className={highlightedMeal === "Tea" ? highlighted : ""}>Tea</span>
</a>
);
};
Expand Down
17 changes: 13 additions & 4 deletions packages/bdt-components/src/nav/nav.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,25 @@
.mainMenu a {
color: #345693;
text-decoration-color: #b81007;
text-underline-offset: var(--s-4);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.mainMenu a:visited {
color: var(--colour-accent-main);
}

.current::before {
color: #050704;
color: var(--colour-shade-dark);
content: "\2192";
margin-left: calc(var(--s1) * -1);
position: absolute;
}

.mainMenu li {
list-style: none;
display: inline-block;
padding: 0 20px;
}

.mainMenu li:first-child {
padding-left: 0;
}
1 change: 1 addition & 0 deletions packages/bdt-components/src/nav/nav.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import "@testing-library/jest-dom";
import { render } from "@testing-library/react";
import Nav from "./nav";

/* TODO: FIX THESE TESTS */
describe("Nav component", () => {
it("displays some links that link to the right place", () => {
const { getByText } = render(<Nav />);
Expand Down
16 changes: 8 additions & 8 deletions packages/bdt-components/src/nav/nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
import React from "react";
import { mainMenu, current } from "./nav.module.css";

export const Nav = ({ url = "" }: { url?: string }): JSX.Element => {
const makeLink = (href: string, text: string, i: number) => {
return (<li key={`nav-${i + 1}`}>
export const Nav = ({ url }: { url: URL }): JSX.Element => {
const makeLink = (href: string, text: string, i: number) => (
<li key={`nav-${i + 1}`}>
<a
className={new RegExp(`^.*\/${href}`).test(url) ? current : ""}
className={new RegExp(`^.*\/${href}`).test(url.pathname) ? current : ""}
href={`/${href}`}
>
{text}
</a>
</li>);
};
</li>
);
return (
<nav className={mainMenu}>
<ul className="stack compressed">
<ul>
<li key={`nav-0`}>
<a className={url === "/" ? current : ""} href="/">
<a className={url?.pathname === "/" ? current : ""} href="/">
Home
</a>
</li>
Expand Down