postmerge

This commit is contained in:
tonyrewin 2022-10-21 01:15:20 +03:00
commit 9f557fb74a
20 changed files with 196 additions and 96 deletions

View File

@ -1,4 +1,5 @@
<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 7.29824L0.000122786 10.1051L2.77778 10.1053L0 7.29824ZM7.22222 0L0.659722 6.63158L3.4375 9.4386L10 2.80702L7.22222 0Z" fill="#696969"/>
<path d="M0 10.7368H10V12H0V10.7368Z" fill="#696969"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 7.29824L0.000122786 10.1051L2.77778 10.1053L0 7.29824ZM7.22222 0L0.659722 6.63158L3.4375 9.4386L10 2.80702L7.22222 0Z" fill="#000"/>
<path d="M0 10.7368H10V12H0V10.7368Z" fill="#000"/>
</svg>

Before

Width:  |  Height:  |  Size: 346 B

After

Width:  |  Height:  |  Size: 346 B

View File

@ -0,0 +1,5 @@
<?xml version="1.0"?>
<svg width="12px" height="12px" viewBox="0 0 12 12"
enable-background="new 0 0 12 12" version="1.1"
xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path
d="M3.7796631,8.75C4.1953125,10.6790771,5.0326538,12,6,12s1.8046875-1.3209229,2.2203369-3.25H3.7796631z" fill="#fff"/><path d="M9.2371216,3.25h2.0916748c-0.664978-1.2857056-1.779541-2.2975464-3.1375122-2.8312378 C8.6710815,1.1671753,9.0209351,2.1549683,9.2371216,3.25z" fill="#fff"/><path d="M8.3912964,4.25H3.6087036C3.5383911,4.803833,3.5,5.3909912,3.5,6s0.0383911,1.196167,0.1087036,1.75 h4.7825928C8.4616089,7.196167,8.5,6.6090088,8.5,6S8.4616089,4.803833,8.3912964,4.25z" fill="#fff"/><path d="M9.5,6c0,0.5882568-0.0372925,1.1765137-0.1055298,1.75h2.3445435C11.9077148,7.196167,12,6.6090088,12,6 s-0.0922852-1.196167-0.2609863-1.75H9.3944702C9.4627075,4.8234863,9.5,5.4117432,9.5,6z" fill="#fff"/><path d="M8.2203369,3.25C7.8046875,1.3209229,6.9673462,0,6,0S4.1953125,1.3209229,3.7796631,3.25H8.2203369z" fill="#fff"/><path d="M2.7628784,8.75H0.6712036c0.664978,1.2857056,1.779541,2.2975464,3.1375122,2.8312378 C3.3289185,10.8328247,2.9790649,9.8450317,2.7628784,8.75z" fill="#fff"/><path d="M2.5,6c0-0.5882568,0.0372925-1.1765137,0.1055298-1.75H0.2609863C0.0922852,4.803833,0,5.3909912,0,6 s0.0922852,1.196167,0.2609863,1.75h2.3445435C2.5372925,7.1765137,2.5,6.5882568,2.5,6z" fill="#fff"/><path d="M9.2371216,8.75c-0.2161865,1.0950317-0.56604,2.0828247-1.0458374,2.8312378 C9.5492554,11.0475464,10.6638184,10.0357056,11.3287964,8.75H9.2371216z" fill="#fff"/><path d="M2.7628784,3.25c0.2161865-1.0950317,0.56604-2.0828247,1.0458374-2.8312378 C2.4507446,0.9524536,1.3361816,1.9642944,0.6712036,3.25H2.7628784z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -3,6 +3,10 @@
display: flex;
margin-bottom: 2.4rem;
&:last-child {
margin-bottom: 0;
}
@include media-breakpoint-down(lg) {
flex-wrap: wrap;
}
@ -32,6 +36,9 @@
}
.authorSubscribe {
align-items: center;
display: flex;
@include media-breakpoint-down(lg) {
padding: 0 0 0 42px;
}
@ -48,6 +55,7 @@
width: 32px;
&::before {
background-image: url(/icons/user-link-default.svg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
@ -106,6 +114,10 @@
background-image: url(/icons/instagram-white.svg);
}
}
button {
margin-right: 0.5em;
}
}
.buttonSubscribe {
@ -129,15 +141,26 @@
background: #f7f7f7;
color: #000;
display: inline-flex;
transition: background-color 0.3s, color 0.3s;
@include font-size(1.5rem);
&:hover {
background: #000;
color: #fff;
img {
filter: invert(1);
}
}
.icon {
margin-right: 0.5em;
}
img {
height: 15px;
transition: filter 0.3s;
}
}
@ -155,7 +178,6 @@
}
.authorSubscribe {
display: flex;
margin-top: 2rem;
}

