From 408443e0bfcbafc219fb78afdc39283dc065bd29 Mon Sep 17 00:00:00 2001 From: Periklis Date: Wed, 13 Mar 2024 13:25:33 +0200 Subject: [PATCH 01/17] Left side svg icons fixed --- index.html | 0 style.css | 0 svgFiles/bookmarks.svg | 8 ++++++++ svgFiles/communities.svg | 8 ++++++++ svgFiles/explore.svg | 1 + svgFiles/home.svg | 8 ++++++++ svgFiles/lists.svg | 8 ++++++++ svgFiles/messages.svg | 8 ++++++++ svgFiles/more.svg | 8 ++++++++ svgFiles/notifications.svg | 8 ++++++++ svgFiles/premium.svg | 8 ++++++++ svgFiles/profile.svg | 8 ++++++++ 12 files changed, 73 insertions(+) create mode 100644 index.html create mode 100644 style.css create mode 100644 svgFiles/bookmarks.svg create mode 100644 svgFiles/communities.svg create mode 100644 svgFiles/explore.svg create mode 100644 svgFiles/home.svg create mode 100644 svgFiles/lists.svg create mode 100644 svgFiles/messages.svg create mode 100644 svgFiles/more.svg create mode 100644 svgFiles/notifications.svg create mode 100644 svgFiles/premium.svg create mode 100644 svgFiles/profile.svg diff --git a/index.html b/index.html new file mode 100644 index 00000000..e69de29b diff --git a/style.css b/style.css new file mode 100644 index 00000000..e69de29b diff --git a/svgFiles/bookmarks.svg b/svgFiles/bookmarks.svg new file mode 100644 index 00000000..a4de5841 --- /dev/null +++ b/svgFiles/bookmarks.svg @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/svgFiles/communities.svg b/svgFiles/communities.svg new file mode 100644 index 00000000..8cbbadbe --- /dev/null +++ b/svgFiles/communities.svg @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/svgFiles/explore.svg b/svgFiles/explore.svg new file mode 100644 index 00000000..fa12655b --- /dev/null +++ b/svgFiles/explore.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svgFiles/home.svg b/svgFiles/home.svg new file mode 100644 index 00000000..15725c1e --- /dev/null +++ b/svgFiles/home.svg @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/svgFiles/lists.svg b/svgFiles/lists.svg new file mode 100644 index 00000000..27f4c794 --- /dev/null +++ b/svgFiles/lists.svg @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/svgFiles/messages.svg b/svgFiles/messages.svg new file mode 100644 index 00000000..4a762e3b --- /dev/null +++ b/svgFiles/messages.svg @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/svgFiles/more.svg b/svgFiles/more.svg new file mode 100644 index 00000000..f5183a55 --- /dev/null +++ b/svgFiles/more.svg @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/svgFiles/notifications.svg b/svgFiles/notifications.svg new file mode 100644 index 00000000..dfbfecf3 --- /dev/null +++ b/svgFiles/notifications.svg @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/svgFiles/premium.svg b/svgFiles/premium.svg new file mode 100644 index 00000000..ea5d60f8 --- /dev/null +++ b/svgFiles/premium.svg @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/svgFiles/profile.svg b/svgFiles/profile.svg new file mode 100644 index 00000000..f2be203a --- /dev/null +++ b/svgFiles/profile.svg @@ -0,0 +1,8 @@ + \ No newline at end of file From 9b8c4721ee9382b7b4e354cd77837b9f8ef1e939 Mon Sep 17 00:00:00 2001 From: Periklis Date: Wed, 13 Mar 2024 13:32:51 +0200 Subject: [PATCH 02/17] Add cogwheel svg --- svgFiles/cogwheel.svg | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 svgFiles/cogwheel.svg diff --git a/svgFiles/cogwheel.svg b/svgFiles/cogwheel.svg new file mode 100644 index 00000000..a7b60d6c --- /dev/null +++ b/svgFiles/cogwheel.svg @@ -0,0 +1,9 @@ + \ No newline at end of file From 7e349ace0acbc77e9c8939f30ad66de535bfd438 Mon Sep 17 00:00:00 2001 From: Periklis Date: Wed, 13 Mar 2024 14:01:08 +0200 Subject: [PATCH 03/17] Add top-logo svg --- index.html | 20 ++++++++++++++++++++ svgFiles/logo.svg | 8 ++++++++ 2 files changed, 28 insertions(+) create mode 100644 svgFiles/logo.svg diff --git a/index.html b/index.html index e69de29b..faacfe70 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,20 @@ + + + + + + + Twitter-mockup + + + + + + + + + + + + + \ No newline at end of file diff --git a/svgFiles/logo.svg b/svgFiles/logo.svg new file mode 100644 index 00000000..52d1c100 --- /dev/null +++ b/svgFiles/logo.svg @@ -0,0 +1,8 @@ + \ No newline at end of file From 34313c2132ce9610466f263d9eeef367ec155aa0 Mon Sep 17 00:00:00 2001 From: Periklis Date: Wed, 13 Mar 2024 14:57:09 +0200 Subject: [PATCH 04/17] Add post-media-icons svg --- index.html | 44 +++++++++++++++++++++++++++++-- style.css | 39 +++++++++++++++++++++++++++ svgFiles/post-icons.svg | 58 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 139 insertions(+), 2 deletions(-) create mode 100644 svgFiles/post-icons.svg diff --git a/index.html b/index.html index faacfe70..64857304 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,53 @@ + Twitter-mockup + - - + +
+ +
+ + + +
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+ + +
+ + +
+ + + +
+ + +
+ +
+ +
@@ -17,4 +56,5 @@ + \ No newline at end of file diff --git a/style.css b/style.css index e69de29b..c828522d 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,39 @@ +* { + margin: 0; +} + +/* body { + background-color: seagreen; +} */ + +.container { + height: 100vh; + display: grid; + grid-template: + 'header main right' / + 25% 1fr 30% + ; +} + +.header { + grid-area: header; + background-color: green; + padding: 20px; + display: grid; + grid-template-rows: repeat(11, 1fr) +} + +.header div { + margin: 10px; + border: 1px solid black; +} + +.main { + grid-area: main; + background-color: grey; +} + +.right { + grid-area: right; + background-color: blue; +} \ No newline at end of file diff --git a/svgFiles/post-icons.svg b/svgFiles/post-icons.svg new file mode 100644 index 00000000..e42939bc --- /dev/null +++ b/svgFiles/post-icons.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + \ No newline at end of file From 11e3723b8f41399b1337331bc8ba3fbf5caac26d Mon Sep 17 00:00:00 2001 From: Periklis Date: Wed, 13 Mar 2024 16:46:09 +0200 Subject: [PATCH 05/17] Left bar almost done Added dots-svg --- index.html | 141 ++++++++++++++++++++++++++++++++++++++++------ style.css | 58 +++++++++++++++---- svgFiles/dots.svg | 8 +++ 3 files changed, 178 insertions(+), 29 deletions(-) create mode 100644 svgFiles/dots.svg diff --git a/index.html b/index.html index 64857304..0ddfaa7c 100644 --- a/index.html +++ b/index.html @@ -14,23 +14,128 @@
- - -
-
-
-
-
-
-
-
-
-
- -
- -
-
+ + +
+ +

Home

+
+
+ +

Explore

+
+
+ +

Notifications

+
+
+ +

Messages

+
+
+ +

Lists

+
+
+ +

Bookmarks

+
+
+ +

Communities

+
+
+ +

Premium

+
+
+ +

Profile

