theoludwig/.profile
1
0
Fork 0
mirror of https://github.com/theoludwig/theoludwig.git synced 2025-12-12 20:46:52 +01:00
Code Issues Releases Activity

feat: add light mode + rewrite in Tailwind CSS (#15)

Browse Source
This commit is contained in:
Divlo
2021-05-08 19:52:04 +02:00
committed by GitHub
parent 26f24329c7
commit c62e66a86a
83 changed files with 5803 additions and 7623 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/Skills/SkillsSection.tsx
View File

@@ -5,40 +5,23 @@ export interface SkillsSectionProps {
children: React.ReactNode
}
export const SkillsSection: React.FC<SkillsSectionProps> = props => {
export const SkillsSection: React.FC<SkillsSectionProps> = (props) => {
const { title, children } = props
return (
<>
<ShadowContainer>
<div className='container-fluid'>
<div className='row row-padding'>
<div className='col-24'>
<div className='skills-header'>
<h3 className='important'>{title}</h3>
</div>
<div className='skills-body'>{children}</div>
<ShadowContainer>
<div className='w-full px-4 mx-auto'>
<div className='flex flex-wrap px-4 py-6'>
<div className='flex-1'>
<div className='mb-8 border-b border-gray-600 dark:border-opacity-10 dark:border-white'>
<h3 className='text-yellow font-semibold text-xl my-3 dark:text-yellow-dark'>
{title}
</h3>
</div>
<div className='flex justify-around flex-wrap'>{children}</div>
</div>
</div>
</ShadowContainer>
<style jsx>{`
.skills-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 15px;
}
.skills-header > h3 {
margin-bottom: 15px;
}
.skills-body {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
padding-top: 1.5rem;
}
`}
</style>
</>
</div>
</ShadowContainer>
)
}