diff --git a/README.md b/README.md index 917057c..2882302 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ Now uses Astro instead of the old static website ! - `components/` - `layouts/` - `pages/` +- `scripts/` - `data/` - Contains the configs to generate the website, each as a JSON file (contains cards, site name, etc.) - `styles` - default CSS style sheets and custom themes diff --git a/src/pages/index.astro b/src/pages/index.astro index 65df85e..9bce013 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -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;
- - -
- -
-

Welcome to

-
-
-

Oblic Parallels

-
-
- -
- - { - cards.map((card) => ( - - -
{card.title}
-
{card.description}
+
+
+ + - )) - } -
+

{website_title}

+
+
+

Welcome to

+
+ + +
+ { + cards.map((card) => ( + + +
{card.title}
+
{card.description}
+ + )) + } +
+ diff --git a/src/styles/mobile.css b/src/styles/mobile.css new file mode 100644 index 0000000..82c268e --- /dev/null +++ b/src/styles/mobile.css @@ -0,0 +1,204 @@ +/*-Imports----------------------------------------------------------*/ +/*@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");*/ + +/*-Phone Screen Styles---------------------------------------------*/ + +@media (max-width: 600px) { + /*-Page----------------------------------------------------------*/ + + html, + body { + width: 100vw; + min-height: 100vh; + margin: 0; + padding: 0; + overflow-x: hidden; + } + + body { + font-family: "Inter"; + background-color: #000; + } + + .halo { + width: 100vw; + height: 100vh; + } + + /*-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 { + 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; + } + + /*-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; + } + + .card-desc { + position: static; + width: 100%; + + margin-top: 1em; + margin-left: 0; + + font-size: 1em; + color: #eaeaea; + text-align: center; + } +}