Actually, make layouts 770px

processing · Jul 5, 2024 · b43e6a8 · b43e6a8
1 parent 5087449
commit b43e6a8
Show file tree

Hide file tree

Showing 9 changed files with 9 additions and 9 deletions.
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",
     },