learn-javascript-the-hard-way
/
fsckcss
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Panels, Modal, and NavBar done.

Browse Source
master
Zed A. Shaw 4 years ago
parent 70d6bc2e54
commit 70c0d85015
25 changed files with 2702 additions and 1160 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      public/build/bundle.css
  2. 2282
      public/build/bundle.js
  3. 2
      public/build/bundle.js.map
  4. 42
      public/code/Cards.html
  5. 54
      public/code/Google.html
  6. 114
      public/code/Instagram.html
  7. 35
      public/code/Modal.css
  8. 11
      public/code/Modal.html
  9. 34
      public/code/NavBar.css
  10. 30
      public/code/NavBar.html
  11. 53
      public/code/Panels.css
  12. 20
      public/code/Panels.html
  13. 80
      public/code/Pinterest.html
  14. 42
      public/code/Tiles.html
  15. 238
      public/code/Twitter.html
  16. 88
      public/code/XorAcademy.html
  17. 154
      public/code/XorAcademyWatch.html
  18. 216
      public/code/Youtube.html
  19. 32
      src/demos/Modal.svelte
  20. 76
      src/demos/NavBar.svelte
  21. 83
      src/demos/Panels.svelte
  22. 12
      src/demos/index.svelte
  23. 6
      src/routes.js
  24. 73
      src/thumbs/NavBar.svelte
  25. 81
      src/thumbs/Panels.svelte

2
public/build/bundle.css
View File

File diff suppressed because one or more lines are too long

2282
public/build/bundle.js
View File

File diff suppressed because it is too large Load Diff

2
public/build/bundle.js.map
View File

File diff suppressed because one or more lines are too long

42
public/code/Cards.html
Unescape View File

@ -1,26 +1,24 @@
<content> <card>
<card> <top>
<top> <img src={ holder(16 * 30, 9 * 30) }/>
<img src={ holder(16 * 30, 9 * 30) }/> </top>
</top>
<middle> <middle>
<h4> <h4>
Card Example Card Example
</h4> </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</middle> </middle>
<bottom> <bottom>
<button> <button>
<Icon name="check-circle" color="var(--color-bg)" size="24" /> <Icon name="check-circle" color="var(--color-bg)" size="24" />
</button> </button>
<button> <button>
<Icon name="x-circle" color="var(--color-bg)" size="24"/> <Icon name="x-circle" color="var(--color-bg)" size="24"/>
</button> </button>
</bottom> </bottom>
</card> </card>
</content>

54
public/code/Google.html
Unescape View File

@ -1,30 +1,28 @@
<content> <header>
<header> <nav>
<nav> <nav-left>
<nav-left> <a>About</a>
<a>About</a> <a>Store</a>
<a>Store</a> </nav-left>
</nav-left> <ul>
<ul> <li>Gmail</li>
<li>Gmail</li> <li>Image</li>
<li>Image</li> <li><Icon name="grid" color="#000" /></li>
<li><Icon name="grid" color="#000" /></li> <li><button>Sign In</button></li>
<li><button>Sign In</button></li> </ul>
</ul> </nav>
</nav> </header>
</header>
<figure> <figure>
<a href="/demos/google" use:link> <a href="/demos/google" use:link>
<img src="https://via.placeholder.com/500x200?text=Google+Doodle"> <img src="https://via.placeholder.com/500x200?text=Google+Doodle">
</a> </a>
</figure> </figure>
<search> <search>
<input type="text"> <input type="text">
<buttons> <buttons>
<button>Google Search</button> <button>Google Search</button>
<button>I'm Feeling Lucky</button> <button>I'm Feeling Lucky</button>
</buttons> </buttons>
</search> </search>
</content>

114
public/code/Instagram.html
Unescape View File

