Adjust styles for mobile devices

Author: visortelle

src/components/pages/HomePage/HomePage.module.css

@@ -21,7 +21,7 @@
 
 @media (orientation: landscape) {
   .Background {
-    background-position: 30% 10%;
+    background-position: 30% 15%;
     background-size: 140%;
   }
 }
@@ -40,6 +40,13 @@
   }
 }
 
+@media (orientation: portrait) and (max-width: 1000px) {
+  .Background {
+    background-position: 57% 50%;
+    background-size: 200%;
+  }
+}
+
 @media (orientation: portrait) and (max-width: 480px) {
   .Background {
     background-position: 69% -26%;

src/components/pages/HomePage/ShortInfo/Parallax/Parallax.module.css

@@ -6,11 +6,11 @@
 
 .component {
   position: fixed;
-  top: 25%;
+  top: 35%;
 }
 
 @media (max-width: 800px) {
   .component {
-    top: 20%;
+    top: calc(var(--ifm-navbar-height) + 3rem + 1rem);
   }
 }

src/css/announcement-bar.css

@@ -22,7 +22,7 @@ div[class^="announcementBar"][role="banner"] .announcement-bar {
   justify-content: flex-start;
   align-items: center;
   height: 2.4rem;
-  padding: 0 4rem;
+  padding: 0 1rem;
   background-color: #282826;
   color: #F6F6F6;
   margin: 0 auto;
@@ -38,6 +38,7 @@ div[class^="announcementBar"][role="banner"] .announcement-bar:hover {
 div[class^="announcementBar"][role="banner"] .announcement-bar__icon {
   width: 1.6rem;
   height: 1.6rem;
+  padding: 1px; /* Fix icon crop in Safari */
 }
 
 div[class^="announcementBar"][role="banner"] .announcement-bar__icon:first-child {
@@ -47,3 +48,9 @@ div[class^="announcementBar"][role="banner"] .announcement-bar__icon:first-child
 div[class^="announcementBar"][role="banner"] .announcement-bar__icon:last-child {
   margin-left: 1rem;
 }
+
+@media (max-width: 480px) {
+  div[class^="announcementBar"][role="banner"] .announcement-bar {
+    font-size: 0.75rem;
+  }
+}