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