New responsive UI for mobile devices
This commit is contained in:
parent
ed03be8bde
commit
e9ae13e69c
3 changed files with 230 additions and 27 deletions
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
import "../styles/common.css";
|
||||
import data from "../data/op-public.json";
|
||||
import "../styles/mobile.css";
|
||||
import data from "../data/content.json";
|
||||
const { cards, website_title, website_logo } = data;
|
||||
---
|
||||
|
||||
|
|
@ -19,31 +20,28 @@ const { cards, website_title, website_logo } = data;
|
|||
<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>
|
||||
<header class="site-header">
|
||||
<div class="header-row">
|
||||
<a href="https://status.oblic-parallels.fr">
|
||||
<img class="logo" src={website_logo} />
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<h1 class="site-title">{website_title}</h1>
|
||||
</div>
|
||||
<div class="welcome-title">
|
||||
<h2>Welcome to</h2>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<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>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue