🎨
copacetic-frontity
📹
Demo
🔧
Installation 1. For new projects: clone this project.
-
git clone https://github.com/taylorchasewhite/copacetic-frontity
. -
cd copacetic-frontity
. -
npm install && npx frontity dev
(from the project's root directory). -
Your site will now be available at
http://localhost:3000/
2. For new/existing project: use npm.
-
npm install @taylorwhite/copacetic-frontity
. - Add the package in
frontity-settings.js
.
packages: [
{
name: "@taylorwhite/copacetic-frontity",
state: {
theme: {
logo: "Test Frontity Blog", // The logo can be a text or an image url
showBackgroundPattern: true, // show background pattern
showSocialLinks: true, // show social links
"menu": [
[
"Home",
"/"
],
[
"Nature",
"/category/nature/"
],
[
"Travel",
"/category/travel/"
],
[
"Japan",
"/tag/japan/"
],
[
"About Us",
"/about-us/"
]
],
// the social links
socialLinks: [
["facebook", "https://www.facebook.com/taylorchasewhite/"],
["twitter", "https://twitter.com/taychasewhite/"],
["linkedin", "https://www.linkedin.com/in/taylorchasewhite/"],
["instagram", "https://www.instagram.com/taylorchasewhite/"]
],
// color shades to use in the blog
colors: {
primary: {
"50": "#e9f5f2",
"100": "#d4dcd9",
"200": "#bbc3be",
"300": "#a1aba5",
"400": "#87938b",
"500": "#6d7972",
"600": "#555f58",
"700": "#000000",
"800": "#000000",
"900": "#000000"
},
accent: {
"50": "#e6f3fe",
"100": "#80c2f9",
"200": "#7bcfff",
"300": "#49bbff",
"400": "#1aa8ff",
"500": "#008ee6",
"600": "#006fb4",
"700": "#004f82",
"800": "#002f51",
"900": "#001121"
}
}
}
}
},
- Remove your previous theme (
mars-theme
?) fromfrontity-settings.js
. -
npx frontity dev
(from project's root directory). - Your site will be available at
http://localhost:3000/
.
💮
Credits - Build with love
💙 , using Frontity's frontity-chakra-theme as base.