mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-28 20:53:24 +10:00
added desktop font classes
This commit is contained in:
Janne Koivistoinen
Vesa Luusua
parent
3325af7f2c
commit
764ed1464d
3 changed files with 178 additions and 111 deletions
|
|
@ -63,11 +63,11 @@
|
|||
.typographyContent {}
|
||||
|
||||
.baselines {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 5h10M0 11h10M0 17h10" stroke="#f1f1f1"/><path d="M0 23h10" stroke="#ddd" stroke-width="1"/></svg>');
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 5h10M0 11h10M0 17h10" stroke="#ccc"/><path d="M0 23h10" stroke="#ddd" stroke-width="1"/></svg>');
|
||||
background-repeat: repeat;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 7h10M0 15h10M0" stroke="#f1f1f1"/><path d="M0 23h10" stroke="#ddd" stroke-width="1"/></svg>');
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 7h10M0 15h10M0" stroke="#ccc"/><path d="M0 23h10" stroke="#ddd" stroke-width="1"/></svg>');
|
||||
background-repeat: repeat;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,51 +27,101 @@ Font.propTypes = {
|
|||
};
|
||||
|
||||
const Fonts = () => {
|
||||
const h1FontStyling = `Styles affecting size:
|
||||
const heroTitleFontStyling = `Mobile styles:
|
||||
font-size: 48px;
|
||||
line-height: 54px;
|
||||
padding: 5px 0 1px 0;`;
|
||||
padding: 5px 0 1px;
|
||||
|
||||
const h2FontStyling = `Styles affecting size:
|
||||
Desktop styles:
|
||||
font-size: 90px;
|
||||
line-height: 96px;
|
||||
padding: 0;`;
|
||||
|
||||
const h1FontStyling = `Mobile styles:
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
padding: 3.5px 0 2.5px 0;`;
|
||||
padding: 3.5px 0 2.5px;
|
||||
|
||||
const h3FontStyling = `Styles affecting size:
|
||||
Desktop styles:
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
padding: 6px 0 2px;`;
|
||||
|
||||
const h2FontStyling = `Mobile styles:
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
padding: 3px 0 3px 0;`;
|
||||
padding: 3px 0 3px;
|
||||
|
||||
const h4FontStyling = `Styles affecting size:
|
||||
Desktop styles:
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
padding: 4px 0 4px;`;
|
||||
|
||||
|
||||
const h3FontStyling = `Mobile styles:
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
padding: 2px 0 4px 0;`;
|
||||
padding: 2px 0 4px;
|
||||
|
||||
const h5FontStyling = `Styles affecting size:
|
||||
Desktop styles:
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
padding: 2px 0 6px;`;
|
||||
|
||||
|
||||
const h4FontStyling = `Mobile styles:
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
padding: 3.5px 0 2.5px 0;`;
|
||||
padding: 3.5px 0 2.5px;
|
||||
|
||||
const h6FontStyling = `Styles affecting size:
|
||||
Desktop styles:
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
padding: 4px 0 4px;`;
|
||||
|
||||
|
||||
const h5FontStyling = `Mobile styles:
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 1.5px 0 4.5px 0;`;
|
||||
padding: 1.5px 0 4.5px;
|
||||
|
||||
const bodyFontStyling = `Styles affecting size:
|
||||
Desktop styles:
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 7px 0 1px;`;
|
||||
|
||||
|
||||
const h6FontStyling = `Mobile styles:
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding: 2px 0 4px;
|
||||
|
||||
Desktop styles:
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding: 6px 0 2px;`;
|
||||
|
||||
const bodyFontStyling = `Mobile styles:
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
padding: 2.5px 0 3.5px 0;`;
|
||||
padding: 2.5px 0 3.5px;
|
||||
|
||||
const tinyFontStyling = `Styles affecting size:
|
||||
Desktop styles:
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
padding: 5px 0 3px;`;
|
||||
|
||||
|
||||
const tinyFontStyling = `Mobile styles:
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
padding: 2px 0 4px 0;`;
|
||||
padding: 2px 0 4px;
|
||||
|
||||
const tinyBoldFontStyling = `Styles affecting size:
|
||||
font-weight: 700;
|
||||
Desktop styles:
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
padding: 2px 0 4px 0;`;
|
||||
padding: 7px 0 1px;`;
|
||||
|
||||
|
||||
const fontsContainerClasses = classNames(css.fontsContainer, css.baselines);
|
||||
|
||||
|
|
@ -86,67 +136,64 @@ const Fonts = () => {
|
|||
<p className={css.spacing2x}>
|
||||
N.B. box-sizing is border-box, so borders affect to the total height of elements.
|
||||
</p>
|
||||
<p className={css.spacing2x}>
|
||||
TODO: breakpoints for desktop are missing (desktop fonts needs to be extracted.
|
||||
</p>
|
||||
<div className={fontsContainerClasses}>
|
||||
<Font
|
||||
component={() => <h1>H1 (.h1Font): Lorem ipsum dolor sit amet</h1>}
|
||||
description="Biggest font style. Used in main heading on a page. "
|
||||
component={() => (
|
||||
<p className={mpStyle.heroTitle}>
|
||||
Hello beautiful world.
|
||||
</p>
|
||||
)}
|
||||
description=".heroTitle: Biggest font style. Used in the hero in landingPage. Works as a site title."
|
||||
styling={heroTitleFontStyling}
|
||||
/>
|
||||
<Font
|
||||
component={() => <h1>Listing + Page title</h1>}
|
||||
description="H1 / .h1Font: Works as a page title. Inline component using .h2Font can be aligned with .h1Font to the same baseline by dropping it 18px (e.g. with margin-top)."
|
||||
styling={h1FontStyling}
|
||||
/>
|
||||
<Font
|
||||
component={() => <h2>H2 (.h2Font): Lorem ipsum dolor sit amet</h2>}
|
||||
description="Works as a subtitle. Inline component using .h2Font can be aligned with .h1Font to the same baseline by dropping it 18px (e.g. with margin-top)."
|
||||
component={() => <h2>This many listings found in here</h2>}
|
||||
description="H2 / .h2Font: Works as a page subtitle and in sidebar menu link."
|
||||
styling={h2FontStyling}
|
||||
/>
|
||||
<Font
|
||||
component={() => <h3>H3 (.h3Font): Lorem ipsum dolor sit amet</h3>}
|
||||
description="Works as a subtitle and in sidebar menu."
|
||||
component={() => <h3>About this listing</h3>}
|
||||
description="H3 / .h3Font: Works as a paragraph subtitle."
|
||||
styling={h3FontStyling}
|
||||
/>
|
||||
<Font
|
||||
component={() => <h4>H4 (.h4Font): Lorem ipsum dolor sit amet</h4>}
|
||||
description="Works as a subtitle."
|
||||
description="Can be used as a subtitle and also as a label font for form inputs."
|
||||
styling={h4FontStyling}
|
||||
/>
|
||||
<Font
|
||||
component={() => <h5>H5 (.h5Font): Lorem ipsum dolor sit amet</h5>}
|
||||
description="Can be used as a subtitle and also as a label font for form inputs."
|
||||
component={() => <h5>You will only be charged if your request is accepted by the provider.</h5>}
|
||||
description="H5 / .h5Font: Can be used as a fine print text."
|
||||
styling={h5FontStyling}
|
||||
/>
|
||||
<Font
|
||||
component={() => (
|
||||
<h6>H6 (.h6Font): Lorem ipsum dolor sit amet consectetur adebisci velit</h6>
|
||||
<h6>Close</h6>
|
||||
)}
|
||||
description="Works as a subtitle."
|
||||
description="H6 / .h6Font: Works as a close text."
|
||||
styling={h6FontStyling}
|
||||
/>
|
||||
<Font
|
||||
component={() => (
|
||||
<p>Default font (.bodyFont, p, button, etc.): Lorem ipsum dolor sit amet</p>
|
||||
<p>Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
|
||||
)}
|
||||
description="Paragraphs and other body texts."
|
||||
description=".bodyFont, p, button, etc: Paragraphs and other body texts."
|
||||
styling={bodyFontStyling}
|
||||
/>
|
||||
<Font
|
||||
component={() => (
|
||||
<p className={mpStyle.tinyFont}>
|
||||
Tiny mobile text (.tinyFont): Lorem ipsum dolor sit amet
|
||||
Hosted by user
|
||||
</p>
|
||||
)}
|
||||
description="Very small print."
|
||||
description=".tinyFont: Very small print."
|
||||
styling={tinyFontStyling}
|
||||
/>
|
||||
<Font
|
||||
component={() => (
|
||||
<p className={mpStyle.tinyBoldFont}>
|
||||
Tiny bold mobile text (.tinyBoldFont): CLOSE
|
||||
</p>
|
||||
)}
|
||||
description="Very small bold print used next to close icon."
|
||||
styling={tinyBoldFontStyling}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -45,26 +45,47 @@
|
|||
|
||||
/* ================ Fonts ================ */
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased; /* http://szafranek.net/blog/2009/02/22/font-smoothing-explained/ */
|
||||
-moz-osx-font-smoothing: grayscale; /* http://szafranek.net/blog/2009/02/22/font-smoothing-explained/ */
|
||||
text-rendering: optimizeSpeed;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Site title (landing page) */
|
||||
.heroTitle {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 700; /* Bold */
|
||||
font-size: 48px;
|
||||
line-height: 54px;
|
||||
padding: 5px 0 1px; /* 5px + 1px = 6px */;
|
||||
letter-spacing: -1px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
font-size: 90px;
|
||||
line-height: 96px;
|
||||
padding: 0;
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Page title */
|
||||
h1,
|
||||
.h1Font {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 48px;
|
||||
line-height: 54px;
|
||||
padding: 5px 0 1px 0; /* 5px + 1px = 6px */;
|
||||
letter-spacing: -1px;
|
||||
font-weight: 600; /* SemiBold */
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
padding: 3.5px 0 2.5px; /* 3.5px + 2.5px = 6px */
|
||||
letter-spacing: -0.5px;
|
||||
|
||||
/* TODO: this seems to be biggest font in Page titles (except in Hero) - is it h1 then? */
|
||||
@media (--desktopViewport) {
|
||||
font-family: "sofiapro";
|
||||
font-weight: 600;
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
padding: 7px 0 1px 0; /* 7 + 1 = 8px */
|
||||
padding: 6px 0 2px; /* 6px + 2px = 8px */
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
}
|
||||
|
|
@ -72,67 +93,73 @@ h1,
|
|||
h2,
|
||||
.h2Font {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
padding: 3.5px 0 2.5px 0; /* 3.5px + 2.5px = 6px */
|
||||
letter-spacing: -0.5px;
|
||||
font-weight: 600; /* SemiBold */
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
padding: 3px 0 3px; /* 3px + 3px = 6px */
|
||||
letter-spacing: -0.3px;
|
||||
|
||||
/* TODO Are these correct settings? */
|
||||
@media (--desktopViewport) {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
padding: 4px 0 4px 0; /* 4px + 4px = 8px */
|
||||
letter-spacing: -0.3px;
|
||||
padding: 4px 0 4px; /* 4px + 4px = 8px */
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3Font {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
padding: 3px 0 3px 0; /* 3px + 3px = 6px */
|
||||
letter-spacing: -0.4px;
|
||||
font-weight: 600; /* SemiBold */
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
padding: 2px 0 4px; /* 2px + 4px = 6px */
|
||||
letter-spacing: -0.2px;
|
||||
|
||||
/* TODO Desktop styles needs to be extracted */
|
||||
@media (--desktopViewport) {
|
||||
padding: 2px 0 6px; /* 2px + 6px = 8px */
|
||||
}
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4Font {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
font-weight: 500; /* Medium */
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
padding: 2px 0 4px 0; /* 2px + 4px = 6px */
|
||||
letter-spacing: -0.2px;
|
||||
padding: 3.5px 0 2.5px; /* 3.5px + 2.5px = 6px */
|
||||
letter-spacing: 0;
|
||||
|
||||
/* TODO Desktop styles needs to be extracted */
|
||||
@media (--desktopViewport) {
|
||||
padding: 4px 0 4px; /* 4px + 4px = 8px */
|
||||
}
|
||||
}
|
||||
|
||||
h5,
|
||||
.h5Font {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
padding: 3.5px 0 2.5px 0; /* 3.5px + 2.5px = 6px */
|
||||
font-weight: 400; /* Regular */
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 1.5px 0 4.5px; /* 1.5px + 4.5px = 6px */
|
||||
letter-spacing: 0;
|
||||
|
||||
/* TODO Desktop styles needs to be extracted */
|
||||
@media (--desktopViewport) {
|
||||
padding: 7px 0 1px; /* 7px + 1px = 8px */
|
||||
}
|
||||
}
|
||||
|
||||
h6,
|
||||
.h6Font {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-weight: 700; /* Bold */
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding: 1.5px 0 4.5px 0; /* 1.5px + 4.5px = 6px */
|
||||
letter-spacing: 0;
|
||||
padding: 2px 0 4px; /* 2px + 4px = 6px */
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
|
||||
/* TODO Desktop styles needs to be extracted */
|
||||
@media (--desktopViewport) {
|
||||
padding: 6px 0 2px; /* 6px + 2px = 8px */
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
@ -143,59 +170,52 @@ pre,
|
|||
li,
|
||||
.bodyFont {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 500;
|
||||
font-weight: 500; /* Medium */
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
padding: 2.5px 0 3.5px 0; /* 2.5px + 3.5px = 6px */
|
||||
padding: 2.5px 0 3.5px; /* 2.5px + 3.5px = 6px */
|
||||
letter-spacing: -0.1px;
|
||||
|
||||
/* TODO Desktop styles needs to be extracted */
|
||||
@media (--desktopViewport) {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
padding: 2px 0 6px 0; /* 2px + 6px = 8px */
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
padding: 5px 0 3px; /* 5px + 3px = 8px */
|
||||
}
|
||||
}
|
||||
|
||||
.tinyFont {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
font-weight: 400; /* Regular */
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
padding: 2px 0 4px 0; /* 2px + 4px = 6px */
|
||||
padding: 2px 0 4px; /* 2px + 4px = 6px */
|
||||
letter-spacing: -0.1px;
|
||||
|
||||
/* TODO Desktop styles needs to be extracted */
|
||||
}
|
||||
|
||||
.tinyBoldFont {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
padding: 2px 0 4px 0; /* 2px + 4px = 6px */
|
||||
letter-spacing: 1.5px;
|
||||
@media (--desktopViewport) {
|
||||
padding: 7px 0 1px; /* 7px + 1px = 8px */
|
||||
}
|
||||
}
|
||||
|
||||
.buttonFont {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 600;
|
||||
font-weight: 600; /* SemiBold */
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
padding: 2.5px 0 3.5px 0; /* 2.5px + 3.5px = 6px */
|
||||
padding: 2.5px 0 3.5px; /* 2.5px + 3.5px = 6px */
|
||||
letter-spacing: -0.3px;
|
||||
|
||||
/* TODO Desktop styles needs to be extracted */
|
||||
@media (--desktopViewport) {
|
||||
/* TODO: Make sure button text aligns with the baseline */
|
||||
}
|
||||
}
|
||||
|
||||
/* This font is specific to Avatar component only */
|
||||
.smallAvatarFont {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
font-weight: 400; /* Regular */
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 7.5px 0 4.5px 0;
|
||||
padding: 7.5px 0 4.5px;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue