added header and footer, refined font size adaption to screen width and height
This commit is contained in:
parent
d7704ac845
commit
953f716eac
317
index.html
317
index.html
|
|
@ -5,183 +5,212 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<!-- <link rel="stylesheet" href="src/main.scss" /> -->
|
||||
</head>
|
||||
<body>
|
||||
<script src="./src/index.ts"></script>
|
||||
<main>
|
||||
<section class="--black --full-height">
|
||||
<div class="teaser">
|
||||
<svg viewBox="0 0 91.928 30">
|
||||
<path d="M0 11.18h7.255l4.275 9.183 4.486-9.183h7.149l-9.463 17.979h-4.38L0 11.18zm22.991-6.799C22.991 1.962 24.954 0 27.407 0c2.418 0 4.346 1.962 4.346 4.381s-1.928 4.416-4.346 4.416a4.42 4.42 0 0 1-4.416-4.416zm.981 24.778V11.18h6.729v17.979h-6.729zM34.241 5.573h6.519v5.607h3.855v5.152H40.76v12.827h-6.589V16.367h-1.928V11.18h1.963l.035-5.607zm12.055 5.607h6.729l-.105 2.523s1.752-2.979 5.993-2.979c.245 0 .491 0 .736.035v6.099c-.524-.245-1.227-.386-1.962-.386-2.173 0-4.767 1.051-4.767 3.26v9.427h-6.624V11.18zm22.431-.596c2.278 0 4.486.912 6.064 2.489V11.18h6.062v17.979h-6.167s-.036-.56-.036-1.156c0-.279 0-.561.036-.806-1.473 1.822-3.681 2.698-5.959 2.698-5.677 0-9.042-4.977-9.042-9.708 0-4.276 2.769-8.341 7.184-9.392a8.352 8.352 0 0 1 1.858-.211zM75 20.257c0-2.417-1.962-4.346-4.381-4.346-2.418 0-4.451 1.928-4.451 4.346s2.033 4.452 4.451 4.452C73.038 24.708 75 22.675 75 20.257zm8.131 5.398c0-2.488 1.927-4.451 4.416-4.451 2.418 0 4.381 1.963 4.381 4.451 0 2.383-1.963 4.346-4.381 4.346-2.489-.001-4.416-1.963-4.416-4.346z"></path>
|
||||
</svg>
|
||||
<article>
|
||||
<header class="--black">
|
||||
<div class="teaser">
|
||||
<svg viewBox="0 0 91.928 30">
|
||||
<path d="M0 11.18h7.255l4.275 9.183 4.486-9.183h7.149l-9.463 17.979h-4.38L0 11.18zm22.991-6.799C22.991 1.962 24.954 0 27.407 0c2.418 0 4.346 1.962 4.346 4.381s-1.928 4.416-4.346 4.416a4.42 4.42 0 0 1-4.416-4.416zm.981 24.778V11.18h6.729v17.979h-6.729zM34.241 5.573h6.519v5.607h3.855v5.152H40.76v12.827h-6.589V16.367h-1.928V11.18h1.963l.035-5.607zm12.055 5.607h6.729l-.105 2.523s1.752-2.979 5.993-2.979c.245 0 .491 0 .736.035v6.099c-.524-.245-1.227-.386-1.962-.386-2.173 0-4.767 1.051-4.767 3.26v9.427h-6.624V11.18zm22.431-.596c2.278 0 4.486.912 6.064 2.489V11.18h6.062v17.979h-6.167s-.036-.56-.036-1.156c0-.279 0-.561.036-.806-1.473 1.822-3.681 2.698-5.959 2.698-5.677 0-9.042-4.977-9.042-9.708 0-4.276 2.769-8.341 7.184-9.392a8.352 8.352 0 0 1 1.858-.211zM75 20.257c0-2.417-1.962-4.346-4.381-4.346-2.418 0-4.451 1.928-4.451 4.346s2.033 4.452 4.451 4.452C73.038 24.708 75 22.675 75 20.257zm8.131 5.398c0-2.488 1.927-4.451 4.416-4.451 2.418 0 4.381 1.963 4.381 4.451 0 2.383-1.963 4.346-4.381 4.346-2.489-.001-4.416-1.963-4.416-4.346z"></path>
|
||||
</svg>
|
||||
|
||||
<div class="--paragraph --center">
|
||||
<h1>Seatings by Charles & Ray Eames</h1>
|
||||
<div class="--paragraph --center">
|
||||
<h1>Seatings by Charles & Ray Eames</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 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>
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<section class="--green">
|
||||
<div class="teaser">
|
||||
<div class="columns">
|
||||
<div class="columns__item">
|
||||
<img src="https://www.vitra.com/de-de/_storage/asset/2397344/storage/v_thumb_250x/33223561.jpg" alt="Picture of Lounge Chair & Ottoman">
|
||||
</div>
|
||||
<div class="columns__item">
|
||||
<h2>Lounge Chair & Ottoman</h2>
|
||||
<h3>Charles & Ray Eames, 1956</h3>
|
||||
<p>
|
||||
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 using virtually the same methods ever since, and is now recognised as a great classic of twentieth-century furniture design. Offered in two sizes and various configurations with different types of leather upholstery covers, wooden shells and bases, the Lounge Chair is ideally complemented by the matching Ottoman.
|
||||
</p>
|
||||
<section class="--green">
|
||||
<div class="teaser">
|
||||
<div class="columns">
|
||||
<div class="columns__item">
|
||||
<img src="https://www.vitra.com/de-de/_storage/asset/2397344/storage/v_thumb_250x/33223561.jpg" alt="Picture of Lounge Chair & Ottoman">
|
||||
</div>
|
||||
<div class="columns__item">
|
||||
<h2>Lounge Chair & Ottoman</h2>
|
||||
<h3 class="--secondary">Charles & Ray Eames, 1956</h3>
|
||||
<p>
|
||||
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 using virtually the same methods ever since, and is now recognised as a great classic of twentieth-century furniture design. Offered in two sizes and various configurations with different types of leather upholstery covers, wooden shells and bases, the Lounge Chair is ideally complemented by the matching Ottoman.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="--blue">
|
||||
<div class="teaser">
|
||||
<div class="columns">
|
||||
<div class="columns__item">
|
||||
<img src="//www.vitra.com/de-de/_storage/asset/2397735/storage/v_thumb_250x/33148466.jpg" alt="Picture of Lounge Chair Plywood Group LCW">
|
||||
</div>
|
||||
<div class="columns__item">
|
||||
<h2>Plywood Group LCW</h2>
|
||||
<h3>Charles & Ray Eames, 1945/1946</h3>
|
||||
<p>
|
||||
The small Lounge Chair Wood (LCW) is an iconic design by Charles and Ray Eames that dates from the period of their early experiments with three-dimensionally moulded plywood.
|
||||
</p>
|
||||
<section class="--blue">
|
||||
<div class="teaser">
|
||||
<div class="columns">
|
||||
<div class="columns__item">
|
||||
<img src="//www.vitra.com/de-de/_storage/asset/2397735/storage/v_thumb_250x/33148466.jpg" alt="Picture of Lounge Chair Plywood Group LCW">
|
||||
</div>
|
||||
<div class="columns__item">
|
||||
<h2>Plywood Group LCW</h2>
|
||||
<h3 class="--secondary">Charles & Ray Eames, 1945/1946</h3>
|
||||
<p>
|
||||
The small Lounge Chair Wood (LCW) is an iconic design by Charles and Ray Eames that dates from the period of their early experiments with three-dimensionally moulded plywood.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="--violet">
|
||||
<div class="teaser">
|
||||
<div class="columns">
|
||||
<div class="columns__item">
|
||||
<img src="//www.vitra.com/en-ie/_storage/asset/2397703/storage/v_thumb_250x/33148452.jpg" alt="Picture of Plywood Group LCM">
|
||||
</div>
|
||||
<div class="columns__item">
|
||||
<h2>Plywood Group LCM</h2>
|
||||
<h3>Charles & Ray Eames, 1945/1946</h3>
|
||||
<p>
|
||||
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'.
|
||||
</p>
|
||||
<section class="--violet">
|
||||
<div class="teaser">
|
||||
<div class="columns">
|
||||
<div class="columns__item">
|
||||
<img src="//www.vitra.com/en-ie/_storage/asset/2397703/storage/v_thumb_250x/33148452.jpg" alt="Picture of Plywood Group LCM">
|
||||
</div>
|
||||
<div class="columns__item">
|
||||
<h2>Plywood Group LCM</h2>
|
||||
<h3 class="--secondary">Charles & Ray Eames, 1945/1946</h3>
|
||||
<p>
|
||||
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'.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="--purple">
|
||||
<div class="teaser">
|
||||
<div class="columns">
|
||||
<div class="columns__item">
|
||||
<img src="//www.vitra.com/en-ie/_storage/asset/1765634/storage/v_thumb_250x/22408057.jpg" alt="Picture of Eames Plastic Armchair DAW">
|
||||
</div>
|
||||
<div class="columns__item">
|
||||
<h2>Eames Plastic Armchair DAW</h2>
|
||||
<h3>Charles & Ray Eames, 1950</h3>
|
||||
<p>
|
||||
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 with the plastic shell of the DAW (Dining Height Armchair Wood Base) produces a rich contrast of materials. The seat shells are also available with a seat cushion or full upholstery.
|
||||
</p>
|
||||
<section class="--purple">
|
||||
<div class="teaser">
|
||||
<div class="columns">
|
||||
<div class="columns__item">
|
||||
<img src="//www.vitra.com/en-ie/_storage/asset/1765634/storage/v_thumb_250x/22408057.jpg" alt="Picture of Eames Plastic Armchair DAW">
|
||||
</div>
|
||||
<div class="columns__item">
|
||||
<h2>Eames Plastic Armchair DAW</h2>
|
||||
<h3 class="--secondary">Charles & Ray Eames, 1950</h3>
|
||||
<p>
|
||||
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 with the plastic shell of the DAW (Dining Height Armchair Wood Base) produces a rich contrast of materials. The seat shells are also available with a seat cushion or full upholstery.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="--green">
|
||||
<div class="teaser">
|
||||
<div class="columns">
|
||||
<div class="columns__item">
|
||||
<img src="//www.vitra.com/en-ie/_storage/asset/1608035/storage/v_thumb_250x/19458579.jpg" alt="Picture of Eames Plastic Armchair DAW">
|
||||
</div>
|
||||
<div class="columns__item">
|
||||
<h2>Lobby Chair ES 108</h2>
|
||||
<h3>Charles & Ray Eames, 1960</h3>
|
||||
<p>
|
||||
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 ES 108 has luxuriant leather-covered cushions that offer excellent comfort. The upholstery covers are available in different types of leather and in a wide range of colours.
|
||||
</p>
|
||||
<section class="--green">
|
||||
<div class="teaser">
|
||||
<div class="columns">
|
||||
<div class="columns__item">
|
||||
<img src="//www.vitra.com/en-ie/_storage/asset/1608035/storage/v_thumb_250x/19458579.jpg" alt="Picture of Eames Plastic Armchair DAW">
|
||||
</div>
|
||||
<div class="columns__item">
|
||||
<h2>Lobby Chair ES 108</h2>
|
||||
<h3 class="--secondary">Charles & Ray Eames, 1960</h3>
|
||||
<p>
|
||||
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 ES 108 has luxuriant leather-covered cushions that offer excellent comfort. The upholstery covers are available in different types of leather and in a wide range of colours.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="--blue">
|
||||
<div class="teaser">
|
||||
<div class="columns">
|
||||
<div class="columns__item">
|
||||
<img src="//www.vitra.com/en-ie/_storage/asset/2271518/storage/v_thumb_250x/31196004.jpg" alt="Picture of Eames Fiberglass Side Chair DSW">
|
||||
</div>
|
||||
<div class="columns__item">
|
||||
<h2>Eames Fiberglass Side Chair DSW</h2>
|
||||
<h3>Charles & Ray Eames, 1950</h3>
|
||||
<p>
|
||||
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 wood gives the classic design a certain warmth and casual appeal. The seat shells can be fitted with seat cushions or full upholstery in a wide selection of fabric colours, enabling a multitude of individual configurations.
|
||||
</p>
|
||||
<section class="--blue">
|
||||
<div class="teaser">
|
||||
<div class="columns">
|
||||
<div class="columns__item">
|
||||
<img src="//www.vitra.com/en-ie/_storage/asset/2271518/storage/v_thumb_250x/31196004.jpg" alt="Picture of Eames Fiberglass Side Chair DSW">
|
||||
</div>
|
||||
<div class="columns__item">
|
||||
<h2>Eames Fiberglass Side Chair DSW</h2>
|
||||
<h3 class="--secondary">Charles & Ray Eames, 1950</h3>
|
||||
<p>
|
||||
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 wood gives the classic design a certain warmth and casual appeal. The seat shells can be fitted with seat cushions or full upholstery in a wide selection of fabric colours, enabling a multitude of individual configurations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="--violet">
|
||||
<div class="teaser">
|
||||
<div class="columns">
|
||||
<div class="columns__item">
|
||||
<img src="//www.vitra.com/en-ie/_storage/asset/1374562/storage/v_thumb_250x/33148698.jpg" alt="Picture of Aluminium Chairs EA 115/116">
|
||||
</div>
|
||||
<div class="columns__item">
|
||||
<h2>Aluminium Chairs EA 115/116</h2>
|
||||
<h3>Charles & Ray Eames, 1958</h3>
|
||||
<p>
|
||||
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 versions are available with <strong>fabric</strong>, <strong>leather</strong> or <strong>mesh fabric covers</strong> in a selection of colours. EA 116 has a swivel seat, while EA 115 has a fixed base.
|
||||
</p>
|
||||
<section class="--violet">
|
||||
<div class="teaser">
|
||||
<div class="columns">
|
||||
<div class="columns__item">
|
||||
<img src="//www.vitra.com/en-ie/_storage/asset/1374562/storage/v_thumb_250x/33148698.jpg" alt="Picture of Aluminium Chairs EA 115/116">
|
||||
</div>
|
||||
<div class="columns__item">
|
||||
<h2>Aluminium Chairs EA 115/116</h2>
|
||||
<h3 class="--secondary">Charles & Ray Eames, 1958</h3>
|
||||
<p>
|
||||
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 versions are available with <strong>fabric</strong>, <strong>leather</strong> or <strong>mesh fabric covers</strong> in a selection of colours. EA 116 has a swivel seat, while EA 115 has a fixed base.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="--purple">
|
||||
<div class="teaser">
|
||||
<div class="columns">
|
||||
<div class="columns__item">
|
||||
<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">
|
||||
</div>
|
||||
<div class="columns__item">
|
||||
<h2>Soft Pad Chairs EA 217/219</h2>
|
||||
<h3>Charles & Ray Eames, 1969</h3>
|
||||
<p>
|
||||
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 user's weight, is paired with soft cushions to provide excellent comfort. The higher backrest of EA 219 distinguishes it from the Soft Pad Chair EA 217.
|
||||
</p>
|
||||
<section class="--purple">
|
||||
<div class="teaser">
|
||||
<div class="columns">
|
||||
<div class="columns__item">
|
||||
<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">
|
||||
</div>
|
||||
<div class="columns__item">
|
||||
<h2>Soft Pad Chairs EA 217/219</h2>
|
||||
<h3 class="--secondary">Charles & Ray Eames, 1969</h3>
|
||||
<p>
|
||||
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 user's weight, is paired with soft cushions to provide excellent comfort. The higher backrest of EA 219 distinguishes it from the Soft Pad Chair EA 217.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- <section class="--black --full-height">
|
||||
<ul class="cards">
|
||||
<li class="cards__item">
|
||||
Going here
|
||||
</li>
|
||||
<li class="cards__item">
|
||||
Going there
|
||||
</li>
|
||||
<li class="cards__item">
|
||||
Going nowhere
|
||||
</li>
|
||||
</ul>
|
||||
</section> -->
|
||||
<footer class="--black">
|
||||
<section class="--paragraph --center">
|
||||
<h2>Idea</h2>
|
||||
<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>
|
||||
|
||||
<h2>Author</h2>
|
||||
<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>
|
||||
|
||||
<h2>Disclaimer</h2>
|
||||
<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>
|
||||
|
||||
<object data="./src/assets/nls.svg" type="image/svg+xml"></object>
|
||||
|
||||
<!--
|
||||
<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>
|
||||
</footer>
|
||||
</article>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 93 KiB |
|
|
@ -3,8 +3,18 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
// 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 {
|
||||
|
|
@ -13,11 +23,24 @@ main {
|
|||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 80vw;
|
||||
margin: 0 auto;
|
||||
fill: $nls-color-white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 300%;
|
||||
font-size: 200%;
|
||||
|
||||
@media (min-width: $breakpoint) {
|
||||
font-size: 300%;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {}
|
||||
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -29,6 +52,52 @@ a {
|
|||
}
|
||||
|
||||
img {
|
||||
@media (max-width: $breakpoint) {
|
||||
margin: 0 auto 2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
mix-blend-mode: color-burn;
|
||||
max-width: 100%; height: auto;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
|
||||
.--paragraph {
|
||||
$this-padding: 30vw;
|
||||
$this-padding: 20vw;
|
||||
|
||||
@media (min-width: $breakpoint) {
|
||||
padding-right: $this-padding ;
|
||||
|
|
|
|||
|
|
@ -16,4 +16,7 @@ $nls-color-black: #0f0f11;
|
|||
//
|
||||
// RESPONSIVE
|
||||
//
|
||||
$breakpoint: 980px;
|
||||
$breakpoint: 640px;
|
||||
// $breakpoint-height: 360px;
|
||||
$breakpoint-height: 568px;
|
||||
$breakpoint-width: 640px;
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -10,13 +10,17 @@ section {
|
|||
position: -ms-sticky;
|
||||
position: -o-sticky;
|
||||
display: flex; flex-direction: column; justify-content: start;
|
||||
height: 100vh;
|
||||
height: 90vh;
|
||||
overflow: hidden;
|
||||
|
||||
@media (min-width: $breakpoint) {
|
||||
height: 50vh;
|
||||
height: 80vh;
|
||||
}
|
||||
}
|
||||
|
||||
section,
|
||||
article > header,
|
||||
article > footer {
|
||||
// color: $nls-color-white;
|
||||
|
||||
&.--selected {
|
||||
|
|
|
|||
Loading…
Reference in New Issue