+
+
+ +

More

+
+ +
+ + +
+ +
+
+ +
+ +
@@ -38,7 +143,7 @@
- +
diff --git a/style.css b/style.css index c828522d..e4c1e67f 100644 --- a/style.css +++ b/style.css @@ -2,9 +2,6 @@ margin: 0; } -/* body { - background-color: seagreen; -} */ .container { height: 100vh; @@ -15,25 +12,64 @@ ; } +/* =========================== Left-Side =========================== */ + + .header { grid-area: header; - background-color: green; - padding: 20px; + background-color: #15202b; + padding-left: 20px; display: grid; - grid-template-rows: repeat(11, 1fr) + grid-template-rows: repeat(15, 0.8fr); +} + +.icons { + fill: white; } -.header div { + +.nav-link { margin: 10px; - border: 1px solid black; + display: grid; + grid-template-columns: 20% 1fr; + padding-left: 30%; } +.nav-link p { + color: white; + font-size: 22px; + font-weight: bolder; + padding-right: 10%; +} + +.post-button button{ + width: 147px; + height: 50px; + background-color: #1a8cd8; + border-radius: 50px; +} + + +.user { + display: grid; + grid-template-columns: 20% 1fr 20%; + gap: 3px; +} + + + + + + + + + .main { grid-area: main; - background-color: grey; + background-color: #15202b; } .right { grid-area: right; - background-color: blue; -} \ No newline at end of file + background-color: #15202b; +} diff --git a/svgFiles/dots.svg b/svgFiles/dots.svg new file mode 100644 index 00000000..6a891268 --- /dev/null +++ b/svgFiles/dots.svg @@ -0,0 +1,8 @@ + aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-vlxjld"> \ No newline at end of file From fcb0dbc38fb2523730852d25bcc872e4c7dce1f5 Mon Sep 17 00:00:00 2001 From: Periklis Date: Wed, 13 Mar 2024 17:56:49 +0200 Subject: [PATCH 06/17] Left bar done --- index.html | 24 ++++++++++++++++++++---- style.css | 43 ++++++++++++++++++++++++++++++++++++++----- svgFiles/dots.svg | 2 +- 3 files changed, 59 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 0ddfaa7c..418d2198 100644 --- a/index.html +++ b/index.html @@ -131,10 +131,25 @@
-
- -
- + + +
+
+
Username +
+ @twitterHanle +
+
+
+ +
@@ -142,6 +157,7 @@
+ diff --git a/style.css b/style.css index e4c1e67f..b5d244a6 100644 --- a/style.css +++ b/style.css @@ -7,8 +7,8 @@ height: 100vh; display: grid; grid-template: - 'header main right' / - 25% 1fr 30% + 'header main' / + 25% 1fr ; } @@ -17,6 +17,7 @@ .header { grid-area: header; + height: 100vh; background-color: #15202b; padding-left: 20px; display: grid; @@ -43,24 +44,56 @@ } .post-button button{ - width: 147px; + width: 260px; height: 50px; background-color: #1a8cd8; + border: 3px solid #1a8cd8; border-radius: 50px; } +.header .spacer { + height: 100%; + /* margin-bottom: 70px; */ +} .user { display: grid; - grid-template-columns: 20% 1fr 20%; - gap: 3px; + height: 50%; + grid-template: + 'pic username dots' + 'pic username dots' / + 20% 1fr 20% + ; + margin-left: 35%; + margin-top: 15%; + + margin-right: 20px; + border: 1px solid yellow; + border-radius: 50px; } +.user .profile-pic { + grid-area: pic; + width: 90%; + border-radius: 100%; + background-color: pink; +} +.user .user-name { + grid-area: username; + display: grid; + grid-template-rows: 1fr 1fr; + place-items: center; + color: white; +} +.acc-options { + grid-area: dots; +} +/* =========================== Main =========================== */ diff --git a/svgFiles/dots.svg b/svgFiles/dots.svg index 6a891268..d3ed3e83 100644 --- a/svgFiles/dots.svg +++ b/svgFiles/dots.svg @@ -5,4 +5,4 @@ d="M3 12c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm9 2c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm7 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"> - aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-vlxjld"> \ No newline at end of file + \ No newline at end of file From 5b453fe9036d7887a7801450176d51f73207b8df Mon Sep 17 00:00:00 2001 From: Periklis Date: Wed, 13 Mar 2024 18:50:53 +0200 Subject: [PATCH 07/17] Html maybe done --- index.html | 48 +++++++++++++++++++++++++++++++++++++++++------- style.css | 9 ++++++--- 2 files changed, 47 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 418d2198..9181a2fb 100644 --- a/index.html +++ b/index.html @@ -127,7 +127,9 @@
- +
@@ -141,8 +143,7 @@
-
-
- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+
-
-
diff --git a/style.css b/style.css index b5d244a6..31cd3a05 100644 --- a/style.css +++ b/style.css @@ -8,7 +8,7 @@ display: grid; grid-template: 'header main' / - 25% 1fr + 30% 1fr ; } @@ -21,7 +21,8 @@ background-color: #15202b; padding-left: 20px; display: grid; - grid-template-rows: repeat(15, 0.8fr); + grid-template-rows: repeat(15, 1fr); + /* place-items: right; */ } .icons { @@ -89,6 +90,7 @@ .acc-options { grid-area: dots; + padding-top: 30%; } @@ -96,10 +98,11 @@ /* =========================== Main =========================== */ - .main { grid-area: main; background-color: #15202b; + display: grid; + grid-template-rows: ; } .right { From 70bafa8e9681620de1d9aa9287e65a09cc5d88f3 Mon Sep 17 00:00:00 2001 From: Periklis Date: Thu, 14 Mar 2024 00:33:10 +0200 Subject: [PATCH 08/17] Remaining Responsiveness --- index.html | 410 +++++++++++++++++++++-- style.css | 329 +++++++++++++++++- svgFiles/Hello Ctulhu! black letters.jpg | Bin 0 -> 26049 bytes svgFiles/reactions.svg | 57 ++++ 4 files changed, 760 insertions(+), 36 deletions(-) create mode 100644 svgFiles/Hello Ctulhu! black letters.jpg create mode 100644 svgFiles/reactions.svg diff --git a/index.html b/index.html index 9181a2fb..81400859 100644 --- a/index.html +++ b/index.html @@ -159,42 +159,406 @@
+
-
-
-
+
+

For You

+
+
+

Following

+
+
+ +
+
-
-
-
-
-
+
+ +
+
+ +
+
+
+ + + + + + + + + + + + + + + + +
+
+ +
+
-
+
+

Show ### posts

+
+ +
-
-
-
-
-
-
-
- -
-
- +
+ +
+
+
Username @userhandle
+
+ +
+
+
+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam voluptates debitis eum + fugit pariatur impedit, fuga reiciendis ducimus! Doloremque quae vitae atque repellendus + nulla debitis veritatis! Hic voluptate quas minima!

Lorem ipsum dolor sit + amet, consectetur adipisicing elit. Corporis blanditiis nesciunt vel doloremque dolore + consectetur, quo quia! Ipsum corporis vitae corrupti rem dolorem architecto fugiat porro + consequatur maxime! Aperiam, iste!

+
+
+ +
+
+ + +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+
+ + +
+
-
-
-
+
+ +
+
+

Who to follow

+
+
+
+
+
+
+

Trends

