Compare commits
No commits in common. "defb9bd34bc5f40f38c56a0ecc5ffe4b926fd9e8" and "b50e79ae4d1471b0e26310ba5e518351ffb71678" have entirely different histories.
defb9bd34b
...
b50e79ae4d
12 changed files with 142 additions and 180 deletions
|
@ -1,6 +1,5 @@
|
||||||
---
|
---
|
||||||
import Article from './Article.astro';
|
import Article from './Article.astro';
|
||||||
import SimpleMenu from '../layouts/SimpleMenu.astro';
|
|
||||||
import MenuItem from './MenuItem.astro';
|
import MenuItem from './MenuItem.astro';
|
||||||
|
|
||||||
import postRenderer from '../post-renderer.mjs';
|
import postRenderer from '../post-renderer.mjs';
|
||||||
|
@ -28,7 +27,7 @@ const link = `/blog/${post.slug}`;
|
||||||
image={image}
|
image={image}
|
||||||
preview={true}
|
preview={true}
|
||||||
/>
|
/>
|
||||||
<SimpleMenu jcc="end">
|
<ul>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
name={/*Comments*/""}
|
name={/*Comments*/""}
|
||||||
link={`/blog/comments#${post.slug}`}
|
link={`/blog/comments#${post.slug}`}
|
||||||
|
@ -62,13 +61,23 @@ const link = `/blog/${post.slug}`;
|
||||||
icon=""
|
icon=""
|
||||||
atLeft={false}
|
atLeft={false}
|
||||||
/>
|
/>
|
||||||
</SimpleMenu>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.card {
|
.card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,25 +1,23 @@
|
||||||
---
|
---
|
||||||
import SimpleMenu from '../layouts/SimpleMenu.astro';
|
|
||||||
import Icon from './Icon.astro';
|
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
id: string;
|
|
||||||
title: string;
|
title: string;
|
||||||
text: string;
|
text: string;
|
||||||
url: string;
|
url: string;
|
||||||
width?: number;
|
elemClass?: Array<String>;
|
||||||
|
btnClass?: Array<string>;
|
||||||
|
dataJs?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const {
|
const {
|
||||||
id,
|
|
||||||
title, text, url,
|
title, text, url,
|
||||||
width = 9,
|
elemClass = [],
|
||||||
|
btnClass = [],
|
||||||
|
dataJs = "",
|
||||||
} = Astro.props;
|
} = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="gi" id={id}>
|
<div class:list={["gi", ...elemClass]}>
|
||||||
<div class="gi-row">
|
<a href={url} target="_blank" class="gi-main">
|
||||||
<div class="gi-main">
|
|
||||||
<span class="icon-wrapper">
|
<span class="icon-wrapper">
|
||||||
<slot name="icon-primary" />
|
<slot name="icon-primary" />
|
||||||
</span>
|
</span>
|
||||||
|
@ -35,64 +33,35 @@ const {
|
||||||
</slot>
|
</slot>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</a>
|
||||||
<a href={`#${id}`} class="gi-btn gi-btn-expand">
|
<a href="javascript:void(0)" class:list={["gi-btn", ...btnClass]} data-js={dataJs}>
|
||||||
<span class="icon-wrapper">
|
<span class="icon-wrapper">
|
||||||
<Icon code="" />
|
<slot name="icon-btn" />
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="#scroll" class="gi-btn gi-btn-close">
|
|
||||||
<span class="icon-wrapper">
|
|
||||||
<Icon code="" />
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="gi-options">
|
|
||||||
<SimpleMenu jcc="center">
|
|
||||||
<slot name="options" />
|
|
||||||
</SimpleMenu>
|
|
||||||
</div>
|
|
||||||
<div class="gi-options gi-note">
|
|
||||||
<slot name="note" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="less" define:vars={{width: `${width}rem`}}>
|
<style lang="less">
|
||||||
|
@import "/src/styles/grid_calc.less";
|
||||||
|
|
||||||
.gi {
|
.gi {
|
||||||
// vertical horizontal
|
// vertical horizontal
|
||||||
padding: 0.4rem 0.6rem;
|
padding: 0.4rem @gi-horiz-padding;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
width: @gi-width;
|
||||||
min-height: 3rem;
|
min-height: 3rem;
|
||||||
border-radius: var(--bdrs);
|
border-radius: var(--bdrs);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--accent-bg);
|
background: var(--accent-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.gi-options { display: none }
|
|
||||||
.gi-btn-close { display: none }
|
|
||||||
.gi-btn-expand { display: flex }
|
|
||||||
|
|
||||||
&:target {
|
|
||||||
background: var(--accent-bg);
|
|
||||||
|
|
||||||
.gi-options { display: block }
|
|
||||||
|
|
||||||
.gi-btn-close { display: flex }
|
|
||||||
.gi-btn-expand { display: none }
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.gi-row {
|
a.gi-main {
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gi-main {
|
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
@ -104,22 +73,46 @@ const {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
.icon-wrapper {
|
.icon-wrapper {
|
||||||
@icon-size: 2.3rem;
|
width: @gi-icon-primary;
|
||||||
|
font-size: @gi-icon-primary;
|
||||||
width: @icon-size;
|
margin-right: @gi-icon-margin;
|
||||||
font-size: @icon-size;
|
|
||||||
margin-right: 0.4rem;
|
|
||||||
|
|
||||||
& > :global(img) {
|
& > :global(img) {
|
||||||
width: @icon-size;
|
width: @gi-icon-primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a.gi-btn {
|
||||||
|
position: relative;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
width: @gi-icon-btn;
|
||||||
|
font-size: @gi-icon-btn;
|
||||||
|
margin-left: @gi-icon-margin;
|
||||||
|
|
||||||
|
& > :global(img) {
|
||||||
|
width: @gi-icon-btn;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
width: var(--width);
|
width: @gi-text-width;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
@ -131,34 +124,4 @@ const {
|
||||||
color: var(--fg-sec);
|
color: var(--fg-sec);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.gi-btn {
|
|
||||||
position: relative;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.icon-wrapper {
|
|
||||||
@icon-size: 1.25rem;
|
|
||||||
|
|
||||||
width: @icon-size;
|
|
||||||
font-size: @icon-size;
|
|
||||||
margin-left: 0.4rem;
|
|
||||||
|
|
||||||
& > :global(img) {
|
|
||||||
width: @icon-size;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -12,11 +12,23 @@ const { name, description, url, iconUrl = `${url}/favicon.ico` } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<GridItem
|
<GridItem
|
||||||
id={`s-${name.toLowerCase()}`}
|
|
||||||
title={name}
|
title={name}
|
||||||
text={description}
|
text={description}
|
||||||
url={url}
|
url={url}
|
||||||
width={14}
|
elemClass={["gi-service"]}
|
||||||
>
|
>
|
||||||
<img src={iconUrl} slot="icon-primary" />
|
<img src={iconUrl} slot="icon-primary" />
|
||||||
</GridItem>
|
</GridItem>
|
||||||
|
|
||||||
|
<style lang="less" is:global>
|
||||||
|
@import "/src/styles/grid_calc.less";
|
||||||
|
|
||||||
|
// Overwriting default GridItem's width
|
||||||
|
.gi-service {
|
||||||
|
width: @service-width;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: @service-text-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -5,35 +5,27 @@ export interface Props {
|
||||||
name: string;
|
name: string;
|
||||||
link: string;
|
link: string;
|
||||||
icon: string;
|
icon: string;
|
||||||
tblank?: boolean;
|
|
||||||
atLeft?: boolean;
|
atLeft?: boolean;
|
||||||
classes?: Array<string>;
|
|
||||||
datajs?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const {
|
const { name, link, icon, atLeft = true } = Astro.props;
|
||||||
name, link, icon,
|
|
||||||
tblank = false,
|
|
||||||
atLeft = true,
|
|
||||||
classes = [],
|
|
||||||
datajs = "",
|
|
||||||
} = Astro.props;
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<slot name="js-dataset"></slot>
|
<slot name="js-dataset"></slot>
|
||||||
<a href={link} target={tblank ? "_blank" : "_self"} class:list={classes} data-js={datajs}>
|
<a href={link}>
|
||||||
|
{!atLeft ? name : ""}
|
||||||
<span class="icon-wrapper">
|
<span class="icon-wrapper">
|
||||||
<Icon code={icon} />
|
<Icon code={icon} />
|
||||||
</span>
|
</span>
|
||||||
{name}
|
{atLeft ? name : ""}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<style lang="less" define:vars={{fxd: atLeft ? "row" : "row-reverse"}}>
|
<style lang="less">
|
||||||
a {
|
a {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: var(--fxd);
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
font-size: 1.15rem;
|
font-size: 1.15rem;
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
---
|
---
|
||||||
import GridItem from './GridItem.astro';
|
import GridItem from './GridItem.astro';
|
||||||
import Icon from './Icon.astro';
|
import Icon from './Icon.astro';
|
||||||
import MenuItem from './MenuItem.astro';
|
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
app: string;
|
app: string;
|
||||||
|
@ -9,37 +8,19 @@ export interface Props {
|
||||||
name: string;
|
name: string;
|
||||||
icon: string;
|
icon: string;
|
||||||
copyName?: boolean;
|
copyName?: boolean;
|
||||||
note?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const {
|
const { app, url, name, icon, copyName = false } = Astro.props;
|
||||||
app, url, name, icon,
|
|
||||||
copyName = false,
|
|
||||||
note = "",
|
|
||||||
} = Astro.props;
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<GridItem
|
<GridItem
|
||||||
id={`p-${app.toLowerCase()}`}
|
|
||||||
title={app} text={name} url={url}
|
title={app} text={name} url={url}
|
||||||
width={9.5}
|
elemClass={["gi-profile"]}
|
||||||
|
btnClass={["profile-copy"]}
|
||||||
|
dataJs={copyName ? name : url}
|
||||||
>
|
>
|
||||||
<Icon code={icon} slot="icon-primary" />
|
<Icon code={icon} slot="icon-primary" />
|
||||||
<Fragment slot="options">
|
<Icon code="" slot="icon-btn" />
|
||||||
<MenuItem
|
|
||||||
name=""
|
|
||||||
link="javascript:void(0)"
|
|
||||||
icon=""
|
|
||||||
classes={["profile-copy"]}
|
|
||||||
datajs={copyName ? name : url}
|
|
||||||
/>
|
|
||||||
<MenuItem
|
|
||||||
name="Open"
|
|
||||||
link={url}
|
|
||||||
icon=""
|
|
||||||
tblank
|
|
||||||
/>
|
|
||||||
</Fragment>
|
|
||||||
</GridItem>
|
</GridItem>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -54,3 +35,15 @@ const {
|
||||||
elem.addEventListener('click', copyClickHandler)
|
elem.addEventListener('click', copyClickHandler)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" is:global>
|
||||||
|
@import "/src/styles/grid_calc.less";
|
||||||
|
|
||||||
|
.gi-profile {
|
||||||
|
width: @profile-width;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: @profile-text-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import Layout from "./Layout.astro";
|
import Layout from "./Layout.astro";
|
||||||
import NavMenu from "./NavMenu.astro";
|
import Menu from "./Menu.astro";
|
||||||
import MenuItem from "../components/MenuItem.astro";
|
import MenuItem from "../components/MenuItem.astro";
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
|
@ -14,7 +14,7 @@ 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" />
|
||||||
<NavMenu>
|
<Menu>
|
||||||
{
|
{
|
||||||
!article ?
|
!article ?
|
||||||
<MenuItem name="Home" icon="" link="/" />
|
<MenuItem name="Home" icon="" link="/" />
|
||||||
|
@ -24,7 +24,7 @@ const { title, description, article = false } = Astro.props;
|
||||||
<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" />
|
||||||
</NavMenu>
|
</Menu>
|
||||||
<main>
|
<main>
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
|
|
|
@ -19,7 +19,6 @@ const { title, description } = Astro.props;
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="scroll"></div>
|
|
||||||
<slot />
|
<slot />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -114,11 +113,3 @@ const { title, description } = Astro.props;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style>
|
|
||||||
#scroll {
|
|
||||||
position: fixed;
|
|
||||||
display: block;
|
|
||||||
height: 1px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import Layout from "./Layout.astro";
|
import Layout from "./Layout.astro";
|
||||||
import NavMenu from "./NavMenu.astro";
|
import Menu from "./Menu.astro";
|
||||||
import MenuItem from "../components/MenuItem.astro";
|
import MenuItem from "../components/MenuItem.astro";
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
|
@ -12,12 +12,12 @@ const { page, description } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title={"DarkCat09 | " + page} description={description}>
|
<Layout title={"DarkCat09 | " + page} description={description}>
|
||||||
<NavMenu>
|
<Menu>
|
||||||
<MenuItem name="Homepage" icon="" link="/" />
|
<MenuItem name="Homepage" icon="" link="/" />
|
||||||
<MenuItem name="Projects" icon="" link="/projects" />
|
<MenuItem name="Projects" icon="" link="/projects" />
|
||||||
<MenuItem name="Services" icon="" link="/services" />
|
<MenuItem name="Services" icon="" link="/services" />
|
||||||
<MenuItem name="Blog" icon="" link="/blog" />
|
<MenuItem name="Blog" icon="" link="/blog" />
|
||||||
</NavMenu>
|
</Menu>
|
||||||
<main>
|
<main>
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
|
|
|
@ -9,7 +9,7 @@ const { id } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="modal-bg" id={id}>
|
<div class="modal-bg" id={id}>
|
||||||
<a href="#scroll" class="modal-bg-close"></a>
|
<a href="#" class="modal-bg-close"></a>
|
||||||
<div class="modal">
|
<div class="modal">
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<a href="#"><Icon code="" /></a>
|
<a href="#"><Icon code="" /></a>
|
||||||
|
|
|
@ -1,23 +0,0 @@
|
||||||
---
|
|
||||||
export interface Props {
|
|
||||||
jcc: "start" | "center" | "end" | "space-around" | "space-between";
|
|
||||||
}
|
|
||||||
|
|
||||||
const { jcc } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<slot />
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<style lang="less" define:vars={{jcc: jcc}}>
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: var(--jcc);
|
|
||||||
}
|
|
||||||
</style>
|
|
25
src/styles/grid_calc.less
Normal file
25
src/styles/grid_calc.less
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
@import "/src/styles/max_width.less";
|
||||||
|
|
||||||
|
@gi-icon-primary: 2.3rem;
|
||||||
|
@gi-icon-btn: 1.8rem;
|
||||||
|
|
||||||
|
@gi-text-width: 9.5rem;
|
||||||
|
@profile-text-width: 9rem;
|
||||||
|
@service-text-width: 14rem;
|
||||||
|
|
||||||
|
@gi-icon-margin: 0.4rem;
|
||||||
|
@gi-horiz-padding: 0.6rem;
|
||||||
|
|
||||||
|
// GridItem width without text
|
||||||
|
@gi-width-wo-text: @gi-horiz-padding + @gi-icon-primary + @gi-icon-margin + @gi-icon-margin + @gi-icon-btn + @gi-horiz-padding;
|
||||||
|
|
||||||
|
@gi-width: @gi-width-wo-text + @gi-text-width;
|
||||||
|
@profile-width: @gi-width-wo-text + @profile-text-width;
|
||||||
|
@service-width: @gi-width-wo-text + @service-text-width;
|
||||||
|
|
||||||
|
.grid-mixin() {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue