maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-29 05:00:43 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #266 from sharetribe/separate-font-styles

Browse source 
Separate font styles to different file
This commit is contained in:
Vesa Luusua 2017-07-04 10:19:07 +03:00 • committed by GitHub
commit a071c2c963
2 changed files with 209 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

207
src/marketplace.css
View file

@ -1,8 +1,17 @@
@import "sanitize.css";
@import "./marketplaceFonts.css";
/* ================ Custom properties aka variables ================ */
:root {
/**
* Font variables are separated to different file so that the amount of font styling rules
* doesn't overflow this one.
* see ./marketplaceFonts.css
* Usage example: .root { @apply --marketplaceH1FontStyles; }
*/
/* Colors */
--marketplaceColor: #C0392B;
--marketplaceColorLight: #FF4C38;
@ -51,204 +60,6 @@
--topbarHeight: 60px;
--topbarHeightDesktop: 72px;
/* Fonts */
--fontWeightRegular: 400;
--fontWeightMedium: 500;
--fontWeightSemiBold: 600;
--fontWeightBold: 700;
--marketplaceDefaultFontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightMedium);
font-size: 18px;
line-height: 24px;
letter-spacing: -0.1px;
/* No margins for default font */
@media (--desktopViewport) {
font-size: 20px;
line-height: 24px;
}
}
--marketplaceBodyFontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightMedium);
font-size: 18px;
line-height: 24px;
letter-spacing: -0.1px;
/* margin-top + n * line-height + margin-bottom => x * 6px */
margin-top: 12px;
margin-bottom: 12px;
@media (--desktopViewport) {
font-size: 20px;
line-height: 24px;
/* margin-top + n * line-height + margin-bottom => x * 8px */
margin-top: 16px;
margin-bottom: 16px;
}
}
--marketplaceHeroTitleFontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightBold);
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: var(--fontWeightBold);
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: var(--fontWeightSemiBold);
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: var(--fontWeightSemiBold);
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: var(--fontWeightMedium);
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) {
font-weight: var(--fontWeightMedium);
/* 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: var(--fontWeightRegular);
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: var(--fontWeightBold);
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: var(--fontWeightRegular);
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: var(--fontWeightBold);
font-size: 14px;
line-height: 18px;
letter-spacing: 0.1px;
}
/* This font is specific to Avatar component only */
--marketplaceMediumAvatarFontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightSemiBold);
font-size: 20px;
line-height: 24px;
letter-spacing: -0.2px;
}
/* Links */
--marketplaceLinkStyles: {

200
src/marketplaceFonts.css Normal file
View file

@ -0,0 +1,200 @@
/* Fonts */
/* These are imported into marketplace.css */
:root {
--fontWeightRegular: 400;
--fontWeightMedium: 500;
--fontWeightSemiBold: 600;
--fontWeightBold: 700;
--marketplaceDefaultFontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightMedium);
font-size: 18px;
line-height: 24px;
letter-spacing: -0.1px;
/* No margins for default font */
@media (--desktopViewport) {
font-size: 20px;
line-height: 24px;
}
}
--marketplaceBodyFontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightMedium);
font-size: 18px;
line-height: 24px;
letter-spacing: -0.1px;
/* margin-top + n * line-height + margin-bottom => x * 6px */
margin-top: 12px;
margin-bottom: 12px;
@media (--desktopViewport) {
font-size: 20px;
line-height: 24px;
/* margin-top + n * line-height + margin-bottom => x * 8px */
margin-top: 16px;
margin-bottom: 16px;
}
}
--marketplaceHeroTitleFontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightBold);
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: var(--fontWeightBold);
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: var(--fontWeightSemiBold);
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: var(--fontWeightSemiBold);
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: var(--fontWeightMedium);
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) {
font-weight: var(--fontWeightMedium);
/* 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: var(--fontWeightRegular);
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: var(--fontWeightBold);
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: var(--fontWeightRegular);
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: var(--fontWeightBold);
font-size: 14px;
line-height: 18px;
letter-spacing: 0.1px;
}
/* This font is specific to Avatar component only */
--marketplaceMediumAvatarFontStyles: {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightSemiBold);
font-size: 20px;
line-height: 24px;
letter-spacing: -0.2px;
}
}