kamov/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Cleanup styles

Browse source
This commit is contained in:
Maciej Jur 2023-07-13 19:34:12 +02:00
parent b8586c8b8d
commit 5cb143416c
No known key found for this signature in database
GPG key ID: ADA3BF323198C639
32 changed files with 42 additions and 545 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/base/Head.astro
View file

@ -1,8 +1,20 @@
---
import type { Maybe } from 'purify-ts';
interface Props {
title: Maybe<string>;
}
const {
title,
} = Astro.props;
---
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>Kamoshi.org</title> <title>{title.mapOrDefault(title => `${title} | kamoshi.org`, "kamoshi.org")}</title>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/favicon.ico" sizes="any">

38
src/layouts/Article.astro
View file

@ -1,38 +0,0 @@
---
import dayjs from "dayjs";
import Base from "./Base.astro";
import Header from "../components/headers/Article.astro";
import Toc from "../components/Toc.astro";
interface Props {
headings?: any[],
frontmatter: {
title: string;
date: string;
tags: string[];
}
}
const {
headings,
frontmatter: {
title,
date,
tags,
}} = Astro.props;
---
<Base>
<main class="l-article">
<aside class="l-article__aside">
<div class="l-article__toc">
{headings && (<Toc headings={headings} />)}
</div>
</aside>
<article class="l-article__article marker readable">
<Header title={title} date={dayjs(date)} tags={tags}/>
<div class="markdown">
<slot />
</div>
</article>
</main>
</Base>

12
src/layouts/Base.astro
View file

