crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code fontsize on small screens

Browse Source
This commit is contained in:
August Skare
2018-10-22 08:52:21 +02:00
parent cacb8acf76
commit 6c39d498c2
2 changed files with 75 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/dev-tools-pages/ts/components/Code.tsx
View File

@@ -1,7 +1,7 @@
import * as React from 'react';
import styled from 'styled-components';
import { colors } from '../variables';
import { colors } from '../variables';
import BaseButton from './Button';
interface CodeProps {
@@ -26,13 +26,13 @@ const Base =
styled.div <
CodeProps >
`
color: ${props => (props.language === undefined ? colors.white : 'inherit')};
background-color: ${props => (props.language === undefined ? colors.black : colors.lightGray)};
white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
position: relative;
&:hover ${Button} {
opacity: 1;
}
color: ${props => (props.language === undefined ? colors.white : 'inherit')};
background-color: ${props => (props.language === undefined ? colors.black : colors.lightGray)};
white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
position: relative;
&:hover ${Button} {
opacity: 1;
}
`;
const StyledCode = styled.code`

132
packages/dev-tools-pages/ts/globalStyles.tsx
View File

@@ -6,75 +6,77 @@ import hljsStyles from 'highlight.js/styles/github-gist.css';
import { withContext } from 'ts/components/withContext';
const BaseStyles = createGlobalStyle`
${styledNormalize}
${hljsStyles}
${styledNormalize}
${hljsStyles}
@font-face {
font-family: "Maison Neue";
src: url("/fonts/MaisonNeue-Book-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
font-weight: 300;
font-display: swap;
unicode-range: U+20-7E;
}
@font-face {
font-family: "Maison Neue";
src: url("/fonts/MaisonNeue-Bold-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
font-weight: 500;
font-display: swap;
unicode-range: U+20-7E;
}
@font-face {
font-family: "Maison Neue Mono";
src: url("/fonts/MaisonNeue-Mono-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
font-weight: 300;
font-display: optional;
unicode-range: U+20-7E;
}
html {
font-size: 100%;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
font-family: "Maison Neue", system-ui, sans-serif;
font-weight: 300;
font-size: 1rem;
line-height: 1.8;
${media.small`font-size: 0.875rem;`};
}
a {
color: ${(props: any) => props.colors.link};
text-decoration: none;
&:hover {
color: red; //what should this be?
@font-face {
font-family: "Maison Neue";
src: url("/fonts/MaisonNeue-Book-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
font-weight: 300;
font-display: swap;
unicode-range: U+20-7E;
}
}
h1, h2, h3, h4 {
font-weight: 500;
margin: 0;
}
p {
margin-top: 0;
margin-bottom: 1em;
&:not([class]):last-of-type {
margin-bottom: 0;
@font-face {
font-family: "Maison Neue";
src: url("/fonts/MaisonNeue-Bold-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
font-weight: 500;
font-display: swap;
unicode-range: U+20-7E;
}
@font-face {
font-family: "Maison Neue Mono";
src: url("/fonts/MaisonNeue-Mono-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
font-weight: 300;
font-display: optional;
unicode-range: U+20-7E;
}
}
code {
font-family: "Maison Neue Mono", monospace;
}
html {
font-size: 100%;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
font-family: "Maison Neue", system-ui, sans-serif;
font-weight: 300;
font-size: 1rem;
line-height: 1.8;
${media.small`font-size: 0.875rem;`};
}
a {
color: ${(props: any) => props.colors.link};
text-decoration: none;
&:hover {
color: red; //what should this be?
}
}
h1, h2, h3, h4 {
font-weight: 500;
margin: 0;
}
p {
margin-top: 0;
margin-bottom: 1em;
&:not([class]):last-of-type {
margin-bottom: 0;
}
}
code {
font-family: "Maison Neue Mono", monospace;
${media.small`
font-size: .75rem;
`}
}
`;
export default withContext(BaseStyles);