libretech/M6C9.de
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Activity

migrate to tailwindcss

Browse Source
This commit is contained in:
Michael Czechowski
2024-08-28 00:43:13 +02:00
parent 10dcc8e7fd
commit 4ee9f1fd05
1 changed files with 222 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

346
index.html
View File

@@ -1,54 +1,150 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="scroll-smooth">
<head> <head>
<title></title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Michael W. Czechowski</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'nls-green': '#79C28D',
'nls-blue': '#5A99C3',
'nls-violet': '#7E86CA',
'nls-purple': '#C18FBD',
'nls-pink': '#EC7A9A',
'nls-black': '#0f0f11',
},
},
},
}
</script>
<style>
@media (max-height: 568px) {
html, body {
font-size: 2.78vh;
}
}
svg {
max-width: 80vw;
fill: white;
}
img {
mix-blend-mode: color-burn;
}
.teaser {
position: relative;
overflow: hidden;
}
.teaser::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(to top, var(--gradient-color) 0%, rgba(0, 0, 0, 0) 50%);
pointer-events: none;
}
.bg-nls-green .teaser { --gradient-color: #79C28D; }
.bg-nls-blue .teaser { --gradient-color: #5A99C3; }
.bg-nls-violet .teaser { --gradient-color: #7E86CA; }
.bg-nls-purple .teaser { --gradient-color: #C18FBD; }
.bg-nls-pink .teaser { --gradient-color: #EC7A9A; }
.bg-nls-black .teaser { --gradient-color: #0f0f11; }
@media (min-width: 640px) {
.paragraph-spacing {
padding-right: 20vw;
}
.paragraph-spacing.center {
padding-right: 10vw;
padding-left: 10vw;
}
}
section {
top: 0;
position: sticky;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 90vh;
overflow: hidden;
}
@media (min-width: 640px) {
section {
height: 80vh;
}
}
article > header,
article > footer {
position: sticky;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
}
article > header {
bottom: 100vh;
height: 100vh;
overflow: hidden;
}
article > footer {
top: 0;
}
article > footer section {
min-height: 200vh;
padding-top: 6rem;
}
article > footer section p {
margin: 1rem 3rem 6rem;
}
</style>
</head> </head>
<body> <body class="font-mono text-[1.68vh] m-0 p-0">
<script src="./src/index.ts"></script> <main class="flex flex-col">
<main>
<article> <article>
<header class="--black"> <header class="bg-nls-black text-white">
<div class="teaser"> <div class="teaser p-8 sm:p-20 flex flex-col items-center justify-center h-full">
<div class="--center"> <div class="w-4/5 max-w-3xl mb-8">
<object data="./src/assets/nls.svg" type="image/svg+xml"></object> <object data="./src/assets/nls.svg" type="image/svg+xml" class="w-full"></object>
</div>
<div class="--paragraph --center">
<h1>Michael W. Czechowski</h1>
<div class="--secondary">
<p>
Charles and Ray Eames are counted among the most important figures of twentieth-century
design. Their work spans the fields of furniture design, filmmaking, photography and
exhibition design. Vitra is the sole authorised manufacturer of Eames products for Europe
and the Middle East. When you own an Eames product made by Vitra, you know it is an
original.
</p>
<p>
<a href="https://www.vitra.com/" target="_blank">
Full collection on vitra.com
</a>
</p>
</div> </div>
<div class="text-center max-w-3xl center py-4">
<h1 class="text-xl sm:text-6xl mb-4 opacity-60">hello·at·dailysh.it</h1>
</div> </div>
</div> </div>
</header> </header>
<section class="--green"> <section class="bg-nls-green">
<div class="teaser"> <div class="teaser p-8 sm:p-20 flex flex-col h-full">
<div class="columns"> <div class="flex flex-col sm:flex-row items-center sm:items-start">
<div class="columns__item"> <div class="w-full sm:w-1/2 mb-8 sm:mb-0">
<img src="https://www.vitra.com/de-de/_storage/asset/2397344/storage/v_thumb_250x/33223561.jpg" <img src="https://www.vitra.com/de-de/_storage/asset/2397344/storage/v_thumb_250x/33223561.jpg"
alt="Picture of Lounge Chair & Ottoman"> alt="Picture of Lounge Chair & Ottoman" class="w-full h-auto">
</div> </div>
<div class="columns__item"> <div class="w-full sm:w-1/2 sm:pl-8">
<h2>Software Developer</h2> <h2 class="text-2xl mb-2">Software Developer</h2>
<h3 class="--secondary">PONS Langenscheidt GmbH</h3> <h3 class="text-xl mb-4 opacity-60">PONS Langenscheidt GmbH</h3>
<p> <p class="paragraph-spacing">
The Lounge Chair, created by Charles and Ray Eames in the 1950s, was designed with the aim The Lounge Chair, created by Charles and Ray Eames in the 1950s, was designed with the aim
of combining an elegant appearance with ultimate comfort. It has been produced by Vitra of combining an elegant appearance with ultimate comfort. It has been produced by Vitra
using virtually the same methods ever since, and is now recognised as a great classic of using virtually the same methods ever since, and is now recognised as a great classic of
@@ -61,44 +157,41 @@
</div> </div>
</section> </section>
<section class="--blue"> <section class="bg-nls-blue">
<div class="teaser"> <div class="teaser p-8 sm:p-20 flex flex-col h-full">
<div class="columns"> <div class="flex flex-col sm:flex-row items-center sm:items-start">
<div class="columns__item"> <div class="w-full sm:w-1/2 mb-8 sm:mb-0">
<img src="//www.vitra.com/de-de/_storage/asset/2397735/storage/v_thumb_250x/33148466.jpg" <img src="//www.vitra.com/de-de/_storage/asset/2397735/storage/v_thumb_250x/33148466.jpg"
alt="Picture of Lounge Chair Plywood Group LCW"> alt="Picture of Lounge Chair Plywood Group LCW" class="w-full h-auto">
</div> </div>
<div class="columns__item"> <div class="w-full sm:w-1/2 sm:pl-8">
<h2>University Lecturer</h2> <h2 class="text-2xl mb-2">University Lecturer</h2>
<h3 class="--secondary">Duale Hochschule Badenwürttemberg, Stuttgart</h3> <h3 class="text-xl mb-4 opacity-60">Duale Hochschule Badenwürttemberg, Stuttgart</h3>
<ul> <ul class="list-disc list-inside mb-4">
<li>2022 – 2021 · Social Engineering</li> <li>2022 – 2021 · Social Engineering</li>
<li>2022 – 2021 · Social Engineering</li> <li>2022 – 2021 · Social Engineering</li>
</ul> </ul>
<h3 class="--secondary">Leibniz-Fachhochschule, Hannover</h3> <h3 class="text-xl mb-4 opacity-60">Leibniz-Fachhochschule, Hannover</h3>
<ul> <ul class="list-disc list-inside">
<li>2022 – 2021 · Social Engineering</li> <li>2022 – 2021 · Social Engineering</li>
<li>2022 – 2021 · Social Engineering</li> <li>2022 – 2021 · Social Engineering</li>
</ul> </ul>
<p>
</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="--violet"> <section class="bg-nls-violet">
<div class="teaser"> <div class="teaser p-8 sm:p-20 flex flex-col h-full">
<div class="columns"> <div class="flex flex-col sm:flex-row items-center sm:items-start">
<div class="columns__item"> <div class="w-full sm:w-1/2 mb-8 sm:mb-0">
<img src="//www.vitra.com/en-ie/_storage/asset/2397703/storage/v_thumb_250x/33148452.jpg" <img src="//www.vitra.com/en-ie/_storage/asset/2397703/storage/v_thumb_250x/33148452.jpg"
alt="Picture of Plywood Group LCM"> alt="Picture of Plywood Group LCM" class="w-full h-auto">
</div> </div>
<div class="columns__item"> <div class="w-full sm:w-1/2 sm:pl-8">
<h2>Plywood Group LCM</h2> <h2 class="text-2xl mb-2">Plywood Group LCM</h2>
<h3 class="--secondary">Charles & Ray Eames, 1945/1946</h3> <h3 class="text-xl mb-4 opacity-60">Charles & Ray Eames, 1945/1946</h3>
<p> <p class="paragraph-spacing">
Due to the slender organic shapes of its seat and back shells, the LCM (Lounge Chair Metal) Due to the slender organic shapes of its seat and back shells, the LCM (Lounge Chair Metal)
by Charles and Ray Eames quickly acquired the nickname 'potato chip chair'. by Charles and Ray Eames quickly acquired the nickname 'potato chip chair'.
</p> </p>
@@ -107,17 +200,17 @@
</div> </div>
</section> </section>
<section class="--purple"> <section class="bg-nls-purple">
<div class="teaser"> <div class="teaser p-8 sm:p-20 flex flex-col h-full">
<div class="columns"> <div class="flex flex-col sm:flex-row items-center sm:items-start">
<div class="columns__item"> <div class="w-full sm:w-1/2 mb-8 sm:mb-0">
<img src="//www.vitra.com/en-ie/_storage/asset/1765634/storage/v_thumb_250x/22408057.jpg" <img src="//www.vitra.com/en-ie/_storage/asset/1765634/storage/v_thumb_250x/22408057.jpg"
alt="Picture of Eames Plastic Armchair DAW"> alt="Picture of Eames Plastic Armchair DAW" class="w-full h-auto">
</div> </div>
<div class="columns__item"> <div class="w-full sm:w-1/2 sm:pl-8">
<h2>Eames Plastic Armchair DAW</h2> <h2 class="text-2xl mb-2">Eames Plastic Armchair DAW</h2>
<h3 class="--secondary">Charles & Ray Eames, 1950</h3> <h3 class="text-xl mb-4 opacity-60">Charles & Ray Eames, 1950</h3>
<p> <p class="paragraph-spacing">
Today the Plastic Chairs by Charles and Ray Eames seem like archetypes of the genre of Today the Plastic Chairs by Charles and Ray Eames seem like archetypes of the genre of
chairs whose shell can be combined with diverse bases. The combination of the wooden base chairs whose shell can be combined with diverse bases. The combination of the wooden base
with the plastic shell of the DAW (Dining Height Armchair Wood Base) produces a rich with the plastic shell of the DAW (Dining Height Armchair Wood Base) produces a rich
@@ -129,17 +222,17 @@
</div> </div>
</section> </section>
<section class="--green"> <section class="bg-nls-green">
<div class="teaser"> <div class="teaser p-8 sm:p-20 flex flex-col h-full">
<div class="columns"> <div class="flex flex-col sm:flex-row items-center sm:items-start">
<div class="columns__item"> <div class="w-full sm:w-1/2 mb-8 sm:mb-0">
<img src="//www.vitra.com/en-ie/_storage/asset/1608035/storage/v_thumb_250x/19458579.jpg" <img src="//www.vitra.com/en-ie/_storage/asset/1608035/storage/v_thumb_250x/19458579.jpg"
alt="Picture of Eames Plastic Armchair DAW"> alt="Picture of Eames Plastic Armchair DAW" class="w-full h-auto">
</div> </div>
<div class="columns__item"> <div class="w-full sm:w-1/2 sm:pl-8">
<h2>Lobby Chair ES 108</h2> <h2 class="text-2xl mb-2">Lobby Chair ES 108</h2>
<h3 class="--secondary">Charles & Ray Eames, 1960</h3> <h3 class="text-xl mb-4 opacity-60">Charles & Ray Eames, 1960</h3>
<p> <p class="paragraph-spacing">
Charles and Ray Eames originally designed the Lobby Chairs to furnish lobby areas in New Charles and Ray Eames originally designed the Lobby Chairs to furnish lobby areas in New
York City's Time & Life Building. Like all models of the Lobby Chair, the conference chair York City's Time & Life Building. Like all models of the Lobby Chair, the conference chair
ES 108 has luxuriant leather-covered cushions that offer excellent comfort. The upholstery ES 108 has luxuriant leather-covered cushions that offer excellent comfort. The upholstery
@@ -150,17 +243,17 @@
</div> </div>
</section> </section>
<section class="--blue"> <section class="bg-nls-blue">
<div class="teaser"> <div class="teaser p-8 sm:p-20 flex flex-col h-full">
<div class="columns"> <div class="flex flex-col sm:flex-row items-center sm:items-start">
<div class="columns__item"> <div class="w-full sm:w-1/2 mb-8 sm:mb-0">
<img src="//www.vitra.com/en-ie/_storage/asset/2271518/storage/v_thumb_250x/31196004.jpg" <img src="//www.vitra.com/en-ie/_storage/asset/2271518/storage/v_thumb_250x/31196004.jpg"
alt="Picture of Eames Fiberglass Side Chair DSW"> alt="Picture of Eames Fiberglass Side Chair DSW" class="w-full h-auto">
</div> </div>
<div class="columns__item"> <div class="w-full sm:w-1/2 sm:pl-8">
<h2>Eames Fiberglass Side Chair DSW</h2> <h2 class="text-2xl mb-2">Eames Fiberglass Side Chair DSW</h2>
<h3 class="--secondary">Charles & Ray Eames, 1950</h3> <h3 class="text-xl mb-4 opacity-60">Charles & Ray Eames, 1950</h3>
<p> <p class="paragraph-spacing">
For the Dining Height Side Chair Wood Base (DSW), Charles and Ray Eames combined the For the Dining Height Side Chair Wood Base (DSW), Charles and Ray Eames combined the
organically shaped seat shell with a four-legged wooden base. The pairing of plastic and organically shaped seat shell with a four-legged wooden base. The pairing of plastic and
wood gives the classic design a certain warmth and casual appeal. The seat shells can be wood gives the classic design a certain warmth and casual appeal. The seat shells can be
@@ -172,17 +265,17 @@
</div> </div>
</section> </section>
<section class="--violet"> <section class="bg-nls-violet">
<div class="teaser"> <div class="teaser p-8 sm:p-20 flex flex-col h-full">
<div class="columns"> <div class="flex flex-col sm:flex-row items-center sm:items-start">
<div class="columns__item"> <div class="w-full sm:w-1/2 mb-8 sm:mb-0">
<img src="//www.vitra.com/en-ie/_storage/asset/1374562/storage/v_thumb_250x/33148698.jpg" <img src="//www.vitra.com/en-ie/_storage/asset/1374562/storage/v_thumb_250x/33148698.jpg"
alt="Picture of Aluminium Chairs EA 115/116"> alt="Picture of Aluminium Chairs EA 115/116" class="w-full h-auto">
</div> </div>
<div class="columns__item"> <div class="w-full sm:w-1/2 sm:pl-8">
<h2>Aluminium Chairs EA 115/116</h2> <h2 class="text-2xl mb-2">Aluminium Chairs EA 115/116</h2>
<h3 class="--secondary">Charles & Ray Eames, 1958</h3> <h3 class="text-xl mb-4 opacity-60">Charles & Ray Eames, 1958</h3>
<p> <p class="paragraph-spacing">
The <strong>Aluminium</strong> Chairs EA 115 and EA 116 offer superb comfort with their high The <strong>Aluminium</strong> Chairs EA 115 and EA 116 offer superb comfort with their high
backrest. The seating height is designed so that users can easily rise from the chair. Both backrest. The seating height is designed so that users can easily rise from the chair. Both
versions are available with <strong>fabric</strong>, <strong>leather</strong> or <strong>mesh versions are available with <strong>fabric</strong>, <strong>leather</strong> or <strong>mesh
@@ -194,17 +287,17 @@
</div> </div>
</section> </section>
<section class="--purple"> <section class="bg-nls-purple">
<div class="teaser"> <div class="teaser p-8 sm:p-20 flex flex-col h-full">
<div class="columns"> <div class="flex flex-col sm:flex-row items-center sm:items-start">
<div class="columns__item"> <div class="w-full sm:w-1/2 mb-8 sm:mb-0">
<img src="//www.vitra.com/en-ie/_storage/asset/2555777/storage/v_thumb_250x/38178076.jpg" <img src="//www.vitra.com/en-ie/_storage/asset/2555777/storage/v_thumb_250x/38178076.jpg"
alt="Picture of Soft Pad Chairs EA 217/219"> alt="Picture of Soft Pad Chairs EA 217/219" class="w-full h-auto">
</div> </div>
<div class="columns__item"> <div class="w-full sm:w-1/2 sm:pl-8">
<h2>Soft Pad Chairs EA 217/219</h2> <h2 class="text-2xl mb-2">Soft Pad Chairs EA 217/219</h2>
<h3 class="--secondary">Charles & Ray Eames, 1969</h3> <h3 class="text-xl mb-4 opacity-60">Charles & Ray Eames, 1969</h3>
<p> <p class="paragraph-spacing">
The <strong>office chairs</strong> EA 217 and EA 219 by Charles and Ray Eames are a perfect The <strong>office chairs</strong> EA 217 and EA 219 by Charles and Ray Eames are a perfect
choice for the well-appointed home office. The tilt mechanism, which can be adjusted to the choice for the well-appointed home office. The tilt mechanism, which can be adjusted to the
user's weight, is paired with soft cushions to provide excellent comfort. The higher user's weight, is paired with soft cushions to provide excellent comfort. The higher
@@ -215,52 +308,33 @@
</div> </div>
</section> </section>
<footer class="--black"> <footer class="sticky top-0 bg-nls-black text-white">
<section class="--paragraph --center"> <section class="p-8 sm:p-20 min-h-[120vh]">
<h2>Idea</h2> <div class="max-w-3xl mx-auto">
<p> <h2 class="text-2xl mb-4">Idea</h2>
<p class="mb-8 paragraph-spacing">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, quisquam. Explicabo id Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, quisquam. Explicabo id
consequuntur dolores asperiores, nulla est neque aliquid illo itaque soluta libero culpa consequuntur dolores asperiores, nulla est neque aliquid illo itaque soluta libero culpa
necessitatibus ad dolorem corrupti voluptates eos. necessitatibus ad dolorem corrupti voluptates eos.
</p> </p>
<h2>Author</h2> <h2 class="text-2xl mb-4">Author</h2>
<p> <p class="mb-8 paragraph-spacing">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, quisquam. Explicabo id Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, quisquam. Explicabo id
consequuntur dolores asperiores, nulla est neque aliquid illo itaque soluta libero culpa consequuntur dolores asperiores, nulla est neque aliquid illo itaque soluta libero culpa
necessitatibus ad dolorem corrupti voluptates eos. necessitatibus ad dolorem corrupti voluptates eos.
</p> </p>
<h2>Disclaimer</h2> <h2 class="text-2xl mb-4">Disclaimer</h2>
<p> <p class="mb-8 paragraph-spacing">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, quisquam. Explicabo id Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, quisquam. Explicabo id
consequuntur dolores asperiores, nulla est neque aliquid illo itaque soluta libero culpa consequuntur dolores asperiores, nulla est neque aliquid illo itaque soluta libero culpa
necessitatibus ad dolorem corrupti voluptates eos. necessitatibus ad dolorem corrupti voluptates eos.
</p> </p>
</div>
<!--
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, quisquam. Explicabo id consequuntur dolores asperiores, nulla est neque aliquid illo itaque soluta libero culpa necessitatibus ad dolorem corrupti voluptates eos.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, quisquam. Explicabo id consequuntur dolores asperiores, nulla est neque aliquid illo itaque soluta libero culpa necessitatibus ad dolorem corrupti voluptates eos.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, quisquam. Explicabo id consequuntur dolores asperiores, nulla est neque aliquid illo itaque soluta libero culpa necessitatibus ad dolorem corrupti voluptates eos.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, quisquam. Explicabo id consequuntur dolores asperiores, nulla est neque aliquid illo itaque soluta libero culpa necessitatibus ad dolorem corrupti voluptates eos.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, quisquam. Explicabo id consequuntur dolores asperiores, nulla est neque aliquid illo itaque soluta libero culpa necessitatibus ad dolorem corrupti voluptates eos.
</p> -->
</section> </section>
</footer> </footer>
</article> </article>
</main> </main>
</body> </body>