Skip to content

Instantly share code, notes, and snippets.

@jalezi

jalezi/Markdown.js

Last active November 25, 2021 09:13
Show Gist options
  • Save jalezi/c9ca0a1eff06905c6f296e942f76f8fb to your computer and use it in GitHub Desktop.
Save jalezi/c9ca0a1eff06905c6f296e942f76f8fb to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jalezi revised this gist Nov 25, 2021. 1 changed file with 25 additions and 0 deletions.
    25 changes: 25 additions & 0 deletions theme.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    const theme = createTheme({
    typography: {
    fontFamily: ['IBM Plex Sans', 'Roboto', 'sans-serif'].join(','),
    },
    customColors: {
    accent: '#09AFDA',
    brand: '#95C83F',
    danger: '#DC3435',
    dark: '#212529',
    lightGrey: '#CDCDCD',
    background: '#F0F0E8',
    text: 'rgba(0,0,0,.56)',
    link: 'rgba(33,37,41,0.56);',
    },
    customOpacity: {
    half: 0.56,
    },
    MD: {
    textColor: 'rgba(0, 0, 0, 0.7)',
    linkColor: 'rgba(0, 0, 0, 0.8)',
    elementBoxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.15)',
    linkBoxShadow: 'inset 0 -1px 0 white, inset 0 -4px #95C83F',
    linkBoxShadowHover: 'inset 0 -1px 0 white, inset 0 -20px #95C83F',
    },
    });
  2. jalezi created this gist Nov 25, 2021.
    80 changes: 80 additions & 0 deletions Markdown.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,80 @@
    import { styled } from '@mui/material/styles';
    import MarkdownBase from 'markdown-to-jsx';

    export const CustomContainer = styled('div')(({ theme }) => {
    return {
    margin: '24px auto 0 auto',
    maxWidth: '730px',
    '@media only screen and (min-width: 768px)': {
    margin: '48px auto 65px auto',
    boxShadow: theme.MD.elementBoxShadow,
    },
    };
    });

    export const StaticPageWrapper = styled('div')(({ theme }) => {
    return {
    padding: '32px 17px 27px 17px',
    background: theme.palette.common.white,

    '@media only screen and (min-width: 768px)': {
    margin: '32px 32px 27px 32px',
    },
    };
    });

    export const Markdown = styled(MarkdownBase)(({ theme }) => {
    return {
    h1: { marginBottom: '32px', fontSize: '28px' },

    'h2, h3, h4': {
    marginBottom: '24px',
    },

    h2: { fontSize: '21px' },
    h3: { fontSize: '18px' },

    'p:not(:last-of-type)': {
    marginBottom: '28px',
    },

    ul: { paddingInlineStart: '40px', fontSize: '14px' },

    'h1 + p > em': {
    display: 'block',
    fontSize: '16px',
    fontStyle: 'italic',
    color: theme.MD.linkColor,
    fontWeight: 400,
    lineHeight: 1.7,
    marginBottom: '48px',
    a: { fontSize: '16px' },
    },

    'p, a, span, strong': {
    fontSize: '14px',
    color: theme.MD.textColor,
    lineHeight: 1.7,
    },

    '* + h1, * + h2, * + h3': {
    marginTop: '48px',
    },

    a: {
    color: theme.MD.linkColor,
    fontWeight: 600,
    transition: 'all 0.35s ease-in-out',
    boxShadow: theme.MD.linkBoxShadow,
    textDecoration: 'none',

    '&:hover': {
    color: theme.MD.linkColor,
    fontWeight: 600,
    boxShadow: theme.MD.linkBoxShadowHover,
    textDecoration: 'none',
    },
    strong: { fontWeight: 600 },
    },
    };
    });