Bugfix: pre width; other menu for articles

This commit is contained in:
DarkCat09 2023-06-30 13:13:59 +04:00
parent 994a41f9e3
commit 8d372d30fb
4 changed files with 22 additions and 6 deletions

View file

@ -6,16 +6,21 @@ import MenuItem from "../components/MenuItem.astro";
export interface Props { export interface Props {
title: string; title: string;
description: string; description: string;
article?: boolean;
} }
const { title, description } = Astro.props; const { title, description, article = false } = Astro.props;
--- ---
<Layout title={"Blog | " + title} description={description}> <Layout title={"Blog | " + title} description={description}>
<slot name="metadata" slot="metadata" /> <slot name="metadata" slot="metadata" />
<Menu> <Menu>
{
!article ?
<MenuItem name="Home" icon="&#xf104;" link="/" /> <MenuItem name="Home" icon="&#xf104;" link="/" />
<MenuItem name="Articles" icon="&#xf015;" link="/blog" /> <MenuItem name="Articles" icon="&#xf1ea;" link="/blog" /> :
<MenuItem name="Articles" icon="&#xf104;" link="/blog" />
}
<MenuItem name="Shorts" icon="&#xf0e7;" link="/blog/shorts" /> <MenuItem name="Shorts" icon="&#xf0e7;" link="/blog/shorts" />
<MenuItem name="Random" icon="&#xf522;" link="/blog/random" /> <MenuItem name="Random" icon="&#xf522;" link="/blog/random" />
<MenuItem name="Search" icon="&#xf002;" link="/blog/search" /> <MenuItem name="Search" icon="&#xf002;" link="/blog/search" />

View file

@ -34,7 +34,7 @@ const { title, description } = Astro.props;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
padding: 0 0.5rem; padding: 0 @body-padding;
background: var(--bg); background: var(--bg);
color: var(--fg); color: var(--fg);
@ -46,8 +46,12 @@ const { title, description } = Astro.props;
main { main {
margin: auto; margin: auto;
padding: 0.25rem; padding: @main-padding;
max-width: @max-width; max-width: @max-width;
/*
width: 100%;
overflow-x: hidden;
*/
} }
article { article {

View file

@ -26,7 +26,7 @@ const {
const locale = 'ru-RU'; const locale = 'ru-RU';
--- ---
<BlogLayout title={title} description={description}> <BlogLayout title={title} description={description} article={true}>
<Fragment slot="metadata"> <Fragment slot="metadata">
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:title" content={title} /> <meta property="og:title" content={title} />
@ -50,6 +50,8 @@ const locale = 'ru-RU';
</BlogLayout> </BlogLayout>
<style lang="less" is:global> <style lang="less" is:global>
@import "/src/styles/max_width.less";
article { article {
& > h1:first-of-type { & > h1:first-of-type {
display: none; display: none;
@ -83,6 +85,9 @@ const locale = 'ru-RU';
} }
pre { pre {
max-width: calc(100vw - @body-padding * 2 - @main-padding * 2) !important;
box-sizing: border-box;
padding: 1rem; padding: 1rem;
border-radius: var(--bdrs); border-radius: var(--bdrs);

View file

@ -1 +1,3 @@
@max-width: 800px; @max-width: 800px;
@body-padding: 0.5rem;
@main-padding: 0.25rem;