repsonsive 2

frontend/app/components/Sprite.vue

@@ -33,13 +33,17 @@ onMounted(() => {
     position: absolute;
     z-index: 1;
     width: 1300px;
-
-    @media screen and (max-width: 900px) {
-        width: 650px;
-    }
-
+    
     @media screen and (max-width: 1200px) and (min-width: 900px) {
         width: 975px;
     }
+
+    @media screen and (max-width: 900px) and (min-width: 600px) {
+        width: 650px;
+    }
+
+    @media screen and (max-width: 600px){
+        width: 425px;
+    }
 }
 </style>

frontend/app/components/parts/PageHeader.vue

@@ -6,7 +6,7 @@ import SiteOptions from './site_options/SiteOptions.vue';
 <template>
     <div class="header">
         <div class="container">
-            <div class="header-container">
+            <div class="header-container website">
                 <h1>ARANROIG.COM</h1>
                 <HeaderLinks></HeaderLinks>
             </div>
@@ -28,6 +28,14 @@ import SiteOptions from './site_options/SiteOptions.vue';
     justify-content: space-between;
 }
 
+.header-container {
+    &.website {
+        @media screen and (max-width: 600px) {
+            margin-top: 20px;
+        }
+    }
+}
+
 .header-container {
     position:relative;
     margin-bottom: 20px;

frontend/app/components/parts/TableHeader.vue

@@ -39,7 +39,7 @@ onBeforeUnmount(() => {
 
 <template>
     <div class="header">
-        <div class="header-container">
+        <div class="header-container website">
                 <h1 class="title">{{ displayedText }}</h1>
                 <HeaderLinks></HeaderLinks>
         </div>
@@ -53,9 +53,6 @@ onBeforeUnmount(() => {
 </template>
 
 <style lang="scss" scoped>
-.header-conainer {
-    position:relative;
-}
 .header {
     position: relative;
     margin-top: 30px;
@@ -64,6 +61,16 @@ onBeforeUnmount(() => {
     justify-content: space-between;
 }
 
+.header-container {
+    
+    &.website {
+        z-index: 200;
+        @media screen and (max-width: 600px) {
+            margin-top: 20px;
+        }
+    }
+}
+
 .undertable {
     position: relative;
     left: -200px;
@@ -71,6 +78,7 @@ onBeforeUnmount(() => {
     margin-left: -425px;
     margin-bottom: 25px;
     user-select: none;
+    pointer-events: none;
 
     @media screen and (max-width: 1200px) and (min-width: 900px) {
         left: -50px;
@@ -78,11 +86,17 @@ onBeforeUnmount(() => {
         margin-top: 350px;
     }
 
-    @media screen and (max-width: 900px) {
+    @media screen and (max-width: 900px) and (min-width: 600px) {
         left: 70px;
         bottom: 50px;
         margin-top: 250px;
     }
+
+    @media screen and (max-width: 600px) {
+        left: 150px;
+        bottom: 70px;
+        margin-top: 250px;
+    }
 }
 
 .web-links {

frontend/app/components/parts/site_options/SiteOptions.vue

@@ -15,5 +15,9 @@ import ThemeSelector from './ThemeSelector.vue';
     display: flex;
     justify-content: right;
     width: 400px;
+
+    @media screen and (max-width: 600px) {
+        margin-top: -10px;
+    }
 }
 </style>