DarkCat09/dc09.ru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Compare commits

base: DarkCat09:defb9bd34bc5f40f38c56a0ecc5ffe4b926fd9e8
Branches Tags
DarkCat09:main
..
compare: DarkCat09:b50e79ae4d1471b0e26310ba5e518351ffb71678
Branches Tags
DarkCat09:main

No commits in common. "defb9bd34bc5f40f38c56a0ecc5ffe4b926fd9e8" and "b50e79ae4d1471b0e26310ba5e518351ffb71678" have entirely different histories.
defb9bd34b ... b50e79ae4d

12 changed files with 142 additions and 180 deletions
Show stats Expand all files Collapse all files

15
src/components/ArticleCard.astro
View file

@ -1,6 +1,5 @@
---
import Article from './Article.astro';
import SimpleMenu from '../layouts/SimpleMenu.astro';
import MenuItem from './MenuItem.astro';
import postRenderer from '../post-renderer.mjs';
@ -28,7 +27,7 @@ const link = `/blog/${post.slug}`;
image={image}
preview={true}
/>
<SimpleMenu jcc="end">
<ul>
<MenuItem
name={/*Comments*/""}
link={`/blog/comments#${post.slug}`}
@ -62,13 +61,23 @@ const link = `/blog/${post.slug}`;
icon="&#xf105;"
atLeft={false}
/>
</SimpleMenu>
</ul>
</div>
<style>
.card {
width: 100%;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: end;
}
</style>
<script>

157
src/components/GridItem.astro
View file

