From 7d4167b33d65fec03d2e3100af3a50b5e0144f37 Mon Sep 17 00:00:00 2001
From: Dejvino <git.dejvino.cz@dejvino.cz>
Date: Thu, 1 Jun 2023 18:00:18 +0200
Subject: [PATCH] Improved styling of Accordion and About

---
 src/app/components/AboutBrief.tsx |  2 +-
 src/app/components/Skills.tsx     |  2 +-
 src/app/components/TagCloud.tsx   |  4 ++--
 src/app/globals.css               | 18 ++++++++++++++++++
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/app/components/AboutBrief.tsx b/src/app/components/AboutBrief.tsx
index 4330534..1b4e71a 100644
--- a/src/app/components/AboutBrief.tsx
+++ b/src/app/components/AboutBrief.tsx
@@ -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>
     )
diff --git a/src/app/components/Skills.tsx b/src/app/components/Skills.tsx
index 80769cf..f71540a 100644
--- a/src/app/components/Skills.tsx
+++ b/src/app/components/Skills.tsx
@@ -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 && (
diff --git a/src/app/components/TagCloud.tsx b/src/app/components/TagCloud.tsx
index 10c2d8a..43543a2 100644
--- a/src/app/components/TagCloud.tsx
+++ b/src/app/components/TagCloud.tsx
@@ -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>
diff --git a/src/app/globals.css b/src/app/globals.css
index dd891a9..1c4b15a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -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;
 }