changed responsivnes

index.html

@@ -17,18 +17,20 @@
     <div id="navbar-mobile-links">
     </div>
 
-    <label class="switch">
-      <input type="checkbox" id="themeToggle2">
-      <span class="slider"></span>
-    </label>
+    <div class="mobile-config">
+      <label class="switch">
+        <input type="checkbox" id="themeToggle2">
+        <span class="slider"></span>
+      </label>
 
 
-    <div class="lang-dropdown" id="lang-dropdown2">
-      <button class="lang-button" id="lang-button2">Sprache</button>
+      <div class="lang-dropdown" id="lang-dropdown2">
+        <button class="lang-button" id="lang-button2">Sprache</button>
 
-      <div id="lang-menu2" class="lang-menu hidden">
-        <div class="lang-item hidden" data-lang="de">de</div>
-        <div class="lang-item hidden" data-lang="en">en</div>
+        <div id="lang-menu2" class="lang-menu hidden">
+          <div class="lang-item hidden" data-lang="de">de</div>
+          <div class="lang-item hidden" data-lang="en">en</div>
+        </div>
       </div>
     </div>
 

styles/mobile_bar_style.css

@@ -15,6 +15,7 @@
     -webkit-user-select: none;
     -ms-user-select: none;
     user-select: none;
+    z-index: 10;
 }
 
 #navbar-mobile.inactive {
@@ -95,7 +96,7 @@
 
 .navbar-item-mobile {
     width: 100%;
-    height: 80px;
+    height: 60px;
     list-style: none;
     display: flex;
     align-items: center;
@@ -116,3 +117,14 @@
     align-items: center;
     padding: 10px;
 }
+
+.mobile-config {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: auto;
+    margin-bottom: 20px;
+    gap: 20px;
+    height: fit-content;
+    width: fit-content;
+}

styles/projects_style.css

@@ -1,9 +1,15 @@
 .main-content {
     margin-left: var(--nav-w);
-    --margin-main-content: 100px;
+    --margin-main-content: 7vw;
     --margin-top: 100px;
 }
 
+@media (max-width: 1500px) {
+    .main-content {
+        --margin-main-content: 4vw;
+    }
+}
+
 @media (max-width: 1000px) {
     .main-content {
         margin-left: 0;
@@ -13,7 +19,7 @@
 }
 
 #introduction {
-    padding-top: var(--margin-top);
+    margin-top: var(--margin-top);
     margin-left: var(--margin-main-content);
     margin-bottom: 60px;
     margin-right: var(--margin-main-content);
@@ -116,11 +122,6 @@
     display: inline;
 }
 
-.text-content a {
-    font-size: var(--font-size);
-    font-weight: normal;
-}
-
 .text-link:hover {
     border-color: var(--text);
 }
@@ -128,13 +129,31 @@
 .text-link {
     display: inline-block;
     width: fit-content;
-    font-size: 0.90rem;
-    font-weight: 500;
+    font-size: var(--text-size);
+    font-weight: bolder;
     text-decoration: none;
-    border-bottom: 1px solid var(--border);
-    padding-bottom: 2px;
     transition: border-color 0.15s;
     white-space: nowrap;
+    position: relative;
+}
+
+.text-link:hover {
+    color: var(--text);
+}
+
+.text-link::before{
+    content: "";
+    width: 100%;
+    height: 1.2px;
+    background: var(--muted);
+    left: 0;
+    bottom: 2px;
+    position: absolute;
+    border-radius: 16px;
+}
+
+.text-link:hover::before {
+    background: var(--text);
 }
 
 .link-row {