diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..0b87d0f5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.DS_Store +.zed diff --git a/assets/bell.svg b/assets/bell.svg new file mode 100644 index 00000000..dbb7ebb2 --- /dev/null +++ b/assets/bell.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/bookmark.svg b/assets/bookmark.svg new file mode 100644 index 00000000..870eb9c5 --- /dev/null +++ b/assets/bookmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/home.svg b/assets/home.svg new file mode 100644 index 00000000..db7c3c9a --- /dev/null +++ b/assets/home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/inbox.svg b/assets/inbox.svg new file mode 100644 index 00000000..da8c93a3 --- /dev/null +++ b/assets/inbox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/itzi_happy.jpeg b/assets/itzi_happy.jpeg new file mode 100644 index 00000000..eceb7191 Binary files /dev/null and b/assets/itzi_happy.jpeg differ diff --git a/assets/lists.svg b/assets/lists.svg new file mode 100644 index 00000000..253a1841 --- /dev/null +++ b/assets/lists.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/more.svg b/assets/more.svg new file mode 100644 index 00000000..49d8a637 --- /dev/null +++ b/assets/more.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/ponyo_biting.jpeg b/assets/ponyo_biting.jpeg new file mode 100644 index 00000000..a5f043ac Binary files /dev/null and b/assets/ponyo_biting.jpeg differ diff --git a/assets/ponyo_sad.jpeg b/assets/ponyo_sad.jpeg new file mode 100644 index 00000000..0f9b1bb2 Binary files /dev/null and b/assets/ponyo_sad.jpeg differ diff --git a/assets/profile.svg b/assets/profile.svg new file mode 100644 index 00000000..c9328079 --- /dev/null +++ b/assets/profile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/search.svg b/assets/search.svg new file mode 100644 index 00000000..1cd97a38 --- /dev/null +++ b/assets/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/twitter_logo.svg b/assets/twitter_logo.svg new file mode 100644 index 00000000..d60af2b8 --- /dev/null +++ b/assets/twitter_logo.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/fonts/Chirp-Bold.ebb56aba.woff2 b/fonts/Chirp-Bold.ebb56aba.woff2 new file mode 100644 index 00000000..ed3a03d9 Binary files /dev/null and b/fonts/Chirp-Bold.ebb56aba.woff2 differ diff --git a/fonts/Chirp-Regular.80fda27a.woff2 b/fonts/Chirp-Regular.80fda27a.woff2 new file mode 100644 index 00000000..53ada57d Binary files /dev/null and b/fonts/Chirp-Regular.80fda27a.woff2 differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..ec77b6b1 --- /dev/null +++ b/index.html @@ -0,0 +1,405 @@ + + + + + + Twitter + + +
+
+
+ + Twitter Logo + +
+
+ + + Home + + + + Explore + + + + Notifications + + + + Messages + + + + Bookmarks + + + + Lists + + + + Profile + + + + More + + + + +
+ + + + + +
+
+
+
+
+
+
+ + Twitter Logo + +
+ Home +
+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ +
+ Thomas Jensen @th0jensen · 8s +
+
+ I have the best doggo! + +
+
+
+ + + + + + 0 +
+
+ + + + + + 0 +
+ +
+ + + + + + 0 +
+ + + + + + + + + + +
+
+
+ +
+ Roy Christian @roych · 45m +
+
+ Look at this cute doggo! + +
+
+
+ + + + + + 0 +
+
+ + + + + + 0 +
+ +
+ + + + + + 0 +
+ + + + + + + + + + +
+
+
+ +
+ Alva @ranter_lowkey · 2h +
+
+ 🥺🥺🥺 + +
+
+
+ + + + + + 0 +
+
+ + + + + + 0 +
+ +
+ + + + + + 0 +
+ + + + + + + + + + +
+
+
+
+
+
+ +
+ + + + diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..35638605 --- /dev/null +++ b/styles.css @@ -0,0 +1,511 @@ +/* Load my illegal fonts from the fonts dir */ +@font-face { + font-family: Chirp; + font-weight: normal; + src: url('fonts/Chirp-Regular.80fda27a.woff2'); +} + +@font-face { + font-family: Chirp; + font-weight: bold; + src: url('fonts/Chirp-Bold.ebb56aba.woff2'); +} + +:root { + --twitter-blue: #1da1f2; + --custom-gray: rgba(15, 20, 25, 0.1); +} + +* { + margin: 0; + font-family: Chirp; + scroll-behavior: smooth; +} + +.page-wrapper { + background-color: white; + height: 100%; + display: grid; + grid-template-columns: calc(250px + 10vw) 650px 1fr; +} + +header { + grid-template-columns: 1 / span 1; + background-color: white; + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 1000; + display: grid; + font-weight: bold; + grid-template-rows: 65px 1fr; + grid-template-columns: 10vw 240px 10px; + border-right: solid var(--custom-gray) 1px; + + .logo-wrapper { + grid-column: 2 / span 1; + height: 50px; + display: grid; + justify-content: left; + align-items: center; + padding: 7.5px 20px; + + a { + img { + width: 26px; + } + } + } + + .navigation-items { + grid-column: 2 / span 1; + display: grid; + justify-content: left; + align-items: start; + grid-template-rows: repeat(8, 50px); + row-gap: 10px; + + a { + height: 35px; + display: grid; + justify-content: left; + align-items: center; + grid-auto-flow: column; + column-gap: 10px; + color: black; + text-decoration: none; + border-radius: 20px; + padding: 7.5px 20px; + + &:hover { + background-color: var(--custom-gray); + } + + &.active { + color: var(--twitter-blue); + + img { + filter: invert(52%) sepia(17%) saturate(2500%) + hue-rotate(169deg) brightness(100%) contrast(100%); + } + } + } + + button { + display: grid; + justify-content: center; + align-items: center; + height: 45px; + width: auto; + margin-top: 10px; + margin-left: 10px; + padding: 7.5px 20px; + color: white; + font-weight: bold; + background-color: var(--twitter-blue); + border: none; + border-radius: 20px; + } + + .quill-button { + height: 45px; + width: 45px; + margin-left: 10px; + display: grid; + justify-content: center; + align-items: center; + border-radius: 30px; + background-color: var(--twitter-blue); + + svg { + fill: white; + width: 24px; + height: 24px; + } + } + } +} + +main { + grid-column: 2 / span 1; + display: grid; + z-index: 500; + width: 650px; + + .content-wrapper { + display: grid; + grid-template-rows: 50px auto; + + .content-header { + position: fixed; + height: 50px; + width: 100%; + background-color: white; + display: grid; + justify-content: left; + align-items: center; + grid-auto-flow: column; + font-weight: bold; + border-bottom: solid var(--custom-gray) 1px; + + .logo-wrapper { + height: 50px; + display: grid; + justify-content: left; + align-items: center; + margin-left: 20px; + + a { + img { + width: 26px; + } + } + } + + span { + margin-left: 20px; + } + } + + .content { + margin-top: 51px; + height: 100vh; + width: 100%; + display: grid; + grid-template-rows: auto 1fr; + + .compose { + display: grid; + height: 125px; + grid-template-columns: 70px auto; + grid-template-rows: 70px 50px; + border-bottom: solid var(--custom-gray) 15px; + + #profile-picture { + margin: 10px; + width: 50px; + border-radius: 25px; + } + + #input-field { + border: none; + + &:focus { + outline: none; + } + } + + .compose-toolbar { + grid-row: 2 / -1; + grid-column: 2 / -1; + display: grid; + justify-content: center; + align-items: center; + grid-template-columns: repeat(6, 25px) 1fr auto; + column-gap: 10px; + margin-bottom: 5px; + + svg { + width: 24px; + height: 24px; + padding: 5px; + fill: var(--twitter-blue); + + &:hover { + background-color: var(--custom-gray); + border-radius: 15px; + } + } + + button { + grid-column: 8 / -1; + display: grid; + justify-content: center; + align-items: center; + height: 34px; + width: 65px; + padding: 0px 16px; + margin-right: 35px; + color: white; + font-weight: bold; + background-color: var(--twitter-blue); + border: none; + border-radius: 20px; + } + } + } + .timeline { + .tweet { + height: auto; + display: grid; + grid-template-columns: 50px auto; + grid-template-rows: 25px auto auto 50px; + border-bottom: solid var(--custom-gray) 1px; + margin-top: 10px; + column-gap: 20px; + padding: 5px 20px; + + #profile-picture { + width: 50px; + border-radius: 25px; + } + + .tweet-header { + display: grid; + grid-auto-flow: column; + column-gap: 10px; + justify-content: left; + align-items: start; + font-weight: bold; + + span { + font-weight: normal; + } + } + + .tweet-content { + grid-column: 2 / -1; + margin-top: 5px; + + img { + height: auto; + max-width: 100%; + margin: 5px; + margin-top: 15px; + border-radius: 15px; + } + } + + .tweet-reactions { + grid-row: 3 / -1; + grid-column: 2 / -1; + display: grid; + justify-content: center; + align-items: center; + grid-template-columns: repeat(4, 60px) 1fr auto auto; + column-gap: 10px; + + > *:nth-child(5) { + grid-column: 6 / span 1; + } + + svg { + width: 24px; + height: 24px; + fill: black; + padding: 5px; + + &:hover { + background-color: var(--custom-gray); + border-radius: 15px; + } + } + + .replies, + .retweets, + .likes, + .interactions { + display: grid; + grid-auto-flow: column; + column-gap: 10px; + justify-content: center; + align-items: center; + } + } + } + } + } + } +} + +footer { + grid-column: 3 / -1; + top: 0; + left: calc(900px + 10vw); + height: 100%; + width: 100%; + z-index: 1000; + position: fixed; + background: white; + display: grid; + grid-template-rows: 1fr 5vw; + border-left: solid var(--custom-gray) 1px; + + .sidebar { + height: 100%; + width: calc(250px + 5vw); + display: grid; + grid-template-rows: 50px auto; + grid-template-columns: auto 5vw; + + .search-wrapper { + grid-row: 1 / span 1; + display: grid; + grid-auto-flow: column; + justify-content: center; + align-items: center; + background-color: var(--custom-gray); + border-radius: 15px; + margin: 7.5px 20px; + + svg { + width: 24px; + height: 24px; + fill: darkgray; + margin-right: 10px; + } + + #search-bar { + border: none; + background-color: rgba(0, 0, 0, 0); + + &:focus { + outline: none; + } + } + } + + .card-wrapper { + height: 0px; + grid-row: 2 / span 1; + display: grid; + + .card { + height: 275px; + display: grid; + justify-content: left; + align-items: start; + grid-template-rows: 35px 1fr 10px; + grid-template-columns: 1fr; + background-color: var(--custom-gray); + border-radius: 15px; + margin: 7.5px 20px; + + .card-header { + font-weight: bold; + padding-bottom: 5px; + margin: 10px 0px; + border-bottom: solid var(--custom-gray) 1px; + + span { + margin-left: 10px; + } + } + + .card-content { + margin: 10px; + } + } + } + } +} + +@media (max-width: 1280px) { + .page-wrapper { + grid-template-columns: calc(250px + 10vw) 1fr 1fr; + footer { + .sidebar { + display: none; + } + } + } +} + +@media (min-width: 1000px) { + header { + .navigation-items { + .quill-button { + display: none; + } + } + } +} + +@media (max-width: 1000px) { + .page-wrapper { + grid-template-columns: 66px 1fr 1fr; + + header { + width: 66px; + left: 0; + grid-template-column: auto; + + .logo-wrapper { + grid-column: 1 / -1; + } + + .navigation-items { + grid-column: 1 / -1; + + a { + span { + display: none; + } + } + + button { + display: none; + } + } + } + footer { + left: calc(650px + 66px); + } + } +} + +@media (max-width: 716px) { + .page-wrapper { + main { + width: 500px; + } + footer { + left: calc(500px + 66px); + } + } +} + +@media (min-width: 567px) { + main { + .content-wrapper { + .content-header { + .logo-wrapper { + display: none; + } + } + } + } +} + +@media (max-width: 566px) { + .page-wrapper { + grid-template-columns: 1fr; + + header { + display: none; + } + + main { + width: auto; + grid-column: 1 / -1; + } + } + + .tweet-reactions { + span { + display: none; + } + } +} + +@media (max-width: 479px) { + .tweet-reactions { + & > *:nth-child(5) { + display: none; + } + & > *:nth-child(6) { + display: none; + } + } +}