v1.2.0-beta/website restructure
Ayushya Amitabh
@@ -1,31 +1,37 @@
|
||||
@font-face {
|
||||
font-family: 'PixelSplitter';
|
||||
src: url('pixelsplitter-bold-webfont.woff2') format('woff2'),
|
||||
url('pixelsplitter-bold-webfont.woff') format('woff');
|
||||
src: url('./fonts/pixelsplitter-bold-webfont.woff2') format('woff2'),
|
||||
url('./fonts/pixelsplitter-bold-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'GlacialBold';
|
||||
src: url('glacialindifference-bold-webfont.woff2') format('woff2'),
|
||||
url('glacialindifference-bold-webfont.woff') format('woff');
|
||||
src: url('./fonts/glacialindifference-bold-webfont.woff2') format('woff2'),
|
||||
url('./fonts/glacialindifference-bold-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'GlacialItalic';
|
||||
src: url('glacialindifference-italic-webfont.woff2') format('woff2'),
|
||||
url('glacialindifference-italic-webfont.woff') format('woff');
|
||||
src: url('./fonts/glacialindifference-italic-webfont.woff2') format('woff2'),
|
||||
url('./fonts/glacialindifference-italic-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Glacial';
|
||||
src: url('glacialindifference-regular-webfont.woff2') format('woff2'),
|
||||
url('glacialindifference-regular-webfont.woff') format('woff');
|
||||
src: url('./fonts/glacialindifference-regular-webfont.woff2') format('woff2'),
|
||||
url('./fonts/glacialindifference-regular-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
* {
|
||||
[data-font='serif'] {
|
||||
font-family: 'PixelSplitter', sans-serif;
|
||||
}
|
||||
[data-font='sans'] {
|
||||
font-family: 'Glacial', sans-serif;
|
||||
}
|
||||
[data-font='sans-bold'] {
|
||||
font-family: 'GlacialBold', sans-serif;
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 915 B After Width: | Height: | Size: 915 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
@@ -1,180 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png" />
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png" />
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png" />
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png" />
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png" />
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png" />
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png" />
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png" />
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
|
||||
<link rel="manifest" href="manifest.json" />
|
||||
<meta name="msapplication-TileImage" content="ms-icon-144x144.png" />
|
||||
<link rel="stylesheet" type="text/css" href="font.css" />
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="./icons/apple-icon-57x57.png" />
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="./icons/apple-icon-60x60.png" />
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="./icons/apple-icon-72x72.png" />
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="./icons/apple-icon-76x76.png" />
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="./icons/apple-icon-114x114.png" />
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="./icons/apple-icon-120x120.png" />
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="./icons/apple-icon-144x144.png" />
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="./icons/apple-icon-152x152.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-icon-180x180.png" />
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="./icons/android-icon-192x192.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="./icons/favicon-96x96.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png" />
|
||||
<link rel="icon" href="./icons/favicon.ico" />
|
||||
<link rel="manifest" href="./manifest.json" />
|
||||
<meta name="msapplication-TileImage" content="./icons/ms-icon-144x144.png" />
|
||||
<link rel="stylesheet" type="text/css" href="./font.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles/index.css" />
|
||||
<link rel="import" type="text/html" href="./components/landing.html" />
|
||||
<script src="./scripts/Stickied.js"></script>
|
||||
<title>Watch Party</title>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
window.onload = function () {
|
||||
let originalTitlePosition = null;
|
||||
window.addEventListener('scroll', function (ev) {
|
||||
const title = document.getElementsByClassName('title')[0];
|
||||
const support = document.getElementsByClassName('support')[0];
|
||||
const request = document.getElementsByClassName('request')[0];
|
||||
|
||||
if (originalTitlePosition === null) originalTitlePosition = title.offsetTop;
|
||||
if (window.scrollY > originalTitlePosition) {
|
||||
support.classList.add('stickied');
|
||||
title.classList.add('stickied');
|
||||
request.classList.add('stickied');
|
||||
request.style.right = support.clientWidth + 64 + 'px';
|
||||
} else {
|
||||
support.classList.remove('stickied');
|
||||
title.classList.remove('stickied');
|
||||
request.classList.remove('stickied');
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<section>
|
||||
<div class="page">
|
||||
<!-- <a class="cta-container" href="http://get.chromewatchparty.com">
|
||||
<mark class="cta">
|
||||
Get Chrome Extension. It's Free.
|
||||
</mark>
|
||||
</a> -->
|
||||
|
||||
<a class="cta-container request" href="./beta/#request">
|
||||
<mark class="cta">
|
||||
Request Beta Access
|
||||
</mark>
|
||||
</a>
|
||||
<a href="#" class="title">
|
||||
<span>
|
||||
WATCH PARTY
|
||||
</span>
|
||||
</a>
|
||||
<a class="cta-container support" href="https://www.paypal.me/Ayushya">
|
||||
<mark class="cta">
|
||||
Support Watch Party
|
||||
</mark>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section data-page="2">
|
||||
<div class="page">
|
||||
<img src="./intro.gif" alt="Watch Party Intro" />
|
||||
<p>
|
||||
Watch your favorites on Netflix, Disney+, Amazon Prime, & Hulu (Beta) with your favorite
|
||||
people
|
||||
</p>
|
||||
<mark>More Coming Soon.</mark>
|
||||
</div>
|
||||
</section>
|
||||
<section data-page="3">
|
||||
<div class="page">
|
||||
<div class="row">
|
||||
<div class="col image">
|
||||
<img src="./hideable.gif" alt="No time sync" />
|
||||
</div>
|
||||
<div class="col text">
|
||||
Hide the chat - focus on the show, <br />
|
||||
while staying synced. <br />
|
||||
Built to not be in your way but, <br />
|
||||
also be there when you need it.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text left">
|
||||
No signup or login required.<br />
|
||||
Just ready to go.
|
||||
</div>
|
||||
<div class="col image">
|
||||
<img src="./noauth.gif" alt="No time sync" />
|
||||
</div>
|
||||
<div class="col text right">
|
||||
No signup or login required. Just ready to go.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col image">
|
||||
<img src="./beforeorafter.gif" alt="No time sync" />
|
||||
</div>
|
||||
<div class="col text">
|
||||
Start the party before the show, <br />
|
||||
or after the show. <br />
|
||||
Just do what you want.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text left">
|
||||
What happens in Watch Party, <br />
|
||||
stays in Watch Party -<br />
|
||||
for 24 hours - then it's gone.
|
||||
</div>
|
||||
<div class="col image">
|
||||
<img src="./timed.gif" alt="No time sync" />
|
||||
</div>
|
||||
<div class="col text right">
|
||||
What happens in Watch Party, stays in Watch Party - for 24 hours - then it's gone.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col image">
|
||||
<img src="./track.jpeg" alt="No time sync" />
|
||||
</div>
|
||||
<div class="col text">
|
||||
Know when your friends pause and play
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col text left">
|
||||
When words aren't enough, <br />
|
||||
use a GIF from Giphy
|
||||
</div>
|
||||
<div class="col image">
|
||||
<img src="./giphy.gif" alt="No time sync" />
|
||||
</div>
|
||||
<div class="col text right">
|
||||
When words aren't enough use a GIF from Giphy
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer>
|
||||
<div>
|
||||
<span class="full">© Ayushya Amitabh, 2020</span>
|
||||
<span>
|
||||
Built with ❤️ for
|
||||
<a href="https://www.google.com/chrome/">Google Chrome</a>
|
||||
using
|
||||
<a href="https://firebase.google.com/">Firebase</a>,
|
||||
<a href="https://material-ui.com/">Material-UI</a>,
|
||||
<a href="https://reactjs.org/">React JS </a>,
|
||||
<a href="https://nodejs.org/en/">Node.js </a>& <a href="https://giphy.com/"> Giphy</a>.
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="full">
|
||||
<a href="http://get.chromewatchparty.com">
|
||||
<mark>Get Chrome Extension</mark>
|
||||
</a>
|
||||
</span>
|
||||
<span>
|
||||
Help keep Watch Party free -
|
||||
<a href="https://www.paypal.me/Ayushya">
|
||||
<mark>Support Watch Party</mark>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
<section class="landing"></section>
|
||||
<a data-font="sans">TEST</a>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,158 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png" />
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png" />
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png" />
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png" />
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png" />
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png" />
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png" />
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png" />
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
|
||||
<link rel="manifest" href="manifest.json" />
|
||||
<meta name="msapplication-TileImage" content="ms-icon-144x144.png" />
|
||||
<link rel="stylesheet" type="text/css" href="font.css" />
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
<title>Watch Party</title>
|
||||
</head>
|
||||
<body>
|
||||
<section>
|
||||
<div class="page">
|
||||
<!-- <a class="cta-container" href="http://get.chromewatchparty.com">
|
||||
<mark class="cta">
|
||||
Get Chrome Extension. It's Free.
|
||||
</mark>
|
||||
</a> -->
|
||||
|
||||
<a class="cta-container request" href="./beta/#request">
|
||||
<mark class="cta">
|
||||
Request Beta Access
|
||||
</mark>
|
||||
</a>
|
||||
<a href="#" class="title">
|
||||
<span>
|
||||
WATCH PARTY
|
||||
</span>
|
||||
</a>
|
||||
<a class="cta-container support" href="https://www.paypal.me/Ayushya">
|
||||
<mark class="cta">
|
||||
Support Watch Party
|
||||
</mark>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section data-page="2">
|
||||
<div class="page">
|
||||
<img src="./intro.gif" alt="Watch Party Intro" />
|
||||
<p>
|
||||
Watch your favorites on Netflix, Disney+, Amazon Prime, & Hulu (Beta) with your favorite
|
||||
people
|
||||
</p>
|
||||
<mark>More Coming Soon.</mark>
|
||||
</div>
|
||||
</section>
|
||||
<section data-page="3">
|
||||
<div class="page">
|
||||
<div class="row">
|
||||
<div class="col image">
|
||||
<img src="./hideable.gif" alt="No time sync" />
|
||||
</div>
|
||||
<div class="col text">
|
||||
Hide the chat - focus on the show, <br />
|
||||
while staying synced. <br />
|
||||
Built to not be in your way but, <br />
|
||||
also be there when you need it.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text left">
|
||||
No signup or login required.<br />
|
||||
Just ready to go.
|
||||
</div>
|
||||
<div class="col image">
|
||||
<img src="./noauth.gif" alt="No time sync" />
|
||||
</div>
|
||||
<div class="col text right">
|
||||
No signup or login required. Just ready to go.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col image">
|
||||
<img src="./beforeorafter.gif" alt="No time sync" />
|
||||
</div>
|
||||
<div class="col text">
|
||||
Start the party before the show, <br />
|
||||
or after the show. <br />
|
||||
Just do what you want.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text left">
|
||||
What happens in Watch Party, <br />
|
||||
stays in Watch Party -<br />
|
||||
for 24 hours - then it's gone.
|
||||
</div>
|
||||
<div class="col image">
|
||||
<img src="./timed.gif" alt="No time sync" />
|
||||
</div>
|
||||
<div class="col text right">
|
||||
What happens in Watch Party, stays in Watch Party - for 24 hours - then it's gone.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col image">
|
||||
<img src="./track.jpeg" alt="No time sync" />
|
||||
</div>
|
||||
<div class="col text">
|
||||
Know when your friends pause and play
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col text left">
|
||||
When words aren't enough, <br />
|
||||
use a GIF from Giphy
|
||||
</div>
|
||||
<div class="col image">
|
||||
<img src="./giphy.gif" alt="No time sync" />
|
||||
</div>
|
||||
<div class="col text right">
|
||||
When words aren't enough use a GIF from Giphy
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer>
|
||||
<div>
|
||||
<span class="full">© Ayushya Amitabh, 2020</span>
|
||||
<span>
|
||||
Built with ❤️ for
|
||||
<a href="https://www.google.com/chrome/">Google Chrome</a>
|
||||
using
|
||||
<a href="https://firebase.google.com/">Firebase</a>,
|
||||
<a href="https://material-ui.com/">Material-UI</a>,
|
||||
<a href="https://reactjs.org/">React JS </a>,
|
||||
<a href="https://nodejs.org/en/">Node.js </a>& <a href="https://giphy.com/"> Giphy</a>.
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="full">
|
||||
<a href="http://get.chromewatchparty.com">
|
||||
<mark>Get Chrome Extension</mark>
|
||||
</a>
|
||||
</span>
|
||||
<span>
|
||||
Help keep Watch Party free -
|
||||
<a href="https://www.paypal.me/Ayushya">
|
||||
<mark>Support Watch Party</mark>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,37 +7,37 @@
|
||||
"background_color": "black",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/android-icon-36x36.png",
|
||||
"src": "/icons/android-icon-36x36.png",
|
||||
"sizes": "36x36",
|
||||
"type": "image/png",
|
||||
"density": "0.75"
|
||||
},
|
||||
{
|
||||
"src": "/android-icon-48x48.png",
|
||||
"src": "/icons/android-icon-48x48.png",
|
||||
"sizes": "48x48",
|
||||
"type": "image/png",
|
||||
"density": "1.0"
|
||||
},
|
||||
{
|
||||
"src": "/android-icon-72x72.png",
|
||||
"src": "/icons/android-icon-72x72.png",
|
||||
"sizes": "72x72",
|
||||
"type": "image/png",
|
||||
"density": "1.5"
|
||||
},
|
||||
{
|
||||
"src": "/android-icon-96x96.png",
|
||||
"src": "/icons/android-icon-96x96.png",
|
||||
"sizes": "96x96",
|
||||
"type": "image/png",
|
||||
"density": "2.0"
|
||||
},
|
||||
{
|
||||
"src": "/android-icon-144x144.png",
|
||||
"src": "/icons/android-icon-144x144.png",
|
||||
"sizes": "144x144",
|
||||
"type": "image/png",
|
||||
"density": "3.0"
|
||||
},
|
||||
{
|
||||
"src": "/android-icon-192x192.png",
|
||||
"src": "/icons/android-icon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"density": "4.0"
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
|
Before Width: | Height: | Size: 184 KiB After Width: | Height: | Size: 184 KiB |
|
Before Width: | Height: | Size: 22 MiB After Width: | Height: | Size: 22 MiB |
|
Before Width: | Height: | Size: 424 KiB After Width: | Height: | Size: 424 KiB |
|
Before Width: | Height: | Size: 792 KiB After Width: | Height: | Size: 792 KiB |
|
Before Width: | Height: | Size: 2.3 MiB After Width: | Height: | Size: 2.3 MiB |
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 7.1 KiB |
|
Before Width: | Height: | Size: 643 KiB After Width: | Height: | Size: 643 KiB |
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
@@ -0,0 +1,20 @@
|
||||
window.onload = function () {
|
||||
let originalTitlePosition = null;
|
||||
window.addEventListener('scroll', function (ev) {
|
||||
const title = document.getElementsByClassName('title')[0];
|
||||
const support = document.getElementsByClassName('support')[0];
|
||||
const request = document.getElementsByClassName('request')[0];
|
||||
|
||||
if (originalTitlePosition === null) originalTitlePosition = title.offsetTop;
|
||||
if (window.scrollY > originalTitlePosition) {
|
||||
support.classList.add('stickied');
|
||||
title.classList.add('stickied');
|
||||
request.classList.add('stickied');
|
||||
request.style.right = support.clientWidth + 64 + 'px';
|
||||
} else {
|
||||
support.classList.remove('stickied');
|
||||
title.classList.remove('stickied');
|
||||
request.classList.remove('stickied');
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
body {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
* {
|
||||
color: var(--secondary);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
@import './variables.css';
|
||||
@import './variables-dark.css' screen and (prefers-color-scheme: dark);
|
||||
|
||||
@import './extrasmall.css';
|
||||
@import 'small.css' screen and (min-width: 576px);
|
||||
@import './medium.css' screen and (min-width: 768px);
|
||||
@import './large.css' screen and (min-width: 992px);
|
||||
@import './extralarge.css' screen and (min-width: 1200px);
|
||||
@@ -0,0 +1,8 @@
|
||||
:root {
|
||||
--primary: #353e4a;
|
||||
--primary-complement: #fbf8ef;
|
||||
--secondary: #9acb34;
|
||||
--secondary-complement: #7da329;
|
||||
--tertiary: #04ddd9;
|
||||
--tertiary-complement: #02a19f;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
:root {
|
||||
--primary: #fbf8ef;
|
||||
--primary-complement: #353e4a;
|
||||
--secondary: #7da329;
|
||||
--secondary-complement: #9acb34;
|
||||
--tertiary: #02a19f;
|
||||
--tertiary-complement: #04ddd9;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 112 KiB |