nextlevelshit
/
dailysh.it
1
0
Fork 0
Code

WIP

This commit is contained in:
Michael Czechowski 2024-09-12 23:11:17 +02:00
parent a1ba106e0c
commit 9a4a7ef140
Signed by: nextlevelshit
GPG Key ID: 3DB96851AACDE749
14 changed files with 1275 additions and 893 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1528
index.html
View File

File diff suppressed because it is too large Load Diff

51
package.json
View File

@ -1,18 +1,37 @@
{
"name": "nls-parcel-dailyshit",
"version": "1.0.0-0",
"description": "",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel index.html --open",
"build": "parcel build index.html"
},
"author": "Michael Werner Czechowski <mail@dailysh.it>",
"license": "Apache-2.0",
"devDependencies": {
"parcel-bundler": "^1.10.3",
"sass": "^1.16.0",
"typescript": "^3.2.1"
}
"name": "nls-parcel-dailyshit",
"version": "1.0.0-0",
"description": "",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel index.html --open",
"build": "parcel build index.html",
"format": "npx prettier --write src/**/*.ts index.html package.json",
"scp": "scp -r ./dist/* tengo@tuttle.uberspace.de:/home/tengo/html",
"deploy": "rm -rf ./dist && npm run build && npm run scp"
},
"author": "Michael Werner Czechowski <mail@dailysh.it>",
"license": "Apache-2.0",
"devDependencies": {
"parcel-bundler": "^1.10.3",
"sass": "^1.16.0",
"typescript": "^3.2.1"
},
"prettier": {
"singleQuote": false,
"tabWidth": 4,
"semi": true,
"arrowParens": "always",
"useTabs": true,
"jsxSingleQuote": false,
"bracketSpacing": false,
"printWidth": 160,
"trailingComma": "all",
"bracketSameLine": false,
"htmlWhitespaceSensitivity": "strict",
"proseWrap": "never",
"singleAttributePerLine": false,
"editorconfig": true
}
}

2
public/robots.txt Normal file
View File