View File

@ -19,6 +19,7 @@ interface AuthorCardProps {
subscribed?: boolean
author: Author
isAuthorPage?: boolean
noSocialButtons?: boolean
}
export const AuthorCard = (props: AuthorCardProps) => {
@ -84,7 +85,9 @@ export const AuthorCard = (props: AuthorCardProps) => {
{t('Write')}
</button>
<For each={props.author.links}>{(link) => <a href={link} />}</For>
<Show when={!props.noSocialButtons}>
<For each={props.author.links}>{(link) => <a href={link} />}</For>
</Show>
</Show>
</div>
</Show>

View File

@ -1,4 +1,4 @@
.discours-footer {
.discoursFooter {
background: #000;
color: rgb(255 255 255 / 64%);
@include font-size(1.7rem);
@ -34,21 +34,21 @@
margin-top: 0.8rem;
}
.wide-container {
.wideContainer {
@include media-breakpoint-down(sm) {
padding: 0 $container-padding-x;
}
}
}
.discours-footer__content {
.discoursFooterContent {
display: flex;
flex-direction: column;
justify-content: center;
padding-left: $grid-gutter-width;
}
.footer-copyright {
.footerCopyright {
border-top: 5px solid #404040;
color: #696969;
@include font-size(1.5rem);
@ -56,7 +56,7 @@
padding-top: 1.6rem;
}
.footer-copyright__social {
.footerCopyrightSocial {
display: flex;
.icon {
@ -75,12 +75,19 @@
}
}
.social__item {
text-align: right;
.socialItem {
margin-top: 1em;
text-align: center;
width: 25%;
@include media-breakpoint-up(md) {
margin-top: 0;
margin-left: 0.3em;
text-align: right;
}
}
.social__item--vk {
.socialItemvk {
img {
max-width: 25px;
}

View File

@ -1,9 +1,10 @@
import { createMemo, For } from 'solid-js'
import './Footer.scss'
import styles from './Footer.module.scss'
import { Icon } from '../Nav/Icon'
import Subscribe from './Subscribe'
import { t } from '../../utils/intl'
import { locale } from '../../stores/ui'
import {clsx} from "clsx";
export const Footer = () => {
const locale_title = createMemo(() => (locale() === 'ru' ? 'English' : 'Русский'))
@ -107,12 +108,12 @@ export const Footer = () => {
}
]
return (
<footer class="discours-footer">
<div class="wide-container">
<footer class={styles.discoursFooter}>
<div class={clsx('wide-container', styles.wideContainer)}>
<div class="row">
<For each={links()}>
{({ header, items }) => (
<div class="col-md-3">
<div class="col-sm-4 col-md-3">
<h5>{t(header)}</h5>
<ul>
<For each={items}>
@ -134,18 +135,18 @@ export const Footer = () => {
</div>
</div>
<div class="footer-copyright row">
<div class="col-md-10">
<div class={clsx(styles.footerCopyright, 'row')}>
<div class="col-md-9 col-lg-10">
Независимый журнал с&nbsp;открытой горизонтальной редакцией о&nbsp;культуре, науке
и&nbsp;обществе. Дискурс&nbsp;&copy; 2015&ndash;2022{' '}
<a href="/about/terms-of-use">{t('Terms of use')}</a>
</div>
<div class="footer-copyright__social col-md-2">
<div class={clsx(styles.footerCopyrightSocial, 'col-md-3 col-lg-2')}>
<For each={[...SOCIAL]}>
{(social) => (
<div class={`social__item social__item--${social.name}`}>
<div class={clsx(styles.socialItem, styles[`socialItem${social.name}`])}>
<a href={social.href}>
<Icon name={`${social.name}-white`} />
<Icon name={`${social.name}-white`} class={styles.icon} />
</a>
</div>
)}

View File

@ -8,10 +8,6 @@
padding: 3.6rem 0;
text-align: center;
@include media-breakpoint-up(md) {
margin-top: -6.4rem;
}
h4 {
margin-bottom: 4rem;
}

View File

@ -1,7 +1,11 @@
.subscribe-form {
.subscribeForm {
display: flex;
width: 100%;
@include media-breakpoint-between(md, xl) {
flex-direction: column;
}
input {
background: none;
border: none;
@ -30,6 +34,7 @@
}
button {
margin-top: 0;
padding-bottom: 0.8rem;
}
}

View File

@ -1,5 +1,5 @@
import { createSignal, onMount } from 'solid-js'
import './Subscribe.scss'
import styles from './Subscribe.module.scss'
import { t } from '../../utils/intl'
export default () => {
@ -8,12 +8,12 @@ export default () => {
const subscribe = async () => {
setTitle(t('...subscribing'))
const r = await fetch(`/maillist?email=${emailElement?.value}`)
setTitle(r.ok ? t('You are subscribed') : t('Subscribe'))
setTitle(r.ok ? t('You are subscribed') : '')
}
onMount(() => setTitle(t('Subscribe')))
return (
<div class="subscribe-form">
<input type="email" name="email" ref={emailElement} placeholder="email" value={title()} />
<div class={styles.subscribeForm}>
<input type="email" name="email" ref={emailElement} placeholder={t('Fill email')} value={title()} />
<button class="button--light" onClick={() => emailElement?.value && subscribe()}>
{t('Subscribe')}
</button>

View File

@ -3,6 +3,10 @@
list-style-type: none;
padding-left: 0;
@include media-breakpoint-up(md) {
margin-bottom: 0;
}
a {
border: none;
}
@ -16,6 +20,12 @@
&:last-child {
border: none;
margin-bottom: 0;
padding-bottom: 0;
.shoutCardContent {
margin-bottom: 0;
}
}
&::before {

View File

@ -42,7 +42,7 @@ export default (props: BesideProps) => {
</Show>
<ul class={style.besideColumn}>
<For each={[...props.values]}>
{(value: Shout | User | Topic | Author) => (
{(value: Partial<Shout | User | Topic>) => (
<li classList={{ [style.top]: props.wrapper.startsWith('top-') }}>
<Show when={props.wrapper === 'topic'}>
<TopicCard

View File

@ -5,6 +5,12 @@
margin-bottom: 2.4rem;
position: relative;
@include media-breakpoint-up(md) {
&:last-child {
margin-bottom: 0;
}
}
&:hover {
.shoutCardCover img {
transform: scale(1.05);
@ -212,6 +218,10 @@
@include media-breakpoint-up(md) {
margin-bottom: 2em;
&:last-child {
margin-bottom: 0;
}
}
}
@ -477,7 +487,7 @@
.shoutCardVertical {
aspect-ratio: auto;
height: 100%;
margin: 1.6rem 0;
margin: 0;
padding: 0 0 20%;
@include media-breakpoint-up(md) {

View File

@ -8,9 +8,12 @@ import { Icon } from '../Nav/Icon'
import style from './Card.module.scss'
import { locale } from '../../stores/ui'
import { handleClientRouteLinkClick } from '../../stores/router'
import { getLogger } from '../../utils/logger'
import { clsx } from 'clsx'
import CardTopic from './CardTopic'
const log = getLogger('card component')
interface ArticleCardProps {
settings?: {
noicon?: boolean

View File

@ -51,7 +51,7 @@ export const Header = (props: Props) => {
const isFixed = fixed() || (getModal() && getModal() !== 'share');
document.body.classList.toggle('fixed', isFixed);
document.body.classList.toggle(styles.fixed, isFixed);
document.body.classList.toggle(styles.fixed, isFixed && !getModal());
}, [fixed(), getModal()])
// derived

View File

@ -54,29 +54,28 @@ export const ManifestPage = () => {
<div class="col-lg-10 offset-md-1">
<p>
Дискурс - независимый художественно-аналитический журнал с горизонтальной редакцией,
основанный на принципах свободы слова, прямой демократии и совместного редактирования.
Дискурс&nbsp;&mdash; независимый художественно-аналитический журнал с&nbsp;горизонтальной редакцией,
основанный на&nbsp;принципах свободы слова, прямой демократии и&nbsp;совместного редактирования.
Дискурс создаётся открытым медиасообществом ученых, журналистов, музыкантов, писателей,
предпринимателей, философов, инженеров, художников и специалистов со всего мира,
объединившихся, чтобы вместе делать общий журнал и объяснять с разных точек зрения мозаичную
картину современности.
предпринимателей, философов, инженеров, художников и&nbsp;специалистов со&nbsp;всего мира,
объединившихся, чтобы вместе делать общий журнал и&nbsp;объяснять с&nbsp;разных точек
зрения мозаичную картину современности.
</p>
<p>
Мы пишем о культуре, науке и обществе, рассказываем о новых идеях и современном искусстве,
публикуем статьи, исследования, репортажи, интервью людей, чью прямую речь стоит услышать, и
работы художников из разных стран - от фильмов и музыки до живописи и фотографии. Помогая
друг другу делать публикации качественнее и общим голосованием выбирая лучшие материалы для
журнала, мы создаём новую горизонтальную журналистику, чтобы честно рассказывать о важном и
интересном.
Мы&nbsp;пишем о&nbsp;культуре, науке и&nbsp;обществе, рассказываем о&nbsp;новых идеях и&nbsp;современном искусстве,
публикуем статьи, исследования, репортажи, интервью людей, чью прямую речь стоит услышать,
и&nbsp;работы художников из&nbsp;разных стран&nbsp;&mdash; от&nbsp;фильмов и&nbsp;музыки
до&nbsp;живописи и&nbsp;фотографии. Помогая друг другу делать публикации качественнее
и&nbsp;общим голосованием выбирая лучшие материалы для журнала, мы&nbsp;создаём новую
горизонтальную журналистику, чтобы честно рассказывать о&nbsp;важном и&nbsp;интересном.
</p>
<p>
Редакция Дискурса открыта для всех: у нас нет цензуры, запретных тем и идеологических рамок.
Каждый может
<a href="/create">прислать материал</a> в журнал и{' '}
<a href="/about/guide">присоединиться к редакции</a>. Предоставляя трибуну для независимой
журналистики и художественных проектов, мы помогаем людям рассказывать свои истории так,
чтобы они были услышаны. Мы убеждены: чем больше голосов будет звучать на Дискурсе, тем
громче в полифонии мнений будет слышна истина.
Редакция Дискурса открыта для всех: у&nbsp;нас нет цензуры, запретных тем и&nbsp;идеологических рамок.
Каждый может <a href="/create">прислать материал</a> в&nbsp;журнал
и&nbsp;<a href="/about/guide">присоединиться к&nbsp;редакции</a>. Предоставляя трибуну
для независимой журналистики и&nbsp;художественных проектов, мы&nbsp;помогаем людям
рассказывать свои истории так, чтобы они были услышаны. Мы&nbsp;убеждены: чем больше
голосов будет звучать на&nbsp;Дискурсе, тем громче в&nbsp;полифонии мнений будет слышна истина.
</p>
</div>
@ -87,56 +86,55 @@ export const ManifestPage = () => {
<div class="col-lg-10 offset-md-1">
<p>
Дискурс создается <a href="/about/guide">открытым сообществом</a> энтузиастов новой
независимой журналистики. Участвовать в открытой редакции и помогать журналу можно
независимой журналистики. Участвовать в&nbsp;открытой редакции и&nbsp;помогать журналу можно
следующими способами:
</p>
<h3 id="contribute">Предлагать материалы</h3>
<p>
<a href="/create">Создавайте</a> свои статьи и художественные работы - лучшие из них будут
опубликованы в журнале. Дискурс - некоммерческое издание, авторы публикуются в журнале на
общественных началах, получая при этом <a href="/create?collab=true">поддержку</a> редакции,
право голоса, множество других возможностей и читателей по всему миру.
<a href="/create">Создавайте</a> свои статьи и&nbsp;художественные работы&nbsp;&mdash; лучшие из них будут
опубликованы в&nbsp;журнале. Дискурс&nbsp;&mdash; некоммерческое издание, авторы публикуются
в&nbsp;журнале на&nbsp;общественных началах, получая при этом <a href="/create?collab=true">поддержку</a> редакции,
право голоса, множество других возможностей и&nbsp;читателей по&nbsp;всему миру.
</p>
<h3 id="donate">Поддерживать проект</h3>
<p>Дискурс существует на пожертвования читателей. Если вам нравится журнал, пожалуйста,</p>
<p>Дискурс существует на&nbsp;пожертвования читателей. Если вам нравится журнал, пожалуйста,</p>
<p>
<a href="/about/help">поддержите</a> нашу работу. Ваши пожертвования пойдут на выпуск новых
материалов, оплату серверов, труда программистов, дизайнеров и редакторов.
<a href="/about/help">поддержите</a> нашу работу. Ваши пожертвования пойдут на&nbsp;выпуск новых
материалов, оплату серверов, труда программистов, дизайнеров и&nbsp;редакторов.
</p>
<h3 id="cooperation">Сотрудничать с журналом</h3>
<h3 id="cooperation">Сотрудничать с&nbsp;журналом</h3>
<p>
Мы всегда открыты для сотрудничества и рады единомышленникам. Если вы хотите помогать
журналу с редактурой, корректурой, иллюстрациями, переводами, версткой, подкастами,
мероприятиями, фандрайзингом или как-то ещё - скорее пишите нам на{' '}
<a href="mailto:welcome@discours.io">welcome@discours.io</a>.
Мы всегда открыты для сотрудничества и&nbsp;рады единомышленникам. Если вы хотите помогать
журналу с&nbsp;редактурой, корректурой, иллюстрациями, переводами, версткой, подкастами,
мероприятиями, фандрайзингом или как-то ещё&nbsp;&mdash; скорее пишите нам
на&nbsp;<a href="mailto:welcome@discours.io">welcome@discours.io</a>.
</p>
<p>
Если вы представляете некоммерческую организацию и хотите сделать с нами совместный проект,
получить информационную поддержку или предложить другую форму сотрудничества -
[пишите](mailto:welcome@discours.io).
Если вы представляете некоммерческую организацию и&nbsp;хотите сделать с&nbsp;нами
совместный проект, получить информационную поддержку или предложить другую форму
сотрудничества&nbsp;&mdash; <a href="mailto:welcome@discours.io">пишите</a>.
</p>
<p>
Если вы разработчик и хотите помогать с развитием сайта Дискурса,
<a href="mailto:services@discours.io">присоединяйтесь к IT-команде самиздата</a>. Открытый
код платформы для независимой журналистики, а также всех наших спецпроектов и
медиаинструментов находится
<a href="https://github.com/Discours">в свободном доступе на GitHub</a>.
Если вы разработчик и&nbsp;хотите помогать с&nbsp;развитием сайта Дискурса,{' '}
<a href="mailto:services@discours.io">присоединяйтесь к&nbsp;IT-команде самиздата</a>. Открытый
код платформы для независимой журналистики, а&nbsp;также всех наших спецпроектов
и&nbsp;медиаинструментов находится <a href="https://github.com/Discours">в&nbsp;свободном доступе на&nbsp;GitHub</a>.
</p>
<h3 id="follow">Как еще можно помочь</h3>
<p>
Советуйте Дискурс друзьям и знакомым. Обсуждайте и распространяйте наши публикации все
материалы открытой редакции можно читать и перепечатывать бесплатно. Подпишитесь на самиздат
<a href="https://vk.com/discoursio">ВКонтакте</a>, в{' '}
<a href="https://facebook.com/discoursio">Фейсбуке</a> и в
<a href="https://t.me/discoursio">Телеграме</a>, а также на{' '}
<Opener name="subscribe">рассылку лучших материалов</Opener> , чтобы не пропустить ничего
интересного.
Советуйте Дискурс друзьям и&nbsp;знакомым. Обсуждайте и&nbsp;распространяйте наши
публикации&nbsp;&mdash; все материалы открытой редакции можно читать и&nbsp;перепечатывать
бесплатно. Подпишитесь на&nbsp;самиздат{' '}
<a href="https://vk.com/discoursio">ВКонтакте</a>,
в&nbsp;<a href="https://facebook.com/discoursio">Фейсбуке</a>
и&nbsp;в&nbsp;<a href="https://t.me/discoursio">Телеграме</a>, а&nbsp;также
на&nbsp;<Opener name="subscribe">рассылку лучших материалов</Opener>,
чтобы не&nbsp;пропустить ничего интересного.
</p>
<p>
<a href="https://forms.gle/9UnHBAz9Q3tjH5dAA">Рассказывайте о впечатлениях</a> от материалов
открытой редакции,
<Opener name="feedback">делитесь идеями</Opener>, интересными темами, о которых хотели бы
узнать больше, и историями, которые нужно рассказать.
<a href="https://forms.gle/9UnHBAz9Q3tjH5dAA">Рассказывайте о&nbsp;впечатлениях</a>
от&nbsp;материалов открытой редакции, <Opener name="feedback">делитесь идеями</Opener>,
интересными темами, о&nbsp;которых хотели бы узнать больше, и&nbsp;историями, которые нужно рассказать.
</p>
</div>
@ -145,11 +143,11 @@ export const ManifestPage = () => {
</h2>
<div class="col-lg-10 offset-md-1">
Если вы хотите предложить материал, сотрудничать, рассказать о проблеме, которую нужно
осветить, сообщить об ошибке или баге, что-то обсудить, уточнить или посоветовать, пожалуйста,{' '}
<Opener name="feedback">напишите нам здесь</Opener>
или на почту <a href="mailto:welcome@discours.io">welcome@discours.io</a>. Мы обязательно
ответим и постараемся реализовать все хорошие задумки.
Если вы хотите предложить материал, сотрудничать, рассказать о&nbsp;проблеме, которую нужно
осветить, сообщить об&nbsp;ошибке или баге, что-то обсудить, уточнить или посоветовать,
пожалуйста, <Opener name="feedback">напишите нам здесь</Opener> или
на&nbsp;почту <a href="mailto:welcome@discours.io">welcome@discours.io</a>. Мы обязательно
ответим и&nbsp;постараемся реализовать все хорошие задумки.
</div>
</div>
</div>

View File

@ -8,6 +8,10 @@ import { t } from '../../utils/intl'
import { locale } from '../../stores/ui'
import { useAuthStore } from '../../stores/auth'
import { follow, unfollow } from '../../stores/zine/common'
import { getLogger } from '../../utils/logger'
import { Icon } from '../Nav/Icon'
const log = getLogger('TopicCard')
interface TopicProps {
topic: Topic

View File

@ -102,6 +102,7 @@ export const AllAuthorsView = (props: Props) => {
compact={false}
hasLink={true}
subscribed={subscribed(author.slug)}
noSocialButtons={true}
/>
)}
</For>

View File

@ -0,0 +1,29 @@
import { gql } from '@urql/core'
export default gql`
query ReactionsByShoutQuery($slug: String!, $limit: Int!, $offset: Int!) {
reactionsByShout(slug: $slug, limit: $limit, offset: $offset) {
id
body
createdAt
createdBy {
_id: slug
name
slug
userpic
}
updatedAt
replyTo {
id
}
kind
range
stat {
_id: viewed
viewed
reacted
rating
}
}
}
`

View File

@ -38,6 +38,7 @@
"Favorite topics": "Избранные темы",
"Feed settings": "Настройки ленты",
"Feedback": "Обратная связь",
"Fill email": "Введите почту",
"Follow": "Подписаться",
"Follow the topic": "Подписаться на тему",
"Forgot password?": "Забыли пароль?",

View File

@ -462,15 +462,19 @@ figcaption {
}
.floor--7 {
@include media-breakpoint-down(md) {
margin-bottom: 1em;
}
.col-md-6 {
margin-bottom: 1.6em;
@include media-breakpoint-down(lg) {
&:nth-child(1),
&:nth-child(2) {
margin-bottom: 1.6em;
}
}
@include media-breakpoint-down(md) {
margin-right: 0;
&:nth-child(3),
&:nth-child(4) {
margin-bottom: 1.6em;
}
}
}
}
@ -592,7 +596,7 @@ astro-island {
@include media-breakpoint-up(md) {
position: sticky;
top: 2rem;
top: 10rem;
}
ul ul {