🐛 fix layout

🍱 update 88x31s
🔥 rm landing
This commit is contained in:
lia
2025-08-07 02:27:39 +02:00
parent 282c67b1fc
commit 6a5176caab
23 changed files with 143 additions and 184 deletions

View File

@@ -1,16 +1,18 @@
[package]
name = "web_luciel"
name = "web_iouring"
version = "0.0.0-develop"
authors = ["luciel"]
authors = ["iouring"]
license = "Apache-2.0"
edition = "2024"
rust-version = "1.87"
rust-version = "1.91"
publish = false
[dependencies]
js-sys = "0.3"
yew = { git = "https://github.com/yewstack/yew.git", rev = "550b2cc", features = ["csr"] }
yew-router = { git = "https://github.com/yewstack/yew.git", rev = "550b2cc" }
yew = { git = "https://github.com/yewstack/yew.git", rev = "21f373b", features = [
"csr",
] }
yew-router = { git = "https://github.com/yewstack/yew.git", rev = "21f373b" }
wasm-bindgen = { version = "0.2" }
log = { version = "0.4" }

View File

@@ -1,29 +1,38 @@
<!DOCTYPE html>
<html lang="en" class="theme-dark">
<head>
<meta charset="UTF-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>celesteflare.cc ~ lunary</title>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>i0ur.ing ~ welcome</title>
<link data-trunk rel="copy-file" href="public/misc/favicon.ico"/>
<link data-trunk rel="copy-file" href="public/misc/profile.avif"/>
<link data-trunk rel="copy-file" href="public/misc/oneko.gif"/>
<link data-trunk rel="copy-file" href="public/misc/monocraft.ttf"/>
<link data-trunk rel="copy-file" href="public/misc/favicon.ico" />
<link data-trunk rel="copy-file" href="public/misc/profile.avif" />
<link data-trunk rel="copy-file" href="public/misc/oneko.gif" />
<link data-trunk rel="copy-file" href="public/misc/monocraft.ttf" />
<link data-trunk rel="copy-file" href="public/shaders/post.bloom.svg"/>
<link data-trunk rel="copy-file" href="public/shaders/post.bloom.svg" />
<link data-trunk rel="copy-file" href="public/buttons/luciel.png"/>
<link data-trunk rel="copy-file" href="public/buttons/servfail.png"/>
<link data-trunk rel="copy-file" href="public/buttons/dns.png"/>
<link data-trunk rel="copy-file" href="public/buttons/wasm.png"/>
<link data-trunk rel="copy-file" href="public/buttons/rust.png"/>
<link data-trunk rel="copy-file" href="public/buttons/java.png"/>
<link data-trunk rel="copy-file" href="public/buttons/artix.png"/>
<link data-trunk rel="copy-file" href="public/buttons/iouring.png" />
<link data-trunk rel="copy-file" href="public/buttons/wasm.png" />
<link data-trunk rel="copy-file" href="public/buttons/dataforest.png" />
<link data-trunk rel="copy-file" href="public/buttons/servfail.png" />
<link data-trunk rel="copy-file" href="public/buttons/rust.png" />
<link data-trunk rel="copy-file" href="public/buttons/csharp.png" />
<link data-trunk rel="copy-file" href="public/buttons/kotlin.png" />
<link data-trunk rel="copy-file" href="public/buttons/java.png" />
<link data-trunk rel="copy-file" href="public/buttons/fedora.png" />
<link data-trunk rel="copy-file" href="public/buttons/artix.png" />
<link data-trunk rel="copy-file" href="public/buttons/nixos.png" />
<link data-trunk rel="copy-file" href="public/buttons/chimera.png" />
<link data-trunk rel="copy-file" href="public/buttons/void.png" />
<link data-trunk rel="copy-file" href="public/buttons/aqueer.png" />
<link data-trunk rel="sass" href="main.scss"/>
<link data-trunk rel="rust"/>
<base data-trunk-public-url/>
<link data-trunk rel="sass" href="main.scss" />
<link data-trunk rel="rust" />
<base data-trunk-public-url />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma/css/bulma.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma/css/bulma.min.css" />
</head>
</html>
</html>

View File

@@ -7,8 +7,13 @@
html * {
font-family: monocraft, monospace !important;
scrollbar-color: hsla(232, 97%, 85%, 0.5) hsla(240, 21.05%, 14.9%, 0.7);
scrollbar-width: thin;
scrollbar-color: hsla(232, 97%, 85%, 0.5) hsla(240, 21.05%, 14.9%, 0.7) !important;
scrollbar-width: thin !important;
scroll-behavior: smooth !important;
}
::-webkit-scrollbar {
display: none;
}
.textarea {
@@ -26,20 +31,18 @@ html * {
--bulma-shadow-h: 232 !important;
--bulma-shadow-s: 97% !important;
--bulma-shadow-l: 85% !important;
--bulma-shadow: 0 0.5em 1em -0.125em hsla(
var(--bulma-shadow-h),
var(--bulma-shadow-s),
var(--bulma-shadow-l),
0.3
), 0 0px 0 1px hsla(
var(--bulma-shadow-h),
var(--bulma-shadow-s),
var(--bulma-shadow-l),
0.02
) !important;
--bulma-shadow: 0 0.5em 1em -0.125em hsla(var(--bulma-shadow-h),
var(--bulma-shadow-s),
var(--bulma-shadow-l),
0.3), 0 0px 0 1px hsla(var(--bulma-shadow-h),
var(--bulma-shadow-s),
var(--bulma-shadow-l),
0.02) !important;
}
.input, .select select, .textarea {
.input,
.select select,
.textarea {
backdrop-filter: blur(4px);
--bulma-input-h: 232 !important;
--bulma-input-s: 97% !important;
@@ -47,12 +50,10 @@ html * {
--bulma-input-background-h: var(--bulma-input-h) !important;
--bulma-input-background-s: var(--bulma-input-s) !important;
--bulma-input-background-l: var(--bulma-input-l) !important;
background-color: hsla(
var(--bulma-input-h),
var(--bulma-input-s),
var(--bulma-input-background-l),
0.213125
) !important;
background-color: hsla(var(--bulma-input-h),
var(--bulma-input-s),
var(--bulma-input-background-l),
0.213125) !important;
border-color: hsl(var(--bulma-input-h), var(--bulma-input-s), var(--bulma-input-l)) !important;
}
@@ -70,6 +71,6 @@ a.navbar-item:hover {
}
a:hover {
text-decoration: underline;
filter: url("post.bloom.svg#process")
}
text-decoration: underline !important;
filter: url("post.bloom.svg#process") !important;
}

BIN
public/buttons/aqueer.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
public/buttons/chimera.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
public/buttons/csharp.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

BIN
public/buttons/fedora.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
public/buttons/iouring.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
public/buttons/kotlin.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

BIN
public/buttons/nixos.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
public/buttons/void.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 139 KiB

View File

@@ -10,17 +10,14 @@ use yew_router::prelude::*;
mod pages;
use crate::pages::about::About;
use crate::pages::landing::Landing;
use crate::pages::projects::Projects;
use pages::not_found::PageNotFound;
#[derive(Routable, PartialEq, Eq, Clone, Debug)]
pub enum Route {
#[at("/")]
Landing,
#[at("/about")]
About,
#[at("/projects")]
Projects,
@@ -58,37 +55,55 @@ impl Component for App {
fn view(&self, _ctx: &Context<Self>) -> Html {
html! {
<>
<BrowserRouter>
<header>{ self.view_header(_ctx) }</header>
<main style="z-index: 1 !important;">
<canvas style="
background-color: black !important;
position: fixed !important;
left: 0 !important;
top: 0 !important;
z-index: 0 !important;
" ref={self.node_ref.clone()}/>
<div class="is-flex is-flex-shrink-0 is-flex-direction-column is-align-content-center" style="
overflow: scroll !important;
left: 0 !important;
margin-top: var(--bulma-navbar-height) !important;
width: 100% !important;
height: 100% !important;
"><Switch<Route> render={switch} /></div>
</main>
</BrowserRouter>
<footer class="footer" style="
--bulma-footer-background-color: #1E1E2E80 !important;
z-index: 1 !important;
<canvas style="
background-color: black !important;
position: fixed !important;
left: 0px !important;
bottom: 0px !important;
margin-bottom: 0 !important;
width: 100% !important;
padding: 0 !important;
">{ self.view_footer() }</footer>
left: 0 !important;
top: 0 !important;
z-index: 0 !important;
" ref={self.node_ref.clone()}/>
<div style="
display: flex !important;
flex-direction: column !important;
flex-wrap: wrap !important;
height: 100vh !important;
">
<BrowserRouter>
<main style="
z-index: 1 !important;
display: flex !important;
flex-direction: row-reverse !important;
flex-wrap: wrap !important;
overflow: visible !important;
left: 0 !important;
margin-top: calc(var(--bulma-navbar-height)) !important;
margin-bottom: calc(var(--bulma-navbar-height) * 2) !important;
height: calc(100vh - (var(--bulma-navbar-height) * 2)) !important;
width: 100% !important;
align-items: center !important;
"><Switch<Route> render={switch} />
</main>
<header style="
z-index: 1 !important;
display: flex;
flex-direction: column;
flex-wrap: wrap;
">{ self.view_header(_ctx) }</header>
</BrowserRouter>
<footer class="footer" style="
--bulma-footer-background-color: #1E1E2E80 !important;
z-index: 1 !important;
display: flex !important;
flex-direction: column !important;
flex-wrap: wrap !important;
position: fixed !important;
left: 0px !important;
bottom: 0px !important;
margin-bottom: 0 !important;
width: 100% !important;
padding: 0 !important;
">{ self.view_footer() }</footer>
</div>
</>
}
}
@@ -100,11 +115,8 @@ impl Component for App {
fn switch(routes: Route) -> Html {
match routes {
Route::Landing => { html! { <Landing /> } }
Route::About => { html! { <About /> } }
Route::Projects => { html! { <Projects /> } }
Route::NotFound => { html! { <PageNotFound /> } }
}
}
@@ -124,7 +136,6 @@ impl App {
backdrop-filter: blur(4px) !important;
">
<div class="navbar-brand">
<img loading="eager" alt="icowon" class="image pl-2 pr-2 pt-2 pb-2" style="width: var(--bulma-navbar-height) !important; height: var(--bulma-navbar-height) !important;" src="favicon.ico" />
<button class={classes!("navbar-burger", "burger", active_class)} aria-label="menu" aria-expanded="false" onclick={_ctx.link().callback(|_| Msg::ToggleNavbar)}>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
@@ -137,24 +148,6 @@ impl App {
<Link<Route> classes={classes!("navbar-item")} to={Route::About}>{r"about"}</Link<Route>>
<Link<Route> classes={classes!("navbar-item")} to={Route::Projects}>{r"projects"}</Link<Route>>
</div>
<div class="navbar-end is-align-content-center">
<div class="navbar-item mb-0 mr-0 mt-0 is-flex is-flex-direction-row is-flex-wrap-wrap">
<textarea
class="textarea is-size-7"
placeholder=""
rows="1"
readonly=true
style="
max-height: 31px !important;
max-width: max-content !important;
min-width: 0px !important;
resize: none !important;
overflow-x: hidden !important;
overflow-y: scroll !important;
" value="<a href=\"https://celesteflare.cc/\"><img loading=\"eager\" alt=\"luciel\" src=\"https://celesteflare.cc/luciel.png\" style=\"width: 88px !important; height: 31px !important; max-width: 100vw !important;\" /></a>"/>
<a href="https://celesteflare.cc/" class="mr-0"><img loading="eager" alt="luciel" class="image" src="luciel.png" style="width: 88px !important; height: 31px !important; max-width: 100vw !important;" /></a>
</div>
</div>
</div>
</nav>
}
@@ -167,22 +160,31 @@ impl App {
backdrop-filter: blur(4px);
width: 100vw !important;
text-align: left !important;
vertical-align: middle !important;s
vertical-align: middle !important;
height: 40px !important; max-height: 40px !important;
image-rendering: pixelated !important;
">
<div class="is-align-content-flex-start is-flex is-flex-shrink-0 is-flex-direction-column is-align-content-center is-flex-wrap-wrap ml-0 mt-0 mr-0 mb-0" style="width: 100% !important; min-height: 40px !important; height: 40px !important; max-height: 40px !important; overflow-y: hidden !important; overflow-x: auto !important;">
<a class="mt-1 mb-1 mr-1 ml-0" style="
width: 88px !important;
height: 31px !important
" href="https://git.gay/"><img loading="eager" alt="git" class="image" src="https://git.gay/assets/img/button.svg" /></a>
" href="https://i0ur.ing/"><img loading="eager" alt="servfail" class="image" src="iouring.png" /></a>
<a class="mt-1 mb-1 mr-1 ml-0" style="
width: 88px !important;
height: 31px !important
" href="https://donotsta.re/"><img loading="eager" alt="dns" class="image" src="dns.png" /></a>
" href="https://webassembly.org/"><img loading="eager" alt="wasm" class="image" src="wasm.png" /></a>
<a class="mt-1 mb-1 mr-1 ml-0" style="
width: 88px !important;
height: 31px !important
" href="https://beta.servfail.network/"><img loading="eager" alt="servfail" class="image" src="servfail.png" /></a>
<a class="mt-1 mb-1 mr-1 ml-0" style="
width: 88px !important;
height: 31px !important
" href="https://www.dataforest.net/en/"><img loading="eager" alt="dataforest" class="image" src="dataforest.png" /></a>
<a class="mt-1 mb-1 mr-1 ml-0" style="
width: 88px !important;
height: 31px !important
" href="https://fedoraproject.org/"><img loading="eager" alt="fedora" class="image" src="fedora.png" /></a>
<a class="mt-1 mb-1 mr-1 ml-0" style="
width: 88px !important;
height: 31px !important
@@ -190,7 +192,15 @@ impl App {
<a class="mt-1 mb-1 mr-1 ml-0" style="
width: 88px !important;
height: 31px !important
" href="https://www.java.com/"><img loading="eager" alt="java" class="image" src="java.png" /></a>
" href="https://nixos.org/"><img loading="eager" alt="nixos" class="image" src="nixos.png" /></a>
<a class="mt-1 mb-1 mr-1 ml-0" style="
width: 88px !important;
height: 31px !important
" href="https://chimera-linux.org/"><img loading="eager" alt="void" class="image" src="chimera.png" /></a>
<a class="mt-1 mb-1 mr-1 ml-0" style="
width: 88px !important;
height: 31px !important
" href="https://voidlinux.org/"><img loading="eager" alt="void" class="image" src="void.png" /></a>
<a class="mt-1 mb-1 mr-1 ml-0" style="
width: 88px !important;
height: 31px !important
@@ -198,7 +208,19 @@ impl App {
<a class="mt-1 mb-1 mr-1 ml-0" style="
width: 88px !important;
height: 31px !important
" href="https://webassembly.org/"><img loading="eager" alt="wasm" class="image" src="wasm.png" /></a>
" href="https://dotnet.microsoft.com/en-us/"><img loading="eager" alt="csharp" class="image" src="csharp.png" /></a>
<a class="mt-1 mb-1 mr-1 ml-0" style="
width: 88px !important;
height: 31px !important
" href="https://kotlinlang.org/"><img loading="eager" alt="kotlin" class="image" src="kotlin.png" /></a>
<a class="mt-1 mb-1 mr-1 ml-0" style="
width: 88px !important;
height: 31px !important
" href="https://www.java.com/"><img loading="eager" alt="java" class="image" src="java.png" /></a>
<a class="mt-1 mb-1 mr-1 ml-0" style="
width: 88px !important;
height: 31px !important
"><img loading="eager" alt="aqueer" class="image" src="aqueer.png" /></a>
</div>
</div>
</>

View File

@@ -1,73 +0,0 @@
use crate::Route;
use yew::prelude::*;
use yew_router::prelude::Link;
pub struct Landing;
impl Component for Landing {
type Message = ();
type Properties = ();
fn create(_ctx: &Context<Self>) -> Self {
Self
}
fn view(&self, _ctx: &Context<Self>) -> Html {
html! {
<>
<div class="tile is-parent container" style="
margin: 0 !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
z-index: 2 !important;
">
{ self.view_background() }
{ self.view_text() }
</div>
</>
}
}
}
impl Landing {
fn view_background(&self) -> Html {
html! {
<>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" style="
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 0 !important;
backdrop-filter: blur(24px) !important;
">
<defs>
<@{"linearGradient"} id="trans">
<stop offset="0%" stop-color="#5BCEFA" />
<stop offset="50%" stop-color="#F5A9B8" />
<stop offset="100%" stop-color="#FFFFFF" />
</@>
</defs>
<rect width="100%" height="100%" x="0" y="0" rx="0" ry="0" fill="url(#trans)" fill-opacity="0.2" />
</svg>
</>
}
}
fn view_text(&self) -> Html {
html! {
<>
<Link<Route> classes={classes!("navbar-item")} to={Route::About}><p style="
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: calc(100vh - 16px - (var(--bulma-navbar-height) * 2)) !important;
width: 100% !important;
filter: url(post.bloom.svg#process)
">{r"click to enter"}</p></Link<Route>>
</>
}
}
}

View File

@@ -1,5 +1,3 @@
pub mod landing;
pub mod about;
pub mod projects;