diff --git a/img/thumbnails/common.png b/img/thumbnails/common.png
new file mode 100644
index 0000000..d65078f
Binary files /dev/null and b/img/thumbnails/common.png differ
diff --git a/img/thumbnails/dont.png b/img/thumbnails/dont.png
new file mode 100644
index 0000000..af042c8
Binary files /dev/null and b/img/thumbnails/dont.png differ
diff --git a/img/thumbnails/hecomes.gif b/img/thumbnails/hecomes.gif
new file mode 100644
index 0000000..bb462aa
Binary files /dev/null and b/img/thumbnails/hecomes.gif differ
diff --git a/img/thumbnails/podcast.png b/img/thumbnails/podcast.png
new file mode 100644
index 0000000..700dde9
Binary files /dev/null and b/img/thumbnails/podcast.png differ
diff --git a/img/thumbnails/stonks.jpg b/img/thumbnails/stonks.jpg
new file mode 100644
index 0000000..b879989
Binary files /dev/null and b/img/thumbnails/stonks.jpg differ
diff --git a/img/thumbnails/worm.jpg b/img/thumbnails/worm.jpg
new file mode 100644
index 0000000..b002dbb
Binary files /dev/null and b/img/thumbnails/worm.jpg differ
diff --git a/src/index.html b/src/index.html
index 5c4bc10..105b2a3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,18 +14,72 @@
+
diff --git a/src/index.scss b/src/index.scss
index 47005f9..1c426a0 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -7,7 +7,7 @@ $secondary: green;
body {
font-family: 'Lato', sans-serif;
- padding: 2rem 2rem 2rem 2rem;
+ padding: 2rem 4rem 2rem 4rem;
#click-catcher {
display: none;
@@ -30,162 +30,6 @@ body {
}
}
-nav {
- $bg-color: white;
- position: fixed;
- top: 0;
- left: 0;
- transform: translateX(-100%);
- transition: transform 500ms ease-in-out;
- background-color: $bg-color;
- min-height: 100vh;
- padding: 1rem;
- z-index: 10;
+@import './styles/nav.scss';
+@import './styles/header.scss';
- ul {
- overflow-y: auto;
- li {
- list-style-type: none;
- padding: 5px;
- margin-top: 0.2rem;
- font-weight: 500;
- border-radius: 0.5rem;
- &.active {
- font-weight: 600;
- }
- &:hover {
- cursor: pointer;
- background-color: mix($secondary, darken($bg-color, 10%), 10%);
- }
- }
- }
-
- &.active {
- transform: translateX(0);
- }
-}
-
-header#main-header {
- display: flex;
- width: 100%;
- flex-direction: row;
- align-items: center;
- border-bottom: 2px solid mix(black, $secondary, 50%);
- padding-bottom: 1rem;
- margin-bottom: 1rem;
-
- $input-width: 10rem;
-
- #date {
- align-self: end;
- small {
- font-style: italic;
- color: $secondary;
- }
- }
-
- h1 {
- $font-size: 4rem;
- font-weight: 100;
- font-size: $font-size;
- font-family: 'Bungee Inline', serif;
- transform: translateX(-#{$input-width/2});
- margin-left: auto;
- user-select: none;
- width: 100%;
- //text-align: center;
- height: $font-size;
- display: flex;
- //align-items: ;
-justify-content: center;
- align-items: center;
-
- span {
- &:hover {
- transform: translateY(5px);
- transition-duration: 0.2s;
- }
- &.empty {
- width: $font-size/4;
- }
- //height: $font-size;
- display: inline-block;
- //height: $font-size;
- transform: translateY(0px);
- transition: 0.3s transform ease-in-out;
- }
- }
-
- div#search {
- color: $secondary;
- display: inline-flex;
- flex-direction: row;
-
- &.active {
- input.hidden-input {
- transform: scaleX(1) translateX(-2px) !important;
- transition-duration: 0.2s;
- border: 2px solid black !important;
- }
- }
-
- input.hidden-input {
- margin-left: 1rem;
- transform: scaleX(0);
- transform-origin: left;
- width: $input-width;
- height: 1rem;
- padding: 10px 12px;
- border-width: 0;
- transition-property: transform, border-width;
- transition-duration: 1s;
- transition-timing-function: ease-in-out;
- }
-
- i {
- margin-left: 1rem;
- }
- }
-
- #hamburger {
- $gap: 4px;
- $size: 4px;
- $width: 2rem;
-
- width: $width;
- display: flex;
- flex-direction: column;
-
- &:hover {
- #top {
- transform: translateX(-3px);
- }
-
- #bottom {
- transform: translateX(3px);
- }
- }
-
-
- & > div {
- width: 100%;
- background-color: black;
- height: $size;
- border-radius: 3px;
- }
-
- #top {
- transition: transform 1s cubic-bezier(0.2, -2, 0.2, 2);
- margin-bottom: $gap;
- }
-
- #bottom {
- transition: transform 1s cubic-bezier(0.2, -2, 0.2, 2);
- margin-top: $gap;
- }
- }
-}
-
-article {
- background-color: blue;
-}
diff --git a/src/index.ts b/src/index.ts
index 40f90ea..47e47a7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,7 +5,7 @@ let search = {
isActive: false,
active: (elem: HTMLElement) => {
search.isActive = !search.isActive;
- if(search.isActive) {
+ if (search.isActive) {
elem.classList.add("active");
} else {
search.input.value = "";
@@ -25,7 +25,7 @@ let nav = {
activeListItem: null as HTMLLIElement,
active: () => {
nav.isActive = !nav.isActive;
- if(nav.isActive) {
+ if (nav.isActive) {
[nav.nav, nav.clickCatcher]
.forEach(
(x) => x.classList.remove("active"));
@@ -53,7 +53,16 @@ let nav = {
nav.activeListItem.classList.add("active");
},
listItemClick: (e: Event) => {
- nav.setActiveListItem(e.target as HTMLLIElement);
+ const target = e.target as HTMLLIElement;
+ switch (target.id) {
+ case "xd":
+ alert("bap");
+ break;
+ case "?":
+ alert("me");
+ break;
+ }
+ nav.setActiveListItem(target);
}
};
nav.listItems = nav.nav.querySelectorAll("ul > li");
@@ -73,10 +82,10 @@ let header = {
makeHeaderAnimatable: () => {
const text = header.h1.innerText.trim();
header.h1.innerHTML = "";
- for(const letter of text) {
+ for (const letter of text) {
const span = document.createElement("span");
span.innerText = letter;
- if(letter === " ") {
+ if (letter === " ") {
span.classList.add("empty");
}
header.h1.appendChild(span);
diff --git a/src/styles/header.scss b/src/styles/header.scss
new file mode 100644
index 0000000..7400c6f
--- /dev/null
+++ b/src/styles/header.scss
@@ -0,0 +1,202 @@
+header#main-header {
+ display: flex;
+ width: 100%;
+ flex-direction: row;
+ align-items: center;
+ border-bottom: 2px solid mix(black, $secondary, 50%);
+ padding-bottom: 1rem;
+ margin-bottom: 1rem;
+
+ $input-width: 10rem;
+
+ #date {
+ align-self: end;
+
+ small {
+ font-style: italic;
+ color: $secondary;
+ }
+ }
+
+ h1 {
+ $font-size: 4rem;
+ font-weight: 100;
+ font-size: $font-size;
+ font-family: 'Bungee Inline', serif;
+ transform: translateX(-#{$input-width/2});
+ margin-left: auto;
+ user-select: none;
+ width: 100%;
+ //text-align: center;
+ height: $font-size;
+ display: flex;
+ //align-items: ;
+ justify-content: center;
+ align-items: center;
+
+ span {
+ &:hover {
+ transform: translateY(5px);
+ transition-duration: 0.2s;
+ }
+
+ &.empty {
+ width: $font-size/4;
+ }
+
+ //height: $font-size;
+ display: inline-block;
+ //height: $font-size;
+ transform: translateY(0px);
+ transition: 0.3s transform ease-in-out;
+ }
+ }
+
+ div#search {
+ color: $secondary;
+ display: inline-flex;
+ flex-direction: row;
+
+ &.active {
+ input.hidden-input {
+ transform: scaleX(1) translateX(-2px) !important;
+ transition-duration: 0.2s;
+ border: 2px solid black !important;
+ }
+ }
+
+ input.hidden-input {
+ margin-left: 1rem;
+ transform: scaleX(0);
+ transform-origin: left;
+ width: $input-width;
+ height: 1rem;
+ padding: 10px 12px;
+ border-width: 0;
+ transition-property: transform, border-width;
+ transition-duration: 1s;
+ transition-timing-function: ease-in-out;
+ }
+
+ i {
+ margin-left: 1rem;
+ }
+ }
+
+ #hamburger {
+ $gap: 4px;
+ $size: 4px;
+ $width: 2rem;
+
+ width: $width;
+ display: flex;
+ flex-direction: column;
+
+ &:hover {
+ #top {
+ transform: translateX(-3px);
+ }
+
+ #bottom {
+ transform: translateX(3px);
+ }
+ }
+
+
+ & > div {
+ width: 100%;
+ background-color: black;
+ height: $size;
+ border-radius: 3px;
+ }
+
+ #top {
+ transition: transform 1s cubic-bezier(0.2, -2, 0.2, 2);
+ margin-bottom: $gap;
+ }
+
+ #bottom {
+ transition: transform 1s cubic-bezier(0.2, -2, 0.2, 2);
+ margin-top: $gap;
+ }
+ }
+}
+
+#sub-header {
+ padding-bottom: 1rem;
+ border-width: 0;
+ border-style: double;
+ border-bottom-width: 3px;
+
+
+ #grid {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-evenly;
+
+ figure {
+
+ &#stocks {
+ border-left: 1px solid black;
+ padding-left: 1rem;
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ img {
+ object-fit: cover;
+ width: 50px;
+ height: 50px;
+ margin-right: 5px;
+ }
+
+ display: flex;
+ flex-direction: row;
+
+ figcaption {
+ p {
+ font-size: 0.8rem;
+ }
+ }
+
+ #stocks {
+ display: flex;
+ flex-direction: column;
+ font-size: 0.7rem;
+
+ .stock {
+ p {
+ &.p {
+ color: green;
+
+ &:after {
+ content: '↜';
+ }
+ }
+
+ &.m {
+ &:after {
+ content: '⇝';
+ }
+
+ color: red;
+ }
+ }
+
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ header {
+ font-weight: 600;
+ margin-right: 5px;
+ margin-left: 5px;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/styles/nav.scss b/src/styles/nav.scss
new file mode 100644
index 0000000..f00ab35
--- /dev/null
+++ b/src/styles/nav.scss
@@ -0,0 +1,36 @@
+nav {
+ $bg-color: white;
+ position: fixed;
+ top: 0;
+ left: 0;
+ transform: translateX(-100%);
+ transition: transform 500ms ease-in-out;
+ background-color: $bg-color;
+ height: 100vh;
+ padding: 1rem;
+ z-index: 10;
+ overflow-y: auto;
+
+ ul {
+ padding-bottom: 1rem;
+ overflow-y: auto;
+ li {
+ list-style-type: none;
+ padding: 5px;
+ margin-top: 0.2rem;
+ font-weight: 500;
+ border-radius: 0.5rem;
+ &.active {
+ font-weight: 600;
+ }
+ &:hover {
+ cursor: pointer;
+ background-color: mix($secondary, darken($bg-color, 10%), 10%);
+ }
+ }
+ }
+
+ &.active {
+ transform: translateX(0);
+ }
+}
+
+ 
+
+ 
+
+ 
+
+ 
+