Refactored code into components, added custom colors support inside the json config, added the page name attribute and fixed mouse wheel control on mobile devices
All checks were successful
Build and deploy all / build (amiral.json, /var/www/amiral, amiral) (push) Successful in 47s
Build and deploy all / build (atlantis.json, /var/www/atlantis, atlantis) (push) Successful in 43s
Build and deploy all / build (harbor.json, /var/www/harbor, harbor) (push) Successful in 43s
Build and deploy all / deploy (amiral.json, /var/www/amiral, amiral) (push) Successful in 14s
Build and deploy all / deploy (atlantis.json, /var/www/atlantis, atlantis) (push) Successful in 12s
Build and deploy all / deploy (harbor.json, /var/www/harbor, harbor) (push) Successful in 12s
Build and deploy all / notify (push) Successful in 2s
All checks were successful
Build and deploy all / build (amiral.json, /var/www/amiral, amiral) (push) Successful in 47s
Build and deploy all / build (atlantis.json, /var/www/atlantis, atlantis) (push) Successful in 43s
Build and deploy all / build (harbor.json, /var/www/harbor, harbor) (push) Successful in 43s
Build and deploy all / deploy (amiral.json, /var/www/amiral, amiral) (push) Successful in 14s
Build and deploy all / deploy (atlantis.json, /var/www/atlantis, atlantis) (push) Successful in 12s
Build and deploy all / deploy (harbor.json, /var/www/harbor, harbor) (push) Successful in 12s
Build and deploy all / notify (push) Successful in 2s
This commit is contained in:
Gu://em_
parent
c0ed3d2d1d
commit
d5b638405f
14 changed files with 988 additions and 813 deletions
225
src/components/Card.astro
Normal file
225
src/components/Card.astro
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
---
|
||||
const { link, icon, title, description } = Astro.props;
|
||||
---
|
||||
|
||||
<a class="card" href={link}>
|
||||
<img src={icon} width={80} height={80} />
|
||||
<div class="card-title">{title}</div>
|
||||
<div class="card-desc">{description}</div>
|
||||
</a>
|
||||
|
||||
<!--Default---------------------------------------------------------->
|
||||
<style>
|
||||
.card {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
width: 500px;
|
||||
height: 290px;
|
||||
|
||||
margin-top: 4rem;
|
||||
|
||||
background-color: var(--card-background);
|
||||
|
||||
border: 4px solid transparent;
|
||||
border-radius: 1.4em;
|
||||
background-clip: padding-box;
|
||||
|
||||
transition: 300ms;
|
||||
}
|
||||
|
||||
/*Cards borders*/
|
||||
|
||||
.card::after {
|
||||
position: absolute;
|
||||
top: -0.05em;
|
||||
bottom: -0.05em;
|
||||
left: -0.05em;
|
||||
right: -0.05em;
|
||||
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--card-gradient-left) 0%,
|
||||
var(--card-gradient-right) 100%
|
||||
);
|
||||
content: "";
|
||||
z-index: -1;
|
||||
border-radius: 1.2em;
|
||||
|
||||
filter: drop-shadow(#00000080 0 2em 40px);
|
||||
|
||||
transition: 500ms;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
top: -1%;
|
||||
}
|
||||
|
||||
.card:hover::after {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--card-hover-gradient-left) 0%,
|
||||
var(--card-hover-gradient-right) 100%
|
||||
);
|
||||
filter: drop-shadow(var(--card-hover-shadow) 0 2em 40px);
|
||||
|
||||
top: -0.1em;
|
||||
bottom: -0.1em;
|
||||
left: -0.1em;
|
||||
right: -0.1em;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 25%;
|
||||
|
||||
font-family: "IBM Plex Mono";
|
||||
font-weight: 500;
|
||||
font-size: 2em;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 25%;
|
||||
|
||||
height: fit-content;
|
||||
width: 65%;
|
||||
|
||||
font-family: "IBM Plex Mono";
|
||||
font-size: 1.4em;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.card > img {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 6%;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--Tablets---------------------------------------------------------->
|
||||
<style>
|
||||
@media (max-width: 1210px) AND (min-width: 800px) {
|
||||
.card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
/*max-width: 300px;*/
|
||||
height: auto;
|
||||
min-height: 14rem;
|
||||
|
||||
margin: 0;
|
||||
padding: 1.4rem;
|
||||
|
||||
background-color: #121212;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card::after {
|
||||
border-radius: 1.2em;
|
||||
filter: drop-shadow(#00000080 0 1em 20px);
|
||||
}
|
||||
|
||||
.card > img {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 6%;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 23%;
|
||||
|
||||
font-family: "IBM Plex Mono";
|
||||
font-weight: 500;
|
||||
font-size: 1.6em;
|
||||
color: #eaeaea;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
position: static;
|
||||
width: 100%;
|
||||
|
||||
margin-top: 5em;
|
||||
margin-left: 0;
|
||||
|
||||
font-size: 1.2em;
|
||||
color: #eaeaea;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--Mobile---------------------------------------------------------->
|
||||
<style>
|
||||
@media (max-width: 800px) {
|
||||
.card {
|
||||
position: relative;
|
||||
width: 90vw;
|
||||
max-width: 420px;
|
||||
height: auto;
|
||||
min-height: 14rem;
|
||||
|
||||
margin: 1rem 0;
|
||||
padding: 1.2rem 1rem;
|
||||
|
||||
background-color: #121212;
|
||||
box-sizing: border-box;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.card::after {
|
||||
border-radius: 1.2em;
|
||||
filter: drop-shadow(#00000080 0 1em 20px);
|
||||
}
|
||||
|
||||
.card > img {
|
||||
position: static;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
|
||||
margin-bottom: 0.8em;
|
||||
margin-right: 0;
|
||||
margin-top: 0.2em;
|
||||
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
position: static;
|
||||
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 0.2em;
|
||||
margin-left: 0;
|
||||
|
||||
font-size: 1.7em;
|
||||
font-weight: 600;
|
||||
color: #eaeaea;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
position: static;
|
||||
width: 100%;
|
||||
|
||||
margin-top: 1em;
|
||||
margin-left: 0;
|
||||
|
||||
font-size: 1em;
|
||||
color: #eaeaea;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
81
src/components/Logo.astro
Normal file
81
src/components/Logo.astro
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
const { logo, link, text } = Astro.props;
|
||||
---
|
||||
|
||||
<a href={link}>
|
||||
<img class="logo" src={logo} alt="://" />
|
||||
</a>
|
||||
<div class="instance-name">
|
||||
{text}
|
||||
</div>
|
||||
|
||||
<!--Default---------------------------------------------------------->
|
||||
<style>
|
||||
.logo {
|
||||
position: fixed;
|
||||
top: 1.8rem;
|
||||
left: 2rem;
|
||||
width: 3.7rem;
|
||||
height: 3.7rem;
|
||||
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 4px #7782ff);
|
||||
-webkit-filter: drop-shadow(0 0 4px #7782ff);
|
||||
|
||||
transition: cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
.instance-name {
|
||||
position: fixed;
|
||||
|
||||
top: 2rem;
|
||||
left: 6.5rem;
|
||||
|
||||
color: var(--text);
|
||||
|
||||
font-family: "IBM Plex Mono";
|
||||
font-weight: 600;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--Tablets---------------------------------------------------------->
|
||||
<style>
|
||||
@media (max-width: 1210px) AND (min-width: 800px) {
|
||||
.logo {
|
||||
position: absolute;
|
||||
top: 1.3rem;
|
||||
left: 1.3rem;
|
||||
z-index: 2;
|
||||
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
display: block;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.instance-name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--Mobile---------------------------------------------------------->
|
||||
<style>
|
||||
@media (max-width: 800px) {
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
.instance-name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,23 @@
|
|||
{
|
||||
"website_title": "Website Title",
|
||||
"website_logo": "https://...",
|
||||
"page_name": "",
|
||||
"website_status_link": "https://...",
|
||||
"colors": {
|
||||
"primary_accent": "#353be5",
|
||||
"secondary_accent": "#353be5",
|
||||
"background": "#000000",
|
||||
"text": "#eaeaea",
|
||||
"cards": {
|
||||
"background": "#121212",
|
||||
"text": "#eaeaea",
|
||||
"gradient_left": "#353be5",
|
||||
"gradient_right": "#43434388",
|
||||
"hover_gradient_left": "#4000ff",
|
||||
"hover_gradient_right": "#353be570",
|
||||
"hover_shadow": "#4f35e5a0"
|
||||
}
|
||||
},
|
||||
"cards": [
|
||||
{
|
||||
"title": "Card One",
|
||||
|
|
|
|||
|
|
@ -1,66 +1,98 @@
|
|||
---
|
||||
import "../styles/common.css";
|
||||
import "../styles/mobile.css";
|
||||
import "../styles/tablet.css";
|
||||
// === Imports
|
||||
|
||||
import "../styles/global.css";
|
||||
import "./index.css";
|
||||
|
||||
import Card from "../components/Card.astro";
|
||||
import Logo from "../components/Logo.astro";
|
||||
|
||||
import data from "../data/content.json";
|
||||
const { cards, website_title, website_logo } = data;
|
||||
|
||||
// === Defaults
|
||||
|
||||
const defaultColors = {
|
||||
accent: "#353be5",
|
||||
background: "#000000",
|
||||
text: "#eaeaea",
|
||||
cards: {
|
||||
background: "#121212",
|
||||
text: "#eaeaea",
|
||||
gradient_left: "#353be5",
|
||||
gradient_right: "#43434388",
|
||||
hover_gradient_left: "#4000ff",
|
||||
hover_gradient_right: "#353be570",
|
||||
hover_shadow: "#4f35e5a0",
|
||||
},
|
||||
};
|
||||
|
||||
// === Configs
|
||||
|
||||
const { cards, website_title, website_logo, website_status_link, page_name } =
|
||||
data;
|
||||
const theme = { ...defaultColors, ...data.colors };
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<!-- <link rel="stylesheet" href="style.css" /> -->
|
||||
|
||||
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
|
||||
<!-- DISABLED because it prevents the font from loading -->
|
||||
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
|
||||
<title>{website_title}</title>
|
||||
|
||||
<style define:vars={theme}></style>
|
||||
<style
|
||||
define:vars={{
|
||||
// Flatten card object to use inside css
|
||||
"card-background": theme.cards.background,
|
||||
"card-text": theme.cards.text,
|
||||
"card-gradient-left": theme.cards.gradient_left,
|
||||
"card-gradient-right": theme.cards.gradient_right,
|
||||
"card-hover-gradient-left": theme.cards.hover_gradient_left,
|
||||
"card-hover-gradient-right": theme.cards.hover_gradient_right,
|
||||
"card-hover-shadow": theme.cards.hover_shadow,
|
||||
}}
|
||||
></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="halo"></div>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="header-row">
|
||||
<a href="https://status.oblic-parallels.fr">
|
||||
<img class="logo" src={website_logo} />
|
||||
</a>
|
||||
<Logo
|
||||
logo={website_logo}
|
||||
link={website_status_link}
|
||||
text={page_name}
|
||||
/>
|
||||
<h1 class="site-title">{website_title}</h1>
|
||||
</div>
|
||||
<div class="welcome-title">
|
||||
<h2>Welcome to</h2>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
window.addEventListener(
|
||||
"wheel",
|
||||
function (e) {
|
||||
if (e.deltaY !== 0) {
|
||||
e.preventDefault();
|
||||
window.scrollBy({
|
||||
left: e.deltaY,
|
||||
behavior: "auto",
|
||||
});
|
||||
}
|
||||
},
|
||||
{ passive: false },
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="card-container">
|
||||
{
|
||||
cards.map((card) => (
|
||||
<a class="card" href={card.link}>
|
||||
<img src={card.icon} />
|
||||
<div class="card-title">{card.title}</div>
|
||||
<div class="card-desc">{card.description}</div>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
{cards.map((info) => <Card {...info} />)}
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<!-- Vertical scroll conversion -->
|
||||
<script>
|
||||
window.addEventListener(
|
||||
"wheel",
|
||||
function (e) {
|
||||
if (window.innerWidth > 1210 && e.deltaY !== 0) {
|
||||
e.preventDefault();
|
||||
window.scrollBy({
|
||||
left: e.deltaY,
|
||||
behavior: "auto",
|
||||
});
|
||||
}
|
||||
},
|
||||
{ passive: false },
|
||||
);
|
||||
</script>
|
||||
</html>
|
||||
|
|
|
|||
337
src/pages/index.css
Normal file
337
src/pages/index.css
Normal file
|
|
@ -0,0 +1,337 @@
|
|||
/*-Computer-Screen-----------------------------------------------------*/
|
||||
/*-(Default)-----------------------------*/
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
user-select: none;
|
||||
background: radial-gradient(
|
||||
circle at 50% 200%,
|
||||
var(--accent) 40%,
|
||||
var(--accent) 45%,
|
||||
#00000000 80%
|
||||
);
|
||||
background-color: var(--background);
|
||||
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
padding: 0;
|
||||
|
||||
font-family: "Inter";
|
||||
}
|
||||
|
||||
/*-Texts-----------------------------*/
|
||||
|
||||
h1 {
|
||||
position: fixed;
|
||||
top: 27%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%); /*Center (compensate size)*/
|
||||
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
font-family: "Inter";
|
||||
font-weight: 600;
|
||||
font-size: 500%;
|
||||
user-select: none;
|
||||
letter-spacing: 0.1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: fixed;
|
||||
top: 16%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%); /*Center (compensate size)*/
|
||||
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
font-family: "IBM Plex Mono";
|
||||
font-weight: 400;
|
||||
font-size: 250%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/*-Cards-----------------------------*/
|
||||
|
||||
.card-container {
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
z-index: 1;
|
||||
|
||||
height: 40%;
|
||||
|
||||
/*Calculate offset to center the second card (if possible) */
|
||||
/* screen_width - (card1_width + card2_margins)/2 */ /* Width includes margins */
|
||||
padding-left: calc(max(50vw - ((500px + 2rem) + (500px + 6rem) / 2), 4rem));
|
||||
padding-right: 4rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: 4rem;
|
||||
align-items: center; /* Vertical alignment */
|
||||
|
||||
overflow: visible; /* Prevent cards shadows to be cut off */
|
||||
|
||||
/* Hide scrollbar for Chrome and Safari */
|
||||
/*&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}*/
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
/*-ms-overflow-style: none;
|
||||
scrollbar-width: none;*/
|
||||
}
|
||||
|
||||
/*-Tablet-Screen-----------------------------------------------------*/
|
||||
|
||||
@media (max-width: 1210px) AND (min-width: 800px) {
|
||||
/*-Page-----------------------------*/
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter";
|
||||
background-color: #000;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/*-Header-----------------------------*/
|
||||
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
|
||||
width: 100vw;
|
||||
height: 5.5rem;
|
||||
|
||||
background: #00000090;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
/*mask: linear-gradient(black, black, transparent);*/
|
||||
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header-row {
|
||||
position: relative;
|
||||
|
||||
width: 100vw;
|
||||
height: 5.5rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
|
||||
margin: 0;
|
||||
|
||||
flex: 0 1 auto;
|
||||
|
||||
font-size: 2.2em;
|
||||
font-family: "Inter";
|
||||
font-weight: 600;
|
||||
color: #eaeaea;
|
||||
text-align: center;
|
||||
letter-spacing: 0.1rem;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*-Texts-----------------------------*/
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
position: static;
|
||||
transform: none;
|
||||
z-index: 1;
|
||||
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
font-size: 2.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3em;
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*-Cards-----------------------------*/
|
||||
|
||||
.card-container {
|
||||
position: relative;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 22rem;
|
||||
|
||||
min-height: 0;
|
||||
height: calc(100vh - 5.5rem);
|
||||
width: 80vw;
|
||||
max-width: 1200px; /* Prevents from getting too wide */
|
||||
|
||||
margin: 0 auto; /* 'auto' centers it horizontally */
|
||||
padding-bottom: 10%;
|
||||
|
||||
display: grid;
|
||||
/* 2 equal columns ('1fr' means 1 fraction of available space) */
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
overflow: visible;
|
||||
gap: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*-Phone-Screen-----------------------------------------------------*/
|
||||
|
||||
@media (max-width: 800px) {
|
||||
/*-Page-----------------------------*/
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter";
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/*-Header-----------------------------*/
|
||||
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
|
||||
width: 100vw;
|
||||
height: 5.5rem;
|
||||
|
||||
background: transparent;
|
||||
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header-row {
|
||||
position: relative;
|
||||
|
||||
width: 100vw;
|
||||
height: 5.5rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
|
||||
margin: 0;
|
||||
|
||||
flex: 0 1 auto;
|
||||
|
||||
font-size: 2.2em;
|
||||
font-family: "Inter";
|
||||
font-weight: 600;
|
||||
color: #eaeaea;
|
||||
text-align: center;
|
||||
letter-spacing: 0.1rem;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*-Texts-----------------------------*/
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
position: static;
|
||||
transform: none;
|
||||
z-index: 1;
|
||||
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
font-size: 2.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3em;
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*-Cards-----------------------------*/
|
||||
|
||||
.card-container {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 5.5rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
width: 100vw;
|
||||
min-height: 0;
|
||||
height: calc(100vh - 5.5rem);
|
||||
|
||||
margin: 0;
|
||||
padding: 10rem 1rem 1rem 1rem;
|
||||
|
||||
gap: 1rem;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,193 +0,0 @@
|
|||
/*-Impports----------------------------------------------------------*/
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
|
||||
|
||||
/*-Fonts----------------------------------------------------------*/
|
||||
|
||||
/*-Page----------------------------------------------------------*/
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
user-select: none;
|
||||
background: radial-gradient(
|
||||
circle at 50% 200%,
|
||||
#353be5 0%,
|
||||
#353be5 45%,
|
||||
#00000000 80%
|
||||
);
|
||||
background-color: #000000;
|
||||
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
padding: 0;
|
||||
|
||||
font-family: "Inter";
|
||||
}
|
||||
|
||||
/*-Texts----------------------------------------------------------*/
|
||||
|
||||
h1 {
|
||||
position: fixed;
|
||||
top: 27%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%); /*Center (compensate size)*/
|
||||
|
||||
color: #eaeaea;
|
||||
text-align: center;
|
||||
font-family: "Inter";
|
||||
font-weight: 600;
|
||||
font-size: 500%;
|
||||
user-select: none;
|
||||
letter-spacing: 0.1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: fixed;
|
||||
top: 16%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%); /*Center (compensate size)*/
|
||||
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-family: "IBM Plex Mono";
|
||||
font-weight: 400;
|
||||
font-size: 250%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/*-Cards----------------------------------------------------------*/
|
||||
|
||||
.card-container {
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
z-index: 1;
|
||||
|
||||
height: 40%;
|
||||
|
||||
/*Calculate offset to center the second card (if possible) */
|
||||
/* screen_width - (card1_width + card2_margins)/2 */ /* Width includes margins */
|
||||
padding-left: calc(max(50vw - ((500px + 2rem) + (500px + 6rem) / 2), 4rem));
|
||||
padding-right: 4rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: 4rem;
|
||||
align-items: center; /* Vertical alignment */
|
||||
|
||||
overflow: visible; /* Prevent cards shadows to be cut off */
|
||||
|
||||
/* Hide scrollbar for Chrome and Safari */
|
||||
/*&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}*/
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
/*-ms-overflow-style: none;
|
||||
scrollbar-width: none;*/
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
width: 500px;
|
||||
height: 290px;
|
||||
|
||||
margin-top: 4rem;
|
||||
|
||||
background-color: #121212;
|
||||
|
||||
border: 4px solid transparent;
|
||||
border-radius: 1.4em;
|
||||
background-clip: padding-box;
|
||||
|
||||
transition: 300ms;
|
||||
}
|
||||
|
||||
/*Cards borders*/
|
||||
.card::after {
|
||||
position: absolute;
|
||||
top: -0.05em;
|
||||
bottom: -0.05em;
|
||||
left: -0.05em;
|
||||
right: -0.05em;
|
||||
|
||||
background: linear-gradient(135deg, #353be5 0%, #43434388 100%);
|
||||
content: "";
|
||||
z-index: -1;
|
||||
border-radius: 1.2em;
|
||||
|
||||
filter: drop-shadow(#00000080 0 2em 40px);
|
||||
|
||||
transition: 500ms;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
top: -1%;
|
||||
}
|
||||
|
||||
.card:hover::after {
|
||||
background: linear-gradient(135deg, #4000ff 0%, #353be570 100%);
|
||||
filter: drop-shadow(#4f35e5a0 0 2em 40px);
|
||||
|
||||
top: -0.1em;
|
||||
bottom: -0.1em;
|
||||
left: -0.1em;
|
||||
right: -0.1em;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 25%;
|
||||
|
||||
font-family: "IBM Plex Mono";
|
||||
font-weight: 500;
|
||||
font-size: 2em;
|
||||
color: #eaeaea;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 25%;
|
||||
|
||||
height: fit-content;
|
||||
width: 65%;
|
||||
|
||||
font-family: "IBM Plex Mono";
|
||||
font-size: 1.4em;
|
||||
color: #eaeaea;
|
||||
}
|
||||
|
||||
.card > img {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 6%;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
/*-Logo----------------------------------------------------------*/
|
||||
|
||||
.logo {
|
||||
position: fixed;
|
||||
margin-top: 3vh;
|
||||
margin-left: 3vh;
|
||||
width: 3.7rem;
|
||||
height: 3.7rem;
|
||||
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 4px #7782ff);
|
||||
-webkit-filter: drop-shadow(0 0 4px #7782ff);
|
||||
|
||||
transition: cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
3
src/styles/global.css
Normal file
3
src/styles/global.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/*-Fonts----------------------------------------------------------*/
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
|
||||
|
|
@ -1,203 +0,0 @@
|
|||
/*-Phone-Screen-----------------------------------------------------*/
|
||||
|
||||
@media (max-width: 800px) {
|
||||
/*-Page----------------------------------------------------------*/
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter";
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/*-Header--------------------------------------------------------*/
|
||||
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
|
||||
width: 100vw;
|
||||
height: 5.5rem;
|
||||
|
||||
background: transparent;
|
||||
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header-row {
|
||||
position: relative;
|
||||
|
||||
width: 100vw;
|
||||
height: 5.5rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: none;
|
||||
|
||||
position: absolute;
|
||||
top: 1.3rem;
|
||||
left: 1.3rem;
|
||||
z-index: 2;
|
||||
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
/*display: block;*/
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
|
||||
margin: 0;
|
||||
|
||||
flex: 0 1 auto;
|
||||
|
||||
font-size: 2.2em;
|
||||
font-family: "Inter";
|
||||
font-weight: 600;
|
||||
color: #eaeaea;
|
||||
text-align: center;
|
||||
letter-spacing: 0.1rem;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*-Texts---------------------------------------------------------*/
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
position: static;
|
||||
transform: none;
|
||||
z-index: 1;
|
||||
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
font-size: 2.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3em;
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*-Cards---------------------------------------------------------*/
|
||||
|
||||
.card-container {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 5.5rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
width: 100vw;
|
||||
min-height: 0;
|
||||
height: calc(100vh - 5.5rem);
|
||||
|
||||
margin: 0;
|
||||
padding: 10rem 1rem 1rem 1rem;
|
||||
|
||||
gap: 1rem;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
width: 90vw;
|
||||
max-width: 420px;
|
||||
height: auto;
|
||||
min-height: 14rem;
|
||||
|
||||
margin: 1rem 0;
|
||||
padding: 1.2rem 1rem;
|
||||
|
||||
background-color: #121212;
|
||||
box-sizing: border-box;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.card::after {
|
||||
border-radius: 1.2em;
|
||||
filter: drop-shadow(#00000080 0 1em 20px);
|
||||
}
|
||||
|
||||
.card > img {
|
||||
position: static;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
|
||||
margin-bottom: 0.8em;
|
||||
margin-right: 0;
|
||||
margin-top: 0.2em;
|
||||
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
position: static;
|
||||
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 0.2em;
|
||||
margin-left: 0;
|
||||
|
||||
font-size: 1.7em;
|
||||
font-weight: 600;
|
||||
color: #eaeaea;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
position: static;
|
||||
width: 100%;
|
||||
|
||||
margin-top: 1em;
|
||||
margin-left: 0;
|
||||
|
||||
font-size: 1em;
|
||||
color: #eaeaea;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,192 +0,0 @@
|
|||
/*-Tablet-Screen-----------------------------------------------------*/
|
||||
|
||||
@media (max-width: 1210px) AND (min-width: 800px) {
|
||||
/*-Page----------------------------------------------------------*/
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter";
|
||||
background-color: #000;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/*-Header--------------------------------------------------------*/
|
||||
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
|
||||
width: 100vw;
|
||||
height: 5.5rem;
|
||||
|
||||
background: #00000090;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
/*mask: linear-gradient(black, black, transparent);*/
|
||||
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header-row {
|
||||
position: relative;
|
||||
|
||||
width: 100vw;
|
||||
height: 5.5rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
top: 1.3rem;
|
||||
left: 1.3rem;
|
||||
z-index: 2;
|
||||
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
display: block;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
|
||||
margin: 0;
|
||||
|
||||
flex: 0 1 auto;
|
||||
|
||||
font-size: 2.2em;
|
||||
font-family: "Inter";
|
||||
font-weight: 600;
|
||||
color: #eaeaea;
|
||||
text-align: center;
|
||||
letter-spacing: 0.1rem;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*-Texts---------------------------------------------------------*/
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
position: static;
|
||||
transform: none;
|
||||
z-index: 1;
|
||||
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
font-size: 2.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3em;
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*-Cards---------------------------------------------------------*/
|
||||
|
||||
.card-container {
|
||||
position: relative;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 22rem;
|
||||
|
||||
min-height: 0;
|
||||
height: calc(100vh - 5.5rem);
|
||||
width: 80vw;
|
||||
max-width: 1200px; /* Prevents from getting too wide */
|
||||
|
||||
margin: 0 auto; /* 'auto' centers it horizontally */
|
||||
padding-bottom: 10%;
|
||||
|
||||
display: grid;
|
||||
/* 2 equal columns ('1fr' means 1 fraction of available space) */
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
overflow: visible;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
/*max-width: 300px;*/
|
||||
height: auto;
|
||||
min-height: 14rem;
|
||||
|
||||
margin: 0;
|
||||
padding: 1.4rem;
|
||||
|
||||
background-color: #121212;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card::after {
|
||||
border-radius: 1.2em;
|
||||
filter: drop-shadow(#00000080 0 1em 20px);
|
||||
}
|
||||
|
||||
.card > img {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 6%;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 23%;
|
||||
|
||||
font-family: "IBM Plex Mono";
|
||||
font-weight: 500;
|
||||
font-size: 1.6em;
|
||||
color: #eaeaea;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
position: static;
|
||||
width: 100%;
|
||||
|
||||
margin-top: 5em;
|
||||
margin-left: 0;
|
||||
|
||||
font-size: 1.2em;
|
||||
color: #eaeaea;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue