andras/fizika
andras/fizika
Watch
1
0
Fork
You've already forked fizika
 0
Code Issues Pull requests 6 Projects Releases Packages 1 Wiki Activity Actions

Fix mobile view

Browse source
This commit is contained in:
Andras Schmelczer 2026-10-27 21:00:24 +00:00
commit dd8ab2ac26
5 changed files with 92 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

9
frontend/css/button.css
View file

@ -25,8 +25,11 @@
} }
@media only screen and (max-width: 1000px) { @media only screen and (max-width: 1000px) {
.button { .button {
font-size: 1.45em; box-sizing: border-box;
padding: 0.3em; max-width: 100%;
margin: 0.15em; min-height: 44px;
font-size: 1.125rem;
padding: 0.75em;
margin: 0.25em 0;
} }
} }

16
frontend/css/card.css
View file

@ -38,10 +38,22 @@ img {
max-width: 500px; max-width: 500px;
} }
@media only screen and (max-width: 1000px) { @media only screen and (max-width: 1000px) {
.card {
padding: 1em;
margin: 1.5em 0;
}
h2 { h2 {
font-size: 1.6em; font-size: 1.25rem;
} }
pre { pre {
font-size: 1em; font-size: 1rem;
line-height: 1.6;
text-align: left;
}
.card img {
float: none;
max-width: 100%;
height: auto;
margin: 1em auto;
} }
} }

72
frontend/css/fizika.css
View file

@ -218,40 +218,57 @@ h4 {
@media only screen and (max-width: 1000px) { @media only screen and (max-width: 1000px) {
body { body {
font-size: 1.75em; font-size: 1em;
} }
h1 { h1 {
font-size: 7em; font-size: clamp(2.5rem, 8vw, 5rem);
} }
h1:hover { h1:hover {
text-shadow: none; text-shadow: none;
} }
#wrapper { #wrapper {
width: 90%; width: 95%;
} }
.szoveg { .szoveg {
width: 90%; width: 100%;
}
.buttonwrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75em;
margin: 1em 0;
} }
#numberof { #numberof {
font-size: 0.6em; font-size: 1rem;
} width: 100%;
img { min-height: 44px;
max-width: 400px; padding: 0.5em;
} }
select { select {
font-size: 0.8em; font-size: 1rem;
width: 30%; width: 100%;
min-width: 0;
min-height: 44px;
padding: 0.75em;
} }
hr { hr {
border-bottom-width: 4px; width: 70%;
width: 50%; }
.menu ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
} }
li { li {
font-size: 1.75em; font-size: 1rem;
padding: 0.25em; line-height: 1.5;
padding: 0.75em 0.5em;
} }
p { p {
font-size: 0.75em; font-size: 1rem;
line-height: 1.6;
text-align: left;
} }
p:first-of-type { p:first-of-type {
padding-top: 0.5em; padding-top: 0.5em;
@ -261,12 +278,31 @@ h4 {
} }
#tablazat { #tablazat {
font-size: 0.8em; font-size: 0.875rem;
overflow-x: auto;
}
#temak {
flex-direction: column;
}
.fele {
width: 100%;
}
.main {
font-size: 1.25rem;
} }
.mbcheck { .mbcheck {
font-size: 0.75em; font-size: 1rem;
} }
#bal { #bal,
#jobb {
float: none;
margin-left: 0; margin-left: 0;
} }
#state,
#state2 {
font-size: 1.25rem;
}
#percentage {
font-size: 2rem;
}
} }

25
frontend/css/radio.css
View file

@ -29,16 +29,25 @@ input[type="radio"]:checked + label {
} }
@media only screen and (max-width: 1000px) { @media only screen and (max-width: 1000px) {
.card form {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
gap: 0.75em 0.5em;
}
.card form br {
display: none;
}
input[type="radio"] { input[type="radio"] {
width: 60px; height: 28px;
height: 60px; opacity: 1;
} accent-color: #003366;
input[type="radio"] + label {
margin-left: -60px;
padding-left: 60px;
background-size: 60px 60px;
} }
input[type="radio"] + label,
input[type="radio"]:checked + label { input[type="radio"]:checked + label {
background-size: 60px 60px; margin: 0;
padding: 0;
background: none;
font-size: 1rem;
line-height: 1.6;
} }
} }

1
frontend/index.html
View file

@ -2,6 +2,7 @@
<html lang="hu-HU"> <html lang="hu-HU">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Fizika érettségire felkészítő alkalmazás - EMELT szint -</title> <title>Fizika érettségire felkészítő alkalmazás - EMELT szint -</title>
<meta <meta