Add website

This commit is contained in:
Romain Vigier
2021-08-20 15:39:20 +02:00
parent 7311a9cce8
commit 8d9be91921
16 changed files with 329 additions and 0 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 309 B

+2
View File
@@ -0,0 +1,2 @@
SPDX-FileCopyrightText: 2021 Romain Vigier <contact AT romainvigier.fr>
SPDX-License-Identifier: CC-BY-SA-4.0
Binary file not shown.
@@ -0,0 +1,2 @@
SPDX-FileCopyrightText: The Cantarell font contributors (https://gitlab.gnome.org/GNOME/cantarell-fonts)
SPDX-License-Identifier: OFL-1.1
Binary file not shown.
@@ -0,0 +1,2 @@
SPDX-FileCopyrightText: The Cantarell font contributors (https://gitlab.gnome.org/GNOME/cantarell-fonts)
SPDX-License-Identifier: OFL-1.1
Binary file not shown.
@@ -0,0 +1,2 @@
SPDX-FileCopyrightText: The Cantarell font contributors (https://gitlab.gnome.org/GNOME/cantarell-fonts)
SPDX-License-Identifier: OFL-1.1
Binary file not shown.
@@ -0,0 +1,2 @@
SPDX-FileCopyrightText: The Cantarell font contributors (https://gitlab.gnome.org/GNOME/cantarell-fonts)
SPDX-License-Identifier: OFL-1.1
+8
View File
@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
<!--
SPDX-FileCopyrightText: 2021 Romain Vigier <contact AT romainvigier.fr>
SPDX-License-Identifier: CC-BY-SA-4.0
-->
<path d="M4 0C1.784 0 0 1.784 0 4v28h32V4c0-2.216-1.784-4-4-4zm22.951 3A2 2 0 0127 3a2 2 0 012 2 2 2 0 01-2 2 2 2 0 01-2-2 2 2 0 011.951-2zM3 10h26v19H3z"/>
<path d="M13.643 13.734c-2.433 1.306-3.81 4.261-3.244 6.964.488 2.74 2.906 4.98 5.676 5.257 2.09.255 4.271-.581 5.652-2.17-2.73.504-5.667-.963-6.904-3.448-1.242-2.328-.863-5.383.91-7.337a6.547 6.547 0 00-2.09.734z"/>
</svg>

After

Width:  |  Height:  |  Size: 568 B

+22
View File
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<!--
SPDX-FileCopyrightText: 2021 Romain Vigier <contact AT romainvigier.fr>
SPDX-License-Identifier: GPL-3.0-or-later
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Night Theme Switcher</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<main class="content">
<h1 class="title">Night Theme Switcher</h1>
<p class="description">A GNOME Shell extension to make your desktop easy on the eye, day and night.</p>
<a href="https://extensions.gnome.org/extension/2236/night-theme-switcher/" class="button">Download</a>
</main>
</body>
</html>
+227
View File
@@ -0,0 +1,227 @@
/*
SPDX-FileCopyrightText: 2020, 2021 Romain Vigier <contact AT romainvigier.fr>
SPDX-License-Identifier: GPL-3.0-or-later
*/
@font-face
{
font-family: 'Cantarell';
src: url('fonts/Cantarell-Regular.woff2') format('woff2'),
url('fonts/Cantarell-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face
{
font-family: 'Cantarell';
src: url('fonts/Cantarell-Bold.woff2') format('woff2'),
url('fonts/Cantarell-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
html,
body,
h1,
p
{
margin: 0;
padding: 0;
}
a
{
color: inherit;
text-decoration: none;
}
@keyframes background {
from, 20% {
background: #020417;
}
80%, to {
background: #4995eb;
}
}
html
{
height: 100%;
background: #020417;
font: 1em/1em sans-serif;
animation: background 20s linear infinite alternate;
}
html::before,
html::after
{
content: '';
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@keyframes background-night
{
from, 10%
{
background-position-y: bottom;
opacity: 0;
}
30%
{
opacity: 1;
}
60%, to
{
background-position-y: top;
}
}
html::before
{
z-index: -2;
background: radial-gradient(ellipse 200% 100% at 50% 100%, #8d092c, #221a52 50%, #162171) center;
background-size: 100% 200%;
animation: background-night 20s linear infinite alternate;
}
@keyframes background-day
{
from, 35%
{
background-position-y: bottom;
opacity: 0;
}
65%
{
opacity: 1;
}
to
{
background-position-y: top;
}
}
html::after
{
z-index: -1;
background: radial-gradient(ellipse 200% 100% at 50% 100%, #c79edd, #5a8ae4 50%, #4995eb) center;
background-size: 100% 200%;
animation: background-day 20s linear infinite alternate;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100%;
}
@keyframes content {
from, 50% {
border-color: rgba(255, 255, 255, 0.1);
background: #000;
color: #fcfcfc;
--test: #fcfcfc;
}
51%, to {
border-color: rgba(0, 0, 0, 0.2);
background: #fefefe;
color: #000;
}
}
.content
{
max-width: 20em;
padding: 4em 2em;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.5em;
background: #000;
color: #fcfcfc;
font: 1rem/1.2em Cantarell, sans-serif;
text-align: center;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
animation: content 20s linear infinite alternate;
}
.title
{
margin: 0 0 2.5rem;
font-weight: bold;
font-size: 1.4em;
line-height: 1.2em;
}
@keyframes icon {
from, 50% {
background: #fcfcfc;
}
51%, to {
background: #000;
}
}
.title::before
{
content: '';
display: block;
width: 4em;
height: 4em;
margin: 0 auto 2em;
background: #fcfcfc;
font-size: 1rem;
-webkit-mask: url(icon.svg) no-repeat center;
-webkit-mask-size: 100%;
mask: url(icon.svg) no-repeat center;
mask-size: 100%;
animation: icon 20s linear infinite alternate;
}
.description
{
margin-bottom: 2.5rem;
font-size: 0.9em;
line-height: inherit;
}
.button
{
display: inline-block;
padding: 0.5em 1em;
border: 0.15em solid;
border-radius: 0.4em;
font-size: 1.2em;
font-weight: bold;
}
.button:hover,
.button:focus
{
text-decoration: underline;
}
@media (max-width: 26em)
{
body
{
display: block;
padding: 2em 2em;
min-height: 0;
}
}