Merge pull request 'changed style' (#5) from message_board into main
All checks were successful
Build and Push Docker Image to Gitea Registry / build-and-push (push) Successful in 5s

Reviewed-on: #5
This commit is contained in:
2025-01-17 01:14:28 +00:00
2 changed files with 14 additions and 3 deletions

View File

@@ -5,6 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Message Board</title> <title>Message Board</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<link rel="apple-touch-icon" sizes="180x180" href="logos/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="logos/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="logos/favicon/favicon-16x16.png">
<script src="https://cdn.jsdelivr.net/npm/pocketbase/dist/pocketbase.umd.js"></script> <script src="https://cdn.jsdelivr.net/npm/pocketbase/dist/pocketbase.umd.js"></script>
</head> </head>
<body> <body>

View File

@@ -19,7 +19,7 @@ body {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; /* Zentriert die Links im Container */ align-items: center; /* Zentriert die Inhalte im Container */
} }
h1 { h1 {
@@ -76,17 +76,26 @@ h1 {
form { form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; /* Zentriert die Form-Inhalte horizontal */
gap: 10px; gap: 10px;
width: 100%; /* Maximale Breite der Form */
} }
form input, form textarea { form input, form textarea {
width: 100%; width: 90%; /* Eingabefelder nehmen 90% der Breite ein */
padding: 10px; padding: 10px;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 5px; border-radius: 5px;
box-sizing: border-box; /* Verhindert, dass Padding die Größe beeinflusst */
}
form textarea {
height: 100px; /* Größeres Textfeld */
resize: none; /* Deaktiviert Größenänderungen durch den Benutzer */
} }
form button { form button {
width: 50%; /* Sende-Knopf nimmt 50% der Form-Breite ein */
padding: 10px; padding: 10px;
background: #007BFF; background: #007BFF;
color: white; color: white;
@@ -99,4 +108,3 @@ form button {
form button:hover { form button:hover {
background: #0056b3; background: #0056b3;
} }