From 01c3acf2f1f15cda48121d6e42a684e2d82fc959 Mon Sep 17 00:00:00 2001 From: Mat Jordan Date: Tue, 27 Sep 2022 08:51:11 -0400 Subject: [PATCH] Style docs. --- public/styles.css | 53 ++++++++++++++++++++++---- src/components/Viewer/Header.styled.ts | 1 - src/components/Viewer/Header.tsx | 10 ++++- src/components/Viewer/Toggle.styled.ts | 14 ++++--- src/dev.tsx | 5 ++- utils/html.js | 11 ++++++ 6 files changed, 76 insertions(+), 18 deletions(-) diff --git a/public/styles.css b/public/styles.css index adbf1808..97450921 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,4 +1,4 @@ -@import url("https://fonts.googleapis.com/css2?family=Calistoga&family=IBM+Plex+Mono&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Lora:ital,wght@0,400;0,700;1,400&display=swap"); html { font-size: 62.5%/1.7em; } @@ -10,12 +10,49 @@ body { background: #fff; } +body > header { + background-color: #1a1d1e; + padding: 1rem; + color: #fff; + display: flex; + justify-content: space-between; +} + +body > header a, +body > header a:visited { + color: #fff; + text-decoration: none; +} + +body > header h1 { + margin: 0; + font-weight: 400; + font-size: 1.75rem; + font-family: "Lora", "Inter", Arial, sans-serif; + line-height: 1em; +} + +body > header .clover-repository { + display: flex; + font-size: 1rem; + font-family: "Inter", Arial, sans-serif; + color: #999 !important; +} + +body > header .clover-repository svg { + height: 1.75rem; + fill: #fff; + color: #fff; + line-height: 1em; + margin-left: 0.5rem; +} + #root { - padding: 0; + padding: 1.618rem 2.618rem; } -#root header > span { - font-family: "Calistoga", "Inter", Arial, sans-serif; +#root .documentation-wrapper header > span { + font-family: "Lora", "Inter", Arial, sans-serif; font-weight: 400; } @@ -23,15 +60,15 @@ button * { box-sizing: border-box; } -h1 { +.documentation-wrapper h1 { font-weight: 400; - font-family: "Calistoga", "Inter", Arial, sans-serif; + font-family: "Lora", "Inter", Arial, sans-serif; } -h2 { +.documentation-wrapper h2 { margin: 2.618rem 0 1rem; font-weight: 400; - font-family: "Calistoga", "Inter", Arial, sans-serif; + font-family: "Lora", "Inter", Arial, sans-serif; } code { diff --git a/src/components/Viewer/Header.styled.ts b/src/components/Viewer/Header.styled.ts index 224183e2..ada9ffa0 100644 --- a/src/components/Viewer/Header.styled.ts +++ b/src/components/Viewer/Header.styled.ts @@ -14,7 +14,6 @@ const IIIFBadgeContent = styled(Popover.Content, { fontSize: "0.8333rem", border: "none", boxShadow: "2px 2px 5px #0003", - marginRight: "1rem", zIndex: "2", button: { diff --git a/src/components/Viewer/Header.tsx b/src/components/Viewer/Header.tsx index 381e8890..03c8187e 100644 --- a/src/components/Viewer/Header.tsx +++ b/src/components/Viewer/Header.tsx @@ -27,7 +27,13 @@ const ViewerHeader: React.FC = ({ manifestId, manifestLabel }) => { const { showTitle, showIIIFBadge, showInformationToggle } = configOptions; - if (!showTitle && !showIIIFBadge) return <>; + if ( + !collection?.items && + !showTitle && + !showIIIFBadge && + !showInformationToggle + ) + return <>; return (
@@ -38,7 +44,6 @@ const ViewerHeader: React.FC = ({ manifestId, manifestLabel }) => {
); }; diff --git a/src/components/Viewer/Toggle.styled.ts b/src/components/Viewer/Toggle.styled.ts index 84ed84c0..1a5699a1 100644 --- a/src/components/Viewer/Toggle.styled.ts +++ b/src/components/Viewer/Toggle.styled.ts @@ -23,34 +23,36 @@ const StyledSwitch = styled(Switch.Root, { const StyledThumb = styled(Switch.Thumb, { display: "block", - height: "calc(2rem - 6px)", - width: "calc(2rem - 6px)", + height: "calc(2rem - 12px)", + width: "calc(2rem - 12px)", backgroundColor: "$secondary", borderRadius: "100%", boxShadow: `2px 2px 5px #0001`, transition: "$all", - transform: "translateX(3px)", + transform: "translateX(6px)", willChange: "transform", '&[data-state="checked"]': { - transform: "translateX(calc(1.236rem + 3px))", + transform: "translateX(calc(1.236rem + 6px))", }, }); const Wrapper = styled("div", { display: "flex", alignItems: "center", + paddingLeft: "1.618rem", }); const Label = styled("label", { + fontSize: "0.8333rem", fontFamily: "$sans", - fontWeight: "700", + fontWeight: "400", lineHeight: "1em", userSelect: "none", cursor: "pointer", color: "$primary", opacity: "0.7", - paddingRight: "1rem", + paddingRight: "0.618rem", }); const StyledToggle = styled("form", {}); diff --git a/src/dev.tsx b/src/dev.tsx index c800ae04..86d65a0b 100644 --- a/src/dev.tsx +++ b/src/dev.tsx @@ -16,7 +16,10 @@ const Wrapper = () => { }, []); const customTheme = { - fonts: { display: `"Calistoga", "Inter", Arial, sans-serif` }, + fonts: { + display: `"Lora", "Inter", Arial, sans-serif`, + sans: `"Inter", Arial, sans-serif`, + }, }; return ( diff --git a/utils/html.js b/utils/html.js index a6edb4ee..1dfec90f 100644 --- a/utils/html.js +++ b/utils/html.js @@ -11,6 +11,17 @@ async function buildHTML(isStatic) { +
+ +

Clover IIIF

+ + + + GitHub + + + +

${isStatic ? await buildMarkdown() : ``}