@ -0,0 +1,2 @@
User-agent: *
Disallow: /*.pdf$

BIN
src/assets/og-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

BIN
src/assets/twitter-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

27
src/events.ts
View File

@ -1,12 +1,19 @@
export default () => {
const sectionList: NodeListOf<HTMLElement> = document.querySelectorAll('section');
const sectionList: NodeListOf<HTMLElement> = document.querySelectorAll("section");
sectionList.forEach(section => {
section.addEventListener('click', (e) => {
console.log('click', e.target);
});
section.addEventListener('touchstart', (e) => {
console.log('touchstart', e.target);
});
});
};
sectionList.forEach((section) => {
section.addEventListener("click", (e) => {
console.log("click", e.target);
});
section.addEventListener("touchstart", (e) => {
console.log("touchstart", e.target);
});
});
// Add event listener to the document that changes the background color successively to another color
document.addEventListener("scroll", (e) => {
const randomColor = Math.floor(Math.random() * 16777215).toString(16);
console.log("scroll", e.target, randomColor);
document.body.style.backgroundColor = `#${randomColor}`;
});
};

5
src/index.ts
View File

@ -1,4 +1,3 @@
import events from './events';
import './styles/index.scss';
import events from "./events";
events();
events();

103
src/styles/_base.scss
View File

@ -1,103 +0,0 @@
@import "variables";
html, body {
margin: 0;
padding: 0;
// font-size: 1.42vh;
font-size: 1.68vh;
font-family: 'Courier New', Courier, monospace;
@media (max-height: $breakpoint-height) {
font-size: 2.78vh;
// font-size: 3vh;
}
// @media (max-width: $breakpoint-width - 1px) {
// font-size: 3vh;
// }
}
main {
display: flex;
flex-direction: column;
}
svg {
display: block;
max-width: 80vw;
margin: 0 auto;
fill: $nls-color-white;
}
h1 {
font-size: 200%;
@media (min-width: $breakpoint) {
font-size: 300%;
}
}
h2 {}
h3 {
font-weight: normal;
}
p {
line-height: 125%;
}
a {
color: $nls-color-white;
}
img {
@media (max-width: $breakpoint) {
margin: 0 auto 2rem;
display: block;
}
mix-blend-mode: color-burn;
max-width: 100%; height: auto; width: 100%;
}
article {
header {
position: sticky;
bottom: 100vh;
height: 100vh;
overflow: hidden;
}
footer {
top: 0;
position: sticky;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
section {
min-height: 200vh;
// padding: 5rem 3rem;
padding-top: 6rem;
p {
margin: 1rem 3rem 6rem;
}
object {
position: absolute;
bottom: 0;
display: block;
margin: 5rem auto 0;
width: 100vw;
@media (min-width: $breakpoint-width) {
width: 80vw;
}
}
}
}
}

15
src/styles/_cards.scss
View File

@ -1,15 +0,0 @@
@import "variables";
.cards {
$this-horizontal-margin: 2rem;
display: flex; flex-wrap: wrap;
margin: 0 ($this-horizontal-margin * .5); padding: 0;
&__item {
flex: 1 1 30%;
list-style-type: none;
border: 1px solid $nls-color-white; border-radius: 0.2rem;
padding: 2rem 3rem; margin: 1rem $this-horizontal-margin * .5;
}
}

14
src/styles/_columns.scss
View File

@ -1,14 +0,0 @@
@import "./variables";
.columns {
display: flex; flex-flow: column; flex-wrap: nowrap;
@media (min-width: $breakpoint) {
flex-flow: row;
}
&__item {
flex-grow: 1;
flex-basis: 0;
}
}

28
src/styles/_helpers.scss
View File

@ -1,28 +0,0 @@
@import "variables";
.--large {
font-size: 150%;
}
.--center {
text-align: center;
}
.--secondary {
opacity: 0.6;
}
.--paragraph {
$this-padding: 20vw;
@media (min-width: $breakpoint) {
padding-right: $this-padding ;
}
&.--center {
@media (min-width: $breakpoint) {
padding-right: $this-padding * 0.5;
padding-left: $this-padding * 0.5;
}
}
}

22
src/styles/_variables.scss
View File

@ -1,22 +0,0 @@
// COLORS
//
// $nls-color-green: #6CBC82;
// $nls-color-blue: #1D73AD;
// $nls-color-violet: #4E59B7;
// $nls-color-purple: #AA66A5;
// $nls-color-pink: #E54975;
$nls-color-green: #79C28D;
$nls-color-blue: #5A99C3;
$nls-color-violet: #7E86CA;
$nls-color-purple: #C18FBD;
$nls-color-pink: #EC7A9A;
$nls-color-white: #fff;
$nls-color-black: #0f0f11;
//
// RESPONSIVE
//
$breakpoint: 640px;
// $breakpoint-height: 360px;
$breakpoint-height: 568px;
$breakpoint-width: 640px;

246
src/styles/index.css
View File

@ -1,246 +0,0 @@
html, body {
margin: 0;
padding: 0;
font-size: 1.42;
font-family: "Courier New", Courier, monospace;
}
main {
display: flex;
flex-direction: column;
}
svg {
display: block;
max-width: 80vw;
margin: 0 auto;
fill: #fff;
}
h1 {
font-size: 200%;
}
@media (min-width: 980px) {
h1 {
font-size: 300%;
}
}
h3 {
font-weight: normal;
}
p {
line-height: 125%;
}
a {
color: #fff;
}
img {
mix-blend-mode: color-burn;
max-width: 100%;
height: auto;
width: 100%;
}
@media (max-width: 980px) {
img {
margin: 0 auto 2rem;
display: block;
}
}
article header {
height: 100vh;
}
article footer {
height: 200vh;
}
.--large {
font-size: 150%;
}
.--center {
text-align: center;
}
.--secondary {
opacity: 0.6;
}
@media (min-width: 980px) {
.--paragraph {
padding-right: 20vw;
}
}
@media (min-width: 980px) {
.--paragraph.--center {
padding-right: 10vw;
padding-left: 10vw;
}
}
article > section,
article > header,
article > footer {
top: 0;
position: sticky;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
display: flex;
flex-direction: column;
justify-content: start;
height: 90vh;
overflow: hidden;
}
@media (min-width: 980px) {
article > section,
article > header,
article > footer {
height: 80vh;
}
}
article > section.--selected, article > section.--full-height,
article > header.--selected,
article > header.--full-height,
article > footer.--selected,
article > footer.--full-height {
height: 100vh;
}
article > section.--black,
article > header.--black,
article > footer.--black {
background: #0f0f11;
color: #fff;
}
article > section.--black .teaser:after,
article > header.--black .teaser:after,
article > footer.--black .teaser:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(to top, #0f0f11 0%, rgba(15, 15, 17, 0) 50%);
}
article > section.--green,
article > header.--green,
article > footer.--green {
background: #79C28D;
}
article > section.--green .teaser:after,
article > header.--green .teaser:after,
article > footer.--green .teaser:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(to top, #79C28D 0%, rgba(121, 194, 141, 0) 50%);
}
article > section.--blue,
article > header.--blue,
article > footer.--blue {
background: #5A99C3;
}
article > section.--blue .teaser:after,
article > header.--blue .teaser:after,
article > footer.--blue .teaser:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(to top, #5A99C3 0%, rgba(90, 153, 195, 0) 50%);
}
article > section.--violet,
article > header.--violet,
article > footer.--violet {
background: #7E86CA;
}
article > section.--violet .teaser:after,
article > header.--violet .teaser:after,
article > footer.--violet .teaser:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(to top, #7E86CA 0%, rgba(126, 134, 202, 0) 50%);
}
article > section.--purple,
article > header.--purple,
article > footer.--purple {
background: #C18FBD;
}
article > section.--purple .teaser:after,
article > header.--purple .teaser:after,
article > footer.--purple .teaser:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(to top, #C18FBD 0%, rgba(193, 143, 189, 0) 50%);
}
article > section.--pink,
article > header.--pink,
article > footer.--pink {
background: #EC7A9A;
}
article > section.--pink .teaser:after,
article > header.--pink .teaser:after,
article > footer.--pink .teaser:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(to top, #EC7A9A 0%, rgba(236, 122, 154, 0) 50%);
}
article > section .teaser,
article > header .teaser,
article > footer .teaser {
overflow: hidden;
padding: 5rem 3rem;
}
.cards {
display: flex;
flex-wrap: wrap;
margin: 0 1rem;
padding: 0;
}
.cards__item {
flex: 1 1 30%;
list-style-type: none;
border: 1px solid #fff;
border-radius: 0.2rem;
padding: 2rem 3rem;
margin: 1rem 1rem;
}
.columns {
display: flex;
flex-flow: column;
flex-wrap: nowrap;
}
@media (min-width: 980px) {
.columns {
flex-flow: row;
}
}
.columns__item {
flex-grow: 1;
flex-basis: 0;
}

127
src/styles/index.scss
View File

@ -1,127 +0,0 @@
@import "variables";
@import "base";
@import "helpers";
section {
top: 0;
position: sticky;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
display: flex; flex-direction: column; justify-content: start;
height: 90vh;
overflow: hidden;
@media (min-width: $breakpoint) {
height: 80vh;
}
}
section,
article > header,
article > footer {
// color: $nls-color-white;
&.--selected {
}
&.--selected,
&.--full-height {
height: 100vh;
}
&.--black {
background: $nls-color-black;
color: $nls-color-white;
.teaser {
&:after {
content: '';
position: absolute; top: 0; left: 0;
height: 100%; width: 100%;
background: linear-gradient(to top, $nls-color-black 0%, rgba($nls-color-black, 0) 50%);
}
}
}
&.--green {
background: $nls-color-green;
.teaser {
&:after {
content: '';
position: absolute; top: 0; left: 0;
height: 100%; width: 100%;
background: linear-gradient(to top, $nls-color-green 0%, rgba($nls-color-green, 0) 50%);
}
}
}
&.--blue {
background: $nls-color-blue;
.teaser {
&:after {
content: '';
position: absolute; top: 0; left: 0;
height: 100%; width: 100%;
background: linear-gradient(to top, $nls-color-blue 0%, rgba( $nls-color-blue, 0) 50%);
}
}
}
&.--violet {
background: $nls-color-violet;
.teaser {
&:after {
content: '';
position: absolute; top: 0; left: 0;
height: 100%; width: 100%;
background: linear-gradient(to top, $nls-color-violet 0%, rgba($nls-color-violet, 0) 50%);
}
}
}
&.--purple {
background: $nls-color-purple;
.teaser {
&:after {
content: '';
position: absolute; top: 0; left: 0;
height: 100%; width: 100%;
background: linear-gradient(to top, $nls-color-purple 0%, rgba($nls-color-purple, 0) 50%);
}
}
}
&.--pink {
background: $nls-color-pink;
.teaser {
&:after {
content: '';
position: absolute; top: 0; left: 0;
height: 100%; width: 100%;
background: linear-gradient(to top, $nls-color-pink 0%, rgba( $nls-color-pink, 0) 50%);
}
}
}
.teaser {
overflow: hidden;
padding: 5rem 3rem;
}
}
@import "cards";
@import "columns";