diff --git a/src/Guestbooky-admin/src/App.css b/src/Guestbooky-admin/src/App.css index 7313873..b9fe9a2 100644 --- a/src/Guestbooky-admin/src/App.css +++ b/src/Guestbooky-admin/src/App.css @@ -3,14 +3,13 @@ word-spacing: 0.3em; letter-spacing: -0.05em; background: linear-gradient(180deg, hsl(15, 80%, 10%) 0%, hsl(15, 50%, 60%) 100%); - width: 100%; + width: 100dvw; padding: 2ch; border-bottom: 0.1em solid hsl(15, 80%, 20%); } .header h1 { margin-inline: auto; - width: 1200px; color: hsl(15, 100%, 90%); text-shadow: 0.01em 0.01em 0.01em hsl(15, 0%, 20%); font-family: "Carattere", cursive; @@ -21,4 +20,18 @@ max-width: 1200px; margin-inline: auto; padding: 2ch; +} + +@media screen and (max-width: 1200px) { + .content { + width: 100%; + max-width: 100%; + padding: 0; + } + .header{ + font-size: clamp(1.5em, 3dvh, 2em); + } + .header h1 { + word-break: break-word; + } } \ No newline at end of file diff --git a/src/Guestbooky-admin/src/components/AdminPage.css b/src/Guestbooky-admin/src/components/AdminPage.css index bb7e4d2..0f07288 100644 --- a/src/Guestbooky-admin/src/components/AdminPage.css +++ b/src/Guestbooky-admin/src/components/AdminPage.css @@ -101,6 +101,7 @@ ul li button:hover { font-weight: 300; border-radius: 0.5em; box-shadow: 0.05em 0.05em 0.05em hsla(15, 20%, 20%, 0.5); + white-space: pre-wrap; } .message-text p{ @@ -108,4 +109,36 @@ ul li button:hover { text-align: justify; text-justify: inter-word; text-align-last: left; +} + +@media screen and (max-width: 1200px) { + .warning { + margin: 1ch; + margin-inline: auto; + } + ul li { + grid-template-columns: auto auto; + grid-template-rows: auto; + grid-row-gap: 1ch; + } + ul li h2 { + grid-row: 1; + grid-column: 1 / 3; + } + ul li h3 { + grid-row: 2; + grid-column: 1 / 3; + font-size: 1em; + } + ul li button { + justify-self: center; + grid-row: 1; + grid-column: 2; + } + .message-text { + grid-row: 4; + grid-column: 1 / 3; + margin: 0; + } + } \ No newline at end of file diff --git a/src/Guestbooky-admin/src/components/LoginPage.css b/src/Guestbooky-admin/src/components/LoginPage.css index 6c5ac81..d89f985 100644 --- a/src/Guestbooky-admin/src/components/LoginPage.css +++ b/src/Guestbooky-admin/src/components/LoginPage.css @@ -61,4 +61,21 @@ form button { background-color: hsl(15, 50%, 85%); font-family: 'Solway', serif; font-weight: 300; +} + +@media screen and (max-width: 1200px) { + form { + grid-template-columns: 1fr; + grid-column-gap: initial; + grid-row-gap: 2ch; + } + form * { + grid-column: 1; + } + form label { + text-align: left; + } + form button { + grid-column: 1; + } } \ No newline at end of file diff --git a/src/Guestbooky-admin/src/components/LoginPage.jsx b/src/Guestbooky-admin/src/components/LoginPage.jsx index 231df8f..b83a94a 100644 --- a/src/Guestbooky-admin/src/components/LoginPage.jsx +++ b/src/Guestbooky-admin/src/components/LoginPage.jsx @@ -1,13 +1,12 @@ -import React, { useRef } from 'react'; +import React, {useRef} from 'react'; import useAuth from '../hooks/useAuth.js'; import './LoginPage.css' -const LoginPage = ({onLoggedIn}) => -{ +const LoginPage = ({onLoggedIn}) => { const userInputRef = useRef(null); const passInputRef = useRef(null); - const { authenticate, error } = useAuth(); + const {authenticate, error} = useAuth(); const handleSubmit = (e) => { e.preventDefault() @@ -19,21 +18,19 @@ const LoginPage = ({onLoggedIn}) => if (error === null) { onLoggedIn(true) } - }); + }); } - return( - <> + return (