suroh/alex.portfolio
1
0
Fork 0
Code Actions

Basic fix for smaller screen

Browse Source
This commit is contained in:
suroh 2025-03-14 18:05:15 +01:00
parent f23c1f5ef0
commit f25aae56ca
4 changed files with 53 additions and 11 deletions
src
assets/styles
main.csstype.css
layouts
base.webc
components
alx-nav.webc

47
src/assets/styles/main.css

@ -17,7 +17,7 @@ body {
--menu-content-width:calc(var(--menu-width) - calc(var(--menu-padding) * 2));
font-family: var(--font-family, sans-serif);
line-height: 1.12;
/* line-height: 1.12; */
color: light-dark(var(--neutral-900), var(--neutral-100));
background-color: light-dark(var(--neutral-100), var(--neutral-900));
@ -40,6 +40,7 @@ nav {
grid-template-rows: subgrid;
grid-auto-flow: column;
grid-area: n;
font-size: var(--fs-500);
alx-nav {
grid-row: 1 / -1;
@ -51,13 +52,32 @@ nav {
text-decoration: none;
}
ul li {
padding-block: 0.125em;
padding-inline: var(--menu-padding);
ul {
li {
padding-block: .5em;
padding-inline: var(--menu-padding);
line-height: 1.1;
text-wrap: balance;
&:has(.active) {
background: light-dark(var(--neutral-900), var(--neutral-100));
color: light-dark(var(--neutral-100), var(--neutral-900));
&:not(:last-child) {
border-bottom: dotted thin light-dark(var(--tonal-900), var(--tonal-100));
}
> :where(a, span) {
line-height: 0.5;
}
&:hover {
background: light-dark(var(--neutral-900), var(--neutral-100));
> a {
color: light-dark(var(--neutral-100), var(--neutral-900));
}
}
&:has(.active) {
background: light-dark(var(--neutral-900), var(--neutral-100));
color: light-dark(var(--neutral-100), var(--neutral-900));
}
}
}
@ -108,6 +128,19 @@ main {
grid-row: 2;
width: 70ch;
header {
.meta {
font-size: var(--fs-500);
margin-block: 0.75em 0.5em;
span:has(+ span)::after {
content: '•';
display: inline-block;
padding-inline: 1ch;
}
}
}
display: grid;
gap: 1em;
align-content: start;

4
src/assets/styles/type.css

@ -56,3 +56,7 @@
.txt-trim {
text-box-trim: both;
}
:where(h1, h2, h3, h4, h5, h6) {
text-wrap: balance;
}

7
src/layouts/base.webc

@ -16,6 +16,11 @@
<meta property="og:image" :content="site.image" />
<meta property="og:type" content="website" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="color-scheme" content="dark light">
<!-- styles -->
<link href="/styles/main.css" rel="stylesheet" webc:keep>
@ -27,7 +32,7 @@
<script type="module" @raw="getBundle('js')" webc:keep></script>
</head>
<body>
<nav class="fs-500">
<nav>
<alx-nav
:@active-nav="page.url === '/'"
:class="page.url"

6
src/layouts/components/alx-nav.webc

@ -9,7 +9,7 @@
<style webc:scoped>
:host {
--nav-width: 15vw;
--nav-width: max(15vw, 20ch);
display: grid;
justify-content: end;
align-content: start;
@ -18,7 +18,7 @@
border-inline-end: thin solid light-dark(var(--tonal-100), var(--tonal-900));
overflow: hidden;
height: 100%;
width: 15vw;
width: var(--nav-width);
transition-delay: none;
transition: width 0.25s 0s ease-in-out;
}
@ -37,7 +37,7 @@
.content {
display: flex;
flex-direction: column;
width: calc(var(--nav-width));
width: var(--nav-width);
}
ul {