diff --git a/guestbook/index.php b/guestbook/index.php index 2315d48..8c764c6 100644 --- a/guestbook/index.php +++ b/guestbook/index.php @@ -24,7 +24,7 @@ } article { - width: 90%; + width: 100%; margin: 2rem auto; display: grid; gap: 1rem; @@ -86,6 +86,9 @@ .gb-index { text-align: right; } + .gb-name, .gb-date, .gb-index { + min-width: calc(var(--bodywidth) / 3); + } @media only screen and (hover: none) { form td:first-child { text-align: left; @@ -100,26 +103,18 @@ border-bottom: 2px solid #888888; } article { - width: 100%; margin: 2rem auto; } - article td:nth-child(2) { - text-align: left; - } - article td:last-child { - text-align: left; - } - article td:first-child { - text-align: left; - } - article { - grid-template-areas: - 'gb-name gb-name gb-index' - 'gb-date gb-date gb-date' - 'gb-cool gb-cool gb-cool' - 'gb-found gb-found gb-found' - 'gb-message gb-message gb-message' - 'gb-reply gb-reply gb-reply'; + @media (max-width: 43rem) { + article { + grid-template-areas: + 'gb-name gb-name gb-index' + 'gb-date gb-date gb-date' + 'gb-cool gb-cool gb-cool' + 'gb-found gb-found gb-found' + 'gb-message gb-message gb-message' + 'gb-reply gb-reply gb-reply'; + } } } @media (prefers-contrast: more) { @@ -209,7 +204,7 @@ $coolsanitized = htmlentities(preg_replace("/https?:\/\//i", "", $cool)); $reply = htmlentities($post->reply); - $output = $output."
"; + $output = $output."
"; if($website) { $output = $output."$name"; } else { $output = $output.$name; } $output = $output."
$date
Entry #$index
";