discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Merge remote-tracking branch 'origin' into layouts

Browse Source
This commit is contained in:
tonyrewin 2022-11-11 20:47:46 +03:00
commit fab46a6ef2
13 changed files with 292 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/Author/Card.module.scss
View File

@ -15,12 +15,24 @@
.authorDetails { .authorDetails {
display: flex; display: flex;
flex: 1; flex: 1;
padding-right: 1.2rem; //padding-right: 1.2rem;
width: max-content; width: max-content;
@include media-breakpoint-down(sm) {
flex-wrap: wrap;
}
} }
.authorDetailsWrapper { .authorDetailsWrapper {
flex: 1; flex: 1 100%;
@include media-breakpoint-up(sm) {
flex: 1;
}
@include media-breakpoint-up(md) {
padding-right: 1.2rem;
}
} }
.authorName { .authorName {
@ -33,6 +45,7 @@
.authorAbout { .authorAbout {
font-size: 1.5rem; font-size: 1.5rem;
color: rgb(0 0 0 / 60%); color: rgb(0 0 0 / 60%);
word-break: break-word;
} }
.authorSubscribe { .authorSubscribe {
@ -118,6 +131,10 @@
button { button {
margin-right: 0.5em; margin-right: 0.5em;
&:last-child {
margin-right: 0;
}
} }
} }
@ -221,3 +238,22 @@
vertical-align: middle; vertical-align: middle;
} }
} }
.authorsListItem {
.authorName {
@include font-size(2.2rem);
font-weight: bold;
}
.authorSubscribe {
align-items: baseline;
@include media-breakpoint-down(sm) {
padding: 1rem 0 0;
}
}
.buttonLabel {
display: block;
}
}

67
src/components/Author/Card.tsx
View File

