Improved styling of Accordion and About

This commit is contained in:
Dejvino 2023-06-01 18:00:18 +02:00
parent 8453a7ccfe
commit 7d4167b33d
4 changed files with 22 additions and 4 deletions

View File

@ -7,7 +7,7 @@ export default function AboutBrief() {
const person = usePersonContext()
return (
<Container className='about-brief' fluid>
<h1>{person.name}</h1>
<h1 className='person-name'>{person.name}</h1>
<div className='brief'>{md(person.brief)}</div>
</Container>
)

View File

@ -6,7 +6,7 @@ import TagCloud from './TagCloud';
export default function Skills() {
const person = useContext(PersonContext)
return (
<Container className='skills'>
<Container className='skills' fluid>
<h2>Skills</h2>
<TagCloud title='Primary' icon='bookmark-star' style='primary' tags={person.skills.primary} />
{person.skills.secondary && (

View File

@ -12,9 +12,9 @@ export type Props = {
export default function TagCloud(props: Props) {
const containerClasses = ['tag-cloud', 'cloud-' + (props.style || 'standard')]
return (
<Container className={containerClasses.join(' ')}>
<Container className={containerClasses.join(' ')} fluid>
<h4>{props.icon && (<i className={'bi-' + props.icon}> </i>)}{props.title}</h4>
<Container className='tag-badges'>
<Container className='tag-badges' fluid>
{props.tags.map((tag: string) => (<Tag key={tag} text={tag} />) )}
</Container>
</Container>

View File

@ -8,6 +8,15 @@ body {
padding-top: 1rem;
padding-bottom: 0.2rem;
}
.person-name {
margin-top: 1rem;
font-weight: bold;
}
.brief {
font-size: 120%;
}
.footer {
margin-top: 2rem;
filter: opacity(75%)
@ -55,6 +64,7 @@ body {
}
.tag-badges > span {
margin: 0.4em;
color: #222;
}
.contacts .contact {
margin: 0.75em;
@ -65,6 +75,14 @@ body {
.accordion {
margin: 1rem;
}
.main-container .accordion-button:not(.collapsed) {
color: #222;
background-color: RGBA(217, 216, 216, 0.3);
}
.main-container .accordion-button.collapsed {
color: #0e489d;
background-color: RGBA(153, 165, 213, 0.3);
}
.multiline {
white-space: pre-line;
}