mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-27 09:13:14 +10:00
Reorganise font definitions
This commit is contained in:
Kimmo Puputti
parent
f095761e81
commit
286892c712
1 changed files with 166 additions and 170 deletions
|
|
@ -67,16 +67,172 @@
|
|||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
--marketplaceHeroTitleFontStyles: {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 700; /* Bold */
|
||||
font-size: 48px;
|
||||
line-height: 54px;
|
||||
letter-spacing: -1px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 6px */
|
||||
margin-top: 25px;
|
||||
margin-bottom: 29px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
font-size: 90px;
|
||||
line-height: 96px;
|
||||
letter-spacing: -2px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 8px */
|
||||
margin-top: 25px;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
}
|
||||
--marketplaceH1FontStyles: {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 700; /* SemiBold */
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
letter-spacing: -0.5px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 6px */
|
||||
margin-top: 18px;
|
||||
margin-bottom: 18px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
letter-spacing: -1px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 8px */
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
--marketplaceH2FontStyles: {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 600; /* SemiBold */
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
letter-spacing: -0.3px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 6px */
|
||||
margin-top: 21px;
|
||||
margin-bottom: 17px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
line-height: 32px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 8px */
|
||||
margin-top: 21px;
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
}
|
||||
--marketplaceH3FontStyles: {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 600; /* SemiBold */
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.2px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 6px */
|
||||
margin-top: 16px;
|
||||
margin-bottom: 14px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
/* margin-top + n * line-height + margin-bottom => x * 8px */
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
--marketplaceH4FontStyles: {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 500; /* Medium */
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 6px */
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
/* margin-top + n * line-height + margin-bottom => x * 8px */
|
||||
margin-top: 17px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
--marketplaceH5FontStyles: {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 400; /* Regular */
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 6px */
|
||||
margin-top: 10px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
line-height: 16px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 8px */
|
||||
margin-top: 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
--marketplaceH6FontStyles: {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 700; /* Bold */
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 6px */
|
||||
margin-top: 10px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
line-height: 16px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 8px */
|
||||
margin-top: 10px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
--marketplaceTinyFontStyles: {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 400; /* Regular */
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
letter-spacing: -0.1px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 6px */
|
||||
margin-top: 9.5px;
|
||||
margin-bottom: 8.5px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
line-height: 16px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 8px */
|
||||
margin-top: 10.5px;
|
||||
margin-bottom: 13.5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* This font is specific to Avatar component only */
|
||||
--marketplaceSmallAvatarFontStyles: {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 700; /* Bold */
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
--marketplaceLinkStyles: {
|
||||
|
||||
/* Position and dimensions */
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
/* Borders */
|
||||
border: none;
|
||||
|
||||
/* Colors */
|
||||
color: var(--marketplaceColor);
|
||||
|
||||
/* Text size should be inherited */
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
|
|
@ -179,146 +335,15 @@ a {
|
|||
@apply --marketplaceLinkStyles;
|
||||
}
|
||||
|
||||
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;
|
||||
letter-spacing: -1px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 6px */
|
||||
margin-top: 25px;
|
||||
margin-bottom: 29px;
|
||||
.heroTitle { @apply --marketplaceHeroTitleFontStyles; }
|
||||
|
||||
@media (--desktopViewport) {
|
||||
font-size: 90px;
|
||||
line-height: 96px;
|
||||
letter-spacing: -2px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 8px */
|
||||
margin-top: 25px;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Page title */
|
||||
h1,
|
||||
.h1Font {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 700; /* SemiBold */
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
letter-spacing: -0.5px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 6px */
|
||||
margin-top: 18px;
|
||||
margin-bottom: 18px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
letter-spacing: -1px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 8px */
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2Font {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 600; /* SemiBold */
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
letter-spacing: -0.3px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 6px */
|
||||
margin-top: 21px;
|
||||
margin-bottom: 17px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
line-height: 32px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 8px */
|
||||
margin-top: 21px;
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3Font {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 600; /* SemiBold */
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.2px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 6px */
|
||||
margin-top: 16px;
|
||||
margin-bottom: 14px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
/* margin-top + n * line-height + margin-bottom => x * 8px */
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4Font {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 500; /* Medium */
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 6px */
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
/* margin-top + n * line-height + margin-bottom => x * 8px */
|
||||
margin-top: 17px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
h5,
|
||||
.h5Font {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 400; /* Regular */
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 6px */
|
||||
margin-top: 10px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
line-height: 16px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 8px */
|
||||
margin-top: 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
h6,
|
||||
.h6Font {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 700; /* Bold */
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 6px */
|
||||
margin-top: 10px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
line-height: 16px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 8px */
|
||||
margin-top: 10px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
h1, .h1Font { @apply --marketplaceH1FontStyles; }
|
||||
h2, .h2Font { @apply --marketplaceH2FontStyles; }
|
||||
h3, .h3Font { @apply --marketplaceH3FontStyles; }
|
||||
h4, .h4Font { @apply --marketplaceH4FontStyles; }
|
||||
h5, .h5Font { @apply --marketplaceH5FontStyles; }
|
||||
h6, .h6Font { @apply --marketplaceH6FontStyles; }
|
||||
|
||||
html,
|
||||
input,
|
||||
|
|
@ -330,37 +355,16 @@ li,
|
|||
}
|
||||
|
||||
.tinyFont {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 400; /* Regular */
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
letter-spacing: -0.1px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 6px */
|
||||
margin-top: 9.5px;
|
||||
margin-bottom: 8.5px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
line-height: 16px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 8px */
|
||||
margin-top: 10.5px;
|
||||
margin-bottom: 13.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonFont {
|
||||
@apply --marketplaceTinyFontStyles;
|
||||
}
|
||||
|
||||
/* This font is specific to Avatar component only */
|
||||
.smallAvatarFont {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 700; /* Bold */
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.1px;
|
||||
@apply --marketplaceSmallAvatarFontStyles;
|
||||
}
|
||||
|
||||
.searchResultsFont {
|
||||
composes: bodyFont;
|
||||
@apply --marketplaceBodyFontStyles;
|
||||
}
|
||||
|
||||
/* Base font color */
|
||||
|
|
@ -377,14 +381,6 @@ html {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue