rob/upn-qr
1
0
Fork 0
mirror of https://gitplac.si/aljaxus/upn-qr.git synced 2025-12-17 04:00:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve mobile styling

Browse Source
This commit is contained in:
Aljaz S
2021-11-23 18:57:20 +01:00
parent ed1676bac1
commit ac04841b01
2 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/public/style.css
View File

@@ -29,7 +29,7 @@ html {
padding: 0 0; padding: 0 0;
width: 100vw; width: 100vw;
display: grid; display: grid;
grid-template-columns: auto minmax(50vw, 650px) auto; grid-template-columns: auto minmax(50vw, 850px) auto;
background-color: var(--c-dark); background-color: var(--c-dark);
} }

17
src/views/form.ejs
View File

@@ -14,7 +14,7 @@ div {
} }
.title { .title {
display: grid; display: grid;
grid-template-columns: auto auto 1fr; grid-template-columns: auto max-content;
align-content: center; align-content: center;
justify-content: center; justify-content: center;
padding: 1rem; padding: 1rem;
@@ -35,15 +35,16 @@ div {
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: url("/public/invalid-content.png"); background-image: url("/public/invalid-content.png");
margin: 2rem; min-height: 210px;
min-width: 210px;
} }
.card { @media screen and (min-width: 700px) {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); .card {
grid-template-rows: auto auto; grid-template-columns: min-content 1fr;
column-gap: 1rem;
}
.title { grid-column: span 2; }
} }
.title { grid-row: 1; grid-column: 1 / -1; }
.code { grid-row: 2; grid-column: 1; }
.form { grid-row: 2; grid-column: 2 / -1; }
</style> </style>
<body> <body>
<div class="card"> <div class="card">