+
+
+
+
+
+
+
+
+
diff --git a/style.css b/style.css index 31cd3a05..37aebc2b 100644 --- a/style.css +++ b/style.css @@ -34,48 +34,46 @@ margin: 10px; display: grid; grid-template-columns: 20% 1fr; - padding-left: 30%; + padding-left: 45%; } .nav-link p { color: white; font-size: 22px; font-weight: bolder; - padding-right: 10%; + /* padding-right: 5%; */ } -.post-button button{ +.post-button button { width: 260px; height: 50px; background-color: #1a8cd8; border: 3px solid #1a8cd8; - border-radius: 50px; + border-radius: 50px; } .header .spacer { height: 100%; - /* margin-bottom: 70px; */ } .user { display: grid; height: 50%; - grid-template: + grid-template: 'pic username dots' 'pic username dots' / 20% 1fr 20% ; margin-left: 35%; margin-top: 15%; - + padding-left: 5%; margin-right: 20px; - border: 1px solid yellow; border-radius: 50px; } .user .profile-pic { grid-area: pic; - width: 90%; + width: 80%; border-radius: 100%; background-color: pink; } @@ -95,17 +93,322 @@ -/* =========================== Main =========================== */ +/* =========================== Center - Right =========================== */ .main { grid-area: main; background-color: #15202b; display: grid; - grid-template-rows: ; + grid-template: + 'content news' / 1fr 40% + ; + +} + + +/* =========================== Center =========================== */ + +.content { + grid-area: content; + border-left: 1px solid #38444d; + border-right: 1px solid #38444d; + height: 100vh; + display: grid; + grid-template-rows: 5% 15% 7% 1fr; +} + +.top-bar { + /* height: 7%; */ + display: grid; + grid-template-columns: 1fr 1fr 15%; + place-items: center; + border-bottom: 1px solid #38444d; +} + +.top-bar p { + color: white; + font-size: 20px; + font-weight: bolder; +} + + +/* =========================== Compose-new-post =========================== */ + +.new-post { + /* height: 13%; */ + display: grid; + grid-template: + 'left compose' + 'left media' / + 10% 1fr + ; + border-bottom: 1px solid #38444d; } -.right { - grid-area: right; +.p-pic { + grid-area: left; + padding-top: 25%; + padding-left: 25%; +} + +.p-pic img { + border-radius: 100px; +} + +.write { + grid-area: compose; +} + +.write input { + height: 100%; + width: 100%; + padding-top: 1.5%; background-color: #15202b; + border: 0; + color: #8b98a5; + font-size: 28px; +} + +.add-media-container { + grid-area: media; + display: grid; + grid-template-columns: 1fr 20%; +} + +.media-icons { + padding-top: 5%; + fill: #1d9bf0; +} + +.media-icons svg { + padding-right: 5%; +} + +.send button { + width: 55%; + height: 55%; + margin-top: 10%; + margin-left: 10%; + color: white; + font-size: 16px; + font-weight: bold; + background-color: #1a8cd8; + border: 3px solid #1a8cd8; + border-radius: 50px; +} + + +/* =========================== Feed =========================== */ + +.more-tweets { + height: 100%; + border-bottom: 1px solid #38444d; +} + +.more-tweets p { + margin-top: 3%; + color: #1a8cd8; + font-size: large; + text-align: center; +} + +.feed-items-container { + height: 100vh; + display: grid; + grid-template-rows: 250px; + grid-auto-flow: row; + border-bottom: 1px solid #38444d; +} + +.post { + display: grid; + padding-top: 15px; + grid-template: + 'left top' 15% + 'left text' 1fr + 'left bottom' 25% / + 10% 1fr + ; + border-bottom: 1px solid #38444d; +} + +.left-side { + grid-area: left; + grid-area: left; + padding-top: 5%; + padding-left: 25%; +} + +.left-side img { + border-radius: 100%; +} + +.top { + grid-area: top; + display: grid; + grid-template-columns: 1fr 10%; +} + +.poster { + padding-top: 10px; + font-weight: bold; + font-size: large; + color: white; +} + +.actions { + fill: #8b98a5; + text-align: center; + padding-top: 10%; +} + +.text { + grid-area: text; + color: white; +} + +.post-bottom { + grid-area: bottom; + display: grid; + grid-template-columns: 1fr 15%; + margin-top: 10px; +} + +.reactions { + fill: #8b98a5; +} + +.bottom-left { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +.bottom-right { + display: grid; + grid-template-columns: 1fr 1fr; + padding-right: 20px; + gap: 10px; +} + + + + + + +/* =========================== Right =========================== */ + +.news { + grid-area: news; + display: grid; + grid-template-rows: 6% 30% 1fr; + gap: 15px; + place-items: center; +} + +.search { + height: 60%; + width: 100%; + padding-left: 10%; + } + +.search input { + height: 100%; + width: 80%; + padding-left: 5%; + font-size: 18px; + font-weight: bold; + color: #919aa2; + background-color: #273340; + border: 0; + border-radius: 50px; +} + +.suggest { + width: 90%; + height: 100%; + margin: 15px; + background-color: #252e38; + border: 1px solid black; + border-radius: 15px; + display: grid; + grid-auto-rows: 1fr; +} + +.suggest div { + border-top: 1px solid black; +} + +.suggest p { + color: white; + font-size: 28px; + font-weight: bolder; + padding-left: 15px; + padding-top: 15px; + padding-bottom: 15px; +} + +.trends { + width: 90%; + height: 100%; + margin: 15px; + background-color: #252e38; + border: 1px solid black; + border-radius: 15px; + display: grid; + grid-auto-rows: 1fr; +} + +.trends div { + border-top: 1px solid black; +} + +.trends p { + color: white; + font-size: 28px; + font-weight: bolder; + padding-left: 15px; + padding-top: 15px; + padding-bottom: 15px; +} + + +/* =========================== Responsiveness =========================== */ + +/* @media screen and (max-width: 480px) { + .container { + grid-template-columns: 1fr; + } + + .folders, + .settings { + display: none; + } +} */ + +@media screen and (min-width: 480px) and (max-width: 720px) { + .container { + grid-template-columns: 100px 1fr; + } + + +.nav-link p { + display: none; + } + +.post-button button { + width: 80px; + /* height: 50px; */ + background-color: #1a8cd8; + border: 3px solid #1a8cd8; + border-radius: 100%; } + +} + + +/* @media screen and (min-width: 720px) and (max-width: 1080px) { + .container { + + } +} */ \ No newline at end of file diff --git a/svgFiles/Hello Ctulhu! black letters.jpg b/svgFiles/Hello Ctulhu! black letters.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ae2210f66aecd4c61a269930ae28cbab8fe19215 GIT binary patch literal 26049 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 XoC2GkUwEF>e3u-U)Zr#h_&oN1hXM6u literal 0 HcmV?d00001 diff --git a/svgFiles/reactions.svg b/svgFiles/reactions.svg new file mode 100644 index 00000000..7d2018ef --- /dev/null +++ b/svgFiles/reactions.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file From b31c805d34c2dd6c7d0917eb57cb826080974de4 Mon Sep 17 00:00:00 2001 From: Periklis Date: Thu, 14 Mar 2024 00:57:36 +0200 Subject: [PATCH 09/17] Responsiveness done but poorly --- style.css | 53 ++++++++++++++++++++++++++++++----------------------- 1 file changed, 30 insertions(+), 23 deletions(-) diff --git a/style.css b/style.css index 37aebc2b..7b162955 100644 --- a/style.css +++ b/style.css @@ -22,7 +22,7 @@ padding-left: 20px; display: grid; grid-template-rows: repeat(15, 1fr); - /* place-items: right; */ + grid-template-columns: auto; } .icons { @@ -78,7 +78,7 @@ background-color: pink; } -.user .user-name { + .user-name { grid-area: username; display: grid; grid-template-rows: 1fr 1fr; @@ -116,6 +116,7 @@ height: 100vh; display: grid; grid-template-rows: 5% 15% 7% 1fr; + grid-template-columns: auto; } .top-bar { @@ -310,7 +311,7 @@ height: 60%; width: 100%; padding-left: 10%; - } +} .search input { height: 100%; @@ -375,40 +376,46 @@ /* =========================== Responsiveness =========================== */ -/* @media screen and (max-width: 480px) { +@media screen and (max-width: 480px) { .container { grid-template-columns: 1fr; } - .folders, - .settings { + .news, + .nav-link p, + .user-name, + .acc-options { display: none; } -} */ +} -@media screen and (min-width: 480px) and (max-width: 720px) { - .container { - grid-template-columns: 100px 1fr; +@media screen and (min-width: 481px) and (max-width: 1020px) { + + .content { + grid-template-columns: minmax(150px, 200px); } + .header { + grid-template-columns: minmax(150px, 200px); + } -.nav-link p { + .nav-link { + padding-left: 20px; + } + + .news, + .nav-link p, + .user-name, + .acc-options { display: none; } -.post-button button { - width: 80px; - /* height: 50px; */ - background-color: #1a8cd8; - border: 3px solid #1a8cd8; - border-radius: 100%; -} + .post-button button, + .profile-pic { + width: 40px; + border-radius: 100%; + } } -/* @media screen and (min-width: 720px) and (max-width: 1080px) { - .container { - - } -} */ \ No newline at end of file From 4b6b2517e907d91cea4bdfd01cff8ec71f42f48d Mon Sep 17 00:00:00 2001 From: Periklis Date: Thu, 14 Mar 2024 13:09:53 +0200 Subject: [PATCH 10/17] Crazy --- index.html | 183 +++++++++++++-------------- style.css | 311 ++++++++++++++++++++++++++++++++++++++-------- svgFiles/more.svg | 4 +- 3 files changed, 343 insertions(+), 155 deletions(-) diff --git a/index.html b/index.html index 81400859..5bfe702e 100644 --- a/index.html +++ b/index.html @@ -115,28 +115,35 @@

Profile

-
+ + +
+
+

More

+
-
- +
+
-
+
+ +
Username
@twitterHanle @@ -197,6 +204,8 @@ + + + +
Username @userhandle
+
-
@@ -543,14 +468,74 @@

Who to follow

-
-
-
-
+
+
+ +
+
+

A bloke in the pub
@blokeinpub

+ +
+ +
+
+
+ +
+
+

A bloke in the pub
@blokeinpub

+ +
+ +
+
+
+ +
+
+

A bloke in the pub
@blokeinpub

+ +
+ +
+
+
+ +
+
+

A bloke in the pub
@blokeinpub

+ +
+ +
+ +
+
+ +
+
+ +
+
+
+ +
+
+ +
+

Trends

-
+
diff --git a/style.css b/style.css index 7b162955..f60981ca 100644 --- a/style.css +++ b/style.css @@ -8,7 +8,7 @@ display: grid; grid-template: 'header main' / - 30% 1fr + 25% 1fr ; } @@ -19,66 +19,107 @@ grid-area: header; height: 100vh; background-color: #15202b; - padding-left: 20px; display: grid; grid-template-rows: repeat(15, 1fr); - grid-template-columns: auto; + /* grid-template-columns: auto; */ + gap: 5px; } .icons { fill: white; } +.icons img { + color: white; +} + .nav-link { - margin: 10px; + /* width: 40%; */ + margin-top: 10px; + margin-left: 40%; display: grid; grid-template-columns: 20% 1fr; - padding-left: 45%; + /* align-items: flex-end; */ + /* place-items: center; */ +} + +.nav-link div { + text-align: center; +} + +.nav-link:hover { + width: 170px; + height: 50px; + padding-left: 5px; + background-color: #38444d; + border: #38444d; + border-radius: 9px; + cursor: pointer; } .nav-link p { color: white; font-size: 22px; font-weight: bolder; - /* padding-right: 5%; */ + /* padding: 5px; */ } .post-button button { - width: 260px; + width: 200px; height: 50px; + margin-left: 40%; + color: white; + font-size: 22px; + font-weight: bolder; background-color: #1a8cd8; border: 3px solid #1a8cd8; border-radius: 50px; } -.header .spacer { - height: 100%; +.post-button button:hover { + background-color: #135e90; + cursor: pointer; +} + +.spacer { + height: 10%; +} + +.spacer:hover { + background-color: #15202b; + cursor: default; } + .user { display: grid; - height: 50%; + height: 100%; + width: 70%; grid-template: - 'pic username dots' - 'pic username dots' / - 20% 1fr 20% + 'pic username dots' 0.5fr + 'pic username dots' 0.5fr / + 25% 1fr 25% ; - margin-left: 35%; - margin-top: 15%; - padding-left: 5%; - margin-right: 20px; - border-radius: 50px; + margin-left: 30%; + margin-right: 25px; + /* margin-top: ; */ + } -.user .profile-pic { + +.user .profile-pic img { grid-area: pic; - width: 80%; + width: 70%; border-radius: 100%; background-color: pink; + margin-top: 55%; + margin-left: 15%; + display: grid; + place-items: center; } - .user-name { +.user-name { grid-area: username; display: grid; grid-template-rows: 1fr 1fr; @@ -91,6 +132,12 @@ padding-top: 30%; } +.user:hover { + background-color: #38444d; + border: #38444d; + border-radius: 9px; + cursor: pointer; +} /* =========================== Center - Right =========================== */ @@ -120,19 +167,69 @@ } .top-bar { - /* height: 7%; */ display: grid; - grid-template-columns: 1fr 1fr 15%; + grid-template: + 'left center right' / + 1fr 1fr 15% + ; place-items: center; border-bottom: 1px solid #38444d; } -.top-bar p { + +.for-you { + grid-area: left; + width: 100%; + height: 100%; + padding-top: 5%; + color: white; + font-size: 20px; + /* border-right: ; */ + font-weight: bolder; + text-align: center; +} + +.following { + grid-area: center; + width: 100%; + height: 100%; + padding-top: 5%; color: white; font-size: 20px; + /* border-right: ; */ font-weight: bolder; + text-align: center; +} + +.settings { + grid-area: right; + width: 100%; + height: 100%; + /* padding-top: 15%; */ + text-align: center; + } +.settings svg { + margin-top: 7%; +} + + +.for-you:hover, +.following:hover { + background-color: #2c3640; + cursor: pointer; +} + +.settings svg:hover { + /* top: 6px; */ + padding: 5px; + background-color: #2b3640; + border-radius: 100%; + cursor: pointer; +} + + /* =========================== Compose-new-post =========================== */ @@ -163,8 +260,10 @@ .write input { height: 100%; - width: 100%; + width: 99%; padding-top: 1.5%; + margin-top: 5px; + margin-bottom: 5px; background-color: #15202b; border: 0; color: #8b98a5; @@ -175,6 +274,7 @@ grid-area: media; display: grid; grid-template-columns: 1fr 20%; + grid-template-rows: auto; } .media-icons { @@ -183,13 +283,21 @@ } .media-icons svg { - padding-right: 5%; + margin-right: 5%; + border-radius: 100%; +} + +.media-icons svg:hover { + padding: 5px; + background-color: #2b3640; + border-radius: 100%; + cursor: pointer; } .send button { width: 55%; height: 55%; - margin-top: 10%; + margin-top: 15%; margin-left: 10%; color: white; font-size: 16px; @@ -207,6 +315,10 @@ border-bottom: 1px solid #38444d; } +.more-tweets:hover { + background-color: #1c2732; +} + .more-tweets p { margin-top: 3%; color: #1a8cd8; @@ -214,11 +326,16 @@ text-align: center; } +.more-tweets p:hover { + cursor: pointer; +} + .feed-items-container { height: 100vh; display: grid; grid-template-rows: 250px; - grid-auto-flow: row; + /* grid-auto-flow: row; */ + grid-auto-rows: minmax(250px, 1fr); border-bottom: 1px solid #38444d; } @@ -258,10 +375,8 @@ color: white; } -.actions { - fill: #8b98a5; - text-align: center; - padding-top: 10%; +.actions svg { + fill: white; } .text { @@ -276,8 +391,17 @@ margin-top: 10px; } -.reactions { +.reactions svg { fill: #8b98a5; + margin-top: 10px; + margin-left: 10px; +} + +.reactions svg:hover { + padding: 5px; + background-color: #1c3345; + border-radius: 100%; + cursor: pointer; } .bottom-left { @@ -302,15 +426,17 @@ .news { grid-area: news; display: grid; - grid-template-rows: 6% 30% 1fr; + grid-template-rows: 6% 40% 1fr; gap: 15px; place-items: center; + margin: 15px; } .search { - height: 60%; + height: 80%; width: 100%; padding-left: 10%; + margin-bottom: 5%; } .search input { @@ -325,19 +451,22 @@ border-radius: 50px; } +.post:hover { + background-color: #1c2732; + cursor: pointer; +} + +/* =========================== Suggestions =========================== */ + .suggest { width: 90%; height: 100%; - margin: 15px; - background-color: #252e38; - border: 1px solid black; + background-color: #1e2732; border-radius: 15px; display: grid; - grid-auto-rows: 1fr; -} - -.suggest div { - border-top: 1px solid black; + /* grid-template-rows: 1fr 1fr 1fr 1fr; */ + grid-auto-rows: minmax(100px, 1fr); + /* grid-auto-flow: row; */ } .suggest p { @@ -349,20 +478,73 @@ padding-bottom: 15px; } +.people { + display: grid; + grid-template: + 'pic name button' 0.4fr / 30% 1fr 30% + ; +} + + +.prof-pic { + grid-area: pic; +} + +.prof-pic img { + width: 60px; + margin: 15%; + border-radius: 100%; +} + + + +.name p { + color: white; + font-size: 18px; + font-weight: bold; + height: 100%; + line-height: 2em; + /* padding-left: 15px; */ + /* padding-top: 15px; */ + /* padding-bottom: 15px; */ +} + + + +.follow { + display: grid; + place-items: center; +} + +.follow button { + width: 80%; + height: 50%; + border-radius: 30px; + font-weight: bolder; + font-size: larger; +} + +.people:hover { + background-color: #252e38; + cursor: pointer; +} + + +/* =========================== Trends =========================== */ + + .trends { width: 90%; height: 100%; margin: 15px; - background-color: #252e38; + background-color: #1e2732; border: 1px solid black; border-radius: 15px; display: grid; grid-auto-rows: 1fr; } -.trends div { - border-top: 1px solid black; -} + .trends p { color: white; @@ -381,12 +563,27 @@ grid-template-columns: 1fr; } + .write input { + width: 20%; + margin-left: 20px; + } + .news, .nav-link p, .user-name, - .acc-options { + .acc-options, + .name p { display: none; } + + .post-button button, + .profile-pic, + .follow button, + .send button { + font-size: 8px; + width: 40px; + border-radius: 100%; + } } @media screen and (min-width: 481px) and (max-width: 1020px) { @@ -403,19 +600,25 @@ padding-left: 20px; } - .news, + .write input { + width: 50%; + margin-left: 40px; + } + .nav-link p, .user-name, - .acc-options { + .acc-options, + .name p { display: none; } .post-button button, - .profile-pic { + .profile-pic, + .follow button, + .send button { + font-size: 10px; width: 40px; border-radius: 100%; } -} - - +} \ No newline at end of file diff --git a/svgFiles/more.svg b/svgFiles/more.svg index f5183a55..914b5f53 100644 --- a/svgFiles/more.svg +++ b/svgFiles/more.svg @@ -1,7 +1,7 @@ -
- - +

More

@@ -279,7 +278,6 @@
Username @userhandle
-
+

Home

+
+
+
+ +
+
+
Username @userhandle
+
+ +
+
+
+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam voluptates debitis eum + fugit pariatur impedit, fuga reiciendis ducimus! Doloremque quae vitae atque repellendus + nulla debitis veritatis! Hic voluptate quas minima!

Lorem ipsum dolor sit + amet, consectetur adipisicing elit. Corporis blanditiis nesciunt vel doloremque dolore + consectetur, quo quia! Ipsum corporis vitae corrupti rem dolorem architecto fugiat porro + consequatur maxime! Aperiam, iste!

+
+
+ +
+
+ + +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
@@ -460,95 +552,185 @@
-
-
- +
+ +
+
+ +
+
+

Who to follow

+
+
+ +
+
+

A bloke in the pub
@blokeinpub

+ +
+ +
+
+
+ +
+
+

A bloke in the pub
@blokeinpub

+ +
+ +
+
+
+ +
+
+

A bloke in the pub
@blokeinpub

+ +
+ +
+
+
+ +
+
+

A bloke in the pub
@blokeinpub

+ +
+ +
+ + + +
+
+

Trends

+ + + +
+
+
+

1-cgbn

-
-

A bloke in the pub
@blokeinpub

- +
+

#vbcxvb

- -
-
- +
+ +
+
+
+
+
+

1-cgbn

-
-

A bloke in the pub
@blokeinpub

- +
+

#vbcxvb

- -
-
- +
+ +
+
+
+
+
+

1-cgbn

-
-

A bloke in the pub
@blokeinpub

- +
+

#vbcxvb

- -
-
- -
-
-

A bloke in the pub
@blokeinpub

- +
+ +
+
+
+
+
+

1-cgbn

- - -
-
- +
+

56 posts

-
-
-
-
- -
-
- +
+
- -
-
-

Trends

- -
-
-
-
-
-
-
-
+
+ +
diff --git a/style.css b/style.css index 22cd4723..567f0ba1 100644 --- a/style.css +++ b/style.css @@ -2,14 +2,18 @@ margin: 0; } +body { + background-color: #15202b; +} .container { height: 100vh; display: grid; grid-template: - 'header main' / - 25% 1fr + 'header main news' / + 25% 1fr 30% ; + background-color: #15202b; } /* =========================== Left-Side =========================== */ @@ -21,36 +25,27 @@ background-color: #15202b; display: grid; position: fixed; - grid-template-rows: repeat(15, 1fr); - /* grid-template-columns: auto; */ + grid-template-rows: repeat(auto, 1fr); gap: 5px; + margin-left: 3%; } .icons { fill: white; } -.icons img { - color: white; -} - .nav-link { - /* width: 40%; */ margin-top: 10px; - margin-left: 40%; + margin-left: 25%; display: grid; grid-template-columns: 20% 1fr; align-content: center; justify-content: center; - } .nav-link:hover { - /* width: 170px; */ - /* height: 50px; */ - /* padding-left: 5px; */ background-color: #38444d; border: #38444d; border-radius: 9px; @@ -61,13 +56,12 @@ color: white; font-size: 22px; font-weight: bolder; - /* padding: 5px; */ } .post-button button { width: 200px; height: 50px; - margin-left: 40%; + margin-left: 24%; color: white; font-size: 22px; font-weight: bolder; @@ -78,6 +72,7 @@ .post-button button:hover { background-color: #135e90; + border: 0; cursor: pointer; } @@ -91,31 +86,31 @@ } + + .user { display: grid; - height: 100%; - width: 70%; grid-template: - 'pic username dots' 0.5fr 'pic username dots' 0.5fr / 25% 1fr 25% ; margin-left: 30%; - margin-right: 25px; - /* margin-top: ; */ - + /* margin-right: 25px; */ + margin-bottom: 2%; + } +.prof-pic { + grid-area: pic; +} -.user .profile-pic img { +.profile-pic img { grid-area: pic; width: 70%; border-radius: 100%; background-color: pink; - margin-top: 55%; + margin-top: 15%; margin-left: 15%; - display: grid; - place-items: center; } .user-name { @@ -124,6 +119,7 @@ grid-template-rows: 1fr 1fr; place-items: center; color: white; + line-height: 0.1em; } .acc-options { @@ -134,7 +130,7 @@ .user:hover { background-color: #38444d; border: #38444d; - border-radius: 9px; + border-radius: 39px; cursor: pointer; } @@ -144,11 +140,11 @@ .main { grid-area: main; - background-color: #15202b; + height: 100vh; + /* background-color: #15202b; */ display: grid; - grid-template: - 'content news' / 1fr 40% - ; + /* grid-template-rows: auto; */ + grid-auto-rows: minmax(250px, 1fr); } @@ -156,13 +152,14 @@ /* =========================== Center =========================== */ .content { - grid-area: content; border-left: 1px solid #38444d; border-right: 1px solid #38444d; + background-color: #15202b; height: 100vh; + width: 1fr; display: grid; - grid-template-rows: 5% 15% 7% 1fr; - grid-template-columns: auto; + grid-template-rows: 7% 15% 7% 250px; + /* grid-template-rows: 7% 15% 7% auto; */ } .top-bar { @@ -178,39 +175,35 @@ .for-you { grid-area: left; + width: 100%; - height: 100%; + height: 70%; padding-top: 5%; color: white; font-size: 20px; - /* border-right: ; */ font-weight: bolder; text-align: center; + } .following { grid-area: center; width: 100%; - height: 100%; + height: 70%; padding-top: 5%; color: white; font-size: 20px; - /* border-right: ; */ font-weight: bolder; text-align: center; } .settings { grid-area: right; - width: 100%; - height: 100%; - /* padding-top: 15%; */ text-align: center; - } .settings svg { - margin-top: 7%; + padding: 7px; } @@ -221,8 +214,6 @@ } .settings svg:hover { - /* top: 6px; */ - padding: 5px; background-color: #2b3640; border-radius: 100%; cursor: pointer; @@ -233,7 +224,6 @@ /* =========================== Compose-new-post =========================== */ .new-post { - /* height: 13%; */ display: grid; grid-template: 'left compose' @@ -258,7 +248,7 @@ } .write input { - height: 100%; + height: 80%; width: 99%; padding-top: 1.5%; margin-top: 5px; @@ -284,10 +274,10 @@ .media-icons svg { margin-right: 5%; border-radius: 100%; + padding: 5px; } .media-icons svg:hover { - padding: 5px; background-color: #2b3640; border-radius: 100%; cursor: pointer; @@ -306,6 +296,12 @@ border-radius: 50px; } +.send button:hover { + cursor: pointer; + border: 0; + background-color: #135e90; +} + /* =========================== Feed =========================== */ @@ -330,20 +326,21 @@ } .feed-items-container { - height: 100vh; + display: grid; grid-template-rows: 250px; - /* grid-auto-flow: row; */ + grid-auto-rows: minmax(250px, 1fr); border-bottom: 1px solid #38444d; } .post { display: grid; + height: 1fr; padding-top: 15px; grid-template: 'left top' 15% - 'left text' 1fr + 'left text' auto 'left bottom' 25% / 10% 1fr ; @@ -351,7 +348,6 @@ } .left-side { - grid-area: left; grid-area: left; padding-top: 5%; padding-left: 25%; @@ -375,7 +371,15 @@ } .actions svg { - fill: white; + /* fill: white; */ + padding: 5px; + fill: #8794a1; +} + +.actions svg:hover { + fill: #1f76b2; + border-radius: 100%; + background-color: #24394a; } .text { @@ -394,10 +398,11 @@ fill: #8b98a5; margin-top: 10px; margin-left: 10px; + padding: 5px; } .reactions svg:hover { - padding: 5px; + background-color: #1c3345; border-radius: 100%; cursor: pointer; @@ -424,11 +429,15 @@ .news { grid-area: news; + /* overflow: hidden; */ + height: 100vh; display: grid; - grid-template-rows: 6% 40% 1fr; + /* grid-template-rows: 6% 40% 1fr; */ + grid-template-rows: auto; gap: 15px; place-items: center; - margin: 15px; + background-color: #15202b; + /* margin: 15px; */ } .search { @@ -436,6 +445,7 @@ width: 100%; padding-left: 10%; margin-bottom: 5%; + margin-top: 5%; } .search input { @@ -450,11 +460,6 @@ border-radius: 50px; } -.post:hover { - background-color: #1c2732; - cursor: pointer; -} - /* =========================== Suggestions =========================== */ .suggest { @@ -463,14 +468,13 @@ background-color: #1e2732; border-radius: 15px; display: grid; - /* grid-template-rows: 1fr 1fr 1fr 1fr; */ grid-auto-rows: minmax(100px, 1fr); - /* grid-auto-flow: row; */ } .suggest p { color: white; - font-size: 28px; + line-height: 2em; + font-size: 26px; font-weight: bolder; padding-left: 15px; padding-top: 15px; @@ -503,9 +507,6 @@ font-weight: bold; height: 100%; line-height: 2em; - /* padding-left: 15px; */ - /* padding-top: 15px; */ - /* padding-bottom: 15px; */ } @@ -534,27 +535,81 @@ .trends { width: 90%; - height: 100%; margin: 15px; background-color: #1e2732; border: 1px solid black; border-radius: 15px; display: grid; - grid-auto-rows: 1fr; + gap: 5px; + grid-auto-rows: minmax(50px, 1fr); + padding-bottom: 10px; } -.trends p { +.trends-title { color: white; - font-size: 28px; + /* height: 10px; */ + font-size: 26px; font-weight: bolder; + line-height: 2em; padding-left: 15px; padding-top: 15px; - padding-bottom: 15px; + padding-bottom: 5%; +} + +.trending { + height: 100%; + display: grid; + grid-template: + 'tag options' / 1fr 10% + ; + margin-bottom: 25px; +} + +.trend-options svg { + padding: 5px; + fill: #8794a1; +} + +.trend-options svg:hover { + fill: #1f76b2; + border-radius: 100%; + background-color: #24394a; +} + +.trend { + grid-area: tag; + display: grid; + grid-template-rows: minmax(100px 1fr); + /* padding: 10px; */ +} + +.position p, +.count p { + font-size: 14px; + color: #8b98a5; + padding-left: 5%; + padding-top: 1%; + padding-bottom: 1%; +} + +.hashtag { + font-size: 18px; + color: white; + padding-left: 5%; } +.trending:hover { + cursor: pointer; + background-color: #252e38; +} + + + + + /* =========================== Responsiveness =========================== */ @media screen and (max-width: 480px) { @@ -567,6 +622,11 @@ margin-left: 20px; } + .header { + margin-left: 1px; + } + + .left-side, .news, .nav-link p, .user-name, @@ -586,6 +646,9 @@ } @media screen and (min-width: 481px) and (max-width: 1020px) { + .container { + grid-template-columns: 0.3fr, 1fr, 0.3fr; + } .content { grid-template-columns: minmax(150px, 200px); @@ -596,7 +659,7 @@ } .nav-link { - padding-left: 20px; + margin-left: 20%; } .write input { @@ -604,6 +667,18 @@ margin-left: 40px; } + .header { + margin-left: 3px; + } + + .post { + height: 1fr; + } + + .left-side, + .top, + .bottom-left, + .bottom-right, .nav-link p, .user-name, .acc-options, @@ -620,4 +695,23 @@ border-radius: 100%; } +} + +@media screen and (min-width: 1021px) and (max-width: 1280px) { + + .container { + grid-template-columns: 0.1fr, 1fr, 0.3fr; + } + + .left-side img { + display: none; + } + + .post { + height: 1fr; + } + + .header { + margin-left: 5px; + } } \ No newline at end of file From 9863af8f243fdec35a1ddc9075ae4dcdcf60f300 Mon Sep 17 00:00:00 2001 From: Periklis Date: Thu, 14 Mar 2024 18:35:53 +0200 Subject: [PATCH 13/17] Some bugs but done --- index.html | 94 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 29 +++++++++-------- 2 files changed, 110 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 35b71c64..969c963b 100644 --- a/index.html +++ b/index.html @@ -37,6 +37,7 @@
+ + +

Explore

+
+
+
+ +
+
+
Username @userhandle
+
+ +
+
+
+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam voluptates debitis eum + fugit pariatur impedit, fuga reiciendis ducimus! Doloremque quae vitae atque repellendus + nulla debitis veritatis! Hic voluptate quas minima!

Lorem ipsum dolor sit + amet, consectetur adipisicing elit. Corporis blanditiis nesciunt vel doloremque dolore + consectetur, quo quia! Ipsum corporis vitae corrupti rem dolorem architecto fugiat porro + consequatur maxime! Aperiam, iste!

+
+
+ +
+
+ + +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
diff --git a/style.css b/style.css index 567f0ba1..b33842b0 100644 --- a/style.css +++ b/style.css @@ -25,9 +25,10 @@ body { background-color: #15202b; display: grid; position: fixed; - grid-template-rows: repeat(auto, 1fr); + grid-template-rows: 5% repeat(auto, 1fr); gap: 5px; margin-left: 3%; + /* padding-right: 1.5%; */ } .icons { @@ -36,8 +37,9 @@ body { .nav-link { + width: 50%; margin-top: 10px; - margin-left: 25%; + margin-left: 35%; display: grid; grid-template-columns: 20% 1fr; align-content: center; @@ -48,7 +50,7 @@ body { .nav-link:hover { background-color: #38444d; border: #38444d; - border-radius: 9px; + border-radius: 15px; cursor: pointer; } @@ -61,7 +63,8 @@ body { .post-button button { width: 200px; height: 50px; - margin-left: 24%; + margin-left: 35%; + margin-top: 5px; color: white; font-size: 22px; font-weight: bolder; @@ -97,6 +100,7 @@ body { margin-left: 30%; /* margin-right: 25px; */ margin-bottom: 2%; + align-content: center; } @@ -135,17 +139,14 @@ body { } -/* =========================== Center - Right =========================== */ +/* =========================== Center =========================== */ .main { grid-area: main; height: 100vh; - /* background-color: #15202b; */ display: grid; - /* grid-template-rows: auto; */ grid-auto-rows: minmax(250px, 1fr); - } @@ -156,10 +157,9 @@ body { border-right: 1px solid #38444d; background-color: #15202b; height: 100vh; - width: 1fr; + /* width: 1fr; */ display: grid; grid-template-rows: 7% 15% 7% 250px; - /* grid-template-rows: 7% 15% 7% auto; */ } .top-bar { @@ -328,15 +328,15 @@ body { .feed-items-container { display: grid; - grid-template-rows: 250px; + /* grid-template-rows: 250px; */ grid-auto-rows: minmax(250px, 1fr); - border-bottom: 1px solid #38444d; + /* border-bottom: 1px solid #38444d; */ } .post { display: grid; - height: 1fr; + /* height: 1fr; */ padding-top: 15px; grid-template: 'left top' 15% @@ -345,6 +345,8 @@ body { 10% 1fr ; border-bottom: 1px solid #38444d; + border-left: 1px solid #38444d; + border-right: 1px solid #38444d; } .left-side { @@ -385,6 +387,7 @@ body { .text { grid-area: text; color: white; + margin-right: 15px; } .post-bottom { From 51deb6bf84721b3ffebc8d60387d7e73a1b1c414 Mon Sep 17 00:00:00 2001 From: Periklis Date: Fri, 15 Mar 2024 18:55:02 +0200 Subject: [PATCH 14/17] Better responsiveness and scrolling remaining --- index.html | 542 ++++++++++++++++++++++++++++++++++++++++++++++++++++- style.css | 27 ++- 2 files changed, 559 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 969c963b..7ad4c6fc 100644 --- a/index.html +++ b/index.html @@ -33,7 +33,7 @@ -

Home

+ Home

@@ -638,6 +638,546 @@
+
+
+ +
+
+
Username @userhandle
+
+ +
+
+
+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam voluptates debitis eum + fugit pariatur impedit, fuga reiciendis ducimus! Doloremque quae vitae atque repellendus + nulla debitis veritatis! Hic voluptate quas minima!

Lorem ipsum dolor sit + amet, consectetur adipisicing elit. Corporis blanditiis nesciunt vel doloremque dolore + consectetur, quo quia! Ipsum corporis vitae corrupti rem dolorem architecto fugiat porro + consequatur maxime! Aperiam, iste!

+
+
+ +
+
+ + +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
+
+
+ +
+
+
Username @userhandle
+
+ +
+
+
+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam voluptates debitis eum + fugit pariatur impedit, fuga reiciendis ducimus! Doloremque quae vitae atque repellendus + nulla debitis veritatis! Hic voluptate quas minima!

Lorem ipsum dolor sit + amet, consectetur adipisicing elit. Corporis blanditiis nesciunt vel doloremque dolore + consectetur, quo quia! Ipsum corporis vitae corrupti rem dolorem architecto fugiat porro + consequatur maxime! Aperiam, iste!

+
+
+ +
+
+ + +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
+
+
+ +
+
+
Username @userhandle
+
+ +
+
+
+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam voluptates debitis eum + fugit pariatur impedit, fuga reiciendis ducimus! Doloremque quae vitae atque repellendus + nulla debitis veritatis! Hic voluptate quas minima!

Lorem ipsum dolor sit + amet, consectetur adipisicing elit. Corporis blanditiis nesciunt vel doloremque dolore + consectetur, quo quia! Ipsum corporis vitae corrupti rem dolorem architecto fugiat porro + consequatur maxime! Aperiam, iste!

+
+
+ +
+
+ + +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
+
+
+ +
+
+
Username @userhandle
+
+ +
+
+
+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam voluptates debitis eum + fugit pariatur impedit, fuga reiciendis ducimus! Doloremque quae vitae atque repellendus + nulla debitis veritatis! Hic voluptate quas minima!

Lorem ipsum dolor sit + amet, consectetur adipisicing elit. Corporis blanditiis nesciunt vel doloremque dolore + consectetur, quo quia! Ipsum corporis vitae corrupti rem dolorem architecto fugiat porro + consequatur maxime! Aperiam, iste!

+
+
+ +
+
+ + +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
+
+
+ +
+
+
Username @userhandle
+
+ +
+
+
+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam voluptates debitis eum + fugit pariatur impedit, fuga reiciendis ducimus! Doloremque quae vitae atque repellendus + nulla debitis veritatis! Hic voluptate quas minima!

Lorem ipsum dolor sit + amet, consectetur adipisicing elit. Corporis blanditiis nesciunt vel doloremque dolore + consectetur, quo quia! Ipsum corporis vitae corrupti rem dolorem architecto fugiat porro + consequatur maxime! Aperiam, iste!

+
+
+ +
+
+ + +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
+
+
+ +
+
+
Username @userhandle
+
+ +
+
+
+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam voluptates debitis eum + fugit pariatur impedit, fuga reiciendis ducimus! Doloremque quae vitae atque repellendus + nulla debitis veritatis! Hic voluptate quas minima!

Lorem ipsum dolor sit + amet, consectetur adipisicing elit. Corporis blanditiis nesciunt vel doloremque dolore + consectetur, quo quia! Ipsum corporis vitae corrupti rem dolorem architecto fugiat porro + consequatur maxime! Aperiam, iste!

+
+
+ +
+
+ + +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
diff --git a/style.css b/style.css index b33842b0..e6ffa8e3 100644 --- a/style.css +++ b/style.css @@ -2,12 +2,8 @@ margin: 0; } -body { - background-color: #15202b; -} - .container { - height: 100vh; + /* height: 100vh; */ display: grid; grid-template: 'header main news' / @@ -144,11 +140,14 @@ body { .main { grid-area: main; - height: 100vh; + /* height: 100vh; */ display: grid; grid-auto-rows: minmax(250px, 1fr); + overflow-y: scroll; +} +.main::-webkit-scrollbar { + display: none; } - /* =========================== Center =========================== */ @@ -156,7 +155,7 @@ body { border-left: 1px solid #38444d; border-right: 1px solid #38444d; background-color: #15202b; - height: 100vh; + /* height: 100vh; */ /* width: 1fr; */ display: grid; grid-template-rows: 7% 15% 7% 250px; @@ -170,6 +169,7 @@ body { ; place-items: center; border-bottom: 1px solid #38444d; + /* position: sticky; */ } @@ -183,7 +183,7 @@ body { font-size: 20px; font-weight: bolder; text-align: center; - + /* position: sticky; */ } .following { @@ -231,6 +231,7 @@ body { 10% 1fr ; border-bottom: 1px solid #38444d; + } .p-pic { @@ -332,6 +333,7 @@ body { grid-auto-rows: minmax(250px, 1fr); /* border-bottom: 1px solid #38444d; */ + /* overflow-y: scroll; */ } .post { @@ -433,16 +435,23 @@ body { .news { grid-area: news; /* overflow: hidden; */ + height: 100%; height: 100vh; + /* position: fixed; */ display: grid; /* grid-template-rows: 6% 40% 1fr; */ grid-template-rows: auto; gap: 15px; place-items: center; background-color: #15202b; + overflow-y: scroll; /* margin: 15px; */ } +.news::-webkit-scrollbar { + display: none; +} + .search { height: 80%; width: 100%; From a290501f47304cecaebd7d7a7137cada9db89438 Mon Sep 17 00:00:00 2001 From: Periklis Date: Fri, 15 Mar 2024 19:54:19 +0200 Subject: [PATCH 15/17] Better responsiveness and scrolling remaining --- index.html | 2 +- style.css | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 7ad4c6fc..2e6c6db1 100644 --- a/index.html +++ b/index.html @@ -33,7 +33,7 @@ - Home

+

Home

diff --git a/style.css b/style.css index e6ffa8e3..ea26460e 100644 --- a/style.css +++ b/style.css @@ -169,13 +169,12 @@ ; place-items: center; border-bottom: 1px solid #38444d; - /* position: sticky; */ + position: static; } .for-you { grid-area: left; - width: 100%; height: 70%; padding-top: 5%; @@ -183,7 +182,7 @@ font-size: 20px; font-weight: bolder; text-align: center; - /* position: sticky; */ + position: static; } .following { @@ -195,6 +194,7 @@ font-size: 20px; font-weight: bolder; text-align: center; + position: static; } .settings { From d6520a866678079228b2660a28375e16aed4ed4e Mon Sep 17 00:00:00 2001 From: Periklis Date: Sat, 16 Mar 2024 12:01:54 +0200 Subject: [PATCH 16/17] Hide scrollbars (chrome-firefox) --- style.css | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/style.css b/style.css index ea26460e..33feabb8 100644 --- a/style.css +++ b/style.css @@ -144,11 +144,10 @@ display: grid; grid-auto-rows: minmax(250px, 1fr); overflow-y: scroll; -} -.main::-webkit-scrollbar { - display: none; + scrollbar-width: none; } + /* =========================== Center =========================== */ .content { @@ -159,6 +158,7 @@ /* width: 1fr; */ display: grid; grid-template-rows: 7% 15% 7% 250px; + } .top-bar { @@ -335,6 +335,9 @@ /* border-bottom: 1px solid #38444d; */ /* overflow-y: scroll; */ } +.main::-webkit-scrollbar { + display: none; +} .post { display: grid; @@ -426,7 +429,9 @@ } - +.main::-webkit-scrollbar { + display: none; +} From 947664ddee168bc7e940cd72930d875df793a6c3 Mon Sep 17 00:00:00 2001 From: Periklis Date: Sat, 16 Mar 2024 13:11:39 +0200 Subject: [PATCH 17/17] responsiveness needs more work --- style.css | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/style.css b/style.css index 33feabb8..2379e178 100644 --- a/style.css +++ b/style.css @@ -169,7 +169,6 @@ ; place-items: center; border-bottom: 1px solid #38444d; - position: static; } @@ -182,7 +181,6 @@ font-size: 20px; font-weight: bolder; text-align: center; - position: static; } .following { @@ -194,7 +192,6 @@ font-size: 20px; font-weight: bolder; text-align: center; - position: static; } .settings { @@ -231,7 +228,6 @@ 10% 1fr ; border-bottom: 1px solid #38444d; - } .p-pic { @@ -332,9 +328,8 @@ /* grid-template-rows: 250px; */ grid-auto-rows: minmax(250px, 1fr); - /* border-bottom: 1px solid #38444d; */ - /* overflow-y: scroll; */ } + .main::-webkit-scrollbar { display: none; } @@ -631,6 +626,7 @@ @media screen and (max-width: 480px) { .container { + height: 100%; grid-template-columns: 1fr; } @@ -640,14 +636,15 @@ } .header { - margin-left: 1px; + margin-left: 3px; } .left-side, - .news, + /* .news, */ .nav-link p, .user-name, .acc-options, + .poster, .name p { display: none; } @@ -662,13 +659,13 @@ } } -@media screen and (min-width: 481px) and (max-width: 1020px) { +@media screen and (min-width: 480px) and (max-width: 1020px) { .container { grid-template-columns: 0.3fr, 1fr, 0.3fr; } .content { - grid-template-columns: minmax(150px, 200px); + grid-template-columns: minmax(150px, 450px); } .header {