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

Rename index.css to marketplaceStyles.css and add mobile font styles.

Browse source
This commit is contained in:
Vesa Luusua 2017-05-24 01:46:32 +03:00
parent 165a67031b
commit 018232991f
3 changed files with 143 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/index.css
View file

@ -1,45 +0,0 @@
@import "sanitize.css";
/* Base font */
html, input, button, a {
/*
Use Chalkboard font. This font is available in Mac OSX. Fallback
to Comic Sans MS, "although it is not a perfect substitute font
since the two are not metrically compatible".
See: https://en.wikipedia.org/wiki/Chalkboard_(typeface)
*/
font-family: "Chalkboard", "ChalkboardSE-Regular", "Comic Sans MS", sans-serif;
color: #4A4A4A;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
letter-spacing: -0.6px;
}
h1 {
font-size: 24px;
}
ul {
list-style: none;
padding: 0;
}
label {
display: block;
font-weight: bold;
font-size: 14px;
margin-top: 20px;
margin-bottom: 10px;
}
select {
border: none;
}
textarea {
width: 100%;
border: 1px solid #ddd;
}

2
src/index.js
View file

@ -23,7 +23,7 @@ import { authInfo } from './ducks/Auth.duck';
import { fetchCurrentUser } from './ducks/user.duck';
import routeConfiguration from './routesConfiguration';
import './index.css';
import './marketplace.css';
const render = store => {
// If the server already loaded the auth information, render the app

142
src/marketplace.css Normal file
View file

@ -0,0 +1,142 @@
@import "sanitize.css";
/* FONTS */
h1, h2, h3, h4, h5, h6, p, pre {
margin: 0;
}
h1,
.h1Font {
font-family: "sofiapro-regular";
font-size: 48px;
line-height: 54px;
padding: 5px 0 1px 0; /* 5px + 1px = 6px */;
letter-spacing: -1px;
/* TODO: this seems to be biggest font in Page titles (except in Hero) - is it h1 then? */
@media (min-width: 768px) {
font-family: "sofiapro-semibold";
font-size: 48px;
line-height: 56px;
padding: 7px 0 1px 0; /* 7 + 1 = 8px */
letter-spacing: -1px;
}
}
h2,
.h2Font {
font-family: "sofiapro-semibold";
font-size: 30px;
line-height: 36px;
padding: 3.5px 0 2.5px 0; /* 3.5px + 2.5px = 6px */
letter-spacing: -0.5px;
/* TODO Are these correct settings? */
@media (min-width: 768px) {
font-size: 24px;
line-height: 32px;
padding: 4px 0 4px 0; /* 4px + 4px = 8px */
letter-spacing: -0.3px;
}
}
h3,
.h3Font {
font-family: "sofiapro-semibold";
font-size: 24px;
line-height: 30px;
padding: 3px 0 3px 0; /* 3px + 3px = 6px */
letter-spacing: -0.4px;
/* TODO Desktop styles needs to be extracted */
}
h4,
.h4Font {
font-family: "sofiapro-semibold";
font-size: 20px;
line-height: 24px;
padding: 2px 0 4px 0; /* 2px + 4px = 6px */
letter-spacing: -0.2px;
/* TODO Desktop styles needs to be extracted */
}
h5,
.h5Font {
font-family: "sofiapro-semibold";
font-size: 16px;
line-height: 24px;
padding: 3.5px 0 2.5px 0; /* 3.5px + 2.5px = 6px */
letter-spacing: 0;
/* TODO Desktop styles needs to be extracted */
}
h6,
.h6Font {
font-family: "sofiapro-semibold";
font-size: 14px;
line-height: 18px;
padding: 1.5px 0 4.5px 0; /* 1.5px + 4.5px = 6px */
letter-spacing: 0;
/* TODO Desktop styles needs to be extracted */
}
html,
input,
button,
p,
pre,
.bodyFont {
font-family: "sofiapro-medium";
font-size: 18px;
line-height: 24px;
padding: 2.5px 0 3.5px 0; /* 2.5px + 3.5px = 6px */
letter-spacing: -0.1px;
/* TODO Desktop styles needs to be extracted */
}
.tinyFont {
font-family: "sofiapro-regular";
font-size: 13px;
line-height: 18px;
padding: 2px 0 4px 0; /* 2px + 4px = 6px */
letter-spacing: -0.1px;
/* TODO Desktop styles needs to be extracted */
}
/* COLORS */
/* Base font color */
html,
.textColor {
color: #4A4A4A;
}
/* NORMALIZATIONS for other elements */
/* TODO */
ul {
list-style: none;
padding: 0;
}
label {
display: block;
font-weight: bold;
font-size: 14px;
margin-top: 20px;
margin-bottom: 10px;
}
select {
border: none;
}
textarea {
width: 100%;
border: 1px solid #ddd;
}