fix: font size on small screen

njfamirm · Jan 25, 2024 · 63ad168 · 63ad168
1 parent 09884ad
commit 63ad168
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 128 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -33,6 +33,7 @@
     "giscus",
     "jamstack",
     "shortcode",
+    "shortcodes",
     "strapi",
     "tailwindcss",
     "vazirmatn"

diff --git a/site/_css/lib/syntax-highlighter.css b/site/_css/lib/syntax-highlighter.css
@@ -1,123 +1,134 @@
-@layer base {
-  code[class*='language-'],
-  pre[class*='language-'] {
-    color: rgb(var(--sys-color-on-surface));
-    filter: brightness(120%);
-    text-shadow: 0 0.5px rgba(0, 0, 0, 0.3);
-    @apply font-mono;
-    font-size: 1em;
-    text-align: left;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-    line-height: 1.5;
-
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
-  }
-
-  /* Code blocks */
-  pre[class*='language-'] {
-    padding: 1em;
-    margin: 0.5em 0;
-    overflow: auto;
-    border-radius: 0.3em;
-  }
-
-  :not(pre) > code[class*='language-'],
-  pre[class*='language-'] {
-    @apply bg-surfaceContainer dark:brightness-90;
-  }
-
-  /* Inline code */
-  :not(pre) > code[class*='language-'] {
-    padding: 0.1em;
-    border-radius: 0.3em;
-    white-space: normal;
-  }
-
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: rgb(var(--sys-color-outline));
-    font-style: italic;
-  }
-
-  .token.punctuation {
-    color: rgb(var(--sys-color-on-surface-variant));
-  }
-
-  .token.namespace {
-    opacity: 0.7;
-  }
-
-  .token.property,
-  .token.tag,
-  .token.constant,
-  .token.symbol,
-  .token.deleted {
-    color: rgb(var(--sys-color-primary));
-    font-weight: bold;
-  }
-
-  .token.boolean,
-  .token.number {
-    color: rgb(var(--sys-color-primary));
-  }
-
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.builtin,
-  .token.inserted {
-    color: rgb(var(--sys-color-tertiary));
-  }
-
-  .token.operator,
-  .token.entity,
-  .token.url,
-  .language-css .token.string,
-  .style .token.string,
-  .token.variable {
-    color: rgb(var(--sys-color-on-surface-variant));
-  }
-
-  .token.atrule,
-  .token.attr-value,
-  .token.function,
-  .token.class-name {
-    color: rgb(var(--sys-color-error));
-  }
-
-  .token.keyword {
-    color: rgb(var(--sys-color-error));
-    font-weight: lighter;
-    font-style: italic;
-  }
-
-  .token.regex,
-  .token.important {
-    color: rgb(var(--sys-color-error));
-  }
-
-  .token.important,
-  .token.bold {
-    font-weight: bold;
-  }
-  .token.italic {
-    font-style: italic;
-  }
-
-  .token.entity {
-    cursor: help;
-  }
-}
+code[class*="language-"],
+ pre[class*="language-"] {
+   color: #ebdbb2; /* fg1 / fg */
+   font-family: monospace;
+   direction: ltr;
+   text-align: left;
+   white-space: pre;
+   word-spacing: normal;
+   word-break: normal;
+   line-height: 1.5;
+
+   -moz-tab-size: 4;
+   -o-tab-size: 4;
+   tab-size: 4;
+
+   -webkit-hyphens: none;
+   -moz-hyphens: none;
+   -ms-hyphens: none;
+   hyphens: none;
+ }
+
+ pre[class*="language-"]::-moz-selection,
+ pre[class*="language-"] ::-moz-selection,
+ code[class*="language-"]::-moz-selection,
+ code[class*="language-"] ::-moz-selection {
+   color: #fbf1c7; /* fg0 */
+   background: #7c6f64; /* bg4 */
+ }
+
+ pre[class*="language-"]::selection,
+ pre[class*="language-"] ::selection,
+ code[class*="language-"]::selection,
+ code[class*="language-"] ::selection {
+   color: #fbf1c7; /* fg0 */
+   background: #7c6f64; /* bg4 */
+ }
+
+ /* Code blocks */
+ pre[class*="language-"] {
+   padding: 1em;
+   margin: 0.5em 0;
+   overflow: auto;
+ }
+
+ :not(pre) > code[class*="language-"],
+ pre[class*="language-"] {
+   background: #1d2021; /* bg0_h */
+ }
+
+ /* Inline code */
+ :not(pre) > code[class*="language-"] {
+   padding: 0.1em;
+   border-radius: 0.3em;
+ }
+
+ .token.comment,
+ .token.prolog,
+ .token.cdata {
+   color: #a89984; /* fg4 / gray1 */
+ }
+
+ .token.delimiter,
+ .token.boolean,
+ .token.keyword,
+ .token.selector,
+ .token.important,
+ .token.atrule {
+   color: #fb4934; /* red2 */
+ }
+
+ .token.operator,
+ .token.punctuation,
+ .token.attr-name {
+   color: #a89984; /* fg4 / gray1 */
+ }
+
+ .token.tag,
+ .token.tag .punctuation,
+ .token.doctype,
+ .token.builtin {
+   color: #fabd2f; /* yellow2 */
+ }
+
+ .token.entity,
+ .token.number,
+ .token.symbol {
+   color: #d3869b; /* purple2 */
+ }
+
+ .token.property,
+ .token.constant,
+ .token.variable {
+   color: #fb4934; /* red2 */
+ }
+
+ .token.string,
+ .token.char {
+   color: #b8bb26; /* green2 */
+ }
+
+ .token.attr-value,
+ .token.attr-value .punctuation {
+   color: #a89984; /* fg4 / gray1 */
+ }
+
+ .token.url {
+   color: #b8bb26; /* green2 */
+   text-decoration: underline;
+ }
+
+ .token.function {
+   color: #fabd2f; /* yellow2 */
+ }
+
+ .token.regex {
+   background: #b8bb26; /* green2 */
+ }
+
+ .token.bold {
+   font-weight: bold;
+ }
+
+ .token.italic {
+   font-style: italic;
+ }
+
+ .token.inserted {
+   background: #a89984; /* fg4 / gray1 */
+ }
+
+ .token.deleted {
+   background: #fb4934; /* red2 */
+ }
+
diff --git a/site/_includes/blog-post-list.njk b/site/_includes/blog-post-list.njk
@@ -9,9 +9,9 @@
   </div>
   <div class="flex flex-row flex-wrap justify-center items-start gap-2 md:gap-8 w-full">
     {% for post in collections.blog | reverse %}
