Cleanup styles
This commit is contained in:
parent
b8586c8b8d
commit
5cb143416c
|
@ -1,8 +1,20 @@
|
|||
---
|
||||
import type { Maybe } from 'purify-ts';
|
||||
|
||||
interface Props {
|
||||
title: Maybe<string>;
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
} = Astro.props;
|
||||
---
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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="16x16" href="/favicon-16x16.png">
|
||||
<link rel="icon" href="/favicon.ico" sizes="any">
|
||||
|
||||
|
|
|
@ -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>
|
|
@ -3,9 +3,19 @@ import '../styles/styles.scss';
|
|||
import Head from "../components/base/Head.astro";
|
||||
import Header from "../components/base/Header.astro";
|
||||
import Footer from "../components/base/Footer.astro";
|
||||
import { Maybe } from 'purify-ts';
|
||||
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
} = Astro.props;
|
||||
---
|
||||
<html lang="en">
|
||||
<Head/>
|
||||
<Head title={Maybe.fromNullable(title)}/>
|
||||
<body>
|
||||
<script is:inline>
|
||||
(() => {
|
||||
|
|
|
@ -3,9 +3,10 @@ import Intro from "@components/cards/Intro.astro";
|
|||
import ContactCard from "../components/cards/Contact.astro";
|
||||
import PhotoCard from "../components/cards/Photo.astro";
|
||||
import Base from "./Base.astro";
|
||||
import { Maybe } from "purify-ts";
|
||||
|
||||
---
|
||||
<Base>
|
||||
<Base title={"Home"}>
|
||||
<main class="l-home">
|
||||
<article class="l-home__article markdown">
|
||||
<slot />
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
---
|
||||
import { Maybe } from "purify-ts";
|
||||
import Base from "./Base.astro";
|
||||
import { Temporal } from "@js-temporal/polyfill";
|
||||
|
||||
|
@ -38,7 +39,7 @@ function sorter(
|
|||
}
|
||||
---
|
||||
|
||||
<Base>
|
||||
<Base title={title}>
|
||||
<main class="page-list-main">
|
||||
<article class="page-list">
|
||||
<header class="markdown">
|
|
@ -38,7 +38,7 @@ const pages = Astro.url.pathname.startsWith("/wiki/")
|
|||
: Maybe.empty();
|
||||
---
|
||||
|
||||
<Base>
|
||||
<Base title={frontmatter.title}>
|
||||
<main class="wiki-main">
|
||||
<!-- Slide in/out for mobile -->
|
||||
<input id="wiki-aside-shown" type="checkbox" hidden/>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import BetterList from "@layouts/BetterList.astro";
|
||||
import List from "@layouts/List.astro";
|
||||
import { getCollection } from 'astro:content';
|
||||
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} />
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import { getCollection } from 'astro:content';
|
||||
import { Temporal, toTemporalInstant } from "@js-temporal/polyfill";
|
||||
import BetterList from '@layouts/BetterList.astro';
|
||||
import List from '@layouts/List.astro';
|
||||
|
||||
|
||||
const pages = (await getCollection('slides'))
|
||||
|
@ -13,4 +13,4 @@ const pages = (await getCollection('slides'))
|
|||
.sort((a, b) => Temporal.ZonedDateTime.compare(a.date, b.date));
|
||||
---
|
||||
|
||||
<BetterList title="Slides" pages={pages} />
|
||||
<List title="Slides" pages={pages} />
|
||||
|
|
|
@ -35,3 +35,4 @@
|
|||
--serif: Lora, Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
|
||||
--monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -1,8 +0,0 @@
|
|||
.l-pages {
|
||||
padding: 1.5em;
|
||||
|
||||
&__list {
|
||||
max-width: 40em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,11 +0,0 @@
|
|||
.sc-coll {
|
||||
&__title {
|
||||
min-width: 10em;
|
||||
}
|
||||
&__yeah {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
&__nope {
|
||||
background-color: lightcoral;
|
||||
}
|
||||
}
|
|
@ -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%;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -3,40 +3,24 @@
|
|||
@use 'reset';
|
||||
@use 'fonts';
|
||||
@use 'base';
|
||||
@use 'utils';
|
||||
@use 'markdown';
|
||||
|
||||
// Components
|
||||
@use 'components/map';
|
||||
@use 'components/search';
|
||||
@use 'components/tab';
|
||||
@use 'components/lyrics';
|
||||
@use 'components/song';
|
||||
@use 'components/album-grid';
|
||||
@use 'components/link-tree';
|
||||
@use 'components/bibliography';
|
||||
|
||||
// Partials
|
||||
@use 'partials/nav';
|
||||
@use 'partials/navbar';
|
||||
@use 'partials/footer';
|
||||
@use 'partials/github';
|
||||
@use 'partials/header';
|
||||
@use 'partials/pagelist';
|
||||
@use 'partials/toc';
|
||||
@use 'partials/date';
|
||||
@use 'partials/tags';
|
||||
|
||||
// Shortcodes
|
||||
@use 'shortcodes/timeline';
|
||||
@use 'shortcodes/gallery';
|
||||
@use 'shortcodes/tooltip';
|
||||
@use 'shortcodes/sidenote';
|
||||
@use 'shortcodes/collection';
|
||||
@use 'shortcodes/marginnote';
|
||||
|
||||
// Layouts
|
||||
@use 'layouts/home';
|
||||
@use 'layouts/pages';
|
||||
@use 'layouts/article';
|
||||
@use 'layouts/songs';
|
||||
@use 'layouts/wiki';
|
||||
@use 'layouts/page-list';
|
||||
@use 'layouts/page';
|
||||
@use 'layouts/list';
|
||||
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
#!/bin/bash
|
||||
|
||||
pnpm build
|
||||
rsync -Pavz ./dist/ kamoshi.org:/var/www/kamoshi.org --delete
|
||||
rsync -Pavz ./dist/ kamoshi:/var/www/kamoshi.org --delete
|
||||
echo "Done"
|
||||
|
||||
|
|
Loading…
Reference in a new issue