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

54
public/code/Google.html
Unescape View File

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

114
public/code/Instagram.html
Unescape View File

@ -1,61 +1,59 @@
<content>
<header>
<nav>
<b><Icon name="instagram" color="var(--color-text)" /> Instagram</b>
<input placeholder="Search">
<ul>
<li><button>Log In</button></li>
<li><a>Sign Up</a></li>
</ul>
</nav>
</header>
<profile>
<header>
<nav>
<b><Icon name="instagram" color="var(--color-text)" /> Instagram</b>
<input placeholder="Search">
<ul>
<li><button>Log In</button></li>
<li><a>Sign Up</a></li>
</ul>
</nav>
</header>
<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>
<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>
<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>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Story">
</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>
{/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>

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>
<nav>
<left>
<logo><Icon name="pinterest" color="var(--color)" /> Pinterest</logo>
<a>Today</a>
<a>Explore</a>
</left>
<header>
<nav>
<left>
<logo><Icon name="pinterest" color="var(--color)" /> Pinterest</logo>
<a>Today</a>
<a>Explore</a>
</left>
<input placeholder="Search">
<input placeholder="Search">
<ul>
<li><button>Log In</button></li>
<li><button id="signup">Sign Up</button></li>
</ul>
</nav>
</header>
<ul>
<li><button>Log In</button></li>
<li><button id="signup">Sign Up</button></li>
</ul>
</nav>
</header>
{#if !thumbnail}
<profile>
<info>
<h1>Vincent van Gogh</h1>
<p>Collection by A Person</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
</info>
{#if !thumbnail}
<profile>
<info>
<h1>Vincent van Gogh</h1>
<p>Collection by A Person</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
</info>
<figure>
<img alt="Zed's Face" src="https://via.placeholder.com/128x128?text=Zed's Face">
</figure>
</profile>
<figure>
<img alt="Zed's Face" src="https://via.placeholder.com/128x128?text=Zed's Face">
</figure>
</profile>
<pins>
{#each lanes as lane}
<lane>
{#each random_sample(pin_sizes, 10) as height}
<figure>
<img alt="Zed's Face" src="https://via.placeholder.com/240x{height}?text=Art240x{height}">
<figcaption>Something about Van Gogh {height} high.</figcaption>
</figure>
{/each}
</lane>
{/each}
</pins>
{/if}
</content>
<pins>
{#each lanes as lane}
<lane>
{#each random_sample(pin_sizes, 10) as height}
<figure>
<img alt="Zed's Face" src="https://via.placeholder.com/240x{height}?text=Art240x{height}">
<figcaption>Something about Van Gogh {height} high.</figcaption>
</figure>
{/each}
</lane>
{/each}
</pins>
{/if}

42
public/code/Tiles.html
Unescape View File

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

238
public/code/Twitter.html
Unescape View File

@ -1,133 +1,131 @@
<content>
<left>
<Icon name="twitter" color="var(--color)" />
<h4># Explore</h4>
<h4><Icon name="settings" color="var(--color-text)" /> Settings</h4>
</left>
<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>
<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>
<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>
<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>Blah blah profile stuff.</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>
<profile>
<h3>Zed A. Shaw, Writer</h3>
<p>@lzsthw</p>
<p>Blah blah profile stuff.</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>
<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>
<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 siThe 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.t 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>
<p>Lorem ipsum dolor siThe 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.t 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>
<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" />
<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>
<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>
<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>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>
<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>

88
public/code/XorAcademy.html
Unescape View File

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

154
public/code/XorAcademyWatch.html
Unescape View File

@ -1,80 +1,78 @@
<content>
<header>
<nav>
<b><a href="/demos/xoracademy" use:link><Icon name="edit-3" color="var(--color-text)" /> Xor.Academy</a></b>
<input placeholder="Search">
<ul>
<li><a href="/demos/login" use:link><button>Log In</button></a></li>
<li><a>Sign Up</a></li>
</ul>
</nav>
</header>
<main>
<figure>
<img src="https://via.placeholder.com/1280x720?text=Video">
<figcaption>
<a>#tag</a> <a>#anothertag</a>
<p>Title And Stuff</p>
<video-actions>
<likes>Likes Other Stats</likes>
<video-buttons>
<Icon name="thumbs-up" color="#999" /> 1.1K
<Icon name="thumbs-down" color="#999" /> 22
<Icon name="corner-up-right" color="#999" /> SHARE
<Icon name="menu" color="#999" /> SAVE
<Icon name="vertical-more" />
</video-buttons>
</video-actions>
</figcaption>
</figure>
<lower>
<promotion>
<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>
<header>
<nav>
<b><a href="/demos/xoracademy" use:link><Icon name="edit-3" color="var(--color-text)" /> Xor.Academy</a></b>
<input placeholder="Search">
<ul>
<li><a href="/demos/login" use:link><button>Log In</button></a></li>
<li><a>Sign Up</a></li>
</ul>
</nav>
</header>
<main>
<figure>
<img src="https://via.placeholder.com/1280x720?text=Video">
<figcaption>
<a>#tag</a> <a>#anothertag</a>
<p>Title And Stuff</p>
<video-actions>
<likes>Likes Other Stats</likes>
<video-buttons>
<Icon name="thumbs-up" color="#999" /> 1.1K
<Icon name="thumbs-down" color="#999" /> 22
<Icon name="corner-up-right" color="#999" /> SHARE
<Icon name="menu" color="#999" /> SAVE
<Icon name="vertical-more" />
</video-buttons>
</video-actions>
</figcaption>
</figure>
<lower>
<promotion>
<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>
<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>
<img src="https://via.placeholder.com/64x64?text=Person">
<info>
<h4>Guys</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque</p>
<nav id="vote-nav">
<Icon name="thumbs-up" color="var(--sub-color)" /> 233
</nav>
<reply><Icon name="chevron-down" /> View replies</reply>
</info>
</card>
{/each}
</comments>
</lower>
</main>
</content>
{#each cards as card}
<card>
<img src="https://via.placeholder.com/64x64?text=Person">
<info>
<h4>Guys</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque</p>
<nav id="vote-nav">
<Icon name="thumbs-up" color="var(--sub-color)" /> 233
</nav>
<reply><Icon name="chevron-down" /> View replies</reply>
</info>
</card>
{/each}
</comments>
</lower>
</main>

216
public/code/Youtube.html
Unescape View File

@ -1,121 +1,119 @@
<content>
<header>
<nav>
<nav-left>
<a><Icon name="menu" /> <Icon name="youtube" /> <logo>Youtube</logo></a>
</nav-left>
<input id="search" placeholder="Search" name="search">
<ul>
<li><Icon name="camera" color="#000" /></li>
<li><Icon name="more-vertical" color="#000" /></li>
<li><Icon name="grid" color="#000" /></li>
<li><button><Icon name="user" /> Sign In</button></li>
</ul>
</nav>
</header>
<main>
<left>
<figure>
<a href="/demos/google" use:link>
<img src="https://via.placeholder.com/800x450?text=Video">
</a>
<figcaption>
<a>#tag</a> <a>#anothertag</a>
<p>Title And Stuff</p>
<video-actions>
<likes>Stats Stats</likes>
<video-buttons>
<Icon name="thumbs-up" color="#999" /> 1.1K
<Icon name="thumbs-down" color="#999" /> 22
<Icon name="corner-up-right" color="#999" /> SHARE
<Icon name="menu" color="#999" /> SAVE
<Icon name="vertical-more" />
</video-buttons>
</video-actions>
</figcaption>
</figure>
<hr>
<promotion>
<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}
<header>
<nav>
<nav-left>
<a><Icon name="menu" /> <Icon name="youtube" /> <logo>Youtube</logo></a>
</nav-left>
<input id="search" placeholder="Search" name="search">
<ul>
<li><Icon name="camera" color="#000" /></li>
<li><Icon name="more-vertical" color="#000" /></li>
<li><Icon name="grid" color="#000" /></li>
<li><button><Icon name="user" /> Sign In</button></li>
</ul>
</nav>
</header>
<main>
<left>
<figure>
<a href="/demos/google" use:link>
<img src="https://via.placeholder.com/800x450?text=Video">
</a>
<figcaption>
<a>#tag</a> <a>#anothertag</a>
<p>Title And Stuff</p>
<video-actions>
<likes>Stats Stats</likes>
<video-buttons>
<Icon name="thumbs-up" color="#999" /> 1.1K
<Icon name="thumbs-down" color="#999" /> 22
<Icon name="corner-up-right" color="#999" /> SHARE
<Icon name="menu" color="#999" /> SAVE
<Icon name="vertical-more" />
</video-buttons>
</video-actions>
</figcaption>
</figure>
<hr>
<promotion>
<nav>
<card>
<img src="https://via.placeholder.com/64x64?text=Person">
<img src="https://via.placeholder.com/64x64?text=ME">
<info>
<h4>Guys</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
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>
<h4>Zed A. Shaw</h4>
<subs>1 subscriber</subs>
</card>
{/each}
</comments>
</left>
<button id="subscribe">SUBSCRIBE</button>
</nav>
<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}
<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>
<figure>
<a href="/demos/google" use:link>
<img src="https://via.placeholder.com/300x150?text=Advert">
</a>
</figure>
<comments>
<nav>
<span>125 Comments</span> <sort><Icon name="bar-chart" color="var(--sub-color)" /> SORT BY</sort>
</nav>
{#each cards as card}
<card>
<img src="https://via.placeholder.com/120x80?text=Thumb">
<img src="https://via.placeholder.com/64x64?text=Person">
<info>
<h4>Video Thumb Title</h4>
<author>Zed</author>
<views>1.1M views</views>
<date>2 years ago</date>
<h4>Guys</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
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>
{/each}
</right>
</main>
</content>
</comments>
</left>
<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>
import Icon from '../components/Icon.svelte';
import CodeView from '../components/CodeView.svelte';
import { fade } from 'svelte/transition';
export let visible = false;
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
</script>
<style>
content {
display: flex;
justify-content: center;
}
button {
padding: 5em;
}
modal {
display: flex;
position: fixed;
@ -26,19 +34,27 @@
background: white;
border: 1px solid var(--color-accent);
border-radius: 5px;
max-height: 75vh;
min-height: 75vh;
max-width: 75vh;
max-height: 300px;
min-height: 300px;
max-width: 300px;
width: 100%;
z-index: 20;
padding: 0px;
padding: 0.5em;
}
</style>
<content>
<button on:click={ () => visible = true }>Click Me!</button>
</content>
{#if visible}
<modal on:click={ () => dispatch('click') }>
<modal on:click={ () => visible = false }>
<modal-content>
<slot></slot>
<h1>This Is A Modal</h1>
<p>Designers love modals. Click anywhere to close this.</p>
</modal-content>
</modal>
{/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 Tiles from '../thumbs/Tiles.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 { holder } from '../../lib/imgholder.js';
@ -99,6 +101,16 @@
<figcaption>Cards</figcaption>
</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>

6
src/routes.js
Unescape View File

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