use stitches-normalize 🧵

https://github.com/jakejarvis/stitches-normalize
2025-06-30 22:46:39 -04:00 · 2022-03-06 11:24:58 -05:00
parent 9ac0b828d1
commit 34fccfefc3
12 changed files with 111 additions and 180 deletions
--- a/19
+++ b/19
@ -0,0 +1,19 @@
+Copyright (c) 2022 Jake Jarvis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
--- a/README.md
+++ b/README.md
@ -30,4 +30,4 @@ Run `yarn install` and `yarn dev`, then open [http://localhost:3000/](http://loc

 Site **content** (everything in [`/notes`](notes/)) is published under the [**Creative Commons Attribution 4.0 International License**](LICENSE) ([`CC-BY-4.0`](https://creativecommons.org/licenses/by/4.0/)), which means that you can copy, redistribute, remix, transform, and build upon the content for any purpose as long as you give appropriate credit.

-All original **code** in this repository is published under the [**MIT License**](https://opensource.org/licenses/MIT).
+All original **code** in this repository is published under the [**MIT License**](LICENSE-CODE).
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@ -11,7 +11,9 @@ const Wrapper = styled("footer", {
  borderTop: "1px solid $kindaLight",
  backgroundColor: "$backgroundOuter",
  color: "$mediumDark",
-  transition: "color 0.25s ease, background 0.25s ease, border 0.25s ease",
+
+  // light-dark theme switch fading
+  transition: "background 0.25s ease, border 0.25s ease",

  "@medium": {
    padding: "1em 1.25em",
@ -50,6 +52,9 @@ const ViewSourceLink = styled(Link, {
  borderBottom: "1px solid",
  borderColor: "$light",

+  // light-dark theme switch fading
+  transition: "border 0.25s ease",
+
  "&:hover": {
    borderColor: "$kindaLight",
  },
--- a/components/Header/Header.tsx
+++ b/components/Header/Header.tsx
@ -12,7 +12,7 @@ const Wrapper = styled("header", {
  backgroundColor: "$backgroundHeader",

  // light-dark theme switch fading
-  transition: "color 0.25s ease, background 0.25s ease, border 0.25s ease",
+  transition: "background 0.25s ease, border 0.25s ease",

  "@medium": {
    padding: "0.75em 1.25em",
@ -27,7 +27,7 @@ const Wrapper = styled("header", {

        // blurry glass-like background effect (except on firefox)
        backdropFilter: "saturate(180%) blur(5px)",
-        zIndex: 1000,
+        zIndex: 9999,
      },
    },
  },
--- a/components/Layout/Layout.tsx
+++ b/components/Layout/Layout.tsx
@ -41,9 +41,7 @@ const Layout = ({ container = true, stickyHeader = true, children, ...rest }: La
        {/* dynamically set browser theme color to match the background color; default to light for SSR */}
        <meta
          name="theme-color"
-          content={
-            resolvedTheme === "dark" ? darkTheme.colors.backgroundOuter.value : theme.colors.backgroundOuter.value
-          }
+          content={(resolvedTheme === "dark" ? darkTheme : theme).colors.backgroundOuter?.value}
        />
      </Head>

--- a/components/TweetEmbed/TweetEmbed.tsx
+++ b/components/TweetEmbed/TweetEmbed.tsx
@ -1,4 +1,5 @@
-import Tweet from "react-tweet-embed";
+import { useTheme } from "next-themes";
+import { TwitterTweetEmbed } from "react-twitter-embed";

 export type TweetEmbedProps = {
  id: string;
@ -6,16 +7,20 @@ export type TweetEmbedProps = {
  className?: string;
 };

-const TweetEmbed = ({ id, className, options }: TweetEmbedProps) => (
-  <Tweet
-    className={className}
-    tweetId={id}
-    options={{
-      dnt: true,
-      align: "center",
-      ...options,
-    }}
-  />
-);
+const TweetEmbed = ({ id, options }: TweetEmbedProps) => {
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <TwitterTweetEmbed
+      tweetId={id}
+      options={{
+        dnt: true,
+        align: "center",
+        theme: resolvedTheme === "dark" ? "dark" : "light",
+        ...options,
+      }}
+    />
+  );
+};

 export default TweetEmbed;
--- a/lib/styles/helpers/normalize.ts
+++ b/lib/styles/helpers/normalize.ts
@ -1,109 +0,0 @@
-// @sindresorhus's modern-normalize.css converted to a JS object, as of this commit:
-// https://github.com/sindresorhus/modern-normalize/blob/b59ec0d3d8654cbb6843bc9ea45aef5f1d680108/modern-normalize.css
-
-/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
-
-import type * as Stitches from "@stitches/react";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const normalizeCss: Record<string, Stitches.CSSProperties>[] = [
-  {
-    "*, ::before, ::after": {
-      boxSizing: "border-box",
-    },
-    html: {
-      lineHeight: 1.15,
-      tabSize: 4,
-      // @ts-ignore
-      WebkitTextSizeAdjust: "100%",
-    },
-    body: {
-      margin: 0,
-      // fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
-    },
-    hr: {
-      height: 0,
-      color: "inherit",
-    },
-    "abbr[title]": {
-      textDecoration: "underline dotted",
-    },
-    "b, strong": {
-      fontWeight: "bolder",
-    },
-    "code, kbd, samp, pre": {
-      // fontFamily: "ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace",
-      fontSize: "1em",
-    },
-    small: {
-      fontSize: "80%",
-    },
-    "sub, sup": {
-      fontSize: "75%",
-      lineHeight: 0,
-      position: "relative",
-      verticalAlign: "baseline",
-    },
-    sub: {
-      bottom: "-0.25em",
-    },
-    sup: {
-      top: "-0.5em",
-    },
-    table: {
-      textIndent: 0,
-      borderColor: "inherit",
-    },
-    "button, input, optgroup, select, textarea": {
-      fontFamily: "inherit",
-      fontSize: "100%",
-      lineHeight: 1.15,
-      margin: 0,
-    },
-    "button, select": {
-      textTransform: "none",
-    },
-    "button, [type='button'], [type='reset'], [type='submit']": {
-      // @ts-ignore
-      WebkitAppearance: "button",
-    },
-    "::-moz-focus-inner": {
-      borderStyle: "none",
-      padding: 0,
-    },
-    ":-moz-focusring": {
-      outline: "1px dotted ButtonText",
-    },
-    ":-moz-ui-invalid": {
-      boxShadow: "none",
-    },
-    legend: {
-      padding: 0,
-    },
-    progress: {
-      verticalAlign: "baseline",
-    },
-    summary: {
-      display: "list-item",
-    },
-    "[type='search']": {
-      outlineOffset: -2,
-      // @ts-ignore
-      WebkitAppearance: "textfield",
-    },
-    "::-webkit-search-decoration": {
-      // @ts-ignore
-      WebkitAppearance: "none",
-    },
-    "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
-      height: "auto",
-    },
-    "::-webkit-file-upload-button": {
-      font: "inherit",
-      // @ts-ignore
-      WebkitAppearance: "button",
-    },
-  },
-];
-
-export default normalizeCss;
--- a/lib/styles/stitches.config.ts
+++ b/lib/styles/stitches.config.ts
@ -1,8 +1,9 @@
 import { createStitches, defaultThemeMap } from "@stitches/react";
 import hex2rgba from "./helpers/hex-to-rgba";

-// modified modern-normalize.css in object form
-import normalizeCss from "./helpers/normalize";
+// modified modern-normalize.css in object form:
+// https://github.com/jakejarvis/stitches-normalize/blob/main/index.js
+import normalizeCss from "stitches-normalize";

 // web fonts
 import Inter from "./fonts/inter";
--- a/package.json
+++ b/package.json
@ -1,18 +1,15 @@
 {
  "name": "jarv.is",
  "private": true,
-  "license": "MIT",
+  "license": "(MIT AND CC-BY-4.0)",
  "homepage": "https://jarv.is/",
-  "sideEffects": false,
+  "repository": "jakejarvis/jarv.is",
  "author": {
    "name": "Jake Jarvis",
    "email": "jake@jarv.is",
    "url": "https://github.com/jakejarvis"
  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/jakejarvis/jarv.is.git"
-  },
+  "sideEffects": false,
  "scripts": {
    "dev": "cross-env NODE_OPTIONS='--inspect' next dev",
    "build": "next build",
@ -49,7 +46,7 @@
    "next-mdx-remote": "^4.0.0",
    "next-seo": "^5.1.0",
    "next-sitemap": "^2.5.4",
-    "next-themes": "^0.0.15",
+    "next-themes": "0.0.15",
    "next-transpile-modules": "^9.0.0",
    "node-fetch": "^3.2.1",
    "p-retry": "^5.0.0",
@ -63,14 +60,15 @@
    "react-is": "17.0.2",
    "react-player": "^2.9.0",
    "react-textarea-autosize": "^8.3.3",
-    "react-tweet-embed": "^2.0.0",
+    "react-twitter-embed": "^4.0.4",
    "reading-time": "^1.5.0",
    "rehype-prism-plus": "^1.3.2",
    "rehype-slug": "^5.0.1",
    "remark-gfm": "^3.0.1",
    "remove-markdown": "^0.3.0",
    "sanitize-html": "^2.7.0",
-    "simple-icons": "^6.12.0",
+    "simple-icons": "^6.13.0",
+    "stitches-normalize": "^0.1.0",
    "swr": "^1.2.2",
    "terser": "^5.12.0",
    "twemoji": "github:twitter/twemoji#v13.1.0"
@ -93,7 +91,7 @@
    "eslint-config-prettier": "~8.5.0",
    "eslint-plugin-mdx": "~1.16.0",
    "eslint-plugin-prettier": "~4.0.0",
-    "lint-staged": "^12.3.4",
+    "lint-staged": "^12.3.5",
    "prettier": "^2.5.1",
    "simple-git-hooks": "^2.7.0",
    "typescript": "~4.5.5"
--- a/pages/contact.tsx
+++ b/pages/contact.tsx
@ -10,10 +10,9 @@ const Wrapper = styled(Content, {
  margin: "0 auto",
 });

-const PubKey = styled("code", {
+const PGPKey = styled("code", {
  fontSize: "0.925em",
-  wordSpacing: "-0.175em",
-  whiteSpace: "normal",
+  wordSpacing: "-0.25em",
 });

 const Contact = () => (
@ -37,7 +36,7 @@ const Contact = () => (
      <p>
        🔐 You can grab my public key here:{" "}
        <Link href="/pubkey.asc" title="My Public PGP Key" rel="pgpkey authn noopener" forceNewWindow>
-          <PubKey>6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39</PubKey>
+          <PGPKey>6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39</PGPKey>
        </Link>
        .
      </p>
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -1,13 +1,7 @@
-import Content from "../components/Content/Content";
 import Link, { CustomLinkProps } from "../components/Link/Link";
 import { styled, keyframes, darkTheme } from "../lib/styles/stitches.config";
 import type * as Stitches from "@stitches/react";

-const Wrapper = styled(Content, {
-  fontSize: "1em",
-  lineHeight: 1,
-});
-
 const ColorfulLink = ({
  lightColor,
  darkColor,
@ -43,10 +37,11 @@ const H1 = styled("h1", {
  margin: "0 0 0.5em -0.03em",
  fontSize: "1.8em",
  fontWeight: 500,
-  letterSpacing: "-0.01em",
+  lineHeight: 1.1,
+  color: "$text",

  "@medium": {
-    fontSize: "1.5em",
+    fontSize: "1.6em",
  },
 });

@ -54,25 +49,26 @@ const H2 = styled("h2", {
  margin: "0.5em 0 0.5em -0.03em",
  fontSize: "1.35em",
  fontWeight: 400,
-  letterSpacing: "-0.016em",
  lineHeight: 1.4,
+  color: "$text",

  "@medium": {
-    fontSize: "1.2em",
+    fontSize: "1.25em",
  },
 });

 const Paragraph = styled("p", {
  margin: "0.85em 0",
-  letterSpacing: "-0.004em",
  lineHeight: 1.7,
+  color: "$text",

  "&:last-of-type": {
    marginBottom: 0,
  },

  "@medium": {
-    fontSize: "0.925em",
+    fontSize: "0.95em",
+    lineHeight: 1.825,
  },
 });

@ -98,10 +94,14 @@ const Wave = styled("span", {
  willChange: "transform",
 });

-const PGPKey = styled("sup", {
+const Sup = styled("sup", {
  margin: "0 0.15em",
  fontSize: "0.65em",
-  wordSpacing: "-0.3em",
+});
+
+const PGPKey = styled("code", {
+  marginLeft: "0.15em",
+  wordSpacing: "-0.4em",
 });

 const Quiet = styled("span", {
@ -109,11 +109,14 @@ const Quiet = styled("span", {
 });

 const EasterEgg = styled(ColorfulLink, {
-  cursor: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='30' style='font-size:24px'><text y='50%' transform='rotate(-70 0 0) translate(-20, 6)'>🪄</text></svg>") 5 5, auto`,
+  // rotated 🪄 emoji on hover
+  "&:hover": {
+    cursor: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='30' style='font-size:24px'><text y='50%' transform='rotate(-70 0 0) translate(-20, 6)'>🪄</text></svg>") 5 5, auto`,
+  },
 });

 const Index = () => (
-  <Wrapper>
+  <>
    <H1>
      Hi there! I'm Jake. <Wave>👋</Wave>
    </H1>
@ -329,7 +332,7 @@ const Index = () => (
      <ColorfulLink href="/contact/" title="Send an email" lightColor="#de0c0c" darkColor="#ff5050">
        email
      </ColorfulLink>{" "}
-      <PGPKey>
+      <Sup>
        <ColorfulLink
          href="/pubkey.asc"
          rel="pgpkey authn noopener"
@ -339,9 +342,9 @@ const Index = () => (
          fancy={false}
          forceNewWindow
        >
-          <code>🔐 2B0C 9CF2 51E6 9A39</code>
+          🔐 <PGPKey>2B0C 9CF2 51E6 9A39</PGPKey>
        </ColorfulLink>
-      </PGPKey>
+      </Sup>
      ,{" "}
      <ColorfulLink
        href="https://twitter.com/jakejarvis"
@ -362,7 +365,7 @@ const Index = () => (
      </ColorfulLink>{" "}
      as well!
    </Paragraph>
-  </Wrapper>
+  </>
 );

 export default Index;
--- a/yarn.lock
+++ b/yarn.lock
@ -2499,9 +2499,9 @@ eastasianwidth@^0.2.0:
  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==

 electron-to-chromium@^1.4.71:
-  version "1.4.75"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.75.tgz#d1ad9bb46f2f1bf432118c2be21d27ffeae82fdd"
-  integrity sha512-LxgUNeu3BVU7sXaKjUDD9xivocQLxFtq6wgERrutdY/yIOps3ODOZExK1jg8DTEg4U8TUCb5MLGeWFOYuxjF3Q==
+  version "1.4.76"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.76.tgz#a0494baedaf51094b1c172999919becd9975a934"
+  integrity sha512-3Vftv7cenJtQb+k00McEBZ2vVmZ/x+HEF7pcZONZIkOsESqAqVuACmBxMv0JhzX7u0YltU0vSqRqgBSTAhFUjA==

 emoji-regex@^8.0.0:
  version "8.0.0"
@ -3754,10 +3754,10 @@ lines-and-columns@^1.1.6:
  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==

-lint-staged@^12.3.4:
-  version "12.3.4"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.3.4.tgz#4b1ff8c394c3e6da436aaec5afd4db18b5dac360"
-  integrity sha512-yv/iK4WwZ7/v0GtVkNb3R82pdL9M+ScpIbJLJNyCXkJ1FGaXvRCOg/SeL59SZtPpqZhE7BD6kPKFLIDUhDx2/w==
+lint-staged@^12.3.5:
+  version "12.3.5"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.3.5.tgz#8048ce048c3cac12f57200a06344a54dc91c8fa9"
+  integrity sha512-oOH36RUs1It7b9U/C7Nl/a0sLfoIBcMB8ramiB3nuJ6brBqzsWiUAFSR5DQ3yyP/OR7XKMpijtgKl2DV1lQ3lA==
  dependencies:
    cli-truncate "^3.1.0"
    colorette "^2.0.16"
@ -4564,7 +4564,7 @@ next-sitemap@^2.5.4:
    "@corex/deepmerge" "^2.6.148"
    minimist "^1.2.5"

-next-themes@^0.0.15:
+next-themes@0.0.15:
  version "0.0.15"
  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.0.15.tgz#ab0cee69cd763b77d41211f631e108beab39bf7d"
  integrity sha512-LTmtqYi03c4gMTJmWwVK9XkHL7h0/+XrtR970Ujvtu3s0kZNeJN24aJsi4rkZOI8i19+qq6f8j+8Duwy5jqcrQ==
@ -5015,10 +5015,12 @@ react-textarea-autosize@^8.3.3:
    use-composed-ref "^1.0.0"
    use-latest "^1.0.0"

-react-tweet-embed@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/react-tweet-embed/-/react-tweet-embed-2.0.0.tgz#bb8a94bd11bf38ce6c5d9f18f35bf044110a7f40"
-  integrity sha512-g2kfPjSRTOKeJtaQF5EMuSTmp/q8I0qdDs/pZ2qLXZjCWExDT/JgjxSlyM65NyNzsz8072PDpvlO/sIXwwVpdQ==
+react-twitter-embed@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/react-twitter-embed/-/react-twitter-embed-4.0.4.tgz#4a6b8354acc266876ff1110b9f648518ea20db6d"
+  integrity sha512-2JIL7qF+U62zRzpsh6SZDXNI3hRNVYf5vOZ1WRcMvwKouw+xC00PuFaD0aEp2wlyGaZ+f4x2VvX+uDadFQ3HVA==
+  dependencies:
+    scriptjs "^2.5.9"

 react@17.0.2:
  version "17.0.2"
@ -5346,6 +5348,11 @@ scheduler@^0.20.2:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"

+scriptjs@^2.5.9:
+  version "2.5.9"
+  resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f"
+  integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==
+
 section-matter@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167"
@ -5407,10 +5414,10 @@ simple-git-hooks@^2.7.0:
  resolved "https://registry.yarnpkg.com/simple-git-hooks/-/simple-git-hooks-2.7.0.tgz#121a5c3023663b8abcc5648c8bfe8619dc263705"
  integrity sha512-nQe6ASMO9zn5/htIrU37xEIHGr9E6wikXelLbOeTcfsX2O++DHaVug7RSQoq+kO7DvZTH37WA5gW49hN9HTDmQ==

-simple-icons@^6.12.0:
-  version "6.12.0"
-  resolved "https://registry.yarnpkg.com/simple-icons/-/simple-icons-6.12.0.tgz#92bf40b332d759d2fdd7f59929e00c90e921e7c8"
-  integrity sha512-SLupP1dHUcrLSDHpOfjy4u010IYj79QzFkH460ITfGElvo9cB1V2hO4krz0aSZpRWFglwtFJIYPaIOKHp4+NBw==
+simple-icons@^6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/simple-icons/-/simple-icons-6.13.0.tgz#91722bbcc6d6dc7a4e2b4890f3dc5188345e7e80"
+  integrity sha512-HlAeBhZsL16ghjgTeKcg2ff5CqBkHSNSp40TUe+h/cuEZEYN58XblfjCpFRwUHyctSW1H5T56zRJ45763JQTGw==

 sirv@^1.0.7:
  version "1.0.19"
@ -5505,6 +5512,11 @@ state-toggle@^1.0.0:
  resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.3.tgz#e123b16a88e143139b09c6852221bc9815917dfe"
  integrity sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==

+stitches-normalize@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/stitches-normalize/-/stitches-normalize-0.1.0.tgz#e17d6c4c1597f7f08eda151c69608a09c54e54d7"
+  integrity sha512-ObTzg1vooVkZQ9AxT0fDq/CjVlaZo2KkxzR6Xioed2jvCmS+j7Kbkp1NExC7DE8MMPgAvHrBMDqdi5PFu3Frvg==
+
 strict-uri-encode@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"