Migrated to Astro
This commit is contained in:
Gu://em_
parent
20f9d53170
commit
d4afe3e086
19 changed files with 3237 additions and 200 deletions
18
src/data/content.json
Normal file
18
src/data/content.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"website_title": "Website Title",
|
||||
"website_logo": "https://...",
|
||||
"cards": [
|
||||
{
|
||||
"title": "Card One",
|
||||
"icon": "https://...",
|
||||
"description": "First description",
|
||||
"link": "https://..."
|
||||
},
|
||||
{
|
||||
"title": "Card Two",
|
||||
"icon": "https://...",
|
||||
"description": "Second description",
|
||||
"link": "https://..."
|
||||
}
|
||||
]
|
||||
}
|
||||
49
src/pages/index.astro
Normal file
49
src/pages/index.astro
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
---
|
||||
import "../styles/common.css";
|
||||
import data from "../data/op-public.json";
|
||||
const { cards, website_title, website_logo } = data;
|
||||
---
|
||||
|
||||
<!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'"> -->
|
||||
<title>{website_title}</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="halo"></div>
|
||||
|
||||
<a href="https://status.oblic-parallels.fr"
|
||||
><img class="logo" src={website_logo} /></a
|
||||
></body
|
||||
>
|
||||
|
||||
<div>
|
||||
<!--Titles-->
|
||||
<div>
|
||||
<h2>Welcome to</h2>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Oblic Parallels</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-container">
|
||||
<!-- Cards -->
|
||||
{
|
||||
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>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</html>
|
||||
209
src/styles/common.css
Normal file
209
src/styles/common.css
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
/*-Impports----------------------------------------------------------*/
|
||||
/* @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap'); */
|
||||
@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----------------------------------------------------------*/
|
||||
|
||||
/* @font-face {
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/ibmplexmono/v19/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2) format('woff2');
|
||||
} */
|
||||
|
||||
/*-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-image: url(assets/svg/background.svg); */
|
||||
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
padding: 0;
|
||||
|
||||
font-family: "Inter";
|
||||
}
|
||||
|
||||
.halo {
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: radial-gradient(
|
||||
circle at 50% 200%,
|
||||
#353be5 0%,
|
||||
#353be5 45%,
|
||||
#00000000 80%
|
||||
);
|
||||
}
|
||||
|
||||
/*-Texts----------------------------------------------------------*/
|
||||
|
||||
h1 {
|
||||
position: fixed;
|
||||
top: 27%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%); /*Center (compensate size)*/
|
||||
z-index: -1;
|
||||
|
||||
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)*/
|
||||
z-index: -1;
|
||||
|
||||
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%;
|
||||
/* width: 200%; */
|
||||
|
||||
/*Calculate offset to center the second card*/
|
||||
/* screen_width - (card1_width + card2_margins)/2 */ /* Width includes margins */
|
||||
/*TODO to correct (maybe JS or css rules)*/
|
||||
margin-left: calc(50vw - ((500px + 4rem) + (500px + 6rem) / 2));
|
||||
|
||||
display: flex; /* Flexbox */
|
||||
flex-direction: row; /* Align content horizontally */
|
||||
justify-content: center;
|
||||
overflow: visible; /*Prevent cards shadows to be cut off*/
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
|
||||
width: 31.2rem;
|
||||
height: 18rem;
|
||||
|
||||
margin-top: 2%;
|
||||
margin-bottom: 2%;
|
||||
margin-left: 2rem;
|
||||
margin-right: 2rem;
|
||||
|
||||
color: #ffffff00; /*Temporary*/
|
||||
background-color: #121212;
|
||||
|
||||
/* padding: 20px; */
|
||||
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;
|
||||
}
|
||||
44
src/styles/themes/op-public.css
Normal file
44
src/styles/themes/op-public.css
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
/*-Impports----------------------------------------------------------*/
|
||||
|
||||
/*-Fonts----------------------------------------------------------*/
|
||||
|
||||
/*-Page----------------------------------------------------------*/
|
||||
|
||||
.halo {
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: radial-gradient(
|
||||
circle at 50% 200%,
|
||||
#353be5 0%,
|
||||
#353be5 45%,
|
||||
#00000000 80%
|
||||
);
|
||||
}
|
||||
|
||||
/*-Texts----------------------------------------------------------*/
|
||||
|
||||
/*-Cards----------------------------------------------------------*/
|
||||
|
||||
.card {
|
||||
background-color: #121212;
|
||||
border-radius: 1.4em;
|
||||
}
|
||||
|
||||
/*Cards borders*/
|
||||
.card::after {
|
||||
background: linear-gradient(135deg, #353be5 0%, #43434388 100%);
|
||||
border-radius: 1.2em;
|
||||
}
|
||||
|
||||
.card:hover::after {
|
||||
background: linear-gradient(135deg, #4000ff 0%, #353be570 100%);
|
||||
filter: drop-shadow(#4f35e5a0 0 2em 40px);
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 4px #7782ff);
|
||||
-webkit-filter: drop-shadow(0 0 4px #7782ff);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue