Actually, make layouts 770px

davepagurek · davepagurek · commit b43e6a837350 · 2024-07-05T19:20:15.000-04:00
diff --git a/src/components/CodeEmbed/index.jsx b/src/components/CodeEmbed/index.jsx
@@ -34,7 +34,7 @@ export const CodeEmbed = (props) => {
     initialCode.replace(/\u00A0/g, " "),
   );
 
-  const largeSketch = props.previewWidth && props.previewWidth > 767 - 60;
+  const largeSketch = props.previewWidth && props.previewWidth > 770 - 60;
 
   const codeFrameRef = useRef(null);
 
diff --git a/src/layouts/EventLayout.astro b/src/layouts/EventLayout.astro
@@ -46,7 +46,7 @@ const relatedEvents =
   {
     entry.data.featuredImage && entry.data.featuredImageAlt && (
       <Image
-        containerClass="relative h-fit w-fit max-w-[767px]"
+        containerClass="relative h-fit w-fit max-w-[770px]"
         src={entry.data.featuredImage}
         alt={entry.data.featuredImageAlt}
       />
diff --git a/src/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro
@@ -59,7 +59,7 @@ const { Content } = await example.render();
   topic="examples"
   className="example"
 >
-  <div class="mt-xl mb-4xl lg:mb-3xl max-w-[767px]">
+  <div class="mt-xl mb-4xl lg:mb-3xl max-w-[770px]">
     <div class="rendered-markdown">
       <Content />
     </div>
diff --git a/src/layouts/PeopleLayout.astro b/src/layouts/PeopleLayout.astro
@@ -58,7 +58,7 @@ setJumpToState(null);
 <Head title={"People"} locale={currentLocale} />
 
 <BaseLayout title={title} variant="item" topic="about" className="about">
-  <h3 class="mb-xl max-w-[767px]">
+  <h3 class="mb-xl max-w-[770px]">
     {t("peoplePage", "PageDescription")}
   </h3>
   {
diff --git a/src/layouts/ReferenceItemLayout.astro b/src/layouts/ReferenceItemLayout.astro
@@ -85,7 +85,7 @@ const seenParams: Record<string, true> = {};
   topic="reference"
   className="reference-item"
 >
-  <div class="content-grid mt-0 max-w-[767px]">
+  <div class="content-grid mt-0 max-w-[770px]">
     <div class="col-span-9 xl:min-w-[1000px]">
       <div
         set:html={description}
diff --git a/src/layouts/SketchLayout.astro b/src/layouts/SketchLayout.astro
@@ -63,7 +63,7 @@ const iframeTitle = `OpenProcessing Sketch: ${sketchInfo.title} by ${authorName}
   variant="item"
   topic={"community"}
 >
-  <div class="max-w-[767px]">
+  <div class="max-w-[770px]">
     <div style={{
       position: 'relative',
       width: '100%',
diff --git a/src/layouts/TextDetailLayout.astro b/src/layouts/TextDetailLayout.astro
@@ -30,7 +30,7 @@ setJumpToState(null);
   className={pageTopic}
   subtitle={null}
 >
-  <div class="max-w-[767px] [&>*:first-child]:mt-0 rendered-markdown pb-[80px]">
+  <div class="max-w-[770px] [&>*:first-child]:mt-0 rendered-markdown pb-[80px]">
     <Content />
   </div>
 </BaseLayout>
diff --git a/styles/variables.scss b/styles/variables.scss
@@ -1,7 +1,7 @@
 // Media query breakpoints
 // Intentionally defined as SCSS variables as CSS variables are not supported by media queries.
 // These are mirrored in Tailwind.
-$breakpoint-tablet: 767px;
+$breakpoint-tablet: 770px;
 $breakpoint-laptop: 1024px;
 $breakpoint-desktop: 1280px;
 
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -4,7 +4,7 @@ export default {
   theme: {
     // These values are mirrored in variables.scss
     screens: {
-      md: "767px",
+      md: "770px",
       lg: "1024px",
       xl: "1280px",
     },

Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ const relatedEvents =`
`46`	`46`	`{`
`47`	`47`	`entry.data.featuredImage && entry.data.featuredImageAlt && (`
`48`	`48`	`<Image`
`49`		`- containerClass="relative h-fit w-fit max-w-[767px]"`
	`49`	`+ containerClass="relative h-fit w-fit max-w-[770px]"`
`50`	`50`	`src={entry.data.featuredImage}`
`51`	`51`	`alt={entry.data.featuredImageAlt}`
`52`	`52`	`/>`
Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@ const { Content } = await example.render();`
`59`	`59`	`topic="examples"`
`60`	`60`	`className="example"`
`61`	`61`	`>`
`62`		`- <div class="mt-xl mb-4xl lg:mb-3xl max-w-[767px]">`
	`62`	`+ <div class="mt-xl mb-4xl lg:mb-3xl max-w-[770px]">`
`63`	`63`	`<div class="rendered-markdown">`
`64`	`64`	`<Content />`
`65`	`65`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,7 @@ setJumpToState(null);`
`58`	`58`	`<Head title={"People"} locale={currentLocale} />`
`59`	`59`
`60`	`60`	`<BaseLayout title={title} variant="item" topic="about" className="about">`
`61`		`- <h3 class="mb-xl max-w-[767px]">`
	`61`	`+ <h3 class="mb-xl max-w-[770px]">`
`62`	`62`	`{t("peoplePage", "PageDescription")}`
`63`	`63`	`</h3>`
`64`	`64`	`{`
Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,7 @@ const seenParams: Record<string, true> = {};`
`85`	`85`	`topic="reference"`
`86`	`86`	`className="reference-item"`
`87`	`87`	`>`
`88`		`- <div class="content-grid mt-0 max-w-[767px]">`
	`88`	`+ <div class="content-grid mt-0 max-w-[770px]">`
`89`	`89`	`<div class="col-span-9 xl:min-w-[1000px]">`
`90`	`90`	`<div`
`91`	`91`	`set:html={description}`
Original file line number	Diff line number	Diff line change
@@ -63,7 +63,7 @@ const iframeTitle = `OpenProcessing Sketch: ${sketchInfo.title} by ${authorName}
`63`	`63`	`variant="item"`
`64`	`64`	`topic={"community"}`
`65`	`65`	`>`
`66`		`- <div class="max-w-[767px]">`
	`66`	`+ <div class="max-w-[770px]">`
`67`	`67`	`<div style={{`
`68`	`68`	`position: 'relative',`
`69`	`69`	`width: '100%',`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ setJumpToState(null);`
`30`	`30`	`className={pageTopic}`
`31`	`31`	`subtitle={null}`
`32`	`32`	`>`
`33`		`- <div class="max-w-[767px] [&>*:first-child]:mt-0 rendered-markdown pb-[80px]">`
	`33`	`+ <div class="max-w-[770px] [&>*:first-child]:mt-0 rendered-markdown pb-[80px]">`
`34`	`34`	`<Content />`
`35`	`35`	`</div>`
`36`	`36`	`</BaseLayout>`