Bugfix: pre
width; other menu for articles
This commit is contained in:
parent
994a41f9e3
commit
8d372d30fb
4 changed files with 22 additions and 6 deletions
|
@ -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>
|
||||||
<MenuItem name="Home" icon="" link="/" />
|
{
|
||||||
<MenuItem name="Articles" icon="" link="/blog" />
|
!article ?
|
||||||
|
<MenuItem name="Home" icon="" link="/" />
|
||||||
|
<MenuItem name="Articles" icon="" link="/blog" /> :
|
||||||
|
<MenuItem name="Articles" icon="" link="/blog" />
|
||||||
|
}
|
||||||
<MenuItem name="Shorts" icon="" link="/blog/shorts" />
|
<MenuItem name="Shorts" icon="" link="/blog/shorts" />
|
||||||
<MenuItem name="Random" icon="" link="/blog/random" />
|
<MenuItem name="Random" icon="" link="/blog/random" />
|
||||||
<MenuItem name="Search" icon="" link="/blog/search" />
|
<MenuItem name="Search" icon="" link="/blog/search" />
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
|
|
|
@ -1 +1,3 @@
|
||||||
@max-width: 800px;
|
@max-width: 800px;
|
||||||
|
@body-padding: 0.5rem;
|
||||||
|
@main-padding: 0.25rem;
|
||||||
|
|
Loading…
Add table
Reference in a new issue