diff --git a/debug.css b/debug.css new file mode 100644 index 00000000..a39c5bdc --- /dev/null +++ b/debug.css @@ -0,0 +1,73 @@ +/* blue */ +.dbg-bg-blue { + background-color: #8da2fc; +} + +.dbg-border-blue { + border: 2px dotted #76a9fa; +} +/* gray */ +.dbg-bg-gray { + background-color: #6b7280; +} + +.dbg-border-gray { + border: 2px dotted #6b7280; +} +/* red */ +.dbg-bg-red { + background-color: #f98080; +} + +.dbg-border-red { + border: 2px dotted #f98080; +} + +/* green */ +.dbg-bg-green { + background-color: #def7ec; +} + +.dbg-border-green { + border: 2px dotted #30c48d; +} + +/* yellow */ +.dbg-bg-yellow { + background-color: #fdf6b2; +} + +.dbg-border-yellow { + border: 2px dotted #faca16; +} + +/* indigo */ +.dbg-bg-indigo { + background-color: #e4edff; +} + +.dbg-border-indigo { + border: 2px dotted #8da2fc; +} + +/* purple */ +.dbg-bg-purple { + background-color: #edebfe; +} + +.dbg-border-purple { + border: 2px dotted #ac94fa; +} + +/* pink */ +.dbg-bg-pink { + background-color: #fce8f3; +} + +.dbg-border-pink { + border: 2px dotted #f17eb8; +} + +.dbg-border-margin { + margin: 2px; +} diff --git a/images/carlo.png b/images/carlo.png new file mode 100644 index 00000000..17752259 Binary files /dev/null and b/images/carlo.png differ diff --git a/images/ezeikel.png b/images/ezeikel.png new file mode 100644 index 00000000..3cf1ecab Binary files /dev/null and b/images/ezeikel.png differ diff --git a/images/james.jpg b/images/james.jpg new file mode 100644 index 00000000..c5f39209 Binary files /dev/null and b/images/james.jpg differ diff --git a/images/twitter-logo.png b/images/twitter-logo.png new file mode 100644 index 00000000..3d43bed7 Binary files /dev/null and b/images/twitter-logo.png differ diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..bdd9f301 --- /dev/null +++ b/styles.css @@ -0,0 +1,319 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; +} + +body { + display: grid; + grid-template-columns: 1fr 1.8fr 1fr; + grid-template-rows: 70px auto; + height: 100vh; + width: 100vw; +} + +.twoot-button, +.twoot-button-main { + background-color: lightskyblue; + cursor: pointer; +} + +img { + cursor: pointer; +} + +.break, +.right .box, +.search-bar { + background-color: powderblue; +} + +.main-section { + border: 1px solid powderblue; + border-style: none solid; +} + +.header.logo { + margin-left: 90px; + display: grid; + grid-template-columns: auto; + justify-content: start; + align-content: center; +} + +.logo img { + border-radius: 50%; + height: 50px; + width: auto; +} + +.title-bar { + line-height: 70px; + border: 1px powderblue; + border-style: none solid solid solid; +} + +.title-bar p { + font-size: 35px; + margin-left: 5px; +} + +.search-bar { + margin: 8px 90px 8px 0; + padding-left: 15px; + height: 54px; + display: grid; + grid-template-columns: 30px auto; + align-content: center; + border-radius: 30px; +} + +.search-bar img { + height: 20px; + width: 20px; +} + +.search-bar input { + margin-right: 10px; + background-color: powderblue; + border: none; +} + +main { + grid-column: 2; + grid-row: 2; +} + +.aside.left { + grid-column: 1; + grid-row: 2; + margin-left: 90px; + position: relative; +} + +.right.aside > *, +.search-bar { + margin-left: 10px; +} + +.left.aside img { + height: 40px; + width: 40px; +} + +.left.aside .nav-button p, +.title-bar, +.right .box p { + font-weight: bold; +} + +.nav-button { + display: grid; + grid-template-columns: auto auto; + justify-content: start; + align-items: center; + gap: 20px; + margin-bottom: 30px; + cursor: pointer; +} + +.nav-button p { + font-size: 25px; +} + +.twoot-button { + height: 50px; + line-height: 50px; + width: 100%; + text-align: center; + border-radius: 20px; + margin-right: 30px; +} + +.twoot-button p { + line-height: 50px; +} + +.user-controls { + position: absolute; + bottom: 10px; + display: grid; + grid-template-columns: auto auto; + justify-content: start; + margin-left: 25px; + gap: 10px; +} + +.user-img { + border-radius: 50%; +} + +.aside.right { + grid-column: 3; + grid-row: 2; + margin-right: 90px; +} + +.box { + border-radius: 15px; + background-color: white; + min-height: 70px; +} + +.box p { + font-size: 35px; + margin: 12px 0 12px 5px; + border-bottom: 1px solid grey; +} + +.user-icon { + height: 60px; + width: 60px; + border-radius: 50%; + object-fit: cover; + margin: 4px; + justify-self: center; +} + +.twoot-controls { + display: grid; + grid-template-columns: 65px auto 80px; + grid-template-rows: auto auto; +} + +.twoot-input { + grid-column: 2 / -1; + grid-row: 1; + font-size: 1.5em; + height: 30px; + margin-left: 3px; + border: none; +} + +.small-buttons { + grid-column: 2; + grid-row: 2; + border: 1px powderblue; + border-style: solid none none none; +} + +.twoot-button-container { + grid-column: 3; + grid-row: 2; + border: 1px powderblue; + border-style: solid none none none; +} + +.twoot-button-main { + height: 30px; + width: auto; + text-align: center; + line-height: 30px; + border-radius: 20px; + margin: 8px 5px; +} + +.twoot-controls .svg { + height: 30px; + width: 30px; + margin: 8px 0; +} + +.break { + height: 12px; +} + +.twoot { + display: grid; + grid-template-columns: 65px auto; + grid-template-rows: 26px auto 34px; + border: 1px powderblue; + border-style: none solid solid solid; + margin: 5px 0; +} + +.twoot .twoot-topline { + grid-column: 2; + grid-row: 1; +} + +.twoot .twoot-text { + grid-column: 2; + grid-row: 2; +} + +.twoot span { + color: dodgerblue; + cursor: pointer; +} + +.twoot .inner-twoot-controls { + grid-column: 2; + grid-row: 3; + display: flex; + justify-content: space-around; + align-items: center; + padding: 8px 0; +} + +.twoot-topline p { + display: inline; +} + +.twoot .svg { + height: 20px; + width: 20px; +} + +.user-name { + font-weight: bolder; +} + +.twoot p { + margin: 1px 0 1px 3px; +} + +.twoot .user-name { + font-weight: bold; +} + +button { + border: none; + background-color: inherit; +} + +.nav-button:hover, +.nav-button:focus { + color: dodgerblue; +} + +.twoot-button:hover, +.twoot-button-main:hover { + background-color: dodgerblue; +} + +@media (max-width: 1300px) { + body { + grid-template-columns: 0.4fr 1.8fr 1fr; + } + .aside.left p { + display: none; + } + .aside.left .twoot-button p { + display: contents; + } + .aside.left .twoot-button { + max-width: 50px; + } +} + +@media (max-width: 1000px) { + .aside.right, + .search-bar { + display: none; + } + body { + grid-template-columns: 0.4fr 1.8fr; + } +} diff --git a/svg/emoji.svg b/svg/emoji.svg new file mode 100644 index 00000000..de5cb2c2 --- /dev/null +++ b/svg/emoji.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/explore.svg b/svg/explore.svg new file mode 100644 index 00000000..e49f8ef5 --- /dev/null +++ b/svg/explore.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/fav.svg b/svg/fav.svg new file mode 100644 index 00000000..54f2cd18 --- /dev/null +++ b/svg/fav.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/gif.svg b/svg/gif.svg new file mode 100644 index 00000000..5e00060e --- /dev/null +++ b/svg/gif.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/home.svg b/svg/home.svg new file mode 100644 index 00000000..55ae6c5a --- /dev/null +++ b/svg/home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/lists.svg b/svg/lists.svg new file mode 100644 index 00000000..f49a22e1 --- /dev/null +++ b/svg/lists.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/media.svg b/svg/media.svg new file mode 100644 index 00000000..581211b4 --- /dev/null +++ b/svg/media.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/messages.svg b/svg/messages.svg new file mode 100644 index 00000000..8afeae11 --- /dev/null +++ b/svg/messages.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/more.svg b/svg/more.svg new file mode 100644 index 00000000..77c04370 --- /dev/null +++ b/svg/more.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/notifications.svg b/svg/notifications.svg new file mode 100644 index 00000000..1705839f --- /dev/null +++ b/svg/notifications.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/poll.svg b/svg/poll.svg new file mode 100644 index 00000000..7a3be6d8 --- /dev/null +++ b/svg/poll.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/profile.svg b/svg/profile.svg new file mode 100644 index 00000000..1410b7a0 --- /dev/null +++ b/svg/profile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/reply.svg b/svg/reply.svg new file mode 100644 index 00000000..9ddf92eb --- /dev/null +++ b/svg/reply.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/retwoot.svg b/svg/retwoot.svg new file mode 100644 index 00000000..9e0e17ee --- /dev/null +++ b/svg/retwoot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/schedule.svg b/svg/schedule.svg new file mode 100644 index 00000000..20d23f3e --- /dev/null +++ b/svg/schedule.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/search.svg b/svg/search.svg new file mode 100644 index 00000000..cbeac8bf --- /dev/null +++ b/svg/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/view.svg b/svg/view.svg new file mode 100644 index 00000000..6dfcc483 --- /dev/null +++ b/svg/view.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/twootter.html b/twootter.html new file mode 100644 index 00000000..12c36271 --- /dev/null +++ b/twootter.html @@ -0,0 +1,137 @@ + + + + + + + + +
+

Home

+
+
+ + +
+ +
+
+ You! + +
+ + + + + +
+ +
+
+
+ You! +
+

James

+

@jdc-horizons

+

20m

+
+

+ @Ezeikel @Carlo What do you guys think + of Twooter? +

+
+ + + + +
+
+
+ Another user +
+

Ezeikel

+

@ezeikel0887

+

25m

+
+

+ @James Looks good to me! +

+
+ + + + +
+
+
+ You! +
+

Carlo

+

@dogezen

+

30m

+
+

+ @James Agreed, nice! +

+
+ + + + +
+
+
+ + +