🐛 fix layout
🍱 update 88x31s 🔥 rm landing
12
Cargo.toml
@@ -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" }
|
||||
|
||||
17
index.html
@@ -1,9 +1,10 @@
|
||||
<!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>
|
||||
<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" />
|
||||
@@ -12,13 +13,20 @@
|
||||
|
||||
<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/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" />
|
||||
@@ -26,4 +34,5 @@
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma/css/bulma.min.css" />
|
||||
</head>
|
||||
|
||||
</html>
|
||||
33
main.scss
@@ -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),
|
||||
--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),
|
||||
0.3), 0 0px 0 1px hsla(var(--bulma-shadow-h),
|
||||
var(--bulma-shadow-s),
|
||||
var(--bulma-shadow-l),
|
||||
0.02
|
||||
) !important;
|
||||
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),
|
||||
background-color: hsla(var(--bulma-input-h),
|
||||
var(--bulma-input-s),
|
||||
var(--bulma-input-background-l),
|
||||
0.213125
|
||||
) !important;
|
||||
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
|
After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.7 KiB |
BIN
public/buttons/chimera.png
Normal file
|
After Width: | Height: | Size: 2.7 KiB |
BIN
public/buttons/csharp.png
Normal file
|
After Width: | Height: | Size: 3.3 KiB |
BIN
public/buttons/dataforest.png
Normal file
|
After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 4.5 KiB |
BIN
public/buttons/fedora.png
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
public/buttons/iouring.png
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 3.4 KiB |
BIN
public/buttons/kotlin.png
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
BIN
public/buttons/nixos.png
Normal file
|
After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
BIN
public/buttons/void.png
Normal file
|
After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 139 KiB |
104
src/main.rs
@@ -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,10 +55,6 @@ 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;
|
||||
@@ -69,19 +62,40 @@ impl Component for App {
|
||||
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;
|
||||
<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: var(--bulma-navbar-height) !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;
|
||||
height: 100% !important;
|
||||
"><Switch<Route> render={switch} /></div>
|
||||
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;
|
||||
@@ -89,6 +103,7 @@ impl Component for App {
|
||||
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>
|
||||
</>
|
||||
|
||||
@@ -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>>
|
||||
</>
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,3 @@
|
||||
pub mod landing;
|
||||
|
||||
pub mod about;
|
||||
pub mod projects;
|
||||
|
||||
|
||||