Style docs.

Author: mathewjordan

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,28 +10,65 @@ 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;
 }
 
 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 {

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: {

src/components/Viewer/Header.tsx

@@ -27,7 +27,13 @@ const ViewerHeader: React.FC<Props> = ({ manifestId, manifestLabel }) => {
 
   const { showTitle, showIIIFBadge, showInformationToggle } = configOptions;
 
-  if (!showTitle && !showIIIFBadge) return <></>;
+  if (
+    !collection?.items &&
+    !showTitle &&
+    !showIIIFBadge &&
+    !showInformationToggle
+  )
+    return <></>;
 
   return (
     <Header className="clover-header">
@@ -38,7 +44,6 @@ const ViewerHeader: React.FC<Props> = ({ manifestId, manifestLabel }) => {
           <Label label={manifestLabel} />
         </ManifestLabel>
       )}
-      {showInformationToggle && <Toggle />}
       {showIIIFBadge && (
         <Popover>
           <IIIFBadgeButton>
@@ -73,6 +78,7 @@ const ViewerHeader: React.FC<Props> = ({ manifestId, manifestLabel }) => {
           </IIIFBadgeContent>
         </Popover>
       )}
+      {showInformationToggle && <Toggle />}
     </Header>
   );
 };

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", {});

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 (

utils/html.js

@@ -11,6 +11,17 @@ async function buildHTML(isStatic) {
       <link rel="stylesheet" href="./styles.css" />
     </head>
     <body>
+      <header>
+        <a href="/" class="clover-title">
+          <h1>Clover IIIF<h1>
+        </a>
+        <a href="https://samvera-labs.github.io/clover-iiif/" class="clover-repository">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <title>GitHub</title>
+            <path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9a17.56 17.56 0 003.8.4c8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1a102.4 102.4 0 01-22.6 2.7c-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1a63 63 0 0025.6-6c2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8a18.64 18.64 0 015-.5c8.1 0 26.4 3.1 56.6 24.1a208.21 208.21 0 01112.2 0c30.2-21 48.5-24.1 56.6-24.1a18.64 18.64 0 015 .5c12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5a19.35 19.35 0 004-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z" />
+          </svg>
+        </a>
+      </header>
       <div id="root"></div>
       ${isStatic ? await buildMarkdown() : ``}
       <script src="./script.js"></script>