Spythere/spythere-portfolio
1
0
Fork 0
mirror of https://github.com/Spythere/spythere-portfolio.git synced 2026-05-03 13:38:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
Spythere
2023-09-04 17:39:31 +02:00
parent 6611006c0d
commit d23e1ac050
14 changed files with 133 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styles/About.styled.ts
+59 -37
View File
@@ -4,52 +4,74 @@ export const StyledAbout = styled.section`
img {
max-width: 90px;
}
`;
export const StyledAboutItem = styled.li`
display: flex;
justify-content: flex-start;
ul.about-list {
display: flex;
flex-wrap: wrap;
gap: 1em;
margin-top: 50px;
li {
margin: 0.5em 0;
}
h2 {
margin: 0;
h2 {
display: inline-block;
background-color: ${({ theme }) => theme.colors['600']};
padding: 0.25em;
margin: 0;
}
p {
background-color: ${({ theme }) => theme.colors['400']};
padding: 1em;
margin: 0;
}
}
`;
export const StyledAboutImageWrapper = styled.div`
display: inline-block;
position: relative;
// export const StyledAboutItem = styled.li`
// display: flex;
// background-color: ${({ theme }) => theme.colors['400']};
&::before {
position: absolute;
top: -25px;
left: 50%;
height: calc(100% + 52px);
content: '';
width: 5px;
background-color: ${({ theme }) => theme.colors.primary};
border-radius: 2px;
// gap: 1em;
// margin-top: 50px;
z-index: -1;
transform: translateX(-50%);
}
`;
// h2 {
// margin: 0;
// }
// `;
export const StyledAboutContentWrapper = styled.div``;
// export const StyledAboutImageWrapper = styled.div`
// display: inline-block;
// position: relative;
export const StyledAboutTitle = styled.h2`
display: inline-block;
margin: 1em 0;
padding: 0.1em 2em 0.1em 0.5em;
// &::before {
// position: absolute;
// top: -25px;
// left: 50%;
// height: calc(100% + 52px);
background-color: ${({ theme }) => theme.colors.primary};
`;
// content: '';
// width: 5px;
// background-color: ${({ theme }) => theme.colors['400']};
// border-radius: 2px;
export const StyledAboutDescription = styled.p`
margin: 0;
margin-top: 1em;
text-align: justify;
`;
// z-index: -1;
// transform: translateX(-50%);
// }
// `;
// export const StyledAboutContentWrapper = styled.div``;
// export const StyledAboutTitle = styled.h2`
// display: inline-block;
// margin: 1em 0;
// padding: 0.1em 2em 0.1em 0.5em;
// background-color: ${({ theme }) => theme.colors['600']};
// `;
// export const StyledAboutDescription = styled.p`
// margin: 0;
// margin-top: 1em;
// text-align: justify;
// `;