@ -1,7 +1,7 @@
import type { Author } from '../../graphql/types.gen' import type { Author } from '../../graphql/types.gen'
import Userpic from './Userpic' import Userpic from './Userpic'
import { Icon } from '../Nav/Icon' import { Icon } from '../Nav/Icon'
import style from './Card.module.scss' import styles from './Card.module.scss'
import { createMemo, For, Show } from 'solid-js' import { createMemo, For, Show } from 'solid-js'
import { translit } from '../../utils/ru2en' import { translit } from '../../utils/ru2en'
import { t } from '../../utils/intl' import { t } from '../../utils/intl'
@ -19,6 +19,7 @@ interface AuthorCardProps {
author: Author author: Author
isAuthorPage?: boolean isAuthorPage?: boolean
noSocialButtons?: boolean noSocialButtons?: boolean
isAuthorsList?: boolean
} }
export const AuthorCard = (props: AuthorCardProps) => { export const AuthorCard = (props: AuthorCardProps) => {
@ -36,51 +37,81 @@ export const AuthorCard = (props: AuthorCardProps) => {
} }
// TODO: reimplement AuthorCard // TODO: reimplement AuthorCard
return ( return (
<div class={style.author} classList={{ [style.authorPage]: props.isAuthorPage }}> <div
<Userpic user={props.author} hasLink={props.hasLink} isBig={props.isAuthorPage} /> class={clsx(styles.author)}
classList={{
[styles.authorPage]: props.isAuthorPage,
[styles.authorsListItem]: props.isAuthorsList
}}
>
<Userpic
user={props.author}
hasLink={props.hasLink}
isBig={props.isAuthorPage}
isAuthorsList={props.isAuthorsList}
/>
<div class={style.authorDetails}> <div class={styles.authorDetails}>
<div class={style.authorDetailsWrapper}> <div class={styles.authorDetailsWrapper}>
<Show when={props.hasLink}> <Show when={props.hasLink}>
<a class={style.authorName} href={`/author/${props.author.slug}`}> <a class={styles.authorName} href={`/author/${props.author.slug}`}>
{name()} {name()}
</a> </a>
</Show> </Show>
<Show when={!props.hasLink}> <Show when={!props.hasLink}>
<div class={style.authorName}>{name()}</div> <div class={styles.authorName}>{name()}</div>
</Show> </Show>
<Show when={!props.hideDescription}> <Show when={!props.hideDescription}>
<div class={style.authorAbout}>{bio()}</div> <div class={styles.authorAbout} classList={{ 'text-truncate': props.isAuthorsList }}>
{bio()}
</div>
</Show> </Show>
</div> </div>
<Show when={canFollow()}> <Show when={canFollow()}>
<div class={style.authorSubscribe}> <div class={styles.authorSubscribe}>
<Show <Show
when={subscribed()} when={subscribed()}
fallback={ fallback={
<button <button
onClick={() => follow} onClick={() => follow}
class={clsx('button button--subscribe', style.button, style.buttonSubscribe)} class={clsx('button', styles.button)}
classList={{
[styles.buttonSubscribe]: !props.isAuthorsList,
'button--subscribe': !props.isAuthorsList,
'button--subscribe-topic': props.isAuthorsList,
[styles.buttonWrite]: props.isAuthorsList
}}
> >
<Icon name="author-subscribe" class={style.icon} /> <Show when={!props.isAuthorsList}>
<span class={style.buttonLabel}>&nbsp;{t('Follow')}</span> <Icon name="author-subscribe" class={styles.icon} />
&nbsp;
</Show>
<span class={styles.buttonLabel}>{t('Follow')}</span>
</button> </button>
} }
> >
<button <button
onClick={() => unfollow} onClick={() => unfollow}
class={clsx('button button--subscribe', style.button, style.buttonSubscribe)} classList={{
[styles.buttonSubscribe]: !props.isAuthorsList,
'button--subscribe': !props.isAuthorsList,
'button--subscribe-topic': props.isAuthorsList,
[styles.buttonWrite]: props.isAuthorsList
}}
> >
<Icon name="author-unsubscribe" class={style.icon} /> <Show when={!props.isAuthorsList}>
<span class={style.buttonLabel}>-&nbsp;{t('Unfollow')}</span> <Icon name="author-unsubscribe" class={styles.icon} />
&nbsp;
</Show>
<span class={styles.buttonLabel}>{t('Unfollow')}</span>
</button> </button>
</Show> </Show>
<Show when={!props.compact}> <Show when={!props.compact && !props.isAuthorsList}>
<button class={clsx(style.buttonWrite, style.button, 'button button--subscribe-topic')}> <button class={clsx(styles.buttonWrite, styles.button, 'button button--subscribe-topic')}>
<Icon name="edit" class={style.icon} /> <Icon name="edit" class={styles.icon} />
{t('Write')} {t('Write')}
</button> </button>

14
src/components/Author/Userpic.module.scss
View File

@ -20,7 +20,7 @@
border: 2px solid black; border: 2px solid black;
background-color: white; background-color: white;
text-align: center; text-align: center;
line-height: 32px; line-height: 28px;
} }
.anonymous { .anonymous {
@ -47,3 +47,15 @@
width: 100%; width: 100%;
} }
} }
.authorsList {
margin-right: 2.4rem;
max-height: 6.8rem;
min-width: 6.8rem;
height: 6.8rem;
width: 6.8rem;
.userpic {
line-height: 6.4rem;
}
}

15
src/components/Author/Userpic.tsx
View File

