Merge branch 'develop' of ssh://git.chaospott.de:2222/c3gov/website into develop

lang/en/app.php

@@ -28,7 +28,7 @@ return [
         'insertvideo' => '*Insert promotional video here*'
     ],
 	'services' => [
-		'title' => 'Our Service Overview',
+		'title' => 'Our Services',
 		'topic1' => [
 			'title' => 'Issuance of Hacker Passports',
 			'content' => 'Our team handles the issuance of travel documents.

public/css/style.css

@@ -1,89 +1,174 @@
 html, body {
     margin: 0;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    min-height: 100vh;
     background-color: #4b0600;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    overflow-x: hidden;
+}
+
+*, *:before, *:after {
+    box-sizing: inherit;
 }
 
 .ticker {
     background-color: #0c0;
     height: 3vh;
+    min-height: 24px;
+    flex-shrink: 0;
 }
 
-
 .header {
     background-color: #999;
-    height: 20vh;
+    min-height: 20vh;
     margin: 0;
-
+    display: flex;
+    flex-wrap: wrap;
+    flex-shrink: 0;
 }
 
 .header-main {
-    width: 20vw;
-    float: left;
+    width: 200px;
     height: 20vh;
     margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
 }
 
 .banner {
-    width: 60vw;
+    flex-grow: 1;
     height: 20vh;
-    float: left;
-    align-content: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .banner img {
-    margin-left: auto;
-    margin-right: auto;
+    max-width: 100%;
+    height: auto;
     display: block;
 }
 
 .language-area {
-    width: 20vw;
+    width: 200px;
     height: 20vh;
-    float: left;
     background-color: #ccc;
-    border: 2vh;
+    padding: 10px;
+    flex-shrink: 0;
 }
 
 .language {
-    margin: 1vw;
+    margin: 5px;
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+}
+
+.language img {
+    cursor: pointer;
 }
 
 .login-status {
     text-align: center;
+    font-size: 0.9em;
 }
 
 #logo {
-    margin: 2vh;
-    min-height: 12.5vh;
-    max-height: 35vh;
+    max-width: 90%;
+    max-height: 18vh;
 }
 
-
 .main {
     display: flex;
     flex-direction: row;
     margin: 0;
-    min-height: 77vh;
-    width: 100vw;
+    flex-grow: 1;
+    width: 100%;
 }
 
 .navbar {
     background-color: #ccc;
-    width: 20vw;
+    width: 200px;
+    flex-shrink: 0;
 }
 
 .content {
     background-color: #dcccaa;
-    width: 80vw;
-    padding-left: 1vw;
+    flex-grow: 1;
+    padding: 15px;
+}
+
+.navbar ul {
+    list-style-type: none;
+    padding: 10px;
+    margin: 0;
+}
+
+.navbar li {
+    margin-bottom: 8px;
+}
+
+.navbar a {
+    text-decoration: none;
+    color: #333;
+    display: block;
+    padding: 5px;
+    text-align: center;
+}
+
+.navbar a:hover {
+    background-color: #bbb;
+}
+
+@media (max-width: 1024px) {
+    .header {
+        flex-direction: column;
+        height: auto;
+    }
+
+    .header-main, .banner, .language-area {
+        width: 100%;
+        height: auto;
+        padding: 10px;
+    }
+
+    .main {
+        flex-direction: column;
+    }
+
+    .navbar {
+        width: 100%;
+    }
+
+    .navbar ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        justify-content: center;
+    }
+
+    .content {
+        width: 100%;
+    }
+
+    #logo {
+        max-height: 100px;
+    }
+
+    .banner img {
+        max-width: 100%;
+    }
 }
 
 .eingabemaske {
     border: 5px inset;
     font-size: 1.2em;
     padding: 0.5em;
+    overflow-x: auto;
 }
 
 .eingabemaske table, th, td {
@@ -92,6 +177,7 @@ html, body {
 
 .eingabemaske input {
     padding: 0.5em;
+    max-width: 100%;
 }
 
 .eingabemaske button {
@@ -103,7 +189,8 @@ html, body {
 
 #fehlermeldung {
     border: 4px outset;
-    width: 50vw;
+    width: 100%;
+    max-width: 500px;
 }
 
 nav {
@@ -111,9 +198,17 @@ nav {
 }
 
 .w-5 {
-    width: 5vw;
+    width: 5%;
 }
 
 .h-5 {
     height: 5vh;
 }
+
+.footer {
+    width: 100%;
+    background-color: #999;
+    padding: 10px;
+    text-align: center;
+    flex-shrink: 0;
+}

resources/views/layout/app.blade.php

@@ -2,7 +2,9 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>c3gov - {{ __('app.subtitle') }}</title>
+        <link rel="icon" type="image/x-icon" href="{{ asset("favicon.ico") }}">
         <link rel="stylesheet" href="{{ asset("css/style.css") . "?rnd=" . rand(0, 1000000000) }}">
         <script src="{{ asset("js/jquery/jquery-4.0.0.min.js") }}"></script>
         <script src="{{ asset("js/web.js") }}"></script>
@@ -37,7 +39,7 @@
                     <li><a href="{{ route('about') }}">{{ __('app.nav.about') }}</a></li>
                     <li><a href="{{ route('services') }}">{{ __('app.nav.services') }}</a></li>
                     <li><a href="{{ route('news') }}">{{ __('app.nav.news') }}</a></li>
-                    <li><a href="{{ route('contact') }}">{{ __('app.nav.contact') }}</li>
+                    <li><a href="{{ route('contact') }}">{{ __('app.nav.contact') }}</a></li>
                     <li><a href="{{ route('imprint') }}">{{ __('app.nav.imprint') }}</a></li>
                     <br />
                     <li><a href="{{ route('apply') }}">{{ __('app.nav.apply') }}</a></li>
@@ -52,8 +54,12 @@
             </div>
             <div class="content col">
                 @yield('content')
+                <br />
+                <br />
             </div>
         </div>
-
+        <div class="footer">
+            &copy; 1999 by C3Gov
+        </div>
     </body>
 </html>