ayushya/watchparty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.4.1-beta/Final website UI, add copyright

Browse Source
This commit is contained in:
ayushya
2020-07-11 22:59:03 -04:00
parent 39b42dbf52
commit 5189c27627
51 changed files with 348 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/styles/extralarge.css
+9 -2
View File
@@ -1,7 +1,14 @@
/************************************************************************
Copyright (C) Ayushya Amitabh - All Rights Reserved
Unauthorized copying of this file, via any medium is strictly prohibited
Proprietary and confidential
Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020
************************************************************************/
html {
font-size: 11.5px !important;
font-size: 7px !important;
}
body {
font-size: 11.5px !important;
font-size: 7px !important;
}
website/styles/extrasmall.css
+28 -4
View File
@@ -1,3 +1,10 @@
/************************************************************************
Copyright (C) Ayushya Amitabh - All Rights Reserved
Unauthorized copying of this file, via any medium is strictly prohibited
Proprietary and confidential
Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020
************************************************************************/
@keyframes circleFloat {
0% {
top: -12.5rem;
@@ -149,12 +156,12 @@ footer .title {
width: 100%;
}
.built-with {
line-height: 4rem;
}
.built-with a {
color: var(--cta);
text-decoration: none;
border-bottom: 1px solid var(--cta);
padding-bottom: 0.5rem;
white-space: nowrap;
}
footer .link-button {
@@ -163,3 +170,20 @@ footer .link-button {
width: calc(100% - 15rem);
text-align: center;
}
.copyright .landing {
flex: 1;
text-transform: uppercase;
}
.copyright .logo {
line-height: 1.5;
}
.copyright .logo a {
color: var(--cta);
text-decoration: none;
padding-bottom: 0.5rem;
line-height: 125%;
border-bottom: 1px solid;
}
website/styles/index.css
+7
View File
@@ -1,3 +1,10 @@
/************************************************************************
Copyright (C) Ayushya Amitabh - All Rights Reserved
Unauthorized copying of this file, via any medium is strictly prohibited
Proprietary and confidential
Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020
************************************************************************/
@import './variables.css';
@import './variables-dark.css' screen and (prefers-color-scheme: dark);
website/styles/large.css
+7
View File
@@ -1,3 +1,10 @@
/************************************************************************
Copyright (C) Ayushya Amitabh - All Rights Reserved
Unauthorized copying of this file, via any medium is strictly prohibited
Proprietary and confidential
Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020
************************************************************************/
.features,
.supported {
max-width: none;
website/styles/medium.css
+67 -10
View File
@@ -1,22 +1,50 @@
/************************************************************************
Copyright (C) Ayushya Amitabh - All Rights Reserved
Unauthorized copying of this file, via any medium is strictly prohibited
Proprietary and confidential
Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020
************************************************************************/
html {
font-size: 7.5px !important;
font-size: 6.5px !important;
}
body {
font-size: 7.5px !important;
font-size: 6.5px !important;
display: flex;
min-height: 100vh;
flex-direction: column;
}
.features,
.supported {
max-width: 75%;
flex: 1;
}
.link-button {
transition: all ease-in-out 0.2s !important;
border: 3px solid transparent;
border: 1px solid var(--cta);
background: none;
color: var(--cta);
position: relative;
}
.link-button::before {
content: '';
height: 100%;
top: 0;
width: 0;
position: absolute;
border-radius: 7rem;
left: 0;
background: var(--cta);
transition: all ease-in-out 0.3s;
}
.link-button:hover {
border: 3px solid var(--primary-text);
box-shadow: 0 0 10px var(--primary-text);
color: var(--primary);
z-index: 10;
}
.link-button:hover::before {
width: 100%;
z-index: -1;
}
.logo {
font-size: 10rem;
@@ -43,6 +71,9 @@ body {
border: none !important;
box-shadow: none !important;
}
.landing .link-button.stickied::before {
border-radius: 0;
}
.feature-card {
background-color: var(--primary-medium);
z-index: 1;
@@ -91,13 +122,11 @@ body {
}
.feature-card:hover .feature-icon {
position: relative;
top: unset;
top: -35%;
left: unset;
transform: scale(3);
margin-bottom: 3rem;
}
footer {
padding-right: 45%;
}
footer .title {
font-size: 2rem;
}
@@ -111,3 +140,31 @@ footer .link-button {
padding: 0.8rem 3.375rem;
font-size: 2.5rem;
}
.copyright .landing {
max-width: 75%;
}
.copyright .logo a {
position: relative;
}
.copyright .logo a::before {
content: '';
height: 100%;
top: 0;
width: 0;
position: absolute;
left: -1rem;
background: var(--cta);
transition: all ease-in-out 0.3s;
}
.copyright .logo a:hover::before {
width: calc(100% + 1rem);
z-index: -1;
}
.copyright .logo a:hover {
color: var(--primary);
}
website/styles/small.css
+6
View File
@@ -0,0 +1,6 @@
/************************************************************************
Copyright (C) Ayushya Amitabh - All Rights Reserved
Unauthorized copying of this file, via any medium is strictly prohibited
Proprietary and confidential
Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020
************************************************************************/
website/styles/variables-dark.css
+12 -5
View File
@@ -1,3 +1,10 @@
/************************************************************************
Copyright (C) Ayushya Amitabh - All Rights Reserved
Unauthorized copying of this file, via any medium is strictly prohibited
Proprietary and confidential
Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020
************************************************************************/
:root {
--primary: black;
--primary-medium: #232323;
@@ -6,17 +13,17 @@
--primary-text: white;
}
.supported-logo#disney {
background-image: url('../media/Disney.png');
background-image: url('../media/logos/Disney.png');
}
.supported-logo#prime {
background-image: url('../media/Prime.png');
background-image: url('../media/logos/Prime.png');
}
.supported-logo#youtube {
background-image: url('../media/Youtube.png');
background-image: url('../media/logos/Youtube.png');
}
.supported-logo#hbonow {
background-image: url('../media/HBONowWhite.png');
background-image: url('../media/logos/HBONowWhite.png');
}
.supported-logo#hbomax {
background-image: url('../media/HBOMaxWhite.png');
background-image: url('../media/logos/HBOMaxWhite.png');
}
website/styles/variables.css
+23 -13
View File
@@ -1,3 +1,10 @@
/************************************************************************
Copyright (C) Ayushya Amitabh - All Rights Reserved
Unauthorized copying of this file, via any medium is strictly prohibited
Proprietary and confidential
Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020
************************************************************************/
:root {
--primary: white;
--primary-medium: #c5c5c5;
@@ -7,42 +14,45 @@
font-size: 10px;
}
.supported-logo#netflix {
background-image: url('../media/Netflix.png');
background-image: url('../media/logos/Netflix.png');
}
.supported-logo#hulu {
background-image: url('../media/Hulu.png');
background-image: url('../media/logos/Hulu.png');
}
.supported-logo#disney {
background-image: url('../media/DisneyColor.png');
background-image: url('../media/logos/DisneyColor.png');
}
.supported-logo#prime {
background-image: url('../media/PrimeColor.png');
background-image: url('../media/logos/PrimeColor.png');
}
.supported-logo#youtube {
background-image: url('../media/YoutubeColor.png');
background-image: url('../media/logos/YoutubeColor.png');
}
.supported-logo#hbonow {
background-image: url('../media/HBONowBlack.png');
background-image: url('../media/logos/HBONowBlack.png');
}
.supported-logo#hbomax {
background-image: url('../media/HBOMax.png');
background-image: url('../media/logos/HBOMax.png');
}
.feature-icon#phone {
background-image: url('../media/Phone.gif');
background-image: url('../media/features/Phone.gif');
}
.feature-icon#delete {
background-image: url('../media/Delete.gif');
background-image: url('../media/features/Delete.gif');
}
.feature-icon#signup {
background-image: url('../media/Signup.gif');
background-image: url('../media/features/Signup.gif');
}
.feature-icon#sync {
background-image: url('../media/Sync.gif');
background-image: url('../media/features/Sync.gif');
}
.feature-icon#custom {
background-image: url('../media/Custom.gif');
background-image: url('../media/features/Custom.gif');
}
.feature-icon#chat {
background-image: url('../media/Chat.gif');
background-image: url('../media/features/Chat.gif');
}
.feature-icon#hideable {
background-image: url('../media/features/Hideable.gif');
}