@ -1,61 +1,59 @@
<content> <header>
<header> <nav>
<nav> <b><Icon name="instagram" color="var(--color-text)" /> Instagram</b>
<b><Icon name="instagram" color="var(--color-text)" /> Instagram</b> <input placeholder="Search">
<input placeholder="Search"> <ul>
<ul> <li><button>Log In</button></li>
<li><button>Log In</button></li> <li><a>Sign Up</a></li>
<li><a>Sign Up</a></li> </ul>
</ul> </nav>
</nav> </header>
</header>
<profile>
<profile> <figure>
<img alt="Zed's Face" src="https://via.placeholder.com/256x256?text=Zed's Face">
</figure>
<info>
<p>
<b>zedshaw</b> <button>follow</button>
</p>
<p>
<b>280</b> posts <b>4,695 followers</b> <b>1,778 following</b>
</p>
<p><b>Zed A. Shaw</b></p>
<p>Painter in oil, watercolor, and pastel. I’m doing live streams of little paintings on Twitch:<br>
<a href="www.twitch.tv/zedashaw">www.twitch.tv/zedashaw</a>
</p>
</info>
</profile>
<pins>
{#each pins as pin}
<figure> <figure>
<img alt="Zed's Face" src="https://via.placeholder.com/256x256?text=Zed's Face"> <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Story">
</figure> </figure>
{/each}
<info> </pins>
<p>
<b>zedshaw</b> <button>follow</button> <tabs>
</p> <nav>
<ul>
<p> <li><Icon name="grid" color="var(--color-text)" /> POSTS</li>
<b>280</b> posts <b>4,695 followers</b> <b>1,778 following</b> <li><Icon name="movie" color="var(--color-text)" /> REELS</li>
</p> <li><Icon name="tv" color="var(--color-text)" /> TV</li>
<li><Icon name="user" color="var(--color-text)" /> TAGGED</li>
<p><b>Zed A. Shaw</b></p> </ul>
<p>Painter in oil, watercolor, and pastel. I’m doing live streams of little paintings on Twitch:<br> </nav>
<a href="www.twitch.tv/zedashaw">www.twitch.tv/zedashaw</a> </tabs>
</p>
</info> <posts>
</profile> {#each posts as post}
<figure>
<pins> <img alt="Stock photo" src="https://via.placeholder.com/300x300?text=Post Image">
{#each pins as pin} </figure>
<figure> {/each}
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Story"> </posts>
</figure>
{/each}
</pins>
<tabs>
<nav>
<ul>
<li><Icon name="grid" color="var(--color-text)" /> POSTS</li>
<li><Icon name="movie" color="var(--color-text)" /> REELS</li>
<li><Icon name="tv" color="var(--color-text)" /> TV</li>
<li><Icon name="user" color="var(--color-text)" /> TAGGED</li>
</ul>
</nav>
</tabs>
<posts>
{#each posts as post}
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/300x300?text=Post Image">
</figure>
{/each}
</posts>
</content>

35
public/code/Modal.css
Unescape View File

@ -0,0 +1,35 @@
content {
display: flex;
justify-content: center;
}
button {
padding: 5em;
}
modal {
display: flex;
position: fixed;
align-items: center;
justify-content: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background: rgba(244,244,244,0.75);
padding: 0px;
}
modal-content {
flex-direction: column;
background: white;
border: 1px solid var(--color-accent);
border-radius: 5px;
max-height: 300px;
min-height: 300px;
max-width: 300px;
width: 100%;
z-index: 20;
padding: 0.5em;
}

11
public/code/Modal.html
Unescape View File

@ -0,0 +1,11 @@
<button on:click={ () => visible = true }>Click Me!</button>
{#if visible}
<modal on:click={ () => visible = false }>
<modal-content>
<h1>This Is A Modal</h1>
<p>Designers love modals. Click anywhere to close this.</p>
</modal-content>
</modal>
{/if}

34
public/code/NavBar.css
Unescape View File

@ -0,0 +1,34 @@
content {
display: flex;
flex-direction: column;
}
/* mvp.css aleady has a nav so using this
name to demonstrate how to make your own. */
nav-bar {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-evenly;
/* this is just for displaying here */
padding: 1em;
border: 1px solid var(--color-accent);
margin-bottom: 1em;
}
nav-bar middle {
display: flex;
flex: 2;
justify-content: center;
padding-left: 1em;
padding-right: 1em;
}
nav-bar middle input {
width: 100%;
}
.alternate {
background-color: #ddd;
}

30
public/code/NavBar.html
Unescape View File

@ -0,0 +1,30 @@
<nav-bar>
<left>
<b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
</left>
<middle>
<input placeholder="Search">
</middle>
<right>
<button>Log In</button>
<a>Sign Up</a>
</right>
</nav-bar>
<nav-bar class="alternate">
<left>
<b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
</left>
<middle>
<!-- you just leave this empty and flexbox
will expand it for you. -->
</middle>
<right>
<button>Log In</button>
<button id="signup">Sign Up</button>
</right>
</nav-bar>

53
public/code/Panels.css
Unescape View File

@ -0,0 +1,53 @@
content {
display: flex;
flex: flex-shrink;
flex-grow: 1;
justify-content: center;
}
panel {
display: flex;
flex-direction: column;
border: 1px solid #eee;
width: min-content;
}
panel top {
width: 480px; /* sets a header for display */
padding: 0.5rem;
}
panel middle {
padding-left: 0.5rem;
padding-right: 0.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
panel middle h4 {
}
panel bottom {
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
panel bottom button {
display: flex;
margin: 0;
border-radius: unset;
width: 100%;
justify-content: space-evenly;
}
button:hover {
filter: invert(20%);
}
button#cancel {
background: unset;
color: var(--color-text);
}

20
public/code/Panels.html
Unescape View File

@ -0,0 +1,20 @@
<panel>
<top>
<h1>Panel is a Card</h1>
</top>
<middle>
<h4>
Panel Example
</h4>
<p>Not sure what the big deal is with the difference between panels and cards
but I'm doing all the things so here's a panel. Let's say, buttons on a panel
are different to demonstrate how to make a button strip. </p>
</middle>
<bottom>
<button id="cancel"><Icon name="x-circle" color="var(--color-text)" size="24"/> CANCEL</button>
<button><Icon name="check-circle" color="var(--color-bg)" size="24" /> OK</button>
</bottom>
</panel>

80
public/code/Pinterest.html
Unescape View File

@ -1,46 +1,44 @@
<content> <header>
<header> <nav>
<nav> <left>
<left> <logo><Icon name="pinterest" color="var(--color)" /> Pinterest</logo>
<logo><Icon name="pinterest" color="var(--color)" /> Pinterest</logo> <a>Today</a>
<a>Today</a> <a>Explore</a>
<a>Explore</a> </left>
</left>
<input placeholder="Search"> <input placeholder="Search">
<ul> <ul>
<li><button>Log In</button></li> <li><button>Log In</button></li>
<li><button id="signup">Sign Up</button></li> <li><button id="signup">Sign Up</button></li>
</ul> </ul>
</nav> </nav>
</header> </header>
{#if !thumbnail} {#if !thumbnail}
<profile> <profile>
<info> <info>
<h1>Vincent van Gogh</h1> <h1>Vincent van Gogh</h1>
<p>Collection by A Person</p> <p>Collection by A Person</p>
<p><b>420</b> Pins • <b>3.59k</b> Followers</p> <p><b>420</b> Pins • <b>3.59k</b> Followers</p>
<p>"I dream my painting and I paint my dream." ~ Vincent van Gogh <p>"I dream my painting and I paint my dream." ~ Vincent van Gogh
</info> </info>
<figure> <figure>
<img alt="Zed's Face" src="https://via.placeholder.com/128x128?text=Zed's Face"> <img alt="Zed's Face" src="https://via.placeholder.com/128x128?text=Zed's Face">
</figure> </figure>
</profile> </profile>
<pins> <pins>
{#each lanes as lane} {#each lanes as lane}
<lane> <lane>
{#each random_sample(pin_sizes, 10) as height} {#each random_sample(pin_sizes, 10) as height}
<figure> <figure>
<img alt="Zed's Face" src="https://via.placeholder.com/240x{height}?text=Art240x{height}"> <img alt="Zed's Face" src="https://via.placeholder.com/240x{height}?text=Art240x{height}">
<figcaption>Something about Van Gogh {height} high.</figcaption> <figcaption>Something about Van Gogh {height} high.</figcaption>
</figure> </figure>
{/each} {/each}
</lane> </lane>
{/each} {/each}
</pins> </pins>
{/if} {/if}
</content>

42
public/code/Tiles.html
Unescape View File

@ -1,25 +1,23 @@
<content> <tile>
<tile> <left>
<left> <img src={ holder(48, 48) }/>
<img src={ holder(48, 48) }/> </left>
</left>
<middle> <middle>
<h4> <h4>
Tile Example Tile Example
</h4> </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</middle> </middle>
<right> <right>
<button> <button>
<Icon name="check-circle" color="var(--color-bg)" size="24" /> <Icon name="check-circle" color="var(--color-bg)" size="24" />
</button> </button>
<button> <button>
<Icon name="x-circle" color="var(--color-bg)" size="24"/> <Icon name="x-circle" color="var(--color-bg)" size="24"/>
</button> </button>
</right> </right>
</tile> </tile>
</content>

238
public/code/Twitter.html
Unescape View File

@ -1,133 +1,131 @@
<content> <left>
<left> <Icon name="twitter" color="var(--color)" />
<Icon name="twitter" color="var(--color)" /> <h4># Explore</h4>
<h4># Explore</h4> <h4><Icon name="settings" color="var(--color-text)" /> Settings</h4>
<h4><Icon name="settings" color="var(--color-text)" /> Settings</h4> </left>
</left>
<middle> <middle>
<header> <header>
<nav> <nav>
<back><Icon name="arrow-left" /></back> <back><Icon name="arrow-left" /></back>
<name> <name>
<h4>Zed A. Shaw, Writer</h4> <h4>Zed A. Shaw, Writer</h4>
<span>7,754 Tweets</span> <span>7,754 Tweets</span>
</name> </name>
</nav> </nav>
</header> </header>
<images> <images>
<figure id="background"> <figure id="background">
<img src="/header_pic.jpg"> <img src="/header_pic.jpg">
</figure> </figure>
<figure id="avatar"> <img src="/profile_pic.jpg"> <figure id="avatar"> <img src="/profile_pic.jpg">
<button id="follow">Follow</button> <button id="follow">Follow</button>
</figure> </figure>
</images> </images>
<profile> <profile>
<h3>Zed A. Shaw, Writer</h3> <h3>Zed A. Shaw, Writer</h3>
<p>@lzsthw</p> <p>@lzsthw</p>
<p>Blah blah profile stuff.</p> <p>Blah blah profile stuff.</p>
<p><Icon name="map" size="24" color="var(--color-bg-secondary)" /> <p><Icon name="map" size="24" color="var(--color-bg-secondary)" />
Some Place, KY <Icon name="link" size="24" color="var(--color-bg-secondary)" /> Some Place, KY <Icon name="link" size="24" color="var(--color-bg-secondary)" />
<a>learnjsthehardway.org</a> <a>learnjsthehardway.org</a>
<Icon name="calendar" size="24" color="var(--color-bg-secondary)" /> <Icon name="calendar" size="24" color="var(--color-bg-secondary)" />
Joined Jan, 1999. Joined Jan, 1999.
</p> </p>
<p><b>167</b> Following <b>10.4k</b> Followers</p> <p><b>167</b> Following <b>10.4k</b> Followers</p>
</profile> </profile>
<hr> <hr>
<tweets> <tweets>
{#each tweets as tweet} {#each tweets as tweet}
<tweet> <tweet>
<figure id="avatar"> <figure id="avatar">
<img alt="Stock photo" src="/profile_pic.jpg"> <img alt="Stock photo" src="/profile_pic.jpg">
</figure> </figure>
<post> <post>
<h4>Zed A. Shaw, Writer</h4> <h4>Zed A. Shaw, Writer</h4>
<p>Lorem ipsum dolor siThe author of The Hard Way Series published by <p>Lorem ipsum dolor siThe author of The Hard Way Series published by
Addison/Wesley including Learn Python The Hard Way and many more. Addison/Wesley including Learn Python The Hard Way and many more.
Follow me here for coding tips and book news.t amet, consectetur Follow me here for coding tips and book news.t amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam: <br> dolore magna aliqua. Ut enim ad minim veniam: <br>
<a>quis nostrud exercitation</a> ullamco laboris nisi ut aliquip ex ea <a>quis nostrud exercitation</a> ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. mollit anim id est laborum.
</p> </p>
<actions> <actions>
<Icon size="16" name="message-circle" color="var(--color-inactive)" /> 2 <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="repeat" color="var(--color-inactive)" /> 1
<Icon size="16" name="heart" color="var(--color-inactive)" /> 12 <Icon size="16" name="heart" color="var(--color-inactive)" /> 12
<Icon size="16" name="upload" color="var(--color-inactive)" /> <Icon size="16" name="upload" color="var(--color-inactive)" />
</actions> </actions>
</post> </post>
<Icon name="more-horizontal" /> <Icon name="more-horizontal" />
</tweet> </tweet>
{/each} {/each}
</tweets> </tweets>
</middle> </middle>
<right> <right>
<input placeholder="Search Twitter" /> <input placeholder="Search Twitter" />
<section> <section>
<aside id="newperson"> <aside id="newperson">
<h3>New to Twitter?</h3> <h3>New to Twitter?</h3>
<p>Sign up now to get your own personalized hate stream!</p> <p>Sign up now to get your own personalized hate stream!</p>
<button id="signup">Sign Up</button> <button id="signup">Sign Up</button>
</aside> </aside>
<aside> <aside>
<recent-media> <recent-media>
<figure> <figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media"> <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
</figure> </figure>
<figure> <figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media"> <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
</figure> </figure>
<figure> <figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media"> <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
</figure> </figure>
<figure> <figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media"> <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
</figure> </figure>
<figure> <figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media"> <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
</figure> </figure>
<figure> <figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media"> <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
</figure> </figure>
</recent-media> </recent-media>
</aside> </aside>
<aside id="trending"> <aside id="trending">
<h3>You Might Like</h3> <h3>You Might Like</h3>
<ul> <ul>
<li>Card Person</li> <li>Card Person</li>
<li>Card Person</li> <li>Card Person</li>
<li>Card Person</li> <li>Card Person</li>
</ul> </ul>
<a>Show More</a> <a>Show More</a>
</aside> </aside>
<aside id="trending"> <aside id="trending">
<h3>What's Happening</h3> <h3>What's Happening</h3>
<ul> <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> <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> </ul>
</aside> </aside>
</section> </section>
</right> </right>
</content>

88
public/code/XorAcademy.html
Unescape View File

@ -1,51 +1,49 @@
<content> <header>
<header> <nav>
<nav> <b><a id="logo-link" href="/demos/xoracademy" use:link><Icon name="edit-3" color="var(--color-text)" /> Xor.Academy</a></b>
<b><a id="logo-link" href="/demos/xoracademy" use:link><Icon name="edit-3" color="var(--color-text)" /> Xor.Academy</a></b> <input placeholder="Search">
<input placeholder="Search"> <ul>
<ul> <li><a href="/demos/login" use:link><button>Log In</button></a></li>
<li><a href="/demos/login" use:link><button>Log In</button></a></li> <li><a>Sign Up</a></li>
<li><a>Sign Up</a></li> </ul>
</ul> </nav>
</nav> </header>
</header>
<profile> <profile>
<figure> <figure>
<img alt="Module Thumb" src="https://via.placeholder.com/256x256?text=Module+Thumb"> <img alt="Module Thumb" src="https://via.placeholder.com/256x256?text=Module+Thumb">
</figure> </figure>
<info> <info>
<p> <p>
<button>Follow</button> <button>Follow</button>
</p> </p>
<p> <p>
<b>10</b> videos <b>4,695 followers</b> <b>10</b> videos <b>4,695 followers</b>
</p> </p>
<h3>Drawing Level 1</h3> <h3>Drawing Level 1</h3>
<p>The first module you should take. It covers the basics of drawing and how to get started <p>The first module you should take. It covers the basics of drawing and how to get started
making drawing a habit. making drawing a habit.
</p> </p>
</info> </info>
</profile> </profile>
<related> <related>
{#each related as pin} {#each related as pin}
<figure> <figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Related"> <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Related">
</figure> </figure>
{/each} {/each}
</related> </related>
<posts> <posts>
{#each posts as post} {#each posts as post}
<figure> <figure>
<a href="/demos/xoracademy/watch" use:link> <a href="/demos/xoracademy/watch" use:link>
<img alt="Placeholder" src="https://via.placeholder.com/300x300?text=Video Thumb"> <img alt="Placeholder" src="https://via.placeholder.com/300x300?text=Video Thumb">
</a> </a>
</figure> </figure>
{/each} {/each}
</posts> </posts>
</content>

154
public/code/XorAcademyWatch.html
Unescape View File

@ -1,80 +1,78 @@
<content> <header>
<header> <nav>
<nav> <b><a href="/demos/xoracademy" use:link><Icon name="edit-3" color="var(--color-text)" /> Xor.Academy</a></b>
<b><a href="/demos/xoracademy" use:link><Icon name="edit-3" color="var(--color-text)" /> Xor.Academy</a></b> <input placeholder="Search">
<input placeholder="Search"> <ul>
<ul> <li><a href="/demos/login" use:link><button>Log In</button></a></li>
<li><a href="/demos/login" use:link><button>Log In</button></a></li> <li><a>Sign Up</a></li>
<li><a>Sign Up</a></li> </ul>
</ul> </nav>
</nav> </header>
</header> <main>
<main> <figure>
<figure> <img src="https://via.placeholder.com/1280x720?text=Video">
<img src="https://via.placeholder.com/1280x720?text=Video"> <figcaption>
<figcaption> <a>#tag</a> <a>#anothertag</a>
<a>#tag</a> <a>#anothertag</a> <p>Title And Stuff</p>
<p>Title And Stuff</p> <video-actions>
<video-actions> <likes>Likes Other Stats</likes>
<likes>Likes Other Stats</likes> <video-buttons>
<video-buttons> <Icon name="thumbs-up" color="#999" /> 1.1K
<Icon name="thumbs-up" color="#999" /> 1.1K <Icon name="thumbs-down" color="#999" /> 22
<Icon name="thumbs-down" color="#999" /> 22 <Icon name="corner-up-right" color="#999" /> SHARE
<Icon name="corner-up-right" color="#999" /> SHARE <Icon name="menu" color="#999" /> SAVE
<Icon name="menu" color="#999" /> SAVE <Icon name="vertical-more" />
<Icon name="vertical-more" /> </video-buttons>
</video-buttons> </video-actions>
</video-actions> </figcaption>
</figcaption> </figure>
</figure> <lower>
<lower> <promotion>
<promotion> <nav>
<nav> <card>
<card> <img src="https://via.placeholder.com/64x64?text=ME">
<img src="https://via.placeholder.com/64x64?text=ME"> <info>
<info> <h4>Zed A. Shaw</h4>
<h4>Zed A. Shaw</h4> <subs>1 subscriber</subs>
<subs>1 subscriber</subs> </card>
</card> <button id="subscribe">SUBSCRIBE</button>
<button id="subscribe">SUBSCRIBE</button> </nav>
</nav>
<content> Sed ut perspiciatis unde omnis iste natus error sit voluptatem <content> Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
quia non numquam eius modi tempora incidunt ut labore et dolore magnam quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in
ea voluptate velit esse quam nihil molestiae consequatur, vel illum ea voluptate velit esse quam nihil molestiae consequatur, vel illum
qui dolorem eum fugiat quo voluptas nulla pariatur qui dolorem eum fugiat quo voluptas nulla pariatur
</content> </content>
</promotion> </promotion>
<hr> <hr>
<comments> <comments>
<nav> <nav>
<span>125 Comments</span> <sort><Icon name="bar-chart" color="var(--sub-color)" /> SORT BY</sort> <span>125 Comments</span> <sort><Icon name="bar-chart" color="var(--sub-color)" /> SORT BY</sort>
</nav> </nav>
{#each cards as card} {#each cards as card}
<card> <card>
<img src="https://via.placeholder.com/64x64?text=Person"> <img src="https://via.placeholder.com/64x64?text=Person">
<info> <info>
<h4>Guys</h4> <h4>Guys</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque</p> accusantium doloremque laudantium, totam rem aperiam, eaque</p>
<nav id="vote-nav"> <nav id="vote-nav">
<Icon name="thumbs-up" color="var(--sub-color)" /> 233 <Icon name="thumbs-up" color="var(--sub-color)" /> 233
</nav> </nav>
<reply><Icon name="chevron-down" /> View replies</reply> <reply><Icon name="chevron-down" /> View replies</reply>
</info> </info>
</card> </card>
{/each} {/each}
</comments> </comments>
</lower> </lower>
</main> </main>
</content>

216
public/code/Youtube.html
Unescape View File

@ -1,121 +1,119 @@
<content> <header>
<header> <nav>
<nav> <nav-left>
<nav-left> <a><Icon name="menu" /> <Icon name="youtube" /> <logo>Youtube</logo></a>
<a><Icon name="menu" /> <Icon name="youtube" /> <logo>Youtube</logo></a> </nav-left>
</nav-left> <input id="search" placeholder="Search" name="search">
<input id="search" placeholder="Search" name="search"> <ul>
<ul> <li><Icon name="camera" color="#000" /></li>
<li><Icon name="camera" color="#000" /></li> <li><Icon name="more-vertical" color="#000" /></li>
<li><Icon name="more-vertical" color="#000" /></li> <li><Icon name="grid" color="#000" /></li>
<li><Icon name="grid" color="#000" /></li> <li><button><Icon name="user" /> Sign In</button></li>
<li><button><Icon name="user" /> Sign In</button></li> </ul>
</ul> </nav>
</nav> </header>
</header> <main>
<main> <left>
<left> <figure>
<figure> <a href="/demos/google" use:link>
<a href="/demos/google" use:link> <img src="https://via.placeholder.com/800x450?text=Video">
<img src="https://via.placeholder.com/800x450?text=Video"> </a>
</a> <figcaption>
<figcaption> <a>#tag</a> <a>#anothertag</a>
<a>#tag</a> <a>#anothertag</a> <p>Title And Stuff</p>
<p>Title And Stuff</p> <video-actions>
<video-actions> <likes>Stats Stats</likes>
<likes>Stats Stats</likes> <video-buttons>
<video-buttons> <Icon name="thumbs-up" color="#999" /> 1.1K
<Icon name="thumbs-up" color="#999" /> 1.1K <Icon name="thumbs-down" color="#999" /> 22
<Icon name="thumbs-down" color="#999" /> 22 <Icon name="corner-up-right" color="#999" /> SHARE
<Icon name="corner-up-right" color="#999" /> SHARE <Icon name="menu" color="#999" /> SAVE
<Icon name="menu" color="#999" /> SAVE <Icon name="vertical-more" />
<Icon name="vertical-more" /> </video-buttons>
</video-buttons> </video-actions>
</video-actions> </figcaption>
</figcaption> </figure>
</figure> <hr>
<hr> <promotion>
<promotion> <nav>
<nav>
<card>
<img src="https://via.placeholder.com/64x64?text=ME">
<info>
<h4>Zed A. Shaw</h4>
<subs>1 subscriber</subs>
</card>
<button id="subscribe">SUBSCRIBE</button>
</nav>
<content>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in
ea voluptate velit esse quam nihil molestiae consequatur, vel illum
qui dolorem eum fugiat quo voluptas nulla pariatur </content>
</promotion>
<hr>
<comments>
<nav>
<span>125 Comments</span> <sort><Icon name="bar-chart" color="var(--sub-color)" /> SORT BY</sort>
</nav>
{#each cards as card}
<card> <card>
<img src="https://via.placeholder.com/64x64?text=Person"> <img src="https://via.placeholder.com/64x64?text=ME">
<info> <info>
<h4>Guys</h4> <h4>Zed A. Shaw</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem <subs>1 subscriber</subs>
accusantium doloremque laudantium, totam rem aperiam, eaque</p>
<nav>
<Icon name="thumbs-up" color="var(--sub-color)" /> 233
<Icon name="thumbs-down" color="var(--sub-color)" /> 1
</nav>
<reply><Icon name="chevron-down" /> View replies</reply>
</info>
</card> </card>
{/each} <button id="subscribe">SUBSCRIBE</button>
</comments> </nav>
</left>
<right> <content>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
{#each cards as card} accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
<card class="small"> ab illo inventore veritatis et quasi architecto beatae vitae dicta
<img src="https://via.placeholder.com/120x80?text=Thumb"> sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
<info> aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
<h4>Video Thumb Title</h4> qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
<author>Zed</author> dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
<views>1.1M views</views> quia non numquam eius modi tempora incidunt ut labore et dolore magnam
<date>2 years ago</date> aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
</info> exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
</card> ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in
{/each} ea voluptate velit esse quam nihil molestiae consequatur, vel illum
qui dolorem eum fugiat quo voluptas nulla pariatur </content>
</promotion>
<hr>
<figure> <comments>
<a href="/demos/google" use:link> <nav>
<img src="https://via.placeholder.com/300x150?text=Advert"> <span>125 Comments</span> <sort><Icon name="bar-chart" color="var(--sub-color)" /> SORT BY</sort>
</a> </nav>
</figure>
{#each cards as card} {#each cards as card}
<card> <card>
<img src="https://via.placeholder.com/120x80?text=Thumb"> <img src="https://via.placeholder.com/64x64?text=Person">
<info> <info>
<h4>Video Thumb Title</h4> <h4>Guys</h4>
<author>Zed</author> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
<views>1.1M views</views> accusantium doloremque laudantium, totam rem aperiam, eaque</p>
<date>2 years ago</date> <nav>
<Icon name="thumbs-up" color="var(--sub-color)" /> 233
<Icon name="thumbs-down" color="var(--sub-color)" /> 1
</nav>
<reply><Icon name="chevron-down" /> View replies</reply>
</info> </info>
</card> </card>
{/each} {/each}
</right> </comments>
</main> </left>
</content>
<right>
{#each cards as card}
<card class="small">
<img src="https://via.placeholder.com/120x80?text=Thumb">
<info>
<h4>Video Thumb Title</h4>
<author>Zed</author>
<views>1.1M views</views>
<date>2 years ago</date>
</info>
</card>
{/each}
<figure>
<a href="/demos/google" use:link>
<img src="https://via.placeholder.com/300x150?text=Advert">
</a>
</figure>
{#each cards as card}
<card>
<img src="https://via.placeholder.com/120x80?text=Thumb">
<info>
<h4>Video Thumb Title</h4>
<author>Zed</author>
<views>1.1M views</views>
<date>2 years ago</date>
</info>
</card>
{/each}
</right>
</main>

32
src/components/Modal.svelte → src/demos/Modal.svelte
Unescape View File

@ -1,12 +1,20 @@
<script> <script>
import Icon from '../components/Icon.svelte'; import Icon from '../components/Icon.svelte';
import CodeView from '../components/CodeView.svelte';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
export let visible = false; export let visible = false;
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
</script> </script>
<style> <style>
content {
display: flex;
justify-content: center;
}
button {
padding: 5em;
}
modal { modal {
display: flex; display: flex;
position: fixed; position: fixed;
@ -26,19 +34,27 @@
background: white; background: white;
border: 1px solid var(--color-accent); border: 1px solid var(--color-accent);
border-radius: 5px; border-radius: 5px;
max-height: 75vh; max-height: 300px;
min-height: 75vh; min-height: 300px;
max-width: 75vh; max-width: 300px;
width: 100%; width: 100%;
z-index: 20; z-index: 20;
padding: 0px; padding: 0.5em;
} }
</style> </style>
<content>
<button on:click={ () => visible = true }>Click Me!</button>
</content>
{#if visible} {#if visible}
<modal on:click={ () => dispatch('click') }> <modal on:click={ () => visible = false }>
<modal-content> <modal-content>
<slot></slot> <h1>This Is A Modal</h1>
<p>Designers love modals. Click anywhere to close this.</p>
</modal-content> </modal-content>
</modal> </modal>
{/if} {/if}
<CodeView source="/code/Modal" />

76
src/demos/NavBar.svelte
Unescape View File

@ -0,0 +1,76 @@
<script>
import CodeView from '../components/CodeView.svelte';
import Icon from '../components/Icon.svelte';
</script>
<style>
content {
display: flex;
flex-direction: column;
}
/* mvp.css aleady has a nav so using this
name to demonstrate how to make your own. */
nav-bar {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-evenly;
/* this is just for displaying here */
padding: 1em;
border: 1px solid var(--color-accent);
margin-bottom: 1em;
}
nav-bar middle {
display: flex;
flex: 2;
justify-content: center;
padding-left: 1em;
padding-right: 1em;
}
nav-bar middle input {
width: 100%;
}
.alternate {
background-color: #ddd;
}
</style>
<content>
<nav-bar>
<left>
<b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
</left>
<middle>
<input placeholder="Search">
</middle>
<right>
<button>Log In</button>
<a>Sign Up</a>
</right>
</nav-bar>
<nav-bar class="alternate">
<left>
<b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
</left>
<middle>
<!-- you just leave this empty and flexbox
will expand it for you. -->
</middle>
<right>
<button>Log In</button>
<button id="signup">Sign Up</button>
</right>
</nav-bar>
</content>
<CodeView source="/code/NavBar" />

83
src/demos/Panels.svelte
Unescape View File

@ -0,0 +1,83 @@
<script>
import CodeView from '../components/CodeView.svelte';
import Icon from '../components/Icon.svelte';
</script>
<style>
content {
display: flex;
flex: flex-shrink;
flex-grow: 1;
justify-content: center;
}
panel {
display: flex;
flex-direction: column;
border: 1px solid #eee;
width: min-content;
}
panel top {
width: 480px; /* sets a header for display */
padding: 0.5rem;
}
panel middle {
padding-left: 0.5rem;
padding-right: 0.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
panel middle h4 {
}
panel bottom {
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
panel bottom button {
display: flex;
margin: 0;
border-radius: unset;
width: 100%;
justify-content: space-evenly;
}
button:hover {
filter: invert(20%);
}
button#cancel {
background: unset;
color: var(--color-text);
}
</style>
<content>
<panel>
<top>
<h1>Panel is a Card</h1>
</top>
<middle>
<h4>
Panel Example
</h4>
<p>Not sure what the big deal is with the difference between panels and cards
but I'm doing all the things so here's a panel. Let's say, buttons on a panel
are different to demonstrate how to make a button strip. </p>
</middle>
<bottom>
<button id="cancel"><Icon name="x-circle" color="var(--color-text)" size="24"/> CANCEL</button>
<button><Icon name="check-circle" color="var(--color-bg)" size="24" /> OK</button>
</bottom>
</panel>
</content>
<CodeView source="/code/Panels" />

12
src/demos/index.svelte
Unescape View File

@ -7,6 +7,8 @@
import Login from '../thumbs/Login.svelte'; import Login from '../thumbs/Login.svelte';
import Tiles from '../thumbs/Tiles.svelte'; import Tiles from '../thumbs/Tiles.svelte';
import Cards from '../thumbs/Cards.svelte'; import Cards from '../thumbs/Cards.svelte';
import Panels from '../thumbs/Panels.svelte';
import NavBar from '../thumbs/NavBar.svelte';
import {push} from 'svelte-spa-router'; import {push} from 'svelte-spa-router';
import { holder } from '../../lib/imgholder.js'; import { holder } from '../../lib/imgholder.js';
@ -99,6 +101,16 @@
<figcaption>Cards</figcaption> <figcaption>Cards</figcaption>
</figure> </figure>
<figure on:click={ () => push('/demos/panels') }>
<Panels />
<figcaption>Panels</figcaption>
</figure>
<figure on:click={ () => push('/demos/navbar') }>
<NavBar />
<figcaption>Nav Bar</figcaption>
</figure>
</images> </images>

6
src/routes.js
Unescape View File

@ -12,6 +12,9 @@ import XorAcademyWatch from "./demos/XorAcademyWatch.svelte";
import Login from "./demos/Login.svelte"; import Login from "./demos/Login.svelte";
import Tiles from "./demos/Tiles.svelte"; import Tiles from "./demos/Tiles.svelte";
import Cards from "./demos/Cards.svelte"; import Cards from "./demos/Cards.svelte";
import Panels from "./demos/Panels.svelte";
import Modal from "./demos/Modal.svelte";
import NavBar from "./demos/NavBar.svelte";
export default { export default {
"/": Home, "/": Home,
@ -19,12 +22,15 @@ export default {
"/demos": Demos, "/demos": Demos,
"/demos/login": Login, "/demos/login": Login,
"/demos/tiles": Tiles, "/demos/tiles": Tiles,
"/demos/modal": Modal,
"/demos/cards": Cards, "/demos/cards": Cards,
"/demos/panels": Panels,
"/demos/google": Google, "/demos/google": Google,
"/demos/twitter": Twitter, "/demos/twitter": Twitter,
"/demos/youtube": Youtube, "/demos/youtube": Youtube,
"/demos/instagram": Instagram, "/demos/instagram": Instagram,
"/demos/pinterest": Pinterest, "/demos/pinterest": Pinterest,
"/demos/navbar": NavBar,
"/demos/xoracademy": XorAcademy, "/demos/xoracademy": XorAcademy,
"/demos/xoracademy/watch": XorAcademyWatch, "/demos/xoracademy/watch": XorAcademyWatch,
"*": NotFound, "*": NotFound,

73
src/thumbs/NavBar.svelte
Unescape View File

@ -0,0 +1,73 @@
<script>
import CodeView from '../components/CodeView.svelte';
import Icon from '../components/Icon.svelte';
</script>
<style>
content {
display: flex;
flex-direction: column;
}
/* mvp.css aleady has a nav so using this
name to demonstrate how to make your own. */
nav-bar {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-evenly;
padding: 1em; /* this is only for here */
border: 1px solid var(--color-accent);
margin-bottom: 1em;
}
nav-bar middle {
display: flex;
flex: 2;
justify-content: center;
padding-left: 1em;
padding-right: 1em;
}
nav-bar middle input {
width: 100%;
}
.alternate {
background-color: #ddd;
}
</style>
<content>
<nav-bar>
<left>
<b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
</left>
<middle>
<input placeholder="Search">
</middle>
<right>
<button>Log In</button>
<a>Sign Up</a>
</right>
</nav-bar>
<nav-bar class="alternate">
<left>
<b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
</left>
<middle>
<!-- you just leave this empty and flexbox
will expand it for you. -->
</middle>
<right>
<button>Log In</button>
<button id="signup">Sign Up</button>
</right>
</nav-bar>
</content>

81
src/thumbs/Panels.svelte
Unescape View File

@ -0,0 +1,81 @@
<script>
import Icon from '../components/Icon.svelte';
</script>
<style>
content {
display: flex;
flex: flex-shrink;
flex-grow: 1;
justify-content: center;
}
panel {
display: flex;
flex-direction: column;
border: 1px solid #eee;
width: min-content;
}
panel top {
width: 480px; /* sets a header for display */
padding: 0.5rem;
}
panel middle {
padding-left: 0.5rem;
padding-right: 0.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
panel middle h4 {
}
panel bottom {
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
panel bottom button {
display: flex;
margin: 0;
border-radius: unset;
width: 100%;
justify-content: space-evenly;
}
button:hover {
filter: invert(20%);
}
button#cancel {
background: unset;
color: var(--color-text);
}
</style>
<content>
<panel>
<top>
<h1>Panel is a Card</h1>
</top>
<middle>
<h4>
Panel Example
</h4>
<p>Not sure what the big deal is with the difference between panels and cards
but I'm doing all the things so here's a panel. Let's say, buttons on a panel
are different to demonstrate how to make a button strip. </p>
</middle>
<bottom>
<button id="cancel"><Icon name="x-circle" color="var(--color-text)" size="24"/> CANCEL</button>
<button><Icon name="check-circle" color="var(--color-bg)" size="24" /> OK</button>
</bottom>
</panel>
</content>
Write Preview
Loading…
Cancel
Save