From 0f84f72ed28aaf7cd02a20294e6ea03bd4672189 Mon Sep 17 00:00:00 2001 From: Hydroxycarbamide Date: Thu, 7 Jul 2022 13:22:10 +0200 Subject: [PATCH] Make it responsive + change gmail link to tutanota --- index.html | 3 ++- style.css | 41 +++++++++++++++++++++++++++++++++-------- 2 files changed, 35 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index f7a5dba..7997e7e 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + ~/startpage @@ -32,7 +33,7 @@
  • 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; }