@project

hero module

short branding slogan

some additional text. optional.

about

this is the @magic-themes project theme. It can be used as the foundational theme for any kind of project.

this theme is being used on the following pages:

installation

npm install --save --save-exact @magic-themes/project

usage

require in magic.js:

// magic.jsexport default {  // ... other config  THEME: 'project',}

magic will then find and merge the themes automatically, just as it did on this page

theme vars

colors

this theme exports and uses the following colors.

  • vars.white: #ffffff
  • vars.neutral: #5a5a5a
  • vars.fontSize: 18px
  • background
    • vars.background.light: #e0e0e0
    • vars.background.dark: #212121
  • link
    • vars.link.light: #8f6ab4
    • vars.link.dark: #8f6ab4
    • link.hover
      • vars.link.hover.light: #412162
      • vars.link.hover.dark: #412162
  • primary
    • vars.primary.neutral: rebeccapurple
    • vars.primary.light: #8f6ab4
    • vars.primary.dark: #412162
  • text
    • vars.text.light: #212121
    • vars.text.dark: #c4c4c4

max page width

vars.maxWidth: 1200px

fade duration:

vars.fadeDuration should be used for all css animations

vars.fadeDuration: 500ms

breakpoints

the following width breakpoints exist

  • vars.widths.tablet: 500px
  • vars.widths.laptop: 1024px
  • vars.widths.desktop: 1600px

headers

the five header sizes look like the following, the outlines indicate their padding.

This is a h1

This is a h2

This is a h3

This is a h4

This is a h5

links will look like the following:

This is a link