daily
-
gmail
+
tutanota
protonmail
youtube
reddit
diff --git a/style.css b/style.css
index 9dc27c7..390f6e8 100644
--- a/style.css
+++ b/style.css
@@ -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;
}