🐛 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

@@ -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>
</>