Fixes (#105)

* RTL optimizations

Fixes #100

* Make brand color more orange

Fixes #101

* Adjust small favicon

Fixes #102

Author: Madis0

app.vue

@@ -7,8 +7,8 @@ useHeadSafe({
   link: [
     {
       rel: "icon",
-      type: "image/png",
-      href: "/icon.png",
+      type: "image/x-icon",
+      href: "/favicon.ico",
     },
   ],
 });
@@ -33,12 +33,11 @@ useHeadSafe({
 .max-width-wrapper {
   max-width: 1920px;
   /* align center */
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 }
 
 :root {
-  --color-brand: #785A00 !important;
+  --color-brand: #945100 !important;
   --color-brand-dark: #AD8200 !important;
 }
 

components/DownloadSection.vue

@@ -158,7 +158,7 @@ onBeforeMount(async () => {
 
 <style scoped lang="scss">
 .toggle-pair {
-  margin-left: auto;
+  margin-inline-start: auto;
   display: flex;
   justify-content: space-between;
   margin-top: auto;

components/Navbar.vue

@@ -211,8 +211,7 @@ updateDirection(currentLocale.value);
 
 .nav-body {
   display: block;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 }
 
 .nav {
@@ -243,19 +242,15 @@ updateDirection(currentLocale.value);
   }
 }
 
-html[dir="ltr"] .side {
+html .side {
   left: calc(var(--gap-xl) * -4);
 }
 
-html[dir="rtl"] .side {
-  right: calc(var(--gap-xl) * -4);
-}
-
 .side {
   position: relative;
   display: flex;
   margin: auto;
-  margin-left: auto;
+  margin-inline-start: auto;
   flex-direction: row;
   gap: var(--gap-xl);
   flex-wrap: wrap;

pages/contribute.vue

@@ -131,6 +131,6 @@ body {
 }
 
 li img { 
-  width: 1em; height: 1em; margin-right: 0.5em; 
+  width: 1em; height: 1em; margin-inline-end: 0.5em; 
 }
 </style>

pages/index.vue

@@ -263,8 +263,7 @@ h3 {
   max-width: 75vw;
 
   // align everything center
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -275,13 +274,12 @@ h3 {
 .feature-block {
   gap: var(--gap-xl);
   align-items: center;
-  padding-right: 2%;
+  padding-inline-end: 2%;
 
   // img {
   //   width: 85%;
   //   height: 85%;
-  //   margin-left: auto;
-  //   margin-right: auto;
+  //   margin-inline: auto;
   //   object-fit: cover;
 
   //   border-radius: var(--gap-xl);

pages/vanilla.vue

@@ -69,7 +69,7 @@ onMounted(() => {
 @media (max-width: 999px) {
   #vanilla-embed {
     width: 100% !important;
-    margin-left: -1em !important;
+    margin-inline-start: -1em !important;
   }
 }