Improved styling of Accordion and About
This commit is contained in:
parent
8453a7ccfe
commit
7d4167b33d
@ -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>
|
||||
)
|
||||
|
@ -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 && (
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user