docs: create README and update project configuration

- Add comprehensive README with project overview, features, and roadmap
- Update VSCode settings with new dictionary words
- Modify language switcher, mobile header, and theme toggle components
- Adjust layout and global styles
- Add language attribute to markdown example post

src/components/LanguageSwitcher.astro

@@ -16,7 +16,7 @@ function getLanguageDisplayName(code: string) {
 <button
   type="button"
   id="language-switcher"
-  class="z-99 aspect-square w-4.125 c-secondary active:scale-90"
+  class="aspect-square w-4 c-secondary active:scale-90"
   aria-label={`Current Language: ${getLanguageDisplayName(currentLocale)}. Click to switch to next language.`}
 >
   <svg

src/components/MobileHeader.astro

@@ -22,10 +22,7 @@ const marginBottom = {
       transition:name="site-title"
       data-disable-transition-on-theme
     >
-      <a
-        href={getLocalizedPath('/')}
-        onclick="return _handleBack(event)"
-      >
+      <a href={getLocalizedPath('/')}>
         {title}
       </a>
     </div>
@@ -41,7 +38,7 @@ const marginBottom = {
   )}
 </header>
 
-<script is:inline>
+<!-- <script is:inline>
 function _handleBack(e) {
   if (window.history.length > 2) {
     e.preventDefault()
@@ -50,4 +47,4 @@ function _handleBack(e) {
   }
   return true
 }
-</script>
+</script> -->

src/components/ThemeToggle.astro

@@ -7,7 +7,7 @@ const { light: { background: lightMode }, dark: { background: darkMode } } = the
 <button
   id="theme-toggle"
   aria-label="Theme Toggle Button"
-  class="z-99 aspect-square w-4.375 c-secondary active:scale-90"
+  class="aspect-square w-4.2 c-secondary active:scale-90"
 >
   <svg
     xmlns="http://www.w3.org/2000/svg"

src/content/posts/markdown-extended.mdx

@@ -2,6 +2,7 @@
 title: Markdown Extended Features
 published: 2022-04-01
 tags: ["Markdown"]
+lang: en
 ---
 
 FROM https://github.com/saicaca/fuwari

src/layouts/Layout.astro

@@ -37,7 +37,7 @@ const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'fon
     <!--  -->
     <div
       class="mx-auto max-w-205.848 min-w-80 min-h-dvh"
-      p="x-[min(7.25vw,3.731rem)] y-10 lg:(x-22.5 y-20)"
+      p="x-[min(7.25vw,3.731rem)] y-7 lg:(x-22.5 y-20)"
       lg="max-w-320 grid cols-[1fr_13.875rem] gap-[min(calc(16.35vw-3.46rem),11.25rem)]"
     >
       <div class={!isHome && isPost ? 'hidden lg:block' : ''}>
@@ -54,10 +54,7 @@ const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'fon
       <Footer class="mt-12 block lg:hidden" />
     </div>
 
-    <div
-      class="absolute right-[min(7.25vw,3.731rem)] top-15 flex gap-6"
-      lg="fixed"
-    >
+    <div class="absolute right-[min(7.25vw,3.731rem)] top-12.3 flex gap-6">
       <LanguageSwitcher />
       <ThemeToggle />
     </div>

src/styles/global.css

@@ -16,9 +16,9 @@ body {
   --at-apply: 'ios-flash-fix';
 }
 
-article img {
+/* article img {
   --at-apply: 'cursor-zoom-in force-gpu';
-}
+} */
 
 /* Horizontal reveal animation during theme switching */
 ::view-transition-new(theme-transition) {