Siklos/startpage
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity Actions

Make it responsive + change gmail link to tutanota

Browse source
This commit is contained in:
Hydroxycarbamide 2022-07-07 13:22:10 +02:00
parent e24774ba53
commit 0f84f72ed2
2 changed files with 35 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

3
index.html
View file

@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>~/startpage</title> <title>~/startpage</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
</head> </head>
@ -32,7 +33,7 @@
<div class="category"> <div class="category">
<div class="links"> <div class="links">
<li class="title">daily</li> <li class="title">daily</li>
<li><a href="https://gmail.com">gmail</a></li> <li><a href="https://mail.tutanota.com">tutanota</a></li>
<li><a href="https://mail.protonmail.com">protonmail</a></li> <li><a href="https://mail.protonmail.com">protonmail</a></li>
<li><a href="https://linkedin.com">youtube</a></li> <li><a href="https://linkedin.com">youtube</a></li>
<li><a href="https://reddit.com/">reddit</a></li> <li><a href="https://reddit.com/">reddit</a></li>

41
style.css
View file

@ -28,15 +28,18 @@ html, body {
.container { .container {
display: grid; display: grid;
grid-template-columns: 1fr 460px 600px 1fr;
grid-template-areas: grid-template-areas:
". left right ."; "."
"right"
"left"
".";
column-gap: 80px; column-gap: 80px;
justify-items: center;
align-items: center;
min-height: 100%; min-height: 100%;
} }
.left-container { .left-container {
grid-area: left; grid-area: left;
aspect-ratio: 1/1; aspect-ratio: 1/1;
@ -44,13 +47,12 @@ html, body {
.right-container { .right-container {
grid-area: right; grid-area: right;
height: 50%;
width: 100%; width: 100%;
} }
.gif img { .gif img {
max-width: 100%; max-width: 350px;
max-height: 100%; max-height: 350px;
} }
.head { .head {
@ -65,10 +67,12 @@ html, body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 180px; width: 180px;
margin: auto;
} }
.bookmarks { .bookmarks {
display: flex; display: grid;
align-items: center;
justify-content: center; justify-content: center;
} }
@ -80,6 +84,27 @@ html, body {
padding-bottom: 20px; padding-bottom: 20px;
} }
@media (min-width: 640px) {
.bookmarks {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1324px) {
.container {
grid-template-areas:
". left right .";
justify-items: center;
align-items: center;
}
.bookmarks {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.title { .title {
font-size: 20px; font-size: 20px;
} }