@ -3,9 +3,19 @@ import '../styles/styles.scss';
import Head from "../components/base/Head.astro"; import Head from "../components/base/Head.astro";
import Header from "../components/base/Header.astro"; import Header from "../components/base/Header.astro";
import Footer from "../components/base/Footer.astro"; import Footer from "../components/base/Footer.astro";
import { Maybe } from 'purify-ts';
interface Props {
title?: string;
}
const {
title,
} = Astro.props;
--- ---
<html lang="en"> <html lang="en">
<Head/> <Head title={Maybe.fromNullable(title)}/>
<body> <body>
<script is:inline> <script is:inline>
(() => { (() => {

3
src/layouts/Home.astro
View file

@ -3,9 +3,10 @@ import Intro from "@components/cards/Intro.astro";
import ContactCard from "../components/cards/Contact.astro"; import ContactCard from "../components/cards/Contact.astro";
import PhotoCard from "../components/cards/Photo.astro"; import PhotoCard from "../components/cards/Photo.astro";
import Base from "./Base.astro"; import Base from "./Base.astro";
import { Maybe } from "purify-ts";
--- ---
<Base> <Base title={"Home"}>
<main class="l-home"> <main class="l-home">
<article class="l-home__article markdown"> <article class="l-home__article markdown">
<slot /> <slot />

3
src/layouts/BetterList.astro → src/layouts/List.astro
View file

@ -1,4 +1,5 @@
--- ---
import { Maybe } from "purify-ts";
import Base from "./Base.astro"; import Base from "./Base.astro";
import { Temporal } from "@js-temporal/polyfill"; import { Temporal } from "@js-temporal/polyfill";
@ -38,7 +39,7 @@ function sorter(
} }
--- ---
<Base> <Base title={title}>
<main class="page-list-main"> <main class="page-list-main">
<article class="page-list"> <article class="page-list">
<header class="markdown"> <header class="markdown">

2
src/layouts/Wiki.astro
View file

@ -38,7 +38,7 @@ const pages = Astro.url.pathname.startsWith("/wiki/")
: Maybe.empty(); : Maybe.empty();
--- ---
<Base> <Base title={frontmatter.title}>
<main class="wiki-main"> <main class="wiki-main">
<!-- Slide in/out for mobile --> <!-- Slide in/out for mobile -->
<input id="wiki-aside-shown" type="checkbox" hidden/> <input id="wiki-aside-shown" type="checkbox" hidden/>

5
src/pages/posts/index.astro
View file

@ -1,5 +1,5 @@
--- ---
import BetterList from "@layouts/BetterList.astro"; import List from "@layouts/List.astro";
import { getCollection } from 'astro:content'; import { getCollection } from 'astro:content';
import { Temporal, toTemporalInstant } from "@js-temporal/polyfill"; import { Temporal, toTemporalInstant } from "@js-temporal/polyfill";
@ -14,4 +14,5 @@ const posts = (await getCollection('posts'))
--- ---
<BetterList title="Posts" pages={posts} /> <List title="Posts" pages={posts} />

4
src/pages/slides/index.astro
View file

@ -1,7 +1,7 @@
--- ---
import { getCollection } from 'astro:content'; import { getCollection } from 'astro:content';
import { Temporal, toTemporalInstant } from "@js-temporal/polyfill"; import { Temporal, toTemporalInstant } from "@js-temporal/polyfill";
import BetterList from '@layouts/BetterList.astro'; import List from '@layouts/List.astro';
const pages = (await getCollection('slides')) const pages = (await getCollection('slides'))
@ -13,4 +13,4 @@ const pages = (await getCollection('slides'))
.sort((a, b) => Temporal.ZonedDateTime.compare(a.date, b.date)); .sort((a, b) => Temporal.ZonedDateTime.compare(a.date, b.date));
--- ---
<BetterList title="Slides" pages={pages} /> <List title="Slides" pages={pages} />

1
src/styles/_fonts.scss
View file

@ -35,3 +35,4 @@
--serif: Lora, Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif; --serif: Lora, Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
--monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; --monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
} }

41
src/styles/_utils.scss
View file

@ -1,41 +0,0 @@
.readable {
line-height: 1.6em;
font-size: var(--fs-md);
}
/**
* MARKER
*/
$marker-color: 5px solid var(--c-secondary);
$marker-offset: -0.7rem;
%article-marker {
content: "";
position: absolute;
pointer-events: none;
display: block;
height: 2em;
width: 2em;
border-radius: 5px;
}
.marker {
position: relative;
&::before {
border-left: $marker-color;
border-top: $marker-color;
left: $marker-offset;
top: $marker-offset;
@extend %article-marker;
}
&::after {
border-right: $marker-color;
border-bottom: $marker-color;
right: $marker-offset;
bottom: $marker-offset;
@extend %article-marker;
}
}

26
src/styles/components/_album-grid.scss
View file

@ -1,26 +0,0 @@
.c-album-grid {
display: flex;
flex-wrap: wrap;
gap: 1em;
justify-content: center;
&__item {
padding: 0.5em;
background-color: white;
border-radius: 0.5em;
box-shadow: var(--shadow-l);
transition: box-shadow ease-in-out 0.2s;
text-decoration: none;
&:hover {
box-shadow: var(--shadow-m);
}
}
&__image {
width: 12em;
}
&__title {
margin-top: 0.3em;
line-height: 1em;
}
}

14
src/styles/components/_lyrics.scss
View file

@ -1,14 +0,0 @@
.c-lyrics {
margin: 1em auto 1em auto;
border-collapse: collapse;
th, td {
padding: 0.2em 0.5em;
border: 1px solid #dbdbdb;
line-height: 1.6em;
p {
white-space: pre-line;
}
}
}

43
src/styles/components/_song.scss
View file

@ -1,43 +0,0 @@
.c-song {
max-width: 20em;
margin-inline: auto;
padding: 0.5em;
background-color: white;
border-radius: 0.5em;
box-shadow: var(--shadow-l);
&__heading {
margin: 0;
}
&__title {
display: flex;
align-items: center;
gap: 0.3em;
margin: 0.3em 0 0 0;
}
&__cat {
color: gray;
font-size: 0.8em;
&::before {
content: '(';
}
&::after {
content: ')';
}
}
&__table {
td:not(:last-child) {
padding-right: 0.5em;
}
ul {
margin: 0;
list-style: none;
}
}
}

38
src/styles/components/_tab.scss
View file

@ -1,38 +0,0 @@
.c-tab {
width: auto;
margin: 0.5em 2em;
padding: 0.5em 1em;
background-color: white;
border: 1px gray dashed;
border-radius: 0.2em;
&__button {
cursor: pointer;
display: flex;
width: auto;
text-align: left;
background-color: unset;
border: unset;
&:focus-within,
&:hover {
.title {
text-decoration: underline;
}
}
}
.title {
margin-left: 0.5em;
}
.chevron {
display: block;
min-width: 1em;
transition: transform linear 100ms;
}
&.active .chevron {
transform: rotate(90deg);
}
}

43
src/styles/layouts/_article.scss
View file

@ -1,43 +0,0 @@
@use '../consts' as consts;
.l-article {
position: relative;
padding: 1.5em;
@media (min-width: consts.$bp-lg) {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "left main";
gap: 1.5em;
}
@media (min-width: consts.$bp-xl) {
grid-template-columns: 15em 1fr 15em;
}
&__aside {
display: none;
position: sticky;
top: 0;
height: fit-content;
max-height: 100vh;
width: fit-content;
max-width: 15em;
margin: -1.5em 0;
padding: 1.5em 1.5em 1.5em 0;
overflow-y: auto;
@media (min-width: consts.$bp-lg) {
display: block;
grid-area: left;
}
}
&__article {
grid-area: main;
width: 100%;
max-width: 40em;
margin: 0 auto auto auto;
}
}

0
src/styles/layouts/_page-list.scss → src/styles/layouts/_list.scss
View file

0
src/styles/layouts/_wiki.scss → src/styles/layouts/_page.scss
View file

8
src/styles/layouts/_pages.scss
View file

@ -1,8 +0,0 @@
.l-pages {
padding: 1.5em;
&__list {
max-width: 40em;
margin: 0 auto;
}
}

39
src/styles/layouts/_songs.scss
View file

@ -1,39 +0,0 @@
.l-songs-aside {
padding: 1.5em;
font-size: var(--fs-sm);
&__page {
width: 100%;
max-width: 40em;
margin: 0 auto;
}
@media (min-width: 65em) {
display: grid;
column-gap: 1em;
grid-template-columns: 1fr 20em;
}
}
.l-songs-circle {
padding: 1.5em;
&__article {
max-width: 48em;
margin: 0 auto;
}
}
.l-songs-cat {
padding: 1.5em;
&__article {
max-width: 40em;
margin: 0 auto;
}
&__list {
display: grid;
grid-template-columns: 3em 1fr;
}
}

11
src/styles/partials/_date.scss
View file

@ -1,11 +0,0 @@
.p_date {
margin-right: 0.5em;
&__icon {
display: inline;
max-height: 1.2em;
line-height: 1em;
width: auto;
vertical-align: text-top;
}
}

38
src/styles/partials/_github.scss
View file

@ -1,38 +0,0 @@
.p-github {
overflow: hidden;
&:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
svg {
position: absolute;
top: 0;
right: 0;
fill:#151513;
color:#fff;
border: 0;
border-radius: 0 5px 0 0;
}
@media (max-width: 500px) {
&:hover .octo-arm {
animation: none;
}
.octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
}
}
@keyframes octocat-wave {
0%, 100% {
transform: rotate(0);
}
20%, 60% {
transform: rotate(-25deg);
}
40%, 80% {
transform: rotate(10deg);
}
}

32
src/styles/partials/_header.scss
View file

@ -1,32 +0,0 @@
.p-header {
margin-bottom: 1em;
padding: 0.5em 1em;
border-radius: 5px;
box-shadow: var(--shadow-l);
background: var(--momiji);
background-color: var(--c-purewhite);
&__heading {
margin-top: 0;
margin-bottom: 0.2em;
}
&__meta {
font-size: var(--fs-sm);
line-height: 1.4em;
}
&-tech {
display: flex;
flex-flow: row nowrap;
align-items: center;
padding: 0.5em;
&__logo {
max-height: 2em;
width: 2em;
height: 2em;
margin-right: 0.5em;
}
}
}

0
src/styles/partials/_nav.scss → src/styles/partials/_navbar.scss
View file

10
src/styles/partials/_pagelist.scss
View file

@ -1,10 +0,0 @@
.p-pagelist {
display: grid;
row-gap: 0.3em;
margin-top: 1em;
&.dates {
grid-template-columns: 8em 1fr;
column-gap: 0.3em;
}
}

34
src/styles/partials/_tags.scss
View file

@ -1,34 +0,0 @@
.p_tags {
display: inline;
line-height: 1em;
&__icon {
display: inline;
max-height: 1.2em;
width: auto;
margin-right: 0.25em;
vertical-align: text-top;
}
&__list {
display: inline;
margin: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
border-radius: 0.4em;
padding: 0.1em 0.25em;
margin-right: 0.25em;
text-decoration: none;
line-height: 1em;
font-size: var(--fs-xs);
background-color: var(--c-purewhite);
border: 2px solid var(--c-primary);
}
}

27
src/styles/partials/_toc.scss
View file

@ -1,27 +0,0 @@
.p-toc {
&__primary {
list-style: hiragana-iroha;
margin-left: 2em;
&-item {
margin: 0.3em 0;
}
}
&__nested {
margin: 0.5em 0;
&-item {
margin: 0.25em 0;
}
}
a {
line-height: 1.2;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}

11
src/styles/shortcodes/_collection.scss
View file

@ -1,11 +0,0 @@
.sc-coll {
&__title {
min-width: 10em;
}
&__yeah {
background-color: lightgreen;
}
&__nope {
background-color: lightcoral;
}
}

24
src/styles/shortcodes/_gallery.scss
View file

@ -1,24 +0,0 @@
.sc-gallery {
&__container {
display: flex;
flex-flow: row wrap;
gap: 0.25em;
}
&__item {
width: 5.5em;
height: 5.5em;
transition: transform 50ms ease-in-out;
&:focus-within,
&:hover {
transform: scale(1.2);
z-index: 1;
}
}
&__image {
width: 100%;
height: 100%;
}
}

0
src/styles/shortcodes/_sidenote.scss → src/styles/shortcodes/_marginnote.scss
View file

37
src/styles/shortcodes/_tooltip.scss
View file

@ -1,37 +0,0 @@
.sc-tooltip {
position: relative;
text-decoration: underline dotted;
&__box {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
visibility: hidden;
width: max-content;
max-width: min(50vw, 20em);
padding: 0.5em;
z-index: 2;
border-radius: 0.5em;
background-color: black;
text-align: center;
color: white;
line-height: normal;
font-size: var(--fs-sm);
&::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -0.3em;
border-width: 0.3em;
border-style: solid;
border-color: black transparent transparent transparent;
}
}
&:hover .sc-tooltip__box {
visibility: visible;
}
}

26
src/styles/styles.scss
View file

@ -3,40 +3,24 @@
@use 'reset'; @use 'reset';
@use 'fonts'; @use 'fonts';
@use 'base'; @use 'base';
@use 'utils';
@use 'markdown'; @use 'markdown';
// Components // Components
@use 'components/map'; @use 'components/map';
@use 'components/search'; @use 'components/search';
@use 'components/tab';
@use 'components/lyrics';
@use 'components/song';
@use 'components/album-grid';
@use 'components/link-tree'; @use 'components/link-tree';
@use 'components/bibliography'; @use 'components/bibliography';
// Partials // Partials
@use 'partials/nav'; @use 'partials/navbar';
@use 'partials/footer'; @use 'partials/footer';
@use 'partials/github';
@use 'partials/header';
@use 'partials/pagelist';
@use 'partials/toc';
@use 'partials/date';
@use 'partials/tags';
// Shortcodes // Shortcodes
@use 'shortcodes/timeline'; @use 'shortcodes/timeline';
@use 'shortcodes/gallery'; @use 'shortcodes/marginnote';
@use 'shortcodes/tooltip';
@use 'shortcodes/sidenote';
@use 'shortcodes/collection';
// Layouts // Layouts
@use 'layouts/home'; @use 'layouts/home';
@use 'layouts/pages'; @use 'layouts/page';
@use 'layouts/article'; @use 'layouts/list';
@use 'layouts/songs';
@use 'layouts/wiki';
@use 'layouts/page-list';

3
tools/deploy.sh
View file

@ -1,5 +1,6 @@
#!/bin/bash #!/bin/bash
pnpm build pnpm build
rsync -Pavz ./dist/ kamoshi.org:/var/www/kamoshi.org --delete rsync -Pavz ./dist/ kamoshi:/var/www/kamoshi.org --delete
echo "Done" echo "Done"