diff --git a/package.json b/package.json index 74501095..79dad514 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,10 @@ "lint:code:fix": "eslint . --fix", "lint:styles": "stylelint **/*.{scss,css}", "lint:styles:fix": "stylelint **/*.{scss,css} --fix", - "pre-commit": "lint-staged", - "pre-push": "npm run typecheck", + "pre-commit": "", + "pre-push": "", + "pre-commit-old": "lint-staged", + "pre-push-old": "npm run typecheck", "prepare": "husky install", "preview": "astro preview", "server": "node server/server.mjs", diff --git a/public/icons/arrows-rotate.svg b/public/icons/arrows-rotate.svg new file mode 100644 index 00000000..4fc42bf3 --- /dev/null +++ b/public/icons/arrows-rotate.svg @@ -0,0 +1,5 @@ + + + diff --git a/public/icons/instagram-white.svg b/public/icons/instagram-white.svg new file mode 100644 index 00000000..baf59f63 --- /dev/null +++ b/public/icons/instagram-white.svg @@ -0,0 +1,4 @@ + + + diff --git a/public/icons/link-white.svg b/public/icons/link-white.svg new file mode 100644 index 00000000..5a4bc439 --- /dev/null +++ b/public/icons/link-white.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 7d8311ec..512cdac9 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -37,7 +37,6 @@ const formatDate = (date: Date) => { } export const FullArticle = (props: ArticleProps) => { - const body = createMemo(() => props.article?.body?.toString().trim()) const { session } = useAuthStore() onMount(() => { @@ -93,9 +92,16 @@ export const FullArticle = (props: ArticleProps) => {
-
- -
+ +
+ } + > + + +
+
diff --git a/src/components/Author/Card.scss b/src/components/Author/Card.module.scss similarity index 59% rename from src/components/Author/Card.scss rename to src/components/Author/Card.module.scss index ef1dfa4c..8400502f 100644 --- a/src/components/Author/Card.scss +++ b/src/components/Author/Card.module.scss @@ -8,30 +8,30 @@ } } -.author__details { +.authorDetails { display: flex; flex: 1; padding-right: 1.2rem; width: max-content; } -.author__details-wrapper { +.authorDetailsWrapper { flex: 1; } -.author__name { +.authorName { border: none !important; font-size: 1.7rem; font-weight: 500; margin-bottom: 0.8rem; } -.author__about { +.authorAbout { font-size: 1.5rem; color: rgb(0 0 0 / 60%); } -.author__subscribe { +.authorSubscribe { @include media-breakpoint-down(lg) { padding: 0 0 0 42px; } @@ -43,6 +43,7 @@ height: 32px; margin-right: 0.4rem; position: relative; + transition: background-color 0.2s; vertical-align: middle; width: 32px; @@ -57,8 +58,17 @@ position: absolute; top: 50%; transform: translate(-50%, -50%); + transition: filter 0.2s; width: 18px; } + + &:hover { + background: #000; + + &::before { + filter: invert(0); + } + } } a[href*='facebook.com/'] { @@ -90,9 +100,15 @@ background-image: url(/icons/tumblr-white.svg); } } + + a[href*='instagram.com/'] { + &::before { + background-image: url(/icons/instagram-white.svg); + } + } } -.button--subscribe { +.buttonSubscribe { align-items: center; aspect-ratio: 1/1; background: #f6f6f6; @@ -105,14 +121,15 @@ } } -.button__label { +.buttonLabel { display: none; } -.button--write { +.buttonWrite { background: #f7f7f7; color: #000; display: inline-flex; + @include font-size(1.5rem); .icon { @@ -123,3 +140,62 @@ height: 15px; } } + +.authorPage { + .authorName { + @include font-size(3.4rem); + + font-weight: 500; + margin-bottom: 0.2em; + } + + .authorAbout { + color: #696969; + @include font-size(1.7rem); + } + + .authorSubscribe { + display: flex; + margin-top: 2rem; + } + + .authorDetails { + display: block; + } + + .buttonLabel { + display: block; + } + + .buttonSubscribe { + aspect-ratio: auto; + background-color: #000; + border-radius: 2px; + float: none; + padding-bottom: 0.6rem; + padding-top: 0.6rem; + + .icon { + margin-right: 0.5em; + + img { + filter: invert(1); + } + } + + &:hover { + .icon img { + filter: invert(0.7); + } + } + } + + .buttonSubscribe img { + vertical-align: text-top; + } + + .button { + margin-right: 1.6rem; + vertical-align: middle; + } +} diff --git a/src/components/Author/Card.tsx b/src/components/Author/Card.tsx index 60f2275e..4931f4b3 100644 --- a/src/components/Author/Card.tsx +++ b/src/components/Author/Card.tsx @@ -2,13 +2,14 @@ import { For, Show } from 'solid-js/web' import type { Author } from '../../graphql/types.gen' import Userpic from './Userpic' import { Icon } from '../Nav/Icon' -import './Card.scss' +import style from './Card.module.scss' import { createMemo } from 'solid-js' import { translit } from '../../utils/ru2en' import { t } from '../../utils/intl' import { useAuthStore } from '../../stores/auth' import { locale } from '../../stores/ui' import { follow, unfollow } from '../../stores/zine/common' +import { clsx } from 'clsx' interface AuthorCardProps { compact?: boolean @@ -17,6 +18,7 @@ interface AuthorCardProps { hasLink?: boolean subscribed?: boolean author: Author + isAuthorPage?: boolean } export const AuthorCard = (props: AuthorCardProps) => { @@ -34,45 +36,51 @@ export const AuthorCard = (props: AuthorCardProps) => { } // TODO: reimplement AuthorCard return ( -
- +
+ -
-
+
+
- + {name()} -
{name()}
+
{name()}
-
{bio()}
+
{bio()}
-