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

41
style.css
View file

@ -28,15 +28,18 @@ html, body {
.container {
display: grid;
grid-template-columns: 1fr 460px 600px 1fr;
grid-template-areas:
". left right .";
"."
"right"
"left"
".";
column-gap: 80px;
justify-items: center;
align-items: center;
min-height: 100%;
}
.left-container {
grid-area: left;
aspect-ratio: 1/1;
@ -44,13 +47,12 @@ html, body {
.right-container {
grid-area: right;
height: 50%;
width: 100%;
}
.gif img {
max-width: 100%;
max-height: 100%;
max-width: 350px;
max-height: 350px;
}
.head {
@ -65,10 +67,12 @@ html, body {
display: flex;
flex-direction: column;
width: 180px;
margin: auto;
}
.bookmarks {
display: flex;
display: grid;
align-items: center;
justify-content: center;
}
@ -80,6 +84,27 @@ html, body {
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 {
font-size: 20px;
}