milarin/startpage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed mobile layout

Browse Source
This commit is contained in:
Timon Ringwald 2022-05-08 22:12:48 +02:00
parent b9c002a72b
commit 236394a3c2
1 changed files with 33 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
templates/style.css
View File

@ -41,7 +41,7 @@
html, body {
width: 100%;
height: 100%;
min-height: 100vh;
font-size: 100%;
}
@ -51,7 +51,11 @@ body {
main {
width: 100%;
height: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 0.5em;
}
#bookmark-container {
@ -62,28 +66,37 @@ main {
align-content: center;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
}
#search {
margin: 0 auto;
margin-bottom: 5em;
margin: 3em auto;
max-width: 100%;
}
#search form {
--input-font-size: 1.2em;
--width: 30rem;
--height: 2.5rem;
position: relative;
display: block;
width: var(--width);
height: var(--height);
max-width: 100%;
}
#search form input[type="search"] {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: calc(100% - var(--height));
height: var(--height);
border: 1px solid black;
padding: 0 0.5em;
box-sizing: border-box;
outline: 0;
background-color: black;
color: white;
padding: 0.25em 0.5em;
transition: all 0.2s ease-in-out;
border-radius: 0.25em 0 0 0.25em;
font-size: var(--input-font-size);
@ -101,19 +114,25 @@ main {
}
#search form label[for="submit"] {
position: absolute;
top: 0;
right: 0;
display: inline-block;
width: var(--height);
height: var(--height);
margin-left: 0;
border: 1px solid black;
box-sizing: border-box;
background-color: black;
color: white;
padding: 0.25em 0.5em;
transition: all 0.2s ease-in-out;
border-radius: 0 0.25em 0.25em 0;
font-size: var(--input-font-size);
cursor: pointer;
}
#search form label[for="submit"] img {
display: inline-block;
#search form label[for="submit"] span {
transform: translate(0.3em, 0.3em);
}
#search form input[type="submit"] {