-      <a href="{{ post.url }}" class="rounded-3xl p-2 flex flex-col sm:flex-row gap-4 hover:bg-transparent hover:brightness-100">
+      <a href="{{ post.url }}" class="rounded-3xl p-2 flex flex-col sm:flex-row gap-4 hover:bg-transparent">
         {% if post.data.socialImage %}
-          <div class="rounded-3xl overflow-clip mb-2 [&_*]:w-full sm:w-1/2">
+          <div class="rounded-3xl overflow-clip mb-2 [&_*]:w-full sm:w-1/2 aspect-[1200/600]">
             {% image post.data.socialImage, post.data.socialImageAlt or "Cover post" %}
           </div>
         {% endif %}

diff --git a/site/_layouts/blog-post.njk b/site/_layouts/blog-post.njk
@@ -9,12 +9,12 @@ layout: base.njk
     {% endfor %}
   </div>
 
-  <h1 class="text-displayLarge font-black text-primary">
+  <h1 class="text-displaySmall md:text-displayLarge font-black text-primary">
     {{ title }}
   </h1>
-  <p class="mt-4 text-headlineLarge opacity-80">{{ description }}</p>
+  <p class="mt-4 text-headlineSmall md:text-headlineLarge opacity-80">{{ description }}</p>
   {% if socialImage %}
-    <div class="dark:brightness-90 rounded-3xl overflow-clip select-none my-10 text-center drop-shadow-lg [&_*]:w-full">
+    <div class="dark:brightness-90 rounded-3xl overflow-clip select-none my-10 text-center drop-shadow-lg [&_*]:w-full aspect-[1200/600]">
       {% image socialImage, socialImageAlt or "Cover post" %}
     </div>
   {%endif%}