@ -1,6 +1,6 @@
import { Show } from 'solid-js' import { Show } from 'solid-js'
import type { Author } from '../../graphql/types.gen' import type { Author } from '../../graphql/types.gen'
import style from './Userpic.module.scss' import styles from './Userpic.module.scss'
import { clsx } from 'clsx' import { clsx } from 'clsx'
interface UserpicProps { interface UserpicProps {
@ -8,6 +8,7 @@ interface UserpicProps {
hasLink?: boolean hasLink?: boolean
isBig?: boolean isBig?: boolean
class?: string class?: string
isAuthorsList?: boolean
} }
export default (props: UserpicProps) => { export default (props: UserpicProps) => {
@ -18,7 +19,13 @@ export default (props: UserpicProps) => {
} }
return ( return (
<div class={clsx(style.circlewrap, props.class)} classList={{ [style.big]: props.isBig }}> <div
class={clsx(styles.circlewrap, props.class)}
classList={{
[styles.big]: props.isBig,
[styles.authorsList]: props.isAuthorsList
}}
>
<Show when={props.hasLink}> <Show when={props.hasLink}>
<a href={`/author/${props.user.slug}`}> <a href={`/author/${props.user.slug}`}>
<Show <Show
@ -31,7 +38,7 @@ export default (props: UserpicProps) => {
/> />
} }
> >
<div class={style.userpic}>{letters()}</div> <div class={styles.userpic}>{letters()}</div>
</Show> </Show>
</a> </a>
</Show> </Show>
@ -47,7 +54,7 @@ export default (props: UserpicProps) => {
/> />
} }
> >
<div class={style.userpic}>{letters()}</div> <div class={styles.userpic}>{letters()}</div>
</Show> </Show>
</Show> </Show>
</div> </div>

6
src/components/Pages/about/GuidePage.tsx
View File

@ -6,7 +6,7 @@ import { Icon } from '../../Nav/Icon'
export const GuidePage = () => { export const GuidePage = () => {
const title = t('How it works') const title = t('How it works')
const [indexExpanded, setIndexExpanded] = createSignal(false) const [indexExpanded, setIndexExpanded] = createSignal(true)
const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded) const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
@ -28,12 +28,14 @@ export const GuidePage = () => {
<Icon name="content-index-control" /> <Icon name="content-index-control" />
</Show> </Show>
<Show when={indexExpanded()}> <Show when={indexExpanded()}>
<Icon name="content-index-control-expanded" /> <Icon name="content-index-control-expanded" class={'expanded'} />
</Show> </Show>
</button> </button>
<Show when={indexExpanded()}> <Show when={indexExpanded()}>
<nav class="content-index"> <nav class="content-index">
<h4>Оглавление</h4>
<ul class="nodash"> <ul class="nodash">
<li> <li>
<a href="#how-it-works">{title}</a> <a href="#how-it-works">{title}</a>

6
src/components/Pages/about/HelpPage.tsx
View File

@ -6,7 +6,7 @@ import { Icon } from '../../Nav/Icon'
// const title = t('Support us') // const title = t('Support us')
export const HelpPage = () => { export const HelpPage = () => {
const [indexExpanded, setIndexExpanded] = createSignal(false) const [indexExpanded, setIndexExpanded] = createSignal(true)
const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded) const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
@ -25,12 +25,14 @@ export const HelpPage = () => {
<Icon name="content-index-control" /> <Icon name="content-index-control" />
</Show> </Show>
<Show when={indexExpanded()}> <Show when={indexExpanded()}>
<Icon name="content-index-control-expanded" /> <Icon name="content-index-control-expanded" class={'expanded'} />
</Show> </Show>
</button> </button>
<Show when={indexExpanded()}> <Show when={indexExpanded()}>
<nav class="content-index"> <nav class="content-index">
<h4>Оглавление</h4>
<ul class="nodash"> <ul class="nodash">
<li> <li>
<a href="#help-us">Как вы&nbsp;можете поддержать Дискурс?</a> <a href="#help-us">Как вы&nbsp;можете поддержать Дискурс?</a>

8
src/components/Pages/about/ManifestPage.tsx
View File

@ -9,7 +9,7 @@ import { Icon } from '../../Nav/Icon'
// title={t('Manifest')} // title={t('Manifest')}
export const ManifestPage = () => { export const ManifestPage = () => {
const [indexExpanded, setIndexExpanded] = createSignal(false) const [indexExpanded, setIndexExpanded] = createSignal(true)
const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded) const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
@ -29,12 +29,14 @@ export const ManifestPage = () => {
<Icon name="content-index-control" /> <Icon name="content-index-control" />
</Show> </Show>
<Show when={indexExpanded()}> <Show when={indexExpanded()}>
<Icon name="content-index-control-expanded" /> <Icon name="content-index-control-expanded" class={'expanded'} />
</Show> </Show>
</button> </button>
<Show when={indexExpanded()}> <Show when={indexExpanded()}>
<nav class="content-index"> <nav class="content-index">
<h4>Оглавление</h4>
<ul class="nodash"> <ul class="nodash">
<li> <li>
<a href="#manifest">Манифест</a> <a href="#manifest">Манифест</a>
@ -104,7 +106,7 @@ export const ManifestPage = () => {
независимой журналистики. Участвовать в&nbsp;открытой редакции и&nbsp;помогать журналу можно независимой журналистики. Участвовать в&nbsp;открытой редакции и&nbsp;помогать журналу можно
следующими способами: следующими способами:
</p> </p>
<details> <details open>
<summary> <summary>
<h3 id="contribute">Предлагать материалы</h3> <h3 id="contribute">Предлагать материалы</h3>
</summary> </summary>

6
src/components/Pages/about/TermsOfUsePage.tsx
View File

@ -5,7 +5,7 @@ import { Icon } from '../../Nav/Icon'
// const title = t('Terms of use') // const title = t('Terms of use')
export const TermsOfUsePage = () => { export const TermsOfUsePage = () => {
const [indexExpanded, setIndexExpanded] = createSignal(false) const [indexExpanded, setIndexExpanded] = createSignal(true)
const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded) const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
@ -23,12 +23,14 @@ export const TermsOfUsePage = () => {
<Icon name="content-index-control" /> <Icon name="content-index-control" />
</Show> </Show>
<Show when={indexExpanded()}> <Show when={indexExpanded()}>
<Icon name="content-index-control-expanded" /> <Icon name="content-index-control-expanded" class={'expanded'} />
</Show> </Show>
</button> </button>
<Show when={indexExpanded()}> <Show when={indexExpanded()}>
<nav class="content-index"> <nav class="content-index">
<h4>Оглавление</h4>
<ul class="nodash"> <ul class="nodash">
<li> <li>
<a href="#terms-of-use">Пользовательское соглашение</a> <a href="#terms-of-use">Пользовательское соглашение</a>

4
src/components/Topic/Card.module.scss
View File

@ -3,10 +3,6 @@
margin-top: 3.2rem; margin-top: 3.2rem;
.stats & { .stats & {
@include media-breakpoint-down(sm) {
margin-left: 0;
}
.topicDetailsItem { .topicDetailsItem {
margin-bottom: 1.2rem; margin-bottom: 1.2rem;
} }

139
src/components/Views/AllAuthors.tsx
View File

@ -57,81 +57,80 @@ export const AllAuthorsView = (props: Props) => {
// log.debug(getSearchParams()) // log.debug(getSearchParams())
return ( return (
<div class={styles.allTopicsPage}> <div class={clsx(styles.allTopicsPage, 'container')}>
<Show when={sortedAuthors().length > 0}> <Show when={sortedAuthors().length > 0}>
<div class="wide-container"> <div class="shift-content">
<div class="shift-content"> <div class="row">
<div class="row"> <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-8')}>
<div class={clsx(styles.pageHeader, 'col-lg-9')}> <h1>{t('Authors')}</h1>
<h1>{t('Authors')}</h1> <p>{t('Subscribe who you like to tune your personal feed')}</p>
<p>{t('Subscribe who you like to tune your personal feed')}</p>
</div>
</div> </div>
<div class="row"> </div>
<div class="col"> <div class="row">
<ul class={clsx(styles.viewSwitcher, 'view-switcher')}> <div class="col-lg-10 col-xl-8">
<li classList={{ selected: searchParams().by === 'shouts' }}> <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
<a href="/authors?by=shouts" onClick={handleClientRouteLinkClick}> <li classList={{ selected: searchParams().by === 'shouts' }}>
{t('By shouts')} <a href="/authors?by=shouts" onClick={handleClientRouteLinkClick}>
</a> {t('By shouts')}
</li> </a>
<li classList={{ selected: searchParams().by === 'rating' }}> </li>
<a href="/authors?by=rating" onClick={handleClientRouteLinkClick}> <li classList={{ selected: searchParams().by === 'rating' }}>
{t('By rating')} <a href="/authors?by=rating" onClick={handleClientRouteLinkClick}>
</a> {t('By rating')}
</li> </a>
<li classList={{ selected: !searchParams().by || searchParams().by === 'name' }}> </li>
<a href="/authors" onClick={handleClientRouteLinkClick}> <li classList={{ selected: !searchParams().by || searchParams().by === 'name' }}>
{t('By alphabet')} <a href="/authors" onClick={handleClientRouteLinkClick}>
</a> {t('By alphabet')}
</li> </a>
<li class="view-switcher__search"> </li>
<a href="/authors/search"> <li class="view-switcher__search">
<Icon name="search" /> <a href="/authors/search">
{t('Search author')} <Icon name="search" />
</a> {t('Search author')}
</li> </a>
</ul> </li>
<Show </ul>
when={!searchParams().by || searchParams().by === 'name'} <Show
fallback={() => ( when={!searchParams().by || searchParams().by === 'name'}
<div class="stats"> fallback={() => (
<For each={sortedAuthors()}> <div class={styles.stats}>
{(author) => ( <For each={sortedAuthors()}>
<AuthorCard {(author) => (
author={author} <AuthorCard
compact={false} author={author}
hasLink={true} compact={false}
subscribed={subscribed(author.slug)} hasLink={true}
noSocialButtons={true} subscribed={subscribed(author.slug)}
/> noSocialButtons={true}
)} isAuthorsList={true}
</For> />
</div> )}
)} </For>
> </div>
<For each={sortedKeys()}> )}
{(letter) => ( >
<div class={clsx(styles.group, 'group')}> <For each={sortedKeys()}>
<h2>{letter}</h2> {(letter) => (
<div class="container"> <div class={clsx(styles.group, 'group')}>
<div class="row"> <h2>{letter}</h2>
<For each={byLetter()[letter]}> <div class="container">
{(author: Author) => ( <div class="row">
<div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}> <For each={byLetter()[letter]}>
<div class="topic-title"> {(author: Author) => (
<a href={`/author/${author.slug}`}>{author.name}</a> <div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}>
</div> <div class="topic-title">
<a href={`/author/${author.slug}`}>{author.name}</a>
</div> </div>
)} </div>
</For> )}
</div> </For>
</div> </div>
</div> </div>
)} </div>
</For> )}
</Show> </For>
</div> </Show>
</div> </div>
</div> </div>
</div> </div>

140
src/components/Views/AllTopics.tsx
View File

@ -54,90 +54,80 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
const subscribed = (s) => Boolean(session()?.news?.topics && session()?.news?.topics?.includes(s || '')) const subscribed = (s) => Boolean(session()?.news?.topics && session()?.news?.topics?.includes(s || ''))
return ( return (
<div class={styles.allTopicsPage}> <div class={clsx(styles.allTopicsPage, 'container')}>
<Show when={sortedTopics().length > 0}> <Show when={sortedTopics().length > 0}>
<div class="wide-container"> <div class="shift-content">
<div class="shift-content"> <div class="row">
<div class="row"> <div class={clsx(styles.pageHeader, 'col-lg-9')}>
<div class={clsx(styles.pageHeader, 'col-lg-9')}> <h1>{t('Topics')}</h1>
<h1>{t('Topics')}</h1> <div class="col-lg-10">
<div class="col-lg-10"> <p>{t('Subscribe what you like to tune your personal feed')}</p>
<p>{t('Subscribe what you like to tune your personal feed')}</p>
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="col-12">
<div class="col"> <ul class={clsx(styles.viewSwitcher, 'view-switcher col-lg-10')}>
<div class="row"> <li classList={{ selected: searchParams().by === 'shouts' || !searchParams().by }}>
<ul class={clsx(styles.viewSwitcher, 'view-switcher col-lg-10')}> <a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}>
<li classList={{ selected: searchParams().by === 'shouts' || !searchParams().by }}> {t('By shouts')}
<a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}> </a>
{t('By shouts')} </li>
</a> <li classList={{ selected: searchParams().by === 'authors' }}>
</li> <a href="/topics?by=authors" onClick={handleClientRouteLinkClick}>
<li classList={{ selected: searchParams().by === 'authors' }}> {t('By authors')}
<a href="/topics?by=authors" onClick={handleClientRouteLinkClick}> </a>
{t('By authors')} </li>
</a> <li classList={{ selected: searchParams().by === 'title' }}>
</li> <a
<li classList={{ selected: searchParams().by === 'title' }}> href="/topics?by=title"
<a onClick={(ev) => {
href="/topics?by=title" // just an example
onClick={(ev) => { ev.preventDefault()
// just an example changeSearchParam('by', 'title')
ev.preventDefault() }}
changeSearchParam('by', 'title') >
}} {t('By alphabet')}
> </a>
{t('By alphabet')} </li>
</a> <li class="view-switcher__search">
</li> <a href="/topic/search">
<li class="view-switcher__search"> <Icon name="search" />
<a href="/topic/search"> {t('Search topic')}
<Icon name="search" /> </a>
{t('Search topic')} </li>
</a> </ul>
</li> </div>
</ul> </div>
</div>
<Show <Show
when={searchParams().by === 'title'} when={searchParams().by === 'title'}
fallback={() => ( fallback={() => (
<div class={cardStyles.stats}> <For each={sortedTopics()}>
<For each={sortedTopics()}> {(topic) => <TopicCard topic={topic} compact={false} subscribed={subscribed(topic.slug)} />}
</For>
)}
>
<For each={sortedKeys()}>
{(letter) => (
<div class={clsx(styles.group, 'group')}>
<h2>{letter}</h2>
<div class="container">
<div class="row">
<For each={byLetter()[letter]}>
{(topic) => ( {(topic) => (
<TopicCard topic={topic} compact={false} subscribed={subscribed(topic.slug)} /> <div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}>
<div class="topic-title">
<a href={`/topic/${topic.slug}`}>{topic.title}</a>
</div>
</div>
)} )}
</For> </For>
</div> </div>
)} </div>
> </div>
<For each={sortedKeys()}> )}
{(letter) => ( </For>
<div class={clsx(styles.group, 'group')}> </Show>
<h2>{letter}</h2>
<div class="container">
<div class="row">
<For each={byLetter()[letter]}>
{(topic) => (
<div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}>
<div class="topic-title">
<a href={`/topic/${topic.slug}`}>{topic.title}</a>
</div>
</div>
)}
</For>
</div>
</div>
</div>
)}
</For>
</Show>
</div>
</div>
</div>
</div> </div>
</Show> </Show>
</div> </div>

13
src/styles/AllTopics.module.scss
View File

@ -1,11 +1,4 @@
.allTopicsPage { .allTopicsPage {
.pageHeader,
.group h2 {
@include media-breakpoint-down(sm) {
margin-left: 1.3rem;
}
}
.group { .group {
font-weight: bold; font-weight: bold;
margin: 3em 0 9.6rem; margin: 3em 0 9.6rem;
@ -39,8 +32,6 @@
} }
} }
.viewSwitcher { .stats {
@include media-breakpoint-down(sm) { margin-top: 2.4rem;
margin: 0 2.6rem;
}
} }

30
src/styles/app.scss
View File

@ -250,8 +250,8 @@ button {
} }
.button--content-index { .button--content-index {
border: 2px solid #fff;
background: none; background: none;
border: 2px solid #fff;
height: 3.2rem; height: 3.2rem;
float: right; float: right;
padding: 0; padding: 0;
@ -271,15 +271,31 @@ button {
right: $container-padding-x; right: $container-padding-x;
} }
.icon {
background: #fff;
transition: filter 0.3s;
}
.icon, .icon,
img { img {
height: 100%;
vertical-align: middle; vertical-align: middle;
width: auto; width: auto;
} }
&:hover { &:hover {
.icon { .icon {
opacity: 0.5; filter: invert(1);
}
}
.expanded {
border-radius: 100%;
overflow: hidden;
img {
height: auto;
margin-top: 0.8rem;
} }
} }
} }
@ -515,6 +531,7 @@ figcaption {
.view-switcher__search { .view-switcher__search {
text-align: right; text-align: right;
white-space: nowrap;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
flex: 1; flex: 1;
@ -643,6 +660,11 @@ astro-island {
.container { .container {
max-width: 1400px; max-width: 1400px;
width: auto;
@include media-breakpoint-down(sm) {
//padding: 0 $container-padding-x * 0.5;
}
} }
.container--static-page { .container--static-page {
@ -716,6 +738,10 @@ astro-island {
a { a {
border: none; border: none;
} }
h4 {
@include font-size(1.6rem);
}
} }
.load-more-container { .load-more-container {