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
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue