Upload from local project
This commit is contained in:
commit
e7c9f85407
61
.eleventy.js
Normal file
61
.eleventy.js
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
const Image = require("@11ty/eleventy-img");
|
||||
const pluginIcons = require('eleventy-plugin-icons');
|
||||
|
||||
module.exports = eleventyConfig => {
|
||||
eleventyConfig.setUseGitIgnore(false);
|
||||
|
||||
eleventyConfig.addWatchTarget('./src/assets');
|
||||
|
||||
eleventyConfig.addFilter("padNumber", (number, targetSize = 3) => {
|
||||
return number.toString().padStart(targetSize, '0')
|
||||
})
|
||||
eleventyConfig.addFilter("capitalize", (string) => {
|
||||
return string.charAt(0).toUpperCase() + string.slice(1)
|
||||
})
|
||||
|
||||
eleventyConfig.addFilter("find", (collection = [], id = "") => {
|
||||
return collection.find(item => item.id === id);
|
||||
});
|
||||
|
||||
eleventyConfig.addShortcode("image", async function (src, alt, css="") {
|
||||
let metadata = await Image(src, {
|
||||
formats: ["png"],
|
||||
outputDir: "src/assets/img",
|
||||
filenameFormat: function (hash, src, width, format, options) {
|
||||
return `${hash}.${format}`;
|
||||
}
|
||||
});
|
||||
|
||||
let imageAttributes = {
|
||||
class: css,
|
||||
alt,
|
||||
loading: "lazy",
|
||||
decoding: "async",
|
||||
};
|
||||
|
||||
return Image.generateHTML(metadata, imageAttributes);
|
||||
});
|
||||
|
||||
eleventyConfig.addPassthroughCopy({ "src/assets/favicon": "/" });
|
||||
eleventyConfig.addPassthroughCopy({ "src/assets/img": "/img" });
|
||||
|
||||
eleventyConfig.addPassthroughCopy({ "src/assets/bulbasaur.png": "/bulbasaur.png" });
|
||||
eleventyConfig.addPassthroughCopy({ "src/assets/ivysaur.png": "/ivysaur.png" });
|
||||
eleventyConfig.addPassthroughCopy({ "src/assets/venusaur.png": "/venusaur.png" });
|
||||
|
||||
eleventyConfig.addPlugin(pluginIcons, {
|
||||
sources: [{ name: 'remix', path: 'node_modules/remixicon/icons', default: true }],
|
||||
});
|
||||
|
||||
return {
|
||||
markdownTemplateEngine: 'liquid',
|
||||
dataTemplateEngine: 'liquid',
|
||||
htmlTemplateEngine: 'liquid',
|
||||
dir: {
|
||||
input: 'src',
|
||||
output: 'dist',
|
||||
includes: '_includes',
|
||||
layouts: '_layouts'
|
||||
}
|
||||
};
|
||||
};
|
||||
1
.eleventyignore
Normal file
1
.eleventyignore
Normal file
|
|
@ -0,0 +1 @@
|
|||
node_modules
|
||||
16
.gitignore
vendored
Normal file
16
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
# Misc
|
||||
*.log
|
||||
npm-debug.*
|
||||
*.scssc
|
||||
*.swp
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
.sass-cache
|
||||
.env
|
||||
.cache
|
||||
src/assets/img
|
||||
|
||||
# Node modules and output
|
||||
node_modules
|
||||
dist
|
||||
src/_includes/css
|
||||
22
.vscode/settings.json
vendored
Normal file
22
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"workbench.colorCustomizations": {
|
||||
"activityBar.activeBackground": "#f35430",
|
||||
"activityBar.background": "#f35430",
|
||||
"activityBar.foreground": "#e7e7e7",
|
||||
"activityBar.inactiveForeground": "#e7e7e799",
|
||||
"activityBarBadge.background": "#0ef138",
|
||||
"activityBarBadge.foreground": "#15202b",
|
||||
"commandCenter.border": "#e7e7e799",
|
||||
"sash.hoverBorder": "#f35430",
|
||||
"statusBar.background": "#e3350d",
|
||||
"statusBar.foreground": "#e7e7e7",
|
||||
"statusBarItem.hoverBackground": "#f35430",
|
||||
"statusBarItem.remoteBackground": "#e3350d",
|
||||
"statusBarItem.remoteForeground": "#e7e7e7",
|
||||
"titleBar.activeBackground": "#e3350d",
|
||||
"titleBar.activeForeground": "#e7e7e7",
|
||||
"titleBar.inactiveBackground": "#e3350d99",
|
||||
"titleBar.inactiveForeground": "#e7e7e799"
|
||||
},
|
||||
"peacock.color": "#E3350D"
|
||||
}
|
||||
5451
package-lock.json
generated
Normal file
5451
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
29
package.json
Normal file
29
package.json
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"name": "11ty-pokedex",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": ".eleventy.js",
|
||||
"scripts": {
|
||||
"dev": "npm-run-all -p dev:*",
|
||||
"build": "run-s build:*",
|
||||
"dev:11ty": "eleventy --serve",
|
||||
"dev:css": "tailwindcss -i src/assets/css/tailwind.css -o dist/assets/css/tailwind.css --watch --postcss",
|
||||
"build:11ty": "SET NODE_ENV=production npx @11ty/eleventy",
|
||||
"build:css": "tailwindcss -i src/assets/css/tailwind.css -o dist/assets/css/tailwind.css --postcss"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^2.0.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.4.40",
|
||||
"tailwindcss": "^3.4.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"@11ty/eleventy-fetch": "^4.0.1",
|
||||
"@11ty/eleventy-img": "^4.0.2",
|
||||
"eleventy-plugin-icons": "^4.5.0",
|
||||
"remixicon": "^4.3.0"
|
||||
}
|
||||
}
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
5
src/_data/meta.js
Normal file
5
src/_data/meta.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
url: process.env.URL || 'http://localhost:8080',
|
||||
siteName: 'Pokédex',
|
||||
lang: 'fr',
|
||||
};
|
||||
124
src/_data/pokemons.js
Normal file
124
src/_data/pokemons.js
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
const fetch = require("@11ty/eleventy-fetch");
|
||||
const { lang } = require("./meta.js");
|
||||
|
||||
const POKEDEX_SIZE = 151;
|
||||
const pokemonUrl = "https://pokeapi.co/api/v2/pokemon/";
|
||||
const pokemonDetailUrl = "https://pokeapi.co/api/v2/pokemon-species/";
|
||||
const typeUrl = "https://pokeapi.co/api/v2/type/";
|
||||
|
||||
async function getPokemon(id) {
|
||||
const url = `${pokemonUrl}${id}`;
|
||||
let result = await fetch(url, {
|
||||
duration: "7d",
|
||||
type: "json",
|
||||
});
|
||||
let details = await getPokemonDetails(id);
|
||||
|
||||
let types = [];
|
||||
result.types.forEach(async type => {
|
||||
let typeDetails = await getTypeDetails(type.type.url.split("/")[6]);
|
||||
types.push({
|
||||
name: typeDetails.names.filter((text) => text.language.name == lang)[0].name,
|
||||
id: type.type.url.split("/")[6]
|
||||
});
|
||||
});
|
||||
|
||||
let evolutionChain = await getEvolutionChain(details.evolution_chain.url);
|
||||
let evolutions = handleEvolutionChain(evolutionChain);
|
||||
|
||||
return {
|
||||
name: details.names.filter((text) => text.language.name == lang)[0].name,
|
||||
sprite: result.sprites['front_default'],
|
||||
image: result.sprites.other['official-artwork']['front_default'],
|
||||
types: types,
|
||||
id: result.id,
|
||||
evolutions: evolutions,
|
||||
description: details.flavor_text_entries.filter((text) => text.language.name == lang)[0].flavor_text,
|
||||
genera: details.genera.filter((text) => text.language.name == lang)[0].genus,
|
||||
};
|
||||
}
|
||||
|
||||
async function getPokemonDetails(id) {
|
||||
const url = `${pokemonDetailUrl}${id}`;
|
||||
return await fetch(url, {
|
||||
duration: "7d",
|
||||
type: "json",
|
||||
});
|
||||
}
|
||||
|
||||
async function getEvolutionChain(url) {
|
||||
return await fetch(url, {
|
||||
duration: "7d",
|
||||
type: "json",
|
||||
});
|
||||
}
|
||||
|
||||
function handleEvolutionChain(evolutionChain) {
|
||||
const chain = evolutionChain.chain
|
||||
|
||||
if(chain.evolves_to.length != 0) {
|
||||
let evoChain = setupEvolution(chain);
|
||||
|
||||
if(chain.evolves_to[0].evolves_to.length != 0) {
|
||||
evoChain.push(setupEvolution(chain.evolves_to[0])[1]);
|
||||
}
|
||||
|
||||
return evoChain;
|
||||
}
|
||||
}
|
||||
function setupEvolution(chain) {
|
||||
let evolutions = [];
|
||||
chain.evolves_to.forEach(evolution => {
|
||||
const method = evolution.evolution_details[0].trigger.name;
|
||||
let lvl = 0;
|
||||
let item = "";
|
||||
if (method === "level-up") {
|
||||
lvl = evolution.evolution_details[0].min_level;
|
||||
} else if (method === "use-item") {
|
||||
item = {
|
||||
name: evolution.evolution_details[0].item.name,
|
||||
id: evolution.evolution_details[0].item.url.split("/")[6],
|
||||
};
|
||||
}
|
||||
|
||||
evolutions.push({
|
||||
id : evolution.species.url.split("/")[6],
|
||||
method: evolution.evolution_details[0].trigger.name,
|
||||
lvl,
|
||||
item,
|
||||
});
|
||||
});
|
||||
return [
|
||||
{
|
||||
id : chain.species.url.split("/")[6],
|
||||
},
|
||||
...evolutions
|
||||
]
|
||||
};
|
||||
|
||||
async function getTypeDetails(id) {
|
||||
const url = `${typeUrl}${id}`;
|
||||
return await fetch(url, {
|
||||
duration: "7d",
|
||||
type: "json",
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = async function () {
|
||||
try {
|
||||
const pokemons = [];
|
||||
for (let i = 1; i <= POKEDEX_SIZE; i++) {
|
||||
pokemons.push(await getPokemon(i));
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* Evolutions en branches (Evoli)
|
||||
* Evolutions de pokemon non présent (pikachu, ronflex)
|
||||
* Sprite objet evolution
|
||||
*/
|
||||
return pokemons
|
||||
} catch (error) {
|
||||
console.error(`Fetch failed in pokemon.js. ${error}`);
|
||||
}
|
||||
};
|
||||
30
src/_includes/partials/evolutions.liquid
Normal file
30
src/_includes/partials/evolutions.liquid
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
|
||||
<div class="flex items-center justify-center gap-4 max-w-xl mx-auto px-4 mt-4 mb-8 flex-col md:flex-row">
|
||||
{% for evo in pokemon.evolutions %}
|
||||
{% assign stageId = evo.id | plus: 0 %}
|
||||
{% assign stage = pokemons | find: stageId %}
|
||||
|
||||
{% if stage %}
|
||||
{% if evo.method %}
|
||||
{% if evo.method == "level-up" %}
|
||||
{% if evo.lvl %}
|
||||
<div class="text-xs py-2 px-4 rounded-full text-secondary-600 bg-secondary-200 dark:text-secondary-200 dark:bg-secondary-600">
|
||||
lvl {{ evo.lvl }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if evo.method == "use-item" %}
|
||||
<div class="text-xs py-2 px-4 rounded-full text-secondary-600 bg-secondary-200 dark:text-secondary-200 dark:bg-secondary-600">
|
||||
{{ evo.item.name }} {{ evo.item.id }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if stage.image %}
|
||||
<div>
|
||||
{% comment %} {% image stage.image, stage.name, "w-24 dark:brightness-90" %} {% endcomment %}
|
||||
<img src="{{ stage.image }}" alt="{{ stage.name }}" class="w-24 dark:brightness-90">
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
32
src/_includes/partials/navigation.liquid
Normal file
32
src/_includes/partials/navigation.liquid
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
{% assign previousPokemonId = pokemon.id | minus: 1 %}
|
||||
{% assign previousPokemon = pokemons | find: previousPokemonId %}
|
||||
|
||||
{% assign nextPokemonId = pokemon.id | plus: 1 %}
|
||||
{% assign nextPokemon = pokemons | find: nextPokemonId %}
|
||||
|
||||
<div class="py-4 bg-secondary-200 dark:bg-secondary-900">
|
||||
<div class="flex divide-x text-sm">
|
||||
{% if previousPokemon %}
|
||||
<a href="/{{ previousPokemon.id }}" class="w-full flex items-center justify-center px-2">
|
||||
<span class="w-8">
|
||||
{% icon "Arrows/arrow-left-s-line" %}
|
||||
</span>
|
||||
<div class="flex items-center">
|
||||
{% image previousPokemon.sprite, previousPokemon.name, "w-16 dark:brightness-90" %}
|
||||
<span>{{ previousPokemon.name }}</span>
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if nextPokemon %}
|
||||
<a href="/{{ nextPokemon.id }}" class="w-full flex items-center justify-center px-2">
|
||||
<div class="flex items-center">
|
||||
<span>{{ nextPokemon.name }}</span>
|
||||
{% image nextPokemon.sprite, nextPokemon.name, "w-16 dark:brightness-90" %}
|
||||
</div>
|
||||
<span class="w-8">
|
||||
{% icon "Arrows/arrow-right-s-line" %}
|
||||
</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
56
src/_includes/partials/pokemon-card.liquid
Normal file
56
src/_includes/partials/pokemon-card.liquid
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
{% assign name = pokemon.name | capitalize %}
|
||||
|
||||
{% assign type = pokemon.types[0] %}
|
||||
{% assign type_class = "text-secondary-900 dark:text-secondary-50 bg-secondary-50 dark:bg-secondary-900" %}
|
||||
{% case type.id %}
|
||||
{% when "1" %}
|
||||
{% assign type_class = "text-normal-950 dark:text-normal-50 bg-normal-50 dark:bg-normal-800" %}
|
||||
{% when "10" %}
|
||||
{% assign type_class = "text-fire-950 dark:text-fire-50 bg-fire-50 dark:bg-fire-800" %}
|
||||
{% when "11" %}
|
||||
{% assign type_class = "text-water-950 dark:text-water-50 bg-water-50 dark:bg-water-800" %}
|
||||
{% when "13" %}
|
||||
{% assign type_class = "text-electric-950 dark:text-electric-50 bg-electric-50 dark:bg-electric-800" %}
|
||||
{% when "12" %}
|
||||
{% assign type_class = "text-grass-950 dark:text-grass-50 bg-grass-50 dark:bg-grass-800" %}
|
||||
{% when "15" %}
|
||||
{% assign type_class = "text-ice-950 dark:text-ice-50 bg-ice-50 dark:bg-ice-800" %}
|
||||
{% when "2" %}
|
||||
{% assign type_class = "text-fighting-950 dark:text-fighting-50 bg-fighting-50 dark:bg-fighting-800" %}
|
||||
{% when "4" %}
|
||||
{% assign type_class = "text-poison-950 dark:text-poison-50 bg-poison-50 dark:bg-poison-800" %}
|
||||
{% when "5" %}
|
||||
{% assign type_class = "text-ground-950 dark:text-ground-50 bg-ground-50 dark:bg-ground-800" %}
|
||||
{% when "3" %}
|
||||
{% assign type_class = "text-flying-950 dark:text-flying-50 bg-flying-50 dark:bg-flying-800" %}
|
||||
{% when "14" %}
|
||||
{% assign type_class = "text-psychic-950 dark:text-psychic-50 bg-psychic-50 dark:bg-psychic-900" %}
|
||||
{% when "7" %}
|
||||
{% assign type_class = "text-bug-950 dark:text-bug-50 bg-bug-50 dark:bg-bug-800" %}
|
||||
{% when "6" %}
|
||||
{% assign type_class = "text-rock-950 dark:text-rock-50 bg-rock-50 dark:bg-rock-800" %}
|
||||
{% when "8" %}
|
||||
{% assign type_class = "text-ghost-950 dark:text-ghost-50 bg-ghost-50 dark:bg-ghost-800" %}
|
||||
{% when "16" %}
|
||||
{% assign type_class = "text-dragon-950 dark:text-dragon-50 bg-dragon-50 dark:bg-dragon-900" %}
|
||||
{% when "17" %}
|
||||
{% assign type_class = "text-dark-950 dark:text-dark-50 bg-dark-50 dark:bg-dark-800" %}
|
||||
{% when "9" %}
|
||||
{% assign type_class = "text-steel-950 dark:text-steel-50 bg-steel-50 dark:bg-steel-800" %}
|
||||
{% when "18" %}
|
||||
{% assign type_class = "text-fairy-950 dark:text-fairy-50 bg-fairy-50 dark:bg-fairy-800" %}
|
||||
{% endcase %}
|
||||
|
||||
{% comment %} <div class="grid grid-cols-2 py-4 pl-6 pr-1 rounded-3xl overflow-hidden relative z-0 {{ type_class }}"> {% endcomment %}
|
||||
<div class="grid grid-cols-[1fr_max-content] justify-space-between py-4 pl-6 pr-1 transition-colors duration-300 rounded-3xl overflow-hidden relative z-0 {{ type_class }} hover:bg-secondary-50 dark:hover:bg-secondary-900 focus-within:bg-secondary-50 dark:focus-within:bg-secondary-900">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xl opacity-80"><span class="text-lg">#</span>{{ pokemon.id | padNumber }}</span>
|
||||
<h3 class="text-2xl xs:text-lg sm:text-2xl font-bold tracking-tight">{{ name }}</h3>
|
||||
{% render "partials/types.liquid", types: pokemon.types, classes: "px-3 py-1 rounded-full" %}
|
||||
</div>
|
||||
<div class="w-full max-w-36">
|
||||
{% image pokemon.sprite, name, "w-full dark:brightness-90" %}
|
||||
</div>
|
||||
{% render "assets/pokeball.svg", class: "block text-light-transparent w-52 h-52 sm:w-64 sm:h-64 absolute bottom-[-50px] right-[-50px] sm:bottom-[-70px] sm:right-[-70px] -z-10" %}
|
||||
<a href="/{{ pokemon.id }}" class="absolute inset-0 z-20"><span class="sr-only">En savoir plus sur {{ name }}</span></a>
|
||||
</div>
|
||||
69
src/_includes/partials/pokemon-detail.liquid
Normal file
69
src/_includes/partials/pokemon-detail.liquid
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
{% assign name = pokemon.name | capitalize %}
|
||||
|
||||
{% assign type = pokemon.types[0] %}
|
||||
{% assign type_class = "text-secondary-900 dark:text-secondary-50 bg-secondary-50 dark:bg-secondary-900" %}
|
||||
{% case type.id %}
|
||||
{% when "1" %}
|
||||
{% assign type_class = "text-normal-950 dark:text-normal-50 bg-normal-500 dark:bg-normal-800" %}
|
||||
{% when "10" %}
|
||||
{% assign type_class = "text-fire-950 dark:text-fire-50 bg-fire-500 dark:bg-fire-800" %}
|
||||
{% when "11" %}
|
||||
{% assign type_class = "text-water-950 dark:text-water-50 bg-water-500 dark:bg-water-800" %}
|
||||
{% when "13" %}
|
||||
{% assign type_class = "text-electric-950 dark:text-electric-50 bg-electric-500 dark:bg-electric-800" %}
|
||||
{% when "12" %}
|
||||
{% assign type_class = "text-grass-950 dark:text-grass-50 bg-grass-500 dark:bg-grass-800" %}
|
||||
{% when "15" %}
|
||||
{% assign type_class = "text-ice-950 dark:text-ice-50 bg-ice-500 dark:bg-ice-800" %}
|
||||
{% when "2" %}
|
||||
{% assign type_class = "text-fighting-950 dark:text-fighting-50 bg-fighting-500 dark:bg-fighting-800" %}
|
||||
{% when "4" %}
|
||||
{% assign type_class = "text-poison-950 dark:text-poison-50 bg-poison-500 dark:bg-poison-800" %}
|
||||
{% when "5" %}
|
||||
{% assign type_class = "text-ground-950 dark:text-ground-50 bg-ground-500 dark:bg-ground-800" %}
|
||||
{% when "3" %}
|
||||
{% assign type_class = "text-flying-950 dark:text-flying-50 bg-flying-500 dark:bg-flying-800" %}
|
||||
{% when "14" %}
|
||||
{% assign type_class = "text-psychic-950 dark:text-psychic-50 bg-psychic-500 dark:bg-psychic-900" %}
|
||||
{% when "7" %}
|
||||
{% assign type_class = "text-bug-950 dark:text-bug-50 bg-bug-500 dark:bg-bug-800" %}
|
||||
{% when "6" %}
|
||||
{% assign type_class = "text-rock-950 dark:text-rock-50 bg-rock-500 dark:bg-rock-800" %}
|
||||
{% when "8" %}
|
||||
{% assign type_class = "text-ghost-950 dark:text-ghost-50 bg-ghost-500 dark:bg-ghost-800" %}
|
||||
{% when "16" %}
|
||||
{% assign type_class = "text-dragon-950 dark:text-dragon-50 bg-dragon-500 dark:bg-dragon-900" %}
|
||||
{% when "17" %}
|
||||
{% assign type_class = "text-dark-950 dark:text-dark-50 bg-dark-500 dark:bg-dark-800" %}
|
||||
{% when "9" %}
|
||||
{% assign type_class = "text-steel-950 dark:text-steel-50 bg-steel-500 dark:bg-steel-800" %}
|
||||
{% when "18" %}
|
||||
{% assign type_class = "text-fairy-950 dark:text-fairy-50 bg-fairy-500 dark:bg-fairy-800" %}
|
||||
{% endcase %}
|
||||
|
||||
<div class="flex flex-col px-4 py-8 text-center items-center transition-colors duration-300 rounded-b-3xl overflow-hidden relative z-0 {{ type_class }}">
|
||||
<div class="w-8 h-8 absolute top-3 left-3 text-secondary-50 hover:text-secondary-100 focus:text-secondary-100 dark:text-secondary-200 hover:text-secondary-50 focus:text-secondary-50 transition-colors">
|
||||
<a href="/">{% icon "Arrows/arrow-left-line" %}<span class="sr-only">Back to home</span></a>
|
||||
</div>
|
||||
<div class="relative w-full max-w-64">
|
||||
{% image pokemon.image, name, "w-full dark:brightness-90" %}
|
||||
</div>
|
||||
<div class="flex flex-col mb-4">
|
||||
<span class="text-xl opacity-80"><span class="text-lg">#</span>{{ pokemon.id | padNumber }}</span>
|
||||
<h3 class="text-3xl font-bold tracking-tight">{{ name }}</h3>
|
||||
<span class="text-base opacity-80 tracking-tight">{{ pokemon.genera }}</span>
|
||||
</div>
|
||||
<div>
|
||||
{% render "partials/types.liquid", types: pokemon.types, classes: "px-4 py-1 text-lg rounded-lg" %}
|
||||
</div>
|
||||
{% render "assets/pokeball.svg", class: "block text-light-transparent w-80 h-80 sm:w-64 sm:h-64 absolute bottom-1/2 right-1/2 translate-x-1/2 translate-y-1/2 rotate-12 -z-10" %}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col p-4 transition-colors duration-300 rounded-3xl overflow-hidden relative z-0">
|
||||
<div class="mt-4">
|
||||
<h4 class="text-xl">Description</h4>
|
||||
<p class="text-base font-normal">
|
||||
{{ pokemon.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
44
src/_includes/partials/type.liquid
Normal file
44
src/_includes/partials/type.liquid
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
{% assign type_class = "text-secondary-950 dark:text-secondary-100 bg-secondary-200 dark:bg-secondary-950" %}
|
||||
{% case type.id %}
|
||||
{% when "1" %}
|
||||
{% assign type_class = "text-normal-950 dark:text-normal-100 bg-normal-200 dark:bg-normal-950" %}
|
||||
{% when "10" %}
|
||||
{% assign type_class = "text-fire-950 dark:text-fire-100 bg-fire-200 dark:bg-fire-950" %}
|
||||
{% when "11" %}
|
||||
{% assign type_class = "text-water-950 dark:text-water-100 bg-water-300 dark:bg-water-950" %}
|
||||
{% when "13" %}
|
||||
{% assign type_class = "text-electric-950 dark:text-electric-100 bg-electric-200 dark:bg-electric-950" %}
|
||||
{% when "12" %}
|
||||
{% assign type_class = "text-grass-950 dark:text-grass-100 bg-grass-200 dark:bg-grass-950" %}
|
||||
{% when "15" %}
|
||||
{% assign type_class = "text-ice-950 dark:text-ice-100 bg-ice-200 dark:bg-ice-950" %}
|
||||
{% when "2" %}
|
||||
{% assign type_class = "text-fighting-950 dark:text-fighting-100 bg-fighting-200 dark:bg-fighting-950" %}
|
||||
{% when "4" %}
|
||||
{% assign type_class = "text-poison-950 dark:text-poison-100 bg-poison-200 dark:bg-poison-950" %}
|
||||
{% when "5" %}
|
||||
{% assign type_class = "text-ground-950 dark:text-ground-100 bg-ground-200 dark:bg-ground-950" %}
|
||||
{% when "3" %}
|
||||
{% assign type_class = "text-flying-950 dark:text-flying-100 bg-flying-200 dark:bg-flying-950" %}
|
||||
{% when "14" %}
|
||||
{% assign type_class = "text-psychic-950 dark:text-psychic-100 bg-psychic-200 dark:bg-psychic-950" %}
|
||||
{% when "7" %}
|
||||
{% assign type_class = "text-bug-950 dark:text-bug-100 bg-bug-200 dark:bg-bug-950" %}
|
||||
{% when "6" %}
|
||||
{% assign type_class = "text-rock-950 dark:text-rock-100 bg-rock-200 dark:bg-rock-950" %}
|
||||
{% when "8" %}
|
||||
{% assign type_class = "text-ghost-950 dark:text-ghost-100 bg-ghost-200 dark:bg-ghost-950" %}
|
||||
{% when "16" %}
|
||||
{% assign type_class = "text-dragon-950 dark:text-dragon-100 bg-dragon-200 dark:bg-dragon-950" %}
|
||||
{% when "17" %}
|
||||
{% assign type_class = "text-dark-950 dark:text-dark-100 bg-dark-200 dark:bg-dark-950" %}
|
||||
{% when "9" %}
|
||||
{% assign type_class = "text-steel-950 dark:text-steel-100 bg-steel-300 dark:bg-steel-950" %}
|
||||
{% when "18" %}
|
||||
{% assign type_class = "text-fairy-950 dark:text-fairy-100 bg-fairy-200 dark:bg-fairy-950" %}
|
||||
{% when "19" %}
|
||||
{% assign type_class = "text-secondary-950 dark:text-secondary-100 bg-secondary-200 dark:bg-secondary-950" %}
|
||||
{% when "20" %}
|
||||
{% assign type_class = "text-secondary-950 dark:text-secondary-100 bg-secondary-200 dark:bg-secondary-950" %}
|
||||
{% endcase %}
|
||||
<li class="{{ classes }} {{ type_class }}">{{ type.name | capitalize }}</li>
|
||||
5
src/_includes/partials/types.liquid
Normal file
5
src/_includes/partials/types.liquid
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<ul class="flex flex-wrap mt-2 gap-2 text-sm">
|
||||
{% for type in types %}
|
||||
{% render "partials/type.liquid", type: type, classes: classes %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
33
src/_layouts/base.liquid
Normal file
33
src/_layouts/base.liquid
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ meta.lang }}">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title>
|
||||
{% if title %}
|
||||
{{ title }}
|
||||
{% else %}
|
||||
{{ meta.siteName }}
|
||||
{% endif %}
|
||||
</title>
|
||||
|
||||
<meta name="robots" content="noindex,nofollow" />
|
||||
<meta name="googlebot" content="noindex,nofollow" />
|
||||
<meta name="generator" content="{{ eleventy.generator }}" />
|
||||
|
||||
<link rel="icon" href="{{ '/favicon.ico' | url }}" sizes="any" />
|
||||
<link rel="icon" href="{{ '/icon.svg' | url }}" type="image/svg+xml" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{{ '/apple-touch-icon.png' | url }}" />
|
||||
<link rel="manifest" href="{{ '/site.webmanifest' | url }}" />
|
||||
|
||||
<link rel="stylesheet" href="{{ '/assets/css/tailwind.css' | url }}">
|
||||
</head>
|
||||
|
||||
<body class="max-w-screen bg-secondary-100 text-secondary-900 text-3xl font-bold dark:bg-secondary-950 dark:text-secondary-100">
|
||||
<main id="main" class="max-w-7xl mx-auto min-h-screen">
|
||||
{{ content }}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
17
src/_layouts/detail.liquid
Normal file
17
src/_layouts/detail.liquid
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
layout: base.liquid
|
||||
---
|
||||
|
||||
{% render "partials/pokemon-detail.liquid", pokemon: currentPokemon %}
|
||||
|
||||
{% if currentPokemon.evolutions %}
|
||||
<div class="flex flex-col p-4 transition-colors duration-300 rounded-3xl overflow-hidden relative z-0">
|
||||
<div class="mt-4">
|
||||
<h4 class="text-xl">Evolution</h4>
|
||||
{% render "partials/evolutions.liquid", pokemons: pokemons, pokemon: currentPokemon %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% render "partials/navigation.liquid", pokemons: pokemons, pokemon: currentPokemon %}
|
||||
|
||||
{{ content }}
|
||||
12
src/_layouts/list.liquid
Normal file
12
src/_layouts/list.liquid
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
layout: base.liquid
|
||||
---
|
||||
<div class="py-12 px-4">
|
||||
{{ content }}
|
||||
|
||||
<div class="mt-6 grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 auto-rows-fr gap-6">
|
||||
{% for pokemonItem in pokemons %}
|
||||
{% render "partials/pokemon-card.liquid", pokemon: pokemonItem %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
3
src/assets/css/tailwind.css
Normal file
3
src/assets/css/tailwind.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
BIN
src/assets/favicon/apple-touch-icon.png
Normal file
BIN
src/assets/favicon/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
src/assets/favicon/favicon.ico
Normal file
BIN
src/assets/favicon/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/favicon/icon-192.png
Normal file
BIN
src/assets/favicon/icon-192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/favicon/icon-512.png
Normal file
BIN
src/assets/favicon/icon-512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
40
src/assets/favicon/icon.svg
Normal file
40
src/assets/favicon/icon.svg
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 511.985 511.985" xml:space="preserve">
|
||||
<path style="fill:#ED5564;" d="M491.859,156.348c-12.891-30.483-31.342-57.865-54.842-81.372
|
||||
c-23.516-23.5-50.904-41.96-81.373-54.85c-31.56-13.351-65.091-20.125-99.652-20.125c-34.554,0-68.083,6.773-99.645,20.125
|
||||
c-30.483,12.89-57.865,31.351-81.373,54.85c-23.499,23.507-41.959,50.889-54.85,81.372C6.774,187.91,0,221.44,0,255.993
|
||||
c0,34.56,6.773,68.091,20.125,99.652c12.89,30.469,31.351,57.857,54.85,81.357c23.507,23.516,50.889,41.967,81.373,54.857
|
||||
c31.562,13.344,65.091,20.125,99.645,20.125c34.561,0,68.092-6.781,99.652-20.125c30.469-12.891,57.857-31.342,81.373-54.857
|
||||
c23.5-23.5,41.951-50.889,54.842-81.357c13.344-31.561,20.125-65.092,20.125-99.652C511.984,221.44,505.203,187.91,491.859,156.348z
|
||||
"/>
|
||||
<path style="fill:#E6E9ED;" d="M0.102,263.18c0.875,32.014,7.593,63.092,20.023,92.465c12.89,30.469,31.351,57.857,54.85,81.357
|
||||
c23.507,23.516,50.889,41.967,81.373,54.857c31.562,13.344,65.091,20.125,99.645,20.125c34.561,0,68.092-6.781,99.652-20.125
|
||||
c30.469-12.891,57.857-31.342,81.373-54.857c23.5-23.5,41.951-50.889,54.842-81.357c12.438-29.373,19.156-60.451,20.031-92.465
|
||||
H0.102z"/>
|
||||
<path style="fill:#434A54;" d="M510.765,281.211c0.812-8.344,1.219-16.75,1.219-25.218c0-9.516-0.516-18.953-1.531-28.289
|
||||
c-12.719,1.961-30.984,4.516-53.998,7.054c-43.688,4.82-113.904,10.57-200.463,10.57c-86.552,0-156.776-5.75-200.455-10.57
|
||||
c-23.022-2.539-41.28-5.093-53.998-7.054C0.516,237.04,0,246.478,0,255.993c0,8.468,0.406,16.875,1.219,25.218
|
||||
c41.53,6.25,133.027,17.436,254.773,17.436S469.234,287.461,510.765,281.211z"/>
|
||||
<path style="fill:#E6E9ED;" d="M309.334,266.656c0,29.459-23.891,53.334-53.342,53.334c-29.452,0-53.334-23.875-53.334-53.334
|
||||
c0-29.453,23.882-53.327,53.334-53.327C285.443,213.33,309.334,237.204,309.334,266.656z"/>
|
||||
<path style="fill:#434A54;" d="M255.992,170.66c-52.936,0-95.997,43.069-95.997,95.997s43.062,95.988,95.997,95.988
|
||||
s95.996-43.061,95.996-95.988C351.988,213.729,308.928,170.66,255.992,170.66z M255.992,309.335
|
||||
c-23.522,0-42.663-19.156-42.663-42.678c0-23.523,19.14-42.663,42.663-42.663c23.531,0,42.654,19.14,42.654,42.663
|
||||
C298.646,290.178,279.523,309.335,255.992,309.335z"/>
|
||||
<path style="opacity:0.2;fill:#FFFFFF;enable-background:new ;" d="M491.859,156.348c-12.891-30.483-31.342-57.865-54.842-81.372
|
||||
c-23.516-23.5-50.904-41.96-81.373-54.85c-31.56-13.351-65.091-20.125-99.652-20.125c-3.57,0-7.125,0.078-10.664,0.219
|
||||
c30.789,1.25,60.662,7.93,88.974,19.906c30.498,12.89,57.873,31.351,81.371,54.85c23.5,23.507,41.969,50.889,54.857,81.372
|
||||
c13.359,31.562,20.109,65.092,20.109,99.646c0,34.56-6.75,68.091-20.109,99.652c-12.889,30.469-31.357,57.857-54.857,81.357
|
||||
c-23.498,23.516-50.873,41.967-81.371,54.857c-28.312,11.969-58.186,18.656-88.974,19.906c3.539,0.141,7.093,0.219,10.664,0.219
|
||||
c34.561,0,68.092-6.781,99.652-20.125c30.469-12.891,57.857-31.342,81.373-54.857c23.5-23.5,41.951-50.889,54.842-81.357
|
||||
c13.344-31.561,20.125-65.092,20.125-99.652C511.984,221.44,505.203,187.91,491.859,156.348z"/>
|
||||
<path style="opacity:0.1;enable-background:new ;" d="M20.125,355.645c12.89,30.469,31.351,57.857,54.85,81.357
|
||||
c23.507,23.516,50.889,41.967,81.373,54.857c31.562,13.344,65.091,20.125,99.645,20.125c3.57,0,7.125-0.078,10.664-0.219
|
||||
c-30.789-1.25-60.67-7.938-88.982-19.906c-30.483-12.891-57.857-31.342-81.364-54.857c-23.507-23.5-41.96-50.889-54.858-81.357
|
||||
c-13.352-31.56-20.117-65.091-20.117-99.652c0-34.554,6.765-68.084,20.116-99.646C54.35,125.864,72.803,98.481,96.31,74.983
|
||||
c23.507-23.507,50.881-41.968,81.364-54.858c28.312-11.976,58.193-18.656,88.982-19.906c-3.539-0.14-7.094-0.218-10.664-0.218
|
||||
c-34.554,0-68.083,6.773-99.645,20.125c-30.483,12.89-57.865,31.351-81.373,54.858c-23.499,23.499-41.959,50.881-54.85,81.364
|
||||
C6.774,187.91,0,221.44,0,255.993C0,290.553,6.774,324.085,20.125,355.645z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4 KiB |
6
src/assets/favicon/manifest.webmanifest
Normal file
6
src/assets/favicon/manifest.webmanifest
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"icons": [
|
||||
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
|
||||
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
|
||||
]
|
||||
}
|
||||
5
src/assets/pokeball.svg
Normal file
5
src/assets/pokeball.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg class="{{ class }}" viewBox="0 0 420 423" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M61.5873 229.12C80.3369 229.12 99.0918 229.23 117.841 229.03C121.681 228.988 123.198 230.082 124.144 233.91C134.028 272.668 169.311 299.756 209.751 299.851C229.314 299.907 248.343 293.468 263.862 281.543C279.381 269.617 290.515 252.878 295.522 233.942C296.572 230.029 298.027 229.03 301.824 229.046C339.523 229.169 377.224 229.169 414.926 229.046C419.128 229.046 419.926 229.835 419.464 234.258C410.477 320.024 347.968 394.941 260.596 415.787C189.048 432.851 124.569 416.754 69.1239 368.079C31.3095 334.901 9.41397 292.567 1.15258 243.061C-1.17406 229.114 -1.20557 229.125 13.0536 229.125L61.5873 229.12Z" fill="currentColor"/>
|
||||
<path d="M357.642 192.939C339.292 192.939 320.936 192.802 302.591 193.039C298.211 193.097 296.472 191.603 295.285 187.444C284.892 150.958 252.965 124.543 217.172 122.56C176.848 120.32 142.815 141.113 127.531 177.326C127.074 178.414 126.66 179.529 126.281 180.644C122.08 192.939 122.08 192.939 108.74 192.939C74.7961 192.939 40.8577 192.86 6.91401 193.018C1.86684 193.018 -0.354749 192.534 0.553847 186.329C12.5284 104.454 56.3406 46.3969 132.72 15.4173C215.035 -17.9972 306.089 4.16866 365.872 69.6514C395.845 102.482 413.377 141.329 418.917 185.514C419.842 192.934 419.779 192.955 412.127 192.96C393.962 192.95 375.8 192.943 357.642 192.939Z" fill="currentColor"/>
|
||||
<path d="M210.282 273.241C176.601 273.541 148.056 245.958 147.783 212.849C147.494 177.473 174.705 149.217 209.258 148.991C243.317 148.776 271.478 176.479 271.909 210.63C272.35 244.565 244.415 272.963 210.282 273.241Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
5
src/index.md
Normal file
5
src/index.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: list.liquid
|
||||
---
|
||||
|
||||
# {{ meta.siteName }}
|
||||
10
src/pokemon.md
Normal file
10
src/pokemon.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
layout: detail.liquid
|
||||
pagination:
|
||||
data: pokemons
|
||||
size: 1
|
||||
alias: currentPokemon
|
||||
permalink: "{{ currentPokemon.id | slug }}/"
|
||||
eleventyComputed:
|
||||
title: "{{ currentPokemon.name }}"
|
||||
---
|
||||
562
tailwind.config.js
Normal file
562
tailwind.config.js
Normal file
|
|
@ -0,0 +1,562 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
const defaultTheme = require('tailwindcss/defaultTheme')
|
||||
|
||||
const colorTokens = {
|
||||
'oxford-blue': {
|
||||
'50': '#f3f7f8',
|
||||
'100': '#e0e9ed',
|
||||
'200': '#c5d3dc',
|
||||
'300': '#9db5c3',
|
||||
'400': '#6e8ea2',
|
||||
'500': '#527288',
|
||||
'600': '#476073',
|
||||
'700': '#3e5060',
|
||||
'800': '#394551',
|
||||
'900': '#303943',
|
||||
'950': '#1e252e',
|
||||
},
|
||||
'mandy': {
|
||||
'50': '#fef2f2',
|
||||
'100': '#fee5e5',
|
||||
'200': '#fccfd2',
|
||||
'300': '#f9a8ac',
|
||||
'400': '#f57781',
|
||||
'500': '#ed5564',
|
||||
'600': '#d82640',
|
||||
'700': '#b61a35',
|
||||
'800': '#981933',
|
||||
'900': '#831831',
|
||||
'950': '#490815',
|
||||
},
|
||||
'green-smoke': {
|
||||
'50': '#f6f5ef',
|
||||
'100': '#eae9dd',
|
||||
'200': '#d8d7be',
|
||||
'300': '#bfbf97',
|
||||
'400': '#a8a878',
|
||||
'500': '#898a58',
|
||||
'600': '#6c6d43',
|
||||
'700': '#545536',
|
||||
'800': '#43452f',
|
||||
'900': '#3a3c2b',
|
||||
'950': '#1e1f14',
|
||||
},
|
||||
'jaffa': {
|
||||
'50': '#fef7ee',
|
||||
'100': '#fdedd7',
|
||||
'200': '#fad8ae',
|
||||
'300': '#f7bb7a',
|
||||
'400': '#f29445',
|
||||
'500': '#f08030',
|
||||
'600': '#e05c16',
|
||||
'700': '#ba4514',
|
||||
'800': '#943818',
|
||||
'900': '#773017',
|
||||
'950': '#40160a',
|
||||
},
|
||||
'cornflower-blue': {
|
||||
'50': '#eef7ff',
|
||||
'100': '#e0efff',
|
||||
'200': '#c8e0fd',
|
||||
'300': '#a6ccfb',
|
||||
'400': '#82adf7',
|
||||
'500': '#6890f0',
|
||||
'600': '#486ae3',
|
||||
'700': '#3955c9',
|
||||
'800': '#3149a2',
|
||||
'900': '#2f4280',
|
||||
'950': '#1b254b',
|
||||
},
|
||||
'bright-sun': {
|
||||
'50': '#fefce8',
|
||||
'100': '#fdf8c4',
|
||||
'200': '#fdef8b',
|
||||
'300': '#fbde49',
|
||||
'400': '#f8d030',
|
||||
'500': '#e7b20b',
|
||||
'600': '#c88906',
|
||||
'700': '#9f6209',
|
||||
'800': '#844d0f',
|
||||
'900': '#703f13',
|
||||
'950': '#412007',
|
||||
},
|
||||
'mantis': {
|
||||
'50': '#f2faeb',
|
||||
'100': '#dff4d3',
|
||||
'200': '#c2eaac',
|
||||
'300': '#9cdb7b',
|
||||
'400': '#78c850',
|
||||
'500': '#5bae34',
|
||||
'600': '#448a26',
|
||||
'700': '#366a21',
|
||||
'800': '#2d551f',
|
||||
'900': '#29491e',
|
||||
'950': '#12270c',
|
||||
},
|
||||
'morning-glory': {
|
||||
'50': '#f1faf9',
|
||||
'100': '#dbf2f1',
|
||||
'200': '#bbe6e6',
|
||||
'300': '#98d8d8',
|
||||
'400': '#56b9ba',
|
||||
'500': '#3b9d9f',
|
||||
'600': '#348086',
|
||||
'700': '#2f686f',
|
||||
'800': '#2e565c',
|
||||
'900': '#2a494f',
|
||||
'950': '#172f35',
|
||||
},
|
||||
'tall-poppy': {
|
||||
'50': '#fdf4f3',
|
||||
'100': '#fce5e4',
|
||||
'200': '#fbcfcd',
|
||||
'300': '#f7aeaa',
|
||||
'400': '#f07f79',
|
||||
'500': '#e5564e',
|
||||
'600': '#d23930',
|
||||
'700': '#c03028',
|
||||
'800': '#922822',
|
||||
'900': '#7a2722',
|
||||
'950': '#42100d',
|
||||
},
|
||||
'violet-eggplant': {
|
||||
'50': '#fdf6fd',
|
||||
'100': '#f8edfa',
|
||||
'200': '#f1d9f5',
|
||||
'300': '#e8bceb',
|
||||
'400': '#dc93df',
|
||||
'500': '#c868cd',
|
||||
'600': '#ad49b0',
|
||||
'700': '#a040a0',
|
||||
'800': '#773176',
|
||||
'900': '#622d60',
|
||||
'950': '#3f133d',
|
||||
},
|
||||
'apache': {
|
||||
'50': '#fcf9ee',
|
||||
'100': '#f5edd0',
|
||||
'200': '#ebd89c',
|
||||
'300': '#e0c068',
|
||||
'400': '#d9ab46',
|
||||
'500': '#d08f30',
|
||||
'600': '#b77028',
|
||||
'700': '#995324',
|
||||
'800': '#7d4223',
|
||||
'900': '#673820',
|
||||
'950': '#3b1c0d',
|
||||
},
|
||||
'dull-lavender': {
|
||||
'50': '#f6f4fe',
|
||||
'100': '#eeebfc',
|
||||
'200': '#dfd9fb',
|
||||
'300': '#c8bbf7',
|
||||
'400': '#a890f0',
|
||||
'500': '#9069e9',
|
||||
'600': '#8049de',
|
||||
'700': '#7037ca',
|
||||
'800': '#5e2ea9',
|
||||
'900': '#4e278b',
|
||||
'950': '#30175e',
|
||||
},
|
||||
'french-rose': {
|
||||
'50': '#fff1f4',
|
||||
'100': '#ffe4ea',
|
||||
'200': '#fdcedb',
|
||||
'300': '#fca5bd',
|
||||
'400': '#f85888',
|
||||
'500': '#f2417b',
|
||||
'600': '#de2066',
|
||||
'700': '#bc1457',
|
||||
'800': '#9d144f',
|
||||
'900': '#86154a',
|
||||
'950': '#4b0624',
|
||||
},
|
||||
'la-rioja': {
|
||||
'50': '#fcfde8',
|
||||
'100': '#f7f9ce',
|
||||
'200': '#eef3a3',
|
||||
'300': '#e0e96d',
|
||||
'400': '#cddb40',
|
||||
'500': '#a8b820',
|
||||
'600': '#899a16',
|
||||
'700': '#687516',
|
||||
'800': '#525d17',
|
||||
'900': '#464f18',
|
||||
'950': '#242b08',
|
||||
},
|
||||
'sahara': {
|
||||
'50': '#f9f9ed',
|
||||
'100': '#f1f0d0',
|
||||
'200': '#e5e1a3',
|
||||
'300': '#d6cb6e',
|
||||
'400': '#c9b646',
|
||||
'500': '#b8a038',
|
||||
'600': '#a0812e',
|
||||
'700': '#806128',
|
||||
'800': '#6b4f28',
|
||||
'900': '#5d4326',
|
||||
'950': '#352413',
|
||||
},
|
||||
'deluge': {
|
||||
'50': '#f9f8fc',
|
||||
'100': '#f2eff8',
|
||||
'200': '#e7e2f2',
|
||||
'300': '#d5cbe7',
|
||||
'400': '#b9aad6',
|
||||
'500': '#9d88c4',
|
||||
'600': '#856cb1',
|
||||
'700': '#705898',
|
||||
'800': '#5f4b7e',
|
||||
'900': '#4e3e65',
|
||||
'950': '#322447',
|
||||
},
|
||||
'electric-violet': {
|
||||
'50': '#f4f2ff',
|
||||
'100': '#eae8ff',
|
||||
'200': '#d8d4ff',
|
||||
'300': '#bbb1ff',
|
||||
'400': '#9b84ff',
|
||||
'500': '#7a53ff',
|
||||
'600': '#7038f8',
|
||||
'700': '#5c1de4',
|
||||
'800': '#4c18bf',
|
||||
'900': '#40169c',
|
||||
'950': '#260b6a',
|
||||
},
|
||||
'roman-coffee': {
|
||||
'50': '#f6f4f0',
|
||||
'100': '#e7e4da',
|
||||
'200': '#d2c9b6',
|
||||
'300': '#b8a98c',
|
||||
'400': '#a38e6c',
|
||||
'500': '#947d5e',
|
||||
'600': '#7e6650',
|
||||
'700': '#705848',
|
||||
'800': '#58443b',
|
||||
'900': '#4d3d36',
|
||||
'950': '#2b201d',
|
||||
},
|
||||
'blue-haze': {
|
||||
'50': '#f5f5f8',
|
||||
'100': '#ecedf3',
|
||||
'200': '#dcdee9',
|
||||
'300': '#c7c8da',
|
||||
'400': '#b8b8d0',
|
||||
'500': '#9c9aba',
|
||||
'600': '#8883a8',
|
||||
'700': '#767092',
|
||||
'800': '#605c77',
|
||||
'900': '#514e61',
|
||||
'950': '#2f2e38',
|
||||
},
|
||||
'wewak': {
|
||||
'50': '#fdf3f5',
|
||||
'100': '#fce7eb',
|
||||
'200': '#f8d3dc',
|
||||
'300': '#ee99ac',
|
||||
'400': '#ea829b',
|
||||
'500': '#dd567a',
|
||||
'600': '#c83665',
|
||||
'700': '#a82854',
|
||||
'800': '#8d244b',
|
||||
'900': '#792246',
|
||||
'950': '#430e22',
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
content: ["./src/**/*.{liquid,md}", "./src/**/*.svg",],
|
||||
theme: {
|
||||
screens: {
|
||||
'xs': '475px',
|
||||
...defaultTheme.screens,
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
"light-transparent": "rgba(0,0,0,.08)",
|
||||
primary: {
|
||||
'50': colorTokens['mandy']['50'],
|
||||
'100': colorTokens['mandy']['100'],
|
||||
'200': colorTokens['mandy']['200'],
|
||||
'300': colorTokens['mandy']['300'],
|
||||
'400': colorTokens['mandy']['400'],
|
||||
'500': colorTokens['mandy']['500'],
|
||||
DEFAULT: colorTokens['mandy']['500'],
|
||||
'600': colorTokens['mandy']['600'],
|
||||
'700': colorTokens['mandy']['700'],
|
||||
'800': colorTokens['mandy']['800'],
|
||||
'900': colorTokens['mandy']['900'],
|
||||
'950': colorTokens['mandy']['950'],
|
||||
},
|
||||
secondary: {
|
||||
'50': colorTokens['oxford-blue']['50'],
|
||||
'100': colorTokens['oxford-blue']['100'],
|
||||
'200': colorTokens['oxford-blue']['200'],
|
||||
'300': colorTokens['oxford-blue']['300'],
|
||||
'400': colorTokens['oxford-blue']['400'],
|
||||
'500': colorTokens['oxford-blue']['500'],
|
||||
DEFAULT: colorTokens['oxford-blue']['500'],
|
||||
'600': colorTokens['oxford-blue']['600'],
|
||||
'700': colorTokens['oxford-blue']['700'],
|
||||
'800': colorTokens['oxford-blue']['800'],
|
||||
'900': colorTokens['oxford-blue']['900'],
|
||||
'950': colorTokens['oxford-blue']['950'],
|
||||
},
|
||||
normal: {
|
||||
'50': colorTokens['green-smoke']['50'],
|
||||
'100': colorTokens['green-smoke']['100'],
|
||||
'200': colorTokens['green-smoke']['200'],
|
||||
'300': colorTokens['green-smoke']['300'],
|
||||
'400': colorTokens['green-smoke']['400'],
|
||||
DEFAULT: colorTokens['green-smoke']['400'],
|
||||
'500': colorTokens['green-smoke']['500'],
|
||||
'600': colorTokens['green-smoke']['600'],
|
||||
'700': colorTokens['green-smoke']['700'],
|
||||
'800': colorTokens['green-smoke']['800'],
|
||||
'900': colorTokens['green-smoke']['900'],
|
||||
'950': colorTokens['green-smoke']['950'],
|
||||
},
|
||||
fire: {
|
||||
'50': colorTokens['jaffa']['50'],
|
||||
'100': colorTokens['jaffa']['100'],
|
||||
'200': colorTokens['jaffa']['200'],
|
||||
'300': colorTokens['jaffa']['300'],
|
||||
'400': colorTokens['jaffa']['400'],
|
||||
DEFAULT: colorTokens['jaffa']['500'],
|
||||
'500': colorTokens['jaffa']['500'],
|
||||
'600': colorTokens['jaffa']['600'],
|
||||
'700': colorTokens['jaffa']['700'],
|
||||
'800': colorTokens['jaffa']['800'],
|
||||
'900': colorTokens['jaffa']['900'],
|
||||
'950': colorTokens['jaffa']['950'],
|
||||
},
|
||||
water: {
|
||||
'50': colorTokens['cornflower-blue']['50'],
|
||||
'100': colorTokens['cornflower-blue']['100'],
|
||||
'200': colorTokens['cornflower-blue']['200'],
|
||||
'300': colorTokens['cornflower-blue']['300'],
|
||||
'400': colorTokens['cornflower-blue']['400'],
|
||||
DEFAULT: colorTokens['cornflower-blue']['500'],
|
||||
'500': colorTokens['cornflower-blue']['500'],
|
||||
'600': colorTokens['cornflower-blue']['600'],
|
||||
'700': colorTokens['cornflower-blue']['700'],
|
||||
'800': colorTokens['cornflower-blue']['800'],
|
||||
'900': colorTokens['cornflower-blue']['900'],
|
||||
'950': colorTokens['cornflower-blue']['950'],
|
||||
},
|
||||
electric: {
|
||||
'50': colorTokens['bright-sun']['50'],
|
||||
'100': colorTokens['bright-sun']['100'],
|
||||
'200': colorTokens['bright-sun']['200'],
|
||||
'300': colorTokens['bright-sun']['300'],
|
||||
'400': colorTokens['bright-sun']['400'],
|
||||
DEFAULT: colorTokens['bright-sun']['400'],
|
||||
'500': colorTokens['bright-sun']['500'],
|
||||
'600': colorTokens['bright-sun']['600'],
|
||||
'700': colorTokens['bright-sun']['700'],
|
||||
'800': colorTokens['bright-sun']['800'],
|
||||
'900': colorTokens['bright-sun']['900'],
|
||||
'950': colorTokens['bright-sun']['950'],
|
||||
},
|
||||
grass: {
|
||||
'50': colorTokens['mantis']['50'],
|
||||
'100': colorTokens['mantis']['100'],
|
||||
'200': colorTokens['mantis']['200'],
|
||||
'300': colorTokens['mantis']['300'],
|
||||
'400': colorTokens['mantis']['400'],
|
||||
DEFAULT: colorTokens['mantis']['400'],
|
||||
'500': colorTokens['mantis']['500'],
|
||||
'600': colorTokens['mantis']['600'],
|
||||
'700': colorTokens['mantis']['700'],
|
||||
'800': colorTokens['mantis']['800'],
|
||||
'900': colorTokens['mantis']['900'],
|
||||
'950': colorTokens['mantis']['950'],
|
||||
},
|
||||
ice: {
|
||||
'50': colorTokens['morning-glory']['50'],
|
||||
'100': colorTokens['morning-glory']['100'],
|
||||
'200': colorTokens['morning-glory']['200'],
|
||||
'300': colorTokens['morning-glory']['300'],
|
||||
'400': colorTokens['morning-glory']['400'],
|
||||
DEFAULT: colorTokens['morning-glory']['300'],
|
||||
'500': colorTokens['morning-glory']['500'],
|
||||
'600': colorTokens['morning-glory']['600'],
|
||||
'700': colorTokens['morning-glory']['700'],
|
||||
'800': colorTokens['morning-glory']['800'],
|
||||
'900': colorTokens['morning-glory']['900'],
|
||||
'950': colorTokens['morning-glory']['950'],
|
||||
},
|
||||
fighting: {
|
||||
'50': colorTokens['tall-poppy']['50'],
|
||||
'100': colorTokens['tall-poppy']['100'],
|
||||
'200': colorTokens['tall-poppy']['200'],
|
||||
'300': colorTokens['tall-poppy']['300'],
|
||||
'400': colorTokens['tall-poppy']['400'],
|
||||
DEFAULT: colorTokens['tall-poppy']['700'],
|
||||
'500': colorTokens['tall-poppy']['500'],
|
||||
'600': colorTokens['tall-poppy']['600'],
|
||||
'700': colorTokens['tall-poppy']['700'],
|
||||
'800': colorTokens['tall-poppy']['800'],
|
||||
'900': colorTokens['tall-poppy']['900'],
|
||||
'950': colorTokens['tall-poppy']['950'],
|
||||
},
|
||||
poison: {
|
||||
'50': colorTokens['violet-eggplant']['50'],
|
||||
'100': colorTokens['violet-eggplant']['100'],
|
||||
'200': colorTokens['violet-eggplant']['200'],
|
||||
'300': colorTokens['violet-eggplant']['300'],
|
||||
'400': colorTokens['violet-eggplant']['400'],
|
||||
DEFAULT: colorTokens['violet-eggplant']['700'],
|
||||
'500': colorTokens['violet-eggplant']['500'],
|
||||
'600': colorTokens['violet-eggplant']['600'],
|
||||
'700': colorTokens['violet-eggplant']['700'],
|
||||
'800': colorTokens['violet-eggplant']['800'],
|
||||
'900': colorTokens['violet-eggplant']['900'],
|
||||
'950': colorTokens['violet-eggplant']['950'],
|
||||
},
|
||||
ground: {
|
||||
'50': colorTokens['apache']['50'],
|
||||
'100': colorTokens['apache']['100'],
|
||||
'200': colorTokens['apache']['200'],
|
||||
'300': colorTokens['apache']['300'],
|
||||
'400': colorTokens['apache']['400'],
|
||||
DEFAULT: colorTokens['apache']['300'],
|
||||
'500': colorTokens['apache']['500'],
|
||||
'600': colorTokens['apache']['600'],
|
||||
'700': colorTokens['apache']['700'],
|
||||
'800': colorTokens['apache']['800'],
|
||||
'900': colorTokens['apache']['900'],
|
||||
'950': colorTokens['apache']['950'],
|
||||
},
|
||||
flying: {
|
||||
'50': colorTokens['dull-lavender']['50'],
|
||||
'100': colorTokens['dull-lavender']['100'],
|
||||
'200': colorTokens['dull-lavender']['200'],
|
||||
'300': colorTokens['dull-lavender']['300'],
|
||||
'400': colorTokens['dull-lavender']['400'],
|
||||
DEFAULT: colorTokens['dull-lavender']['400'],
|
||||
'500': colorTokens['dull-lavender']['500'],
|
||||
'600': colorTokens['dull-lavender']['600'],
|
||||
'700': colorTokens['dull-lavender']['700'],
|
||||
'800': colorTokens['dull-lavender']['800'],
|
||||
'900': colorTokens['dull-lavender']['900'],
|
||||
'950': colorTokens['dull-lavender']['950'],
|
||||
},
|
||||
psychic: {
|
||||
'50': colorTokens['french-rose']['50'],
|
||||
'100': colorTokens['french-rose']['100'],
|
||||
'200': colorTokens['french-rose']['200'],
|
||||
'300': colorTokens['french-rose']['300'],
|
||||
'400': colorTokens['french-rose']['400'],
|
||||
DEFAULT: colorTokens['french-rose']['400'],
|
||||
'500': colorTokens['french-rose']['500'],
|
||||
'600': colorTokens['french-rose']['600'],
|
||||
'700': colorTokens['french-rose']['700'],
|
||||
'800': colorTokens['french-rose']['800'],
|
||||
'900': colorTokens['french-rose']['900'],
|
||||
'950': colorTokens['french-rose']['950'],
|
||||
},
|
||||
bug: {
|
||||
'50': colorTokens['la-rioja']['50'],
|
||||
'100': colorTokens['la-rioja']['100'],
|
||||
'200': colorTokens['la-rioja']['200'],
|
||||
'300': colorTokens['la-rioja']['300'],
|
||||
'400': colorTokens['la-rioja']['400'],
|
||||
DEFAULT: colorTokens['la-rioja']['500'],
|
||||
'500': colorTokens['la-rioja']['500'],
|
||||
'600': colorTokens['la-rioja']['600'],
|
||||
'700': colorTokens['la-rioja']['700'],
|
||||
'800': colorTokens['la-rioja']['800'],
|
||||
'900': colorTokens['la-rioja']['900'],
|
||||
'950': colorTokens['la-rioja']['950'],
|
||||
},
|
||||
rock: {
|
||||
'50': colorTokens['sahara']['50'],
|
||||
'100': colorTokens['sahara']['100'],
|
||||
'200': colorTokens['sahara']['200'],
|
||||
'300': colorTokens['sahara']['300'],
|
||||
'400': colorTokens['sahara']['400'],
|
||||
DEFAULT: colorTokens['sahara']['500'],
|
||||
'500': colorTokens['sahara']['500'],
|
||||
'600': colorTokens['sahara']['600'],
|
||||
'700': colorTokens['sahara']['700'],
|
||||
'800': colorTokens['sahara']['800'],
|
||||
'900': colorTokens['sahara']['900'],
|
||||
'950': colorTokens['sahara']['950'],
|
||||
},
|
||||
ghost: {
|
||||
'50': colorTokens['deluge']['50'],
|
||||
'100': colorTokens['deluge']['100'],
|
||||
'200': colorTokens['deluge']['200'],
|
||||
'300': colorTokens['deluge']['300'],
|
||||
'400': colorTokens['deluge']['400'],
|
||||
DEFAULT: colorTokens['deluge']['700'],
|
||||
'500': colorTokens['deluge']['500'],
|
||||
'600': colorTokens['deluge']['600'],
|
||||
'700': colorTokens['deluge']['700'],
|
||||
'800': colorTokens['deluge']['800'],
|
||||
'900': colorTokens['deluge']['900'],
|
||||
'950': colorTokens['deluge']['950'],
|
||||
},
|
||||
dragon: {
|
||||
'50': colorTokens['electric-violet']['50'],
|
||||
'100': colorTokens['electric-violet']['100'],
|
||||
'200': colorTokens['electric-violet']['200'],
|
||||
'300': colorTokens['electric-violet']['300'],
|
||||
'400': colorTokens['electric-violet']['400'],
|
||||
DEFAULT: colorTokens['electric-violet']['600'],
|
||||
'500': colorTokens['electric-violet']['500'],
|
||||
'600': colorTokens['electric-violet']['600'],
|
||||
'700': colorTokens['electric-violet']['700'],
|
||||
'800': colorTokens['electric-violet']['800'],
|
||||
'900': colorTokens['electric-violet']['900'],
|
||||
'950': colorTokens['electric-violet']['950'],
|
||||
},
|
||||
dark: {
|
||||
'50': colorTokens['roman-coffee']['50'],
|
||||
'100': colorTokens['roman-coffee']['100'],
|
||||
'200': colorTokens['roman-coffee']['200'],
|
||||
'300': colorTokens['roman-coffee']['300'],
|
||||
'400': colorTokens['roman-coffee']['400'],
|
||||
DEFAULT: colorTokens['roman-coffee']['700'],
|
||||
'500': colorTokens['roman-coffee']['500'],
|
||||
'600': colorTokens['roman-coffee']['600'],
|
||||
'700': colorTokens['roman-coffee']['700'],
|
||||
'800': colorTokens['roman-coffee']['800'],
|
||||
'900': colorTokens['roman-coffee']['900'],
|
||||
'950': colorTokens['roman-coffee']['950'],
|
||||
},
|
||||
steel: {
|
||||
'50': colorTokens['blue-haze']['50'],
|
||||
'100': colorTokens['blue-haze']['100'],
|
||||
'200': colorTokens['blue-haze']['200'],
|
||||
'300': colorTokens['blue-haze']['300'],
|
||||
'400': colorTokens['blue-haze']['400'],
|
||||
DEFAULT: colorTokens['blue-haze']['400'],
|
||||
'500': colorTokens['blue-haze']['500'],
|
||||
'600': colorTokens['blue-haze']['600'],
|
||||
'700': colorTokens['blue-haze']['700'],
|
||||
'800': colorTokens['blue-haze']['800'],
|
||||
'900': colorTokens['blue-haze']['900'],
|
||||
'950': colorTokens['blue-haze']['950'],
|
||||
},
|
||||
fairy: {
|
||||
'50': colorTokens['wewak']['50'],
|
||||
'100': colorTokens['wewak']['100'],
|
||||
'200': colorTokens['wewak']['200'],
|
||||
'300': colorTokens['wewak']['300'],
|
||||
'400': colorTokens['wewak']['400'],
|
||||
DEFAULT: colorTokens['wewak']['300'],
|
||||
'500': colorTokens['wewak']['500'],
|
||||
'600': colorTokens['wewak']['600'],
|
||||
'700': colorTokens['wewak']['700'],
|
||||
'800': colorTokens['wewak']['800'],
|
||||
'900': colorTokens['wewak']['900'],
|
||||
'950': colorTokens['wewak']['950'],
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue