Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-13 16:22:59 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix max width of description

Browse Source
This commit is contained in:
Amruth Pillai
2022-11-18 09:42:59 +01:00
parent c4b4e6013f
commit f9ef4d0a64
4 changed files with 28 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/build/Center/Center.module.scss
View File

@ -5,7 +5,7 @@
}
.wrapper {
@apply h-full w-full #{!important};
@apply h-full w-full overflow-visible #{!important};
}
.artboard {

2
client/styles/globals.scss
View File

@ -30,7 +30,7 @@
}
.markdown {
@apply prose prose-sm leading-normal prose-ul:p-0 prose-ul:my-0 prose-p:my-0;
@apply prose prose-sm leading-normal max-w-none prose-ul:p-0 prose-ul:my-0 prose-p:my-0;
ul li {
@apply ml-4 list-outside;

40
client/utils/styles.ts
View File

@ -4,10 +4,10 @@ import { RgbColor } from 'react-colorful';
import { hexColorPattern } from '@/config/colors';
export const generateTypographyStyles = ({ family, size }: Typography): string => `
font-size: ${size.body}px;
font-family: ${family.body};
font-size: ${size.body}px !important;
font-family: ${family.body} !important;
svg { font-size: ${size.body}px; }
svg { font-size: ${size.body}px !important; }
h1,
h2,
@ -15,25 +15,35 @@ export const generateTypographyStyles = ({ family, size }: Typography): string =
h4,
h5,
h6 {
font-weight: bold;
font-family: ${family.heading};
font-weight: bold !important;
font-family: ${family.heading} !important;
}
h1 { font-size: ${size.heading}px; line-height: ${size.heading}px; }
h2 { font-size: ${size.heading / 1.5}px; line-height: ${size.heading / 1.5}px; }
h3 { font-size: ${size.heading / 2}px; line-height: ${size.heading / 2}px; }
h4 { font-size: ${size.heading / 2.5}px; line-height: ${size.heading / 2.5}px; }
h5 { font-size: ${size.heading / 3}px; line-height: ${size.heading / 3}px; }
h6 { font-size: ${size.heading / 3.5}px; line-height: ${size.heading / 3.5}px; }
h1 { font-size: ${size.heading}px !important; line-height: ${size.heading}px !important; }
h2 { font-size: ${size.heading / 1.5}px !important; line-height: ${size.heading / 1.5}px !important; }
h3 { font-size: ${size.heading / 2}px !important; line-height: ${size.heading / 2}px !important; }
h4 { font-size: ${size.heading / 2.5}px !important; line-height: ${size.heading / 2.5}px !important; }
h5 { font-size: ${size.heading / 3}px !important; line-height: ${size.heading / 3}px !important; }
h6 { font-size: ${size.heading / 3.5}px !important; line-height: ${size.heading / 3.5}px !important; }
.markdown p,
.markdown li {
font-size: ${size.body}px !important;
}
`;
export const generateThemeStyles = ({ text, background, primary }: ThemeConfig): string => `
color: ${text};
background-color: ${background};
--primary-color: ${primary};
color: ${text} !important;
background-color: ${background} !important;
--primary-color: ${primary} !important;
svg {
color: var(--primary-color);
color: var(--primary-color) !important;
}
.markdown p,
.markdown li {
color: ${text} !important;
}
`;