Compare commits

...

3 Commits

Author SHA1 Message Date
5bff409db4 Merge pull request 'feature/css-hell' (#4) from feature/css-hell into main
Reviewed-on: #4
2025-10-07 01:14:23 +02:00
2c21a866b1 media chaos
* dodane media na desktop (900+)
* dodane media na 480px
* dodane media dla telefonow (max-device-width)
2025-10-03 22:42:17 +02:00
8cfc95535d avoid hardcoding height for flex purposes 2025-10-03 21:23:10 +02:00
3 changed files with 32 additions and 11 deletions

View File

@ -1,5 +1,6 @@
<html lang="pl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
<meta charset="utf-8">
<title>~tylda.org~ polskie tildeverse</title>

View File

@ -41,6 +41,7 @@ Otrzymaliśmy twój formularz rejestracji. Oczekuj na dalsze informacje na swoje
} else {
?>
<article>
Poniższy formularz trafi do naszych administratorów, którzy go ocenią. Potraktuj go częściowo jako antyspam. Chcemy sensownych odpowiedzi na poniższe pytania. Posiadanie własnej strony też jest na duży plus.
<form action="register.php" method="POST">
<div class="form-row">
@ -78,6 +79,7 @@ Poniższy formularz trafi do naszych administratorów, którzy go ocenią. Potra
<button type="submit">Submit</button>
</div>
</form>
</article>
<?php
}

View File

@ -1,9 +1,3 @@
@media only screen and (max-width: 850px) {
header#menu {
flex-direction: column !important;
}
}
:root {
--main: #dd9a1a;
--bg: #111;
@ -23,18 +17,17 @@ body {
font-family: "Helvetica", "Arial", sans-serif;
}
div.main-content {
display: flex;
flex-direction: column;
width: 60%;
margin: 0 auto;
padding: 1rem;
}
header#menu {
display: flex;
flex-direction: row;
height: 3rem;
flex-direction: column;
border-width: 5px;
border-color: var(--main);
border-style: double;
@ -74,7 +67,7 @@ article#content {
border-radius: 5px;
margin-top: 2rem;
padding: 1rem;
gap: 8px;
gap: .5rem;
padding-block: 2rem;
}
@ -104,7 +97,8 @@ footer#footer > *:not(:last-child)::after {
pre.ascii {
margin-bottom: 2rem;
font-size: 15px;
font-size: 1rem;
overflow: auto;
}
.user_home {
@ -116,6 +110,7 @@ pre.ascii {
.form-row {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: .5em;
}
@ -151,3 +146,26 @@ ul li {
padding: 0.5rem;
margin-left: 2rem;
}
@media only screen and (min-width: 900px) {
div.main-content {
width: 60%;
}
}
@media only screen
and (min-width: 480px)
and (max-width: 900px) {
header#menu {
flex-direction: row;
}
.form-row {
flex-direction: row;
}
}
@media only screen and (max-device-width: 480px) {
article {
font-size: 1em;
}
}