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

Use custom media query, add searchResultsFont

Browse source
This commit is contained in:
Kimmo Puputti 2017-05-30 14:21:53 +03:00
parent 0871e9467e
commit 4e6b0f5ec2
2 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/containers/StyleguidePage/StyleguidePage.css
View file

@ -4,7 +4,7 @@
display: flex;
flex-direction: column;
@media (min-width: 768px) {
@media (--desktop-viewport) {
flex-direction: row;
}
}
@ -12,7 +12,7 @@
.withPadding {
padding: calc(2 * var(--spacingUnit));
@media (min-width: 768px) {
@media (--desktop-viewport) {
padding: calc(2 * var(--spacingUnitDesktop));
}
}
@ -21,7 +21,7 @@
.defaultWrapperStyles {
margin: calc(2 * var(--spacingUnit)) 0;
@media (min-width: 768px) {
@media (--desktop-viewport) {
margin: calc(2 * var(--spacingUnitDesktop)) 0;
}
}
@ -37,7 +37,7 @@
flex-grow: 1;
composes: withPadding;
@media (min-width: 768px) {
@media (--desktop-viewport) {
padding: 56px 0 0 16px;
}
}
@ -66,7 +66,7 @@
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-repeat: repeat;
@media (min-width: 768px) {
@media (--desktop-viewport) {
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-repeat: repeat;
}

20
src/marketplace.css
View file

@ -1,5 +1,7 @@
@import "sanitize.css";
/* ================ Custom properties aka variables ================ */
:root {
/* Colors */
--marketplaceColor: #C0392B;
@ -37,7 +39,12 @@
--borderRadius: 2px;
}
/* FONTS */
/* ================ Custom media queries ================ */
@custom-media --desktop-viewport (min-width: 768px);
/* ================ Fonts ================ */
h1, h2, h3, h4, h5, h6, p, pre {
margin: 0;
}
@ -52,7 +59,7 @@ h1,
letter-spacing: -1px;
/* TODO: this seems to be biggest font in Page titles (except in Hero) - is it h1 then? */
@media (min-width: 768px) {
@media (--desktop-viewport) {
font-family: "sofiapro";
font-weight: 600;
font-size: 48px;
@ -72,7 +79,7 @@ h2,
letter-spacing: -0.5px;
/* TODO Are these correct settings? */
@media (min-width: 768px) {
@media (--desktop-viewport) {
font-size: 24px;
line-height: 32px;
padding: 4px 0 4px 0; /* 4px + 4px = 8px */
@ -133,6 +140,7 @@ input,
button,
p,
pre,
li,
.bodyFont {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-weight: 500;
@ -191,13 +199,17 @@ pre,
letter-spacing: 0.1px;
}
.searchResultsFont {
composes: bodyFont;
}
/* Base font color */
html,
.textColor {
color: var(--matterColor);
}
/* NORMALIZATIONS for other elements */
/* ================ Normalisations ================ */
/* TODO */
html {