generated from ShaokangJiang/svelte-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
5,136 additions
and
261 deletions.
There are no files selected for viewing
3,052 changes: 3,052 additions & 0 deletions
3,052
python_notebooks/.ipynb_checkpoints/transistors-checkpoint.ipynb
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| <script> | ||
| import * as d3 from "d3"; | ||
| import { fade } from "svelte/transition"; | ||
| export let index; | ||
| export let fadeIn; | ||
| export let fadeOut; | ||
| export let title = ""; | ||
| export let left = ""; | ||
| export let right = ""; | ||
| export let left_title = ""; | ||
| export let right_title = ""; | ||
| let startFadeIn = true; | ||
| let startFadeOut = false; | ||
| let remove = false; | ||
| $: { | ||
| console.log(index) | ||
| if (index > fadeOut) { | ||
| remove = true; | ||
| startFadeIn = false; | ||
| startFadeOut = false; | ||
| } | ||
| else { | ||
| remove = false; | ||
| if (index == fadeIn) { | ||
| console.log('start fade in') | ||
| startFadeIn = true; | ||
| startFadeOut = false; | ||
| } | ||
| if (index == fadeOut) { | ||
| console.log('start fade out') | ||
| startFadeIn = false; | ||
| startFadeOut = true; | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <div class="container" class:fadeIn={startFadeIn} class:fadeOut={startFadeOut} class:remove={remove}> | ||
| <h1>{title}</h1> | ||
| <div class="body"> | ||
| <div class="col left"> | ||
| <h2>{left_title}</h2> | ||
| <p>{left}</p> | ||
| </div> | ||
| <div class="col mid" /> | ||
| <div class="col right"> | ||
| <h2>{right_title}</h2> | ||
| <p>{right}</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <style> | ||
| h1 { | ||
| font-size: 36px; | ||
| } | ||
| h2 { | ||
| font-size: 24px; | ||
| height: 10%; | ||
| } | ||
| p { | ||
| font-size: 18px; | ||
| height: 90%; | ||
| } | ||
| .body { | ||
| display: flex; | ||
| height: 100vh; | ||
| width: 100%; | ||
| } | ||
| .col { | ||
| padding: 20px; | ||
| width: 20%; | ||
| display: flex; | ||
| flex-flow: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| /* outline: magenta solid 3px; */ | ||
| } | ||
| .col.mid { | ||
| width: 60%; | ||
| } | ||
| .container { | ||
| width: 100%; | ||
| height: 100%; | ||
| display: flex; | ||
| flex-flow: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| visibility: visible; | ||
| } | ||
| .container.fadeIn { | ||
| animation: fadeIn 1s; | ||
| animation-fill-mode: forwards; | ||
| } | ||
| .container.fadeOut { | ||
| animation: fadeOut 1s; | ||
| animation-fill-mode: forwards; | ||
| } | ||
| .container.remove { | ||
| display: none; | ||
| } | ||
| @keyframes fadeIn { | ||
| 0% { | ||
| opacity: 0; | ||
| } | ||
| 100% { | ||
| opacity: 1; | ||
| } | ||
| } | ||
| @keyframes fadeOut { | ||
| 0% { | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| opacity: 0; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <script> | ||
| export let text; | ||
| </script> | ||
|
|
||
| <div class='container'> | ||
| <h1> | ||
| {text.subtitle} | ||
| </h1> | ||
| <h2> | ||
| {text.text} | ||
| </h2> | ||
| </div> | ||
|
|
||
| <style> | ||
| h1 { | ||
| font-size: 90px; | ||
| } | ||
| h2 { | ||
| font-size: 50px; | ||
| } | ||
| .container { | ||
| width: 100%; | ||
| height: 80%; | ||
| display: flex; | ||
| flex-flow: column wrap; | ||
| justify-content: center; /* Center horizontally */ | ||
| align-items: center; /* Center vertically */ | ||
| visibility: visible; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,121 +1,25 @@ | ||
| <script> | ||
| import * as d3 from "d3"; | ||
| import { fade } from "svelte/transition"; | ||
| export let index; | ||
| export let fadeIn; | ||
| export let fadeOut; | ||
| export let title = ""; | ||
| export let left = ""; | ||
| export let right = ""; | ||
| export let left_title = ""; | ||
| export let right_title = ""; | ||
| let startFadeIn = true; | ||
| let startFadeOut = false; | ||
| let remove = false; | ||
| $: { | ||
| console.log(index) | ||
| if (index > fadeOut) { | ||
| remove = true; | ||
| startFadeIn = false; | ||
| startFadeOut = false; | ||
| } | ||
| else { | ||
| remove = false; | ||
| if (index == fadeIn) { | ||
| console.log('start fade in') | ||
| startFadeIn = true; | ||
| startFadeOut = false; | ||
| } | ||
| if (index == fadeOut) { | ||
| console.log('start fade out') | ||
| startFadeIn = false; | ||
| startFadeOut = true; | ||
| } | ||
| } | ||
| } | ||
| export let text; | ||
| </script> | ||
|
|
||
| <div class="container" class:fadeIn={startFadeIn} class:fadeOut={startFadeOut} class:remove={remove}> | ||
| <h1>{title}</h1> | ||
| <div class="body"> | ||
| <div class="col left"> | ||
| <h2>{left_title}</h2> | ||
| <p>{left}</p> | ||
| </div> | ||
| <div class="col mid" /> | ||
| <div class="col right"> | ||
| <h2>{right_title}</h2> | ||
| <p>{right}</p> | ||
| </div> | ||
| </div> | ||
| <div class='container'> | ||
| <p> | ||
| {text.text} | ||
| </p> | ||
| </div> | ||
|
|
||
| <style> | ||
| h1 { | ||
| font-size: 36px; | ||
| } | ||
| h2 { | ||
| font-size: 24px; | ||
| height: 10%; | ||
| } | ||
| p { | ||
| font-size: 18px; | ||
| height: 90%; | ||
| } | ||
| .body { | ||
| display: flex; | ||
| height: 100vh; | ||
| width: 100%; | ||
| } | ||
| .col { | ||
| padding: 20px; | ||
| width: 20%; | ||
| display: flex; | ||
| flex-flow: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| /* outline: magenta solid 3px; */ | ||
| } | ||
| .col.mid { | ||
| width: 60%; | ||
| font-size: 32px; | ||
| text-wrap: balance; | ||
| } | ||
| .container { | ||
| width: 100%; | ||
| height: 100%; | ||
| height: 80%; | ||
| display: flex; | ||
| flex-flow: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-flow: column wrap; | ||
| justify-content: center; /* Center horizontally */ | ||
| align-items: center; /* Center vertically */ | ||
| visibility: visible; | ||
| } | ||
| .container.fadeIn { | ||
| animation: fadeIn 1s; | ||
| animation-fill-mode: forwards; | ||
| } | ||
| .container.fadeOut { | ||
| animation: fadeOut 1s; | ||
| animation-fill-mode: forwards; | ||
| } | ||
| .container.remove { | ||
| display: none; | ||
| } | ||
| @keyframes fadeIn { | ||
| 0% { | ||
| opacity: 0; | ||
| } | ||
| 100% { | ||
| opacity: 1; | ||
| } | ||
| } | ||
| @keyframes fadeOut { | ||
| 0% { | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| opacity: 0; | ||
| } | ||
| } | ||
| </style> | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| <script> | ||
| import Scroller from "@sveltejs/svelte-scroller"; | ||
| let count, | ||
| index, | ||
| offset, | ||
| progress = 0; | ||
| let lol = [0, 1, 2, 3, 4, 5] | ||
| </script> | ||
|
|
||
| <main> | ||
| <Scroller | ||
| top={0.0} | ||
| bottom={1} | ||
| threshold={0.55} | ||
| bind:count | ||
| bind:index | ||
| bind:offset | ||
| bind:progress | ||
| > | ||
| <div class="foreground" slot="foreground"> | ||
| <!-- <div> --> | ||
| {#each lol as i} | ||
| <section>{i}</section> | ||
| {/each} | ||
| <!-- </div> --> | ||
| </div> | ||
| <div class="background" slot="background"> | ||
| <div class="progress-bars"> | ||
| <p>current section: <strong>{index + 1}/{count}</strong></p> | ||
| <progress value={count ? (index + 1) / count : 0} /> | ||
| <p>offset in current section</p> | ||
| <progress value={offset || 0} /> | ||
| <p>total progress</p> | ||
| <progress value={progress || 0} /> | ||
| </div> | ||
| </div> | ||
| </Scroller> | ||
| </main> | ||
| <style> | ||
| main { | ||
| font-family: "Lato", sans-serif; | ||
| } | ||
| .foreground { | ||
| height: 100vh; | ||
| width: 70%; | ||
| margin: 0 auto; | ||
| /* height: auto; */ | ||
| /* position: relative; */ | ||
| /* overflow: auto; | ||
| scroll-snap-type: y mandatory; */ | ||
| } | ||
| .background { | ||
| width: 100%; | ||
| height: 100vh; | ||
| position: relative; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-flow: column wrap; | ||
| } | ||
| section { | ||
| height: 99vh; | ||
| background-color: rgba(0, 0, 0, 0); | ||
| color: white; | ||
| text-align: center; | ||
| max-width: 1000%; | ||
| color: black; | ||
| padding: 1em; | ||
| margin: 0 0 2em 0; | ||
| align-items: center; | ||
| position: sticky; | ||
| top: 10%; | ||
| outline: magenta solid 3px; | ||
| } | ||
| section { | ||
| scroll-snap-align: start; | ||
| } | ||
| </style> |
Oops, something went wrong.