theoludwig/.profile
1
1
Fork 0
mirror of https://github.com/theoludwig/theoludwig.git synced 2025-05-29 22:37:44 +02:00
Code Issues Releases Activity

chore: maintenance

Browse Source
This commit is contained in:
Divlo
2021-12-04 15:52:51 +01:00
parent e5f4615f7f
commit 729e540d04
69 changed files with 10182 additions and 18460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/design/RevealFade.tsx
View File

@ -10,7 +10,8 @@ export const RevealFade: React.FC = (props) => {
(entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('reveal-visible')
entry.target.className =
'opacity-100 visible translate-y-0 transition-all duration-700 ease-in-out'
observer.unobserve(entry.target)
}
})
@ -25,26 +26,8 @@ export const RevealFade: React.FC = (props) => {
}, [])
return (
<>
<div ref={htmlElement} className='reveal'>
{children}
</div>
<style jsx>
{`
.reveal {
opacity: 0;
visibility: hidden;
transform: translateY(-30px);
}
.reveal-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: all 500ms ease-out 100ms;
}
`}
</style>
</>
<div ref={htmlElement} className='invisible -translate-y-7 opacity-0'>
{children}
</div>
)
}

2
components/design/Section/SectionHeading.tsx
View File

@ -4,7 +4,7 @@ export const SectionHeading: React.FC<SectionHeadingProps> = (props) => {
const { children, ...rest } = props
return (
<h2 {...rest} className='text-4xl font-semibold text-center mt-1 mb-3'>
<h2 {...rest} className='mt-1 mb-3 text-center text-4xl font-semibold'>
{children}
</h2>
)

10
components/design/Section/index.tsx
View File

@ -20,11 +20,11 @@ export const Section: React.FC<SectionProps> = (props) => {
if (isMain) {
return (
<div className='px-3 w-full'>
<div className='w-full px-3'>
<ShadowContainer style={{ marginTop: 50 }}>
<section {...rest}>
{heading != null && <SectionHeading>{heading}</SectionHeading>}
<div className='px-3 w-full'>{children}</div>
<div className='w-full px-3'>{children}</div>
</section>
</ShadowContainer>
</div>
@ -35,7 +35,7 @@ export const Section: React.FC<SectionProps> = (props) => {
return (
<section {...rest}>
{heading != null && <SectionHeading>{heading}</SectionHeading>}
<div className='px-3 w-full'>{children}</div>
<div className='w-full px-3'>{children}</div>
</section>
)
}
@ -52,9 +52,9 @@ export const Section: React.FC<SectionProps> = (props) => {
{description}
</p>
)}
<div className='px-3 w-full'>
<div className='w-full px-3'>
<ShadowContainer>
<div className='px-16 py-4 leading-8 w-full'>{children}</div>
<div className='w-full px-16 py-4 leading-8'>{children}</div>
</ShadowContainer>
</div>
</section>

3
components/design/ShadowContainer.tsx
View File

@ -9,7 +9,7 @@ export const ShadowContainer: React.FC<ShadowContainerProps> = (props) => {
<>
<div
className={classNames(
'shadow-container h-full max-w-full break-words',
'shadow-container mb-12 h-full max-w-full break-words',
className
)}
{...rest}
@ -23,7 +23,6 @@ export const ShadowContainer: React.FC<ShadowContainerProps> = (props) => {
box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
border: 1px solid black;
border-radius: 1rem;
margin-bottom: 50px;
}
`}
</style>