Closes #33. There were many more font sizes in the Figma, but as a best design practice, I chose the four most common. Staging: https://j285he-standardize-font-sizes-csc-class-prof-snedadah.k8s.csclub.cloud/ Co-authored-by: Jared He <66887902+jaredjhe@users.noreply.github.com> Co-authored-by: shahanneda <shahan.neda@gmail.com> Reviewed-on: #46 Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>
This commit is contained in:
parent
e2d19a281a
commit
3cb5780964
|
@ -69,22 +69,52 @@ body {
|
|||
color: var(--primary-text);
|
||||
font-family: "Inconsolata", monospace;
|
||||
margin: 0;
|
||||
|
||||
/* Font styling for body */
|
||||
font-size: calc(18rem / 16);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h1,
|
||||
/* Page titles (e.g. Demographics) */
|
||||
h1 {
|
||||
font-size: calc(48rem / 16);
|
||||
font-weight: 700;
|
||||
color: var(--primary-accent-light);
|
||||
margin-top: calc(32rem / 16);
|
||||
margin-bottom: calc(16rem / 16);
|
||||
}
|
||||
|
||||
/* Major section headings (e.g. About the Programs) */
|
||||
h2 {
|
||||
font-size: calc(36rem / 16);
|
||||
font-weight: 700;
|
||||
color: var(--primary-heading);
|
||||
margin-top: calc(32rem / 16);
|
||||
margin-bottom: calc(16rem / 16);
|
||||
}
|
||||
|
||||
/* Minor section headings & questions (e.g. What Program Are You In?) */
|
||||
h3 {
|
||||
font-size: calc(32rem / 16);
|
||||
font-weight: 700;
|
||||
color: var(--secondary-heading);
|
||||
font-size: calc(45rem / 16);
|
||||
margin-top: calc(24rem / 16);
|
||||
margin-bottom: calc(16rem / 16);
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
/* Titles within paragraphs (e.g. About the Programs -> Computer Science)*/
|
||||
h4 {
|
||||
font-size: calc(24rem / 16);
|
||||
font-weight: 700;
|
||||
color: var(--secondary-heading);
|
||||
margin-top: calc(24rem / 16);
|
||||
margin-bottom: calc(8rem / 16);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--primary-text);
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
|
@ -96,10 +126,6 @@ a:hover {
|
|||
color: var(--link-hover);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: calc(28rem / 16);
|
||||
}
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
body {
|
||||
--primary-background: var(--dark--primary-background);
|
||||
|
|
|
@ -31,6 +31,16 @@ export default function Home() {
|
|||
<PieChart data={mockPieData} width={800} labelWidth={215} />
|
||||
</div>
|
||||
<ColorPalette />
|
||||
<h2>
|
||||
<code>Text Styles</code>
|
||||
</h2>
|
||||
<h1>h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1</h1>
|
||||
<h2>h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2</h2>
|
||||
<h3>h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3</h3>
|
||||
<h4>h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4</h4>
|
||||
<p>p p p p p p p p p p p p p p p p p p p p p p p p p p p p</p>
|
||||
<a href="#">a a a a a a a a a a a a a a a a a a a a a a a a a a a a</a>
|
||||
|
||||
<h2>
|
||||
<code>{"<BarGraphHorizontal />"}</code>
|
||||
</h2>
|
||||
|
|
Loading…
Reference in New Issue