tylen/isdieselcheaper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make teh design responsive

Browse Source
This commit is contained in:
Vasily Davydov
2026-09-21 15:34:34 +03:00
parent ec8c8f2a81
commit 24da791d99
1 changed files with 32 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
style.css
View File

@@ -38,14 +38,21 @@ body {
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
} }
.container { .container {
max-width: 800px; max-width: 100%;
margin: auto; margin: auto;
background: var(--container-bg); background: var(--container-bg);
padding: 20px; padding: 15px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 10px var(--shadow-color); box-shadow: 0 2px 10px var(--shadow-color);
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
} }
@media screen and (max-width: 768px) {
.container {
padding: 10px;
margin: 10px;
}
}
h2 { h2 {
color: var(--header-color); color: var(--header-color);
text-align: center; text-align: center;
@@ -57,6 +64,12 @@ h2 {
gap: 20px; gap: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
@media screen and (max-width: 768px) {
.input-grid {
grid-template-columns: 1fr;
}
}
.input-group { .input-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -117,6 +130,15 @@ th {
.header { .header {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
justify-content: space-between;
align-items: flex-start;
}
@media screen and (min-width: 768px) {
.header {
flex-direction: row;
align-items: center;
}
} }
.description { .description {
@@ -124,10 +146,9 @@ th {
} }
.button-toggle { .button-toggle {
top: 20px;
cursor: pointer; cursor: pointer;
width: 15px; width: 30px;
height: 15px; height: 30px;
border-radius: 4px; border-radius: 4px;
transition: transform 0.3s ease; transition: transform 0.3s ease;
background: var(--container-bg); background: var(--container-bg);
@@ -138,12 +159,10 @@ th {
margin-bottom: 10px; margin-bottom: 10px;
} }
.button-toggle:hover { @media screen and (max-width: 768px) {
transform: scale(1.1); .button-toggle {
} width: 25px;
height: 25px;
.button-toggle svg { padding: 8px 12px;
width: 100%; }
height: 100%;
fill: var(--text-color);
} }