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

Change banner style

Browse Source
This commit is contained in:
kvakazyambra 2023-08-28 01:05:09 +03:00
parent cf3d30ab55
commit ce69b9318f
2 changed files with 21 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/Discours/Hero.scss → src/components/Discours/Hero.module.scss
View File

@ -1,34 +1,30 @@
.about-discours { .aboutDiscours {
@include font-size(1.7rem); @include font-size(1.6rem);
background: #fef2f2;
background: #000; font-weight: 500;
color: #fff;
font-weight: 400;
margin-bottom: 6.4rem; margin-bottom: 6.4rem;
padding: 3.6rem 0; padding: 8rem 0 6.4rem;
text-align: center; text-align: center;
h4 { h4 {
margin-bottom: 4rem; @include font-size(4rem);
font-weight: bold;
line-height: 1.1;
margin-bottom: 2rem;
} }
em { em {
font-weight: inherit; font-weight: inherit;
} }
::selection {
background: #fff;
color: #000;
}
} }
.about-discours__actions { .aboutDiscoursActions {
margin-top: 4.8rem; margin-top: 4.8rem;
.button { :global(.button) {
border: 3px solid; border: 3px solid #000;
border-radius: 1.2em; border-radius: 0.8rem;
color: inherit; color: #fff;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
@ -39,7 +35,6 @@
&:hover { &:hover {
background: #fff; background: #fff;
border-color: #fff;
color: #000; color: #000;
} }
} }

17
src/components/Discours/Hero.tsx
View File

@ -1,4 +1,4 @@
import './Hero.scss' import styles from './Hero.module.scss'
import { showModal } from '../../stores/ui' import { showModal } from '../../stores/ui'
import { useLocalize } from '../../context/localize' import { useLocalize } from '../../context/localize'
@ -6,10 +6,10 @@ import { useLocalize } from '../../context/localize'
export default () => { export default () => {
const { t } = useLocalize() const { t } = useLocalize()
return ( return (
<div class="about-discours"> <div class={styles.aboutDiscours}>
<div class="wide-container"> <div class="wide-container">
<div class="row"> <div class="row">
<div class="col-lg-20 offset-lg-2 col-xl-16 offset-xl-4"> <div class="col-lg-20 offset-lg-2 col-xl-18 offset-xl-3">
<h4>{t('Horizontal collaborative journalistic platform')}</h4> <h4>{t('Horizontal collaborative journalistic platform')}</h4>
<p> <p>
{t( {t(
@ -24,16 +24,13 @@ export default () => {
. .
</em> </em>
</p> </p>
<div class="about-discours__actions"> <div class={styles.aboutDiscoursActions}>
<a class="button" href="/create">
{t('Create post')}
</a>
<a class="button" onClick={() => showModal('auth')}> <a class="button" onClick={() => showModal('auth')}>
{t('Join the community')} {t('Join the community')}
</a> </a>
<a class="button" href="/create">
{t('Become an author')}
</a>
<a class="button" href="/about/manifest">
{t('About the project')}
</a>
<a class="button" href="/about/help"> <a class="button" href="/about/help">
{t('Support us')} {t('Support us')}
</a> </a>