Subheader added.
This commit is contained in:
Jakub Koralewski
parent
3d67435454
commit
9fc7f1012a
BIN
img/thumbnails/common.png
Normal file
BIN
img/thumbnails/common.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 487 KiB |
BIN
img/thumbnails/dont.png
Normal file
BIN
img/thumbnails/dont.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
img/thumbnails/hecomes.gif
Normal file
BIN
img/thumbnails/hecomes.gif
Normal file
Binary file not shown.
BIN
img/thumbnails/podcast.png
Normal file
BIN
img/thumbnails/podcast.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
img/thumbnails/stonks.jpg
Normal file
BIN
img/thumbnails/stonks.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
BIN
img/thumbnails/worm.jpg
Normal file
BIN
img/thumbnails/worm.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 857 KiB |
@ -14,18 +14,72 @@
|
||||
</head>
|
||||
<body>
|
||||
<header id="main-header">
|
||||
<div id="hamburger" class="hover-pointer">
|
||||
<div id="top"></div>
|
||||
<div id="middle"></div>
|
||||
<div id="bottom"></div>
|
||||
</div>
|
||||
<div id="search" class="hover-pointer">
|
||||
<i class="fas fa-search"></i>
|
||||
<input class="hidden-input" placeholder="Search for noose">
|
||||
</div>
|
||||
<div id="hamburger" class="hover-pointer">
|
||||
<div id="top"></div>
|
||||
<div id="middle"></div>
|
||||
<div id="bottom"></div>
|
||||
</div>
|
||||
<div id="search" class="hover-pointer">
|
||||
<i class="fas fa-search"></i>
|
||||
<input class="hidden-input" placeholder="Search for noose">
|
||||
</div>
|
||||
<h1>THE TAJMS</h1>
|
||||
<div id="date"></div>
|
||||
</header>
|
||||
<div id="sub-header">
|
||||
<div id="grid">
|
||||
<figure>
|
||||
<img src="../img/thumbnails/podcast.png"
|
||||
alt="Podcast">
|
||||
|
||||
<figcaption>
|
||||
<h3>Listen to our podcast.</h3>
|
||||
<p>Everyone has a podcast.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img alt="Worm." src="../img/thumbnails/worm.jpg">
|
||||
|
||||
<figcaption>
|
||||
<h3>Top Songs of 2049.</h3>
|
||||
<p>Crazy year huh.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img alt="Worm." src="../img/thumbnails/common.png">
|
||||
|
||||
<figcaption>
|
||||
<h3>He has arrived.</h3>
|
||||
<p>Indeed.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img alt="Do not." src="../img/thumbnails/dont.png">
|
||||
|
||||
<figcaption>
|
||||
<h3>Don't even consider running.</h3>
|
||||
<p>You can hide but you can't hide.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure id="stocks">
|
||||
<img alt="Stocks." src="../img/thumbnails/stonks.jpg">
|
||||
<div id="stocks">
|
||||
<div class="stock">
|
||||
<header>XD</header>
|
||||
<p class="p">+10%</p>
|
||||
</div>
|
||||
<div class="stock">
|
||||
<header>UAM</header>
|
||||
<p class="p">+100%</p>
|
||||
</div>
|
||||
<div class="stock">
|
||||
<header>PP</header>
|
||||
<p class="m">-100%</p>
|
||||
</div>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>Home Page</li>
|
||||
@ -36,8 +90,8 @@
|
||||
<li>Business</li>
|
||||
<li>Opinion</li>
|
||||
<li>Tech</li>
|
||||
<li>Best Student of The Year</li>
|
||||
<li>Best Teacher of The Decade</li>
|
||||
<li id="?">Best Student of The Year</li>
|
||||
<li id="xd">Best Teacher of The Decade</li>
|
||||
<li>Health</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
162
src/index.scss
162
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;
|
||||
}
|
||||
|
||||
19
src/index.ts
19
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);
|
||||
|
||||
202
src/styles/header.scss
Normal file
202
src/styles/header.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
36
src/styles/nav.scss
Normal file
36
src/styles/nav.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user