@ -1,98 +1,67 @@
---
import SimpleMenu from '../layouts/SimpleMenu.astro';
import Icon from './Icon.astro';
export interface Props {
id: string;
title: string;
text: string;
url: string;
width?: number;
elemClass?: Array<String>;
btnClass?: Array<string>;
dataJs?: string;
}
const {
id,
title, text, url,
width = 9,
elemClass = [],
btnClass = [],
dataJs = "",
} = Astro.props;
---
<div class="gi" id={id}>
<div class="gi-row">
<div class="gi-main">
<span class="icon-wrapper">
<slot name="icon-primary" />
<div class:list={["gi", ...elemClass]}>
<a href={url} target="_blank" class="gi-main">
<span class="icon-wrapper">
<slot name="icon-primary" />
</span>
<span class="content">
<span class="title">
<slot name="title">
{title}
</slot>
</span>
<span class="content">
<span class="title">
<slot name="title">
{title}
</slot>
</span>
<span class="text">
<slot name="text">
{text}
</slot>
</span>
<span class="text">
<slot name="text">
{text}
</slot>
</span>
</div>
<a href={`#${id}`} class="gi-btn gi-btn-expand">
<span class="icon-wrapper">
<Icon code="&#xf107;" />
</span>
</a>
<a href="#scroll" class="gi-btn gi-btn-close">
<span class="icon-wrapper">
<Icon code="&#xf106;" />
</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>
</span>
</a>
<a href="javascript:void(0)" class:list={["gi-btn", ...btnClass]} data-js={dataJs}>
<span class="icon-wrapper">
<slot name="icon-btn" />
</span>
</a>
</div>
<style lang="less" define:vars={{width: `${width}rem`}}>
<style lang="less">
@import "/src/styles/grid_calc.less";
.gi {
// vertical horizontal
padding: 0.4rem 0.6rem;
padding: 0.4rem @gi-horiz-padding;
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
width: @gi-width;
min-height: 3rem;
border-radius: var(--bdrs);
&:hover {
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 {
display: flex;
flex-direction: row;
align-items: center;
}
.gi-main {
a.gi-main {
flex-grow: 1;
height: 100%;
@ -104,36 +73,17 @@ const {
text-decoration: none;
.icon-wrapper {
@icon-size: 2.3rem;
width: @icon-size;
font-size: @icon-size;
margin-right: 0.4rem;
width: @gi-icon-primary;
font-size: @gi-icon-primary;
margin-right: @gi-icon-margin;
& > :global(img) {
width: @icon-size;
}
}
.content {
display: flex;
flex-direction: column;
width: var(--width);
overflow: hidden;
.title {
font-weight: 600;
}
.text {
font-size: 0.9rem;
color: var(--fg-sec);
width: @gi-icon-primary;
}
}
}
.gi-btn {
a.gi-btn {
position: relative;
font-size: 1.1rem;
@ -142,14 +92,12 @@ const {
align-items: center;
.icon-wrapper {
@icon-size: 1.25rem;
width: @icon-size;
font-size: @icon-size;
margin-left: 0.4rem;
width: @gi-icon-btn;
font-size: @gi-icon-btn;
margin-left: @gi-icon-margin;
& > :global(img) {
width: @icon-size;
width: @gi-icon-btn;
}
}
}
@ -158,7 +106,22 @@ const {
display: flex;
flex-direction: column;
align-items: center;
}
user-select: none;
.content {
display: flex;
flex-direction: column;
width: @gi-text-width;
overflow: hidden;
.title {
font-weight: 600;
}
.text {
font-size: 0.9rem;
color: var(--fg-sec);
}
}
</style>

16
src/components/HostedService.astro
View file

@ -12,11 +12,23 @@ const { name, description, url, iconUrl = `${url}/favicon.ico` } = Astro.props;
---
<GridItem
id={`s-${name.toLowerCase()}`}
title={name}
text={description}
url={url}
width={14}
elemClass={["gi-service"]}
>
<img src={iconUrl} slot="icon-primary" />
</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>

20
src/components/MenuItem.astro
View file

@ -5,35 +5,27 @@ export interface Props {
name: string;
link: string;
icon: string;
tblank?: boolean;
atLeft?: boolean;
classes?: Array<string>;
datajs?: string;
}
const {
name, link, icon,
tblank = false,
atLeft = true,
classes = [],
datajs = "",
} = Astro.props;
const { name, link, icon, atLeft = true } = Astro.props;
---
<li>
<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">
<Icon code={icon} />
</span>
{name}
{atLeft ? name : ""}
</a>
</li>
<style lang="less" define:vars={{fxd: atLeft ? "row" : "row-reverse"}}>
<style lang="less">
a {
display: flex;
flex-direction: var(--fxd);
flex-direction: row;
align-items: center;
font-size: 1.15rem;

41
src/components/Profile.astro
View file

@ -1,7 +1,6 @@
---
import GridItem from './GridItem.astro';
import Icon from './Icon.astro';
import MenuItem from './MenuItem.astro';
export interface Props {
app: string;
@ -9,37 +8,19 @@ export interface Props {
name: string;
icon: string;
copyName?: boolean;
note?: string;
}
const {
app, url, name, icon,
copyName = false,
note = "",
} = Astro.props;
const { app, url, name, icon, copyName = false } = Astro.props;
---
<GridItem
id={`p-${app.toLowerCase()}`}
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" />
<Fragment slot="options">
<MenuItem
name=""
link="javascript:void(0)"
icon="&#xf0c5;"
classes={["profile-copy"]}
datajs={copyName ? name : url}
/>
<MenuItem
name="Open"
link={url}
icon="&#xf360;"
tblank
/>
</Fragment>
<Icon code="&#xf0c5;" slot="icon-btn" />
</GridItem>
<script>
@ -54,3 +35,15 @@ const {
elem.addEventListener('click', copyClickHandler)
}
</script>
<style lang="less" is:global>
@import "/src/styles/grid_calc.less";
.gi-profile {
width: @profile-width;
.content {
width: @profile-text-width;
}
}
</style>

6
src/layouts/BlogLayout.astro
View file

@ -1,6 +1,6 @@
---
import Layout from "./Layout.astro";
import NavMenu from "./NavMenu.astro";
import Menu from "./Menu.astro";
import MenuItem from "../components/MenuItem.astro";
export interface Props {
@ -14,7 +14,7 @@ const { title, description, article = false } = Astro.props;
<Layout title={"Blog | " + title} description={description}>
<slot name="metadata" slot="metadata" />
<NavMenu>
<Menu>
{
!article ?
<MenuItem name="Home" icon="&#xf104;" link="/" />
@ -24,7 +24,7 @@ const { title, description, article = false } = Astro.props;
<MenuItem name="Shorts" icon="&#xf0e7;" link="/blog/shorts" />
<MenuItem name="Random" icon="&#xf522;" link="/blog/random" />
<MenuItem name="Search" icon="&#xf002;" link="/blog/search" />
</NavMenu>
</Menu>
<main>
<slot />
</main>

11
src/layouts/Layout.astro
View file

@ -19,7 +19,6 @@ const { title, description } = Astro.props;
<title>{title}</title>
</head>
<body>
<div id="scroll"></div>
<slot />
</body>
</html>
@ -45,7 +44,7 @@ const { title, description } = Astro.props;
flex-direction: column;
}
main {
main {
margin: auto;
padding: @main-padding;
max-width: @max-width;
@ -114,11 +113,3 @@ const { title, description } = Astro.props;
}
}
</style>
<style>
#scroll {
position: fixed;
display: block;
height: 1px;
}
</style>

6
src/layouts/MainLayout.astro
View file

@ -1,6 +1,6 @@
---
import Layout from "./Layout.astro";
import NavMenu from "./NavMenu.astro";
import Menu from "./Menu.astro";
import MenuItem from "../components/MenuItem.astro";
export interface Props {
@ -12,12 +12,12 @@ const { page, description } = Astro.props;
---
<Layout title={"DarkCat09 | " + page} description={description}>
<NavMenu>
<Menu>
<MenuItem name="Homepage" icon="&#xf015;" link="/" />
<MenuItem name="Projects" icon="&#xf121;" link="/projects" />
<MenuItem name="Services" icon="&#xf233;" link="/services" />
<MenuItem name="Blog" icon="&#xf1ea;" link="/blog" />
</NavMenu>
</Menu>
<main>
<slot />
</main>

0
src/layouts/NavMenu.astro → src/layouts/Menu.astro
View file

2
src/layouts/Modal.astro
View file

@ -9,7 +9,7 @@ const { id } = Astro.props;
---
<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="controls">
<a href="#"><Icon code="&#xf00d;" /></a>

23
src/layouts/SimpleMenu.astro
View file

@ -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
View 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;
}