You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
320 lines
7.1 KiB
320 lines
7.1 KiB
<script>
|
|
import { link } from 'svelte-spa-router';
|
|
import Icon from '../components/Icon.svelte';
|
|
import { onMount } from 'svelte';
|
|
let tweets = [1,2,3,4,5];
|
|
import CodeView from '../components/CodeView.svelte';
|
|
</script>
|
|
|
|
<style>
|
|
content {
|
|
border: 1px solid #ddd;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex: flex-grow;
|
|
flex-basis: 100%;
|
|
grid-column: 1/3;
|
|
padding: 0rem;
|
|
}
|
|
|
|
left {
|
|
display: flex;
|
|
flex-basis: 200px;
|
|
flex-direction: column;
|
|
border-right: 1px solid var(--color-bg-secondary);
|
|
padding: 1em;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
middle {
|
|
display: flex;
|
|
flex: 2;
|
|
flex-direction: column;
|
|
}
|
|
|
|
right {
|
|
display: flex;
|
|
flex-basis: 300px;
|
|
flex-direction: column;
|
|
border-left: 1px solid var(--color-bg-secondary);
|
|
}
|
|
|
|
header {
|
|
width: 100%;
|
|
text-align: unset;
|
|
}
|
|
|
|
header nav {
|
|
justify-content: left;
|
|
}
|
|
|
|
header nav h4 {
|
|
}
|
|
|
|
header nav back {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
header nav name h4 {
|
|
margin: unset;
|
|
padding: unset;
|
|
}
|
|
|
|
header nav name span {
|
|
font-size: 0.8em;
|
|
font-weight: normal;
|
|
}
|
|
|
|
middle images {
|
|
display: grid;
|
|
grid-template-columns: 1fr min-content;
|
|
}
|
|
|
|
middle images figure#background {
|
|
z-index: -1;
|
|
grid-column: 1/2;
|
|
grid-row: 1/ span 2;
|
|
}
|
|
|
|
figure#background img {
|
|
height: 200px;
|
|
min-width: 500px;
|
|
}
|
|
|
|
middle images figure#avatar {
|
|
z-index: 5;
|
|
grid-column: 1/1;
|
|
grid-row: 2/2;
|
|
}
|
|
|
|
middle images figure#avatar img {
|
|
z-index: 5;
|
|
position: relative;
|
|
top: 90px;
|
|
left: 10px;
|
|
width: 128px;
|
|
}
|
|
|
|
figure#avatar img {
|
|
border-radius: 50%;
|
|
border: 5px white solid;
|
|
}
|
|
|
|
button#follow {
|
|
padding: 0.8rem;
|
|
border-radius: 30px;
|
|
border: 1px var(--color) solid;
|
|
background: var(--color-bg);
|
|
color: var(--color);
|
|
position: relative;
|
|
top: 60px;
|
|
left: 220px;
|
|
}
|
|
|
|
button#signup {
|
|
border-radius: 30px;
|
|
padding: 0.5rem;
|
|
width: 100%;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
aside#newperson p {
|
|
font-size: 0.8em;
|
|
color: var(--color-inactive);
|
|
}
|
|
|
|
recent-media {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-gap: 1px;
|
|
}
|
|
|
|
profile {
|
|
margin-top: 6rem;
|
|
margin-left: 1rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
tweet {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
tweet post {
|
|
padding-left: 1em;
|
|
flex-grow: 2;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
tweet figure#avatar img {
|
|
min-width: 64px;
|
|
height: 64px;
|
|
}
|
|
|
|
tweet post h4 {
|
|
margin: unset;
|
|
}
|
|
|
|
tweet post p {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
tweet post actions {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
hr {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
aside#trending {
|
|
background-color: var(--color-bg-secondary);
|
|
padding: 0px;
|
|
}
|
|
|
|
aside#trending h3 {
|
|
margin-left: 1em;
|
|
}
|
|
|
|
aside#trending a {
|
|
margin-left: 1em;
|
|
color: var(--color);
|
|
}
|
|
|
|
aside#trending li {
|
|
border-top: 1px var(--color-bg) solid;
|
|
list-style-type: none;
|
|
list-style-position: outside;
|
|
padding: 0.3rem;
|
|
}
|
|
|
|
aside#trending ul {
|
|
padding-left: 0px;
|
|
}
|
|
</style>
|
|
|
|
|
|
<content>
|
|
<left>
|
|
<Icon name="twitter" color="var(--color)" />
|
|
<h4># Explore</h4>
|
|
<h4><Icon name="settings" color="var(--color-text)" /> Settings</h4>
|
|
</left>
|
|
|
|
<middle>
|
|
<header>
|
|
<nav>
|
|
<back><Icon name="arrow-left" /></back>
|
|
<name>
|
|
<h4>Zed A. Shaw, Writer</h4>
|
|
<span>7,754 Tweets</span>
|
|
</name>
|
|
</nav>
|
|
</header>
|
|
|
|
<images>
|
|
<figure id="background">
|
|
<img src="/header_pic.jpg">
|
|
</figure>
|
|
|
|
<figure id="avatar">
|
|
<img src="/profile_pic.jpg">
|
|
<button id="follow">Follow</button>
|
|
</figure>
|
|
</images>
|
|
|
|
<profile>
|
|
<h3>Zed A. Shaw, Writer</h3>
|
|
<p>@lzsthw</p>
|
|
<p>The author of The Hard Way Series published by Addison/Wesley including Learn Python The Hard Way and many more. Follow me here for coding tips and book news.</p>
|
|
<p><Icon name="map" size="24" color="var(--color-bg-secondary)" /> Some Place, KY <Icon name="link" size="24" color="var(--color-bg-secondary)" /> <a>learnjsthehardway.org</a> <Icon name="calendar" size="24" color="var(--color-bg-secondary)" /> Joined Jan, 1999. </p>
|
|
<p><b>167</b> Following <b>10.4k</b> Followers</p>
|
|
</profile>
|
|
|
|
<hr>
|
|
|
|
<tweets>
|
|
{#each tweets as tweet}
|
|
<tweet>
|
|
<figure id="avatar">
|
|
<img alt="Stock photo" src="/profile_pic.jpg">
|
|
</figure>
|
|
<post>
|
|
<h4>Zed A. Shaw, Writer</h4>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam: <br>
|
|
|
|
<a>quis nostrud exercitation</a> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<actions>
|
|
<Icon size="16" name="message-circle" color="var(--color-inactive)" /> 2
|
|
<Icon size="16" name="repeat" color="var(--color-inactive)" /> 1
|
|
<Icon size="16" name="heart" color="var(--color-inactive)" /> 12
|
|
<Icon size="16" name="upload" color="var(--color-inactive)" />
|
|
</actions>
|
|
</post>
|
|
<Icon name="more-horizontal" />
|
|
</tweet>
|
|
{/each}
|
|
</tweets>
|
|
</middle>
|
|
|
|
<right>
|
|
<input placeholder="Search Twitter" />
|
|
|
|
<section>
|
|
<aside id="newperson">
|
|
<h3>New to Twitter?</h3>
|
|
<p>Sign up now to get your own personalized hate stream!</p>
|
|
<button id="signup">Sign Up</button>
|
|
</aside>
|
|
|
|
<aside>
|
|
<recent-media>
|
|
<figure>
|
|
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
|
|
</figure>
|
|
<figure>
|
|
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
|
|
</figure>
|
|
<figure>
|
|
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
|
|
</figure>
|
|
<figure>
|
|
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
|
|
</figure>
|
|
<figure>
|
|
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
|
|
</figure>
|
|
<figure>
|
|
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
|
|
</figure>
|
|
</recent-media>
|
|
</aside>
|
|
|
|
<aside id="trending">
|
|
<h3>You Might Like</h3>
|
|
<ul>
|
|
<li>Card Person</li>
|
|
<li>Card Person</li>
|
|
<li>Card Person</li>
|
|
</ul>
|
|
<a>Show More</a>
|
|
</aside>
|
|
|
|
<aside id="trending">
|
|
<h3>What's Happening</h3>
|
|
<ul>
|
|
<li>News news news.</li>
|
|
<li>News news news.</li>
|
|
<li>News news news.</li>
|
|
<li>News news news.</li>
|
|
<li>News news news.</li>
|
|
</ul>
|
|
</aside>
|
|
</section>
|
|
</right>
|
|
</content>
|
|
|
|
<CodeView source="/code/Twitter.svelte" />
|
|
|