Padding and Text alignment

This commit is contained in:
Neshura 2023-03-15 21:27:40 +01:00
parent 31bd014abf
commit 94223fd80c
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C

View file

@ -18,9 +18,10 @@ const Card = styled.div`
width: 30rem;
min-height: 10rem;
max-height: 15rem;
margin-bottom: 2rem;
// themeing
border-top: 0.125rem solid;
border-top: 0.25rem solid;
border-radius: 10px;
color: ${({ theme }) => theme.colors.primary};
@ -202,11 +203,11 @@ const CardDescriptionCommon = css`
// content visible when expanded
const CardDescriptionWrap = styled.div`
${CardDescriptionCommon}
padding: 0 0.5rem;
padding: 0 1rem;
margin-bottom: 2rem;
overflow-y: scroll;
scrollbar-width: thin;
width: 100%;
p {
margin-top: 0;
@ -218,6 +219,7 @@ const CardDescriptionExtended = styled.p`
${CardDescriptionCommon}
margin: 0;
margin-bottom: 0.9rem;
width: 100%;
`
const CardDescription = ({ content }: { content: Service }) => {
@ -240,16 +242,6 @@ const CardDescription = ({ content }: { content: Service }) => {
return ret;
}
const CardDescriptionCollapsed = styled.p`
max-height: 0rem;
visibility: hidden;
${CardDescriptionCommon}
text-align: center;
transition-property: max-height, visibility;
transition-delay: 2s;
`
// exported Card Elements
//#######################
@ -270,7 +262,7 @@ export const ServiceCardMobile = ({ content }: { content: Service }) => {
else {
card = (
<Card>
<CardTitle content={content}/>
<CardTitle content={content} href={""}/>
<CardDescription content={content}/>
</Card>
)