Cleaned up footer, added tailwind purge

This commit is contained in:
Corey 2020-05-26 13:03:29 +08:00
parent f99c118910
commit 2d66b6b930
3 changed files with 266 additions and 3 deletions

View file

@ -108,7 +108,7 @@
href="#"
class="flex flex-col items-center justify-center text-gray-700 rounded shadow hover:shadow-xl bg-white cursor-pointer transition duration-150 ease-in-out h-48"
>
<img x-bind:src="item.icon_path" alt="copy" />
<img x-bind:src="item.icon_path" x-bind:alt="item.icon_name" />
<p
class="text-xs leading-none text-center mt-8"
x-text="item.icon_name"
@ -117,8 +117,10 @@
</a>
</template>
</div>
<footer class="py-8 mx-8 border-t border-gray-300 text-gray-600">
Project by
<footer
class="flex flex-row py-8 mx-8 border-t border-gray-300 text-gray-600"
>
Project by&nbsp;
<a
href="https://twitter.com/CoreyGinnivan"
rel="noreferrer"
@ -126,6 +128,7 @@
class="text-black hover:underline"
>Corey Ginnivan</a
>
<span class="ml-auto">Use how you want, without attribution</span>
</footer>
<script>
var sourceData = [

259
src/js/icons.js Normal file
View file

@ -0,0 +1,259 @@
var sourceData = [
{
id: "1",
icon_name: "Cog",
icon_path: "images/copy.svg",
icon_keywords: "cog, settings",
},
{
id: "2",
icon_name: "User",
icon_path: "images/copy.svg",
icon_keywords: "user, people, person, avatar",
},
{
id: "3",
icon_name: "Heart",
icon_path: "images/copy.svg",
icon_keywords: "heart, love, beating",
},
{
id: "4",
icon_name: "Filter",
icon_path: "images/copy.svg",
icon_keywords: "filter, filtering",
},
{
id: "5",
icon_name: "Add",
icon_path: "images/copy.svg",
icon_keywords: "add, plus",
},
{
id: "6",
icon_name: "Minus",
icon_path: "images/copy.svg",
icon_keywords: "minus, negative",
},
{
id: "7",
icon_name: "Remove",
icon_path: "images/copy.svg",
icon_keywords: "remove, minus, negative, trash, bin",
},
{
id: "8",
icon_name: "Email",
icon_path: "images/copy.svg",
icon_keywords: "email, send",
},
{
id: "9",
icon_name: "Battery",
icon_path: "images/copy.svg",
icon_keywords: "copy",
},
{
id: "10",
icon_name: "Battery - Empty",
icon_path: "images/copy.svg",
icon_keywords: "battery, charge, energy",
},
{
id: "11",
icon_name: "Battery - Half",
icon_path: "images/copy.svg",
icon_keywords: "battery, half, charged, energy",
},
{
id: "12",
icon_name: "Battery - Full",
icon_path: "images/copy.svg",
icon_keywords: "battery, full, charged, energy",
},
{
id: "13",
icon_name: "Dashboard",
icon_path: "images/copy.svg",
icon_keywords: "dashboard",
},
{
id: "14",
icon_name: "External",
icon_path: "images/copy.svg",
icon_keywords: "external",
},
{
id: "15",
icon_name: "Send",
icon_path: "images/copy.svg",
icon_keywords: "send, email",
},
{
id: "16",
icon_name: "Favourite",
icon_path: "images/copy.svg",
icon_keywords: "favourite, favorite",
},
{
id: "17",
icon_name: "News",
icon_path: "images/copy.svg",
icon_keywords: "news, book, paper, zeitgeist",
},
{
id: "18",
icon_name: "Copy",
icon_path: "images/copy.svg",
icon_keywords: "copy, duplicate, replicate",
},
{
id: "19",
icon_name: "Duplicate",
icon_path: "images/copy.svg",
icon_keywords: "copy, duplicate, replicate",
},
{
id: "20",
icon_name: "3D",
icon_path: "images/copy.svg",
icon_keywords: "3D",
},
{
id: "21",
icon_name: "Cog",
icon_path: "images/copy.svg",
icon_keywords: "cog, settings",
},
{
id: "22",
icon_name: "User",
icon_path: "images/copy.svg",
icon_keywords: "user, people, person, avatar",
},
{
id: "23",
icon_name: "Heart",
icon_path: "images/copy.svg",
icon_keywords: "heart, love, beating",
},
{
id: "24",
icon_name: "Filter",
icon_path: "images/copy.svg",
icon_keywords: "filter, filtering",
},
{
id: "25",
icon_name: "Add",
icon_path: "images/copy.svg",
icon_keywords: "add, plus",
},
{
id: "26",
icon_name: "Minus",
icon_path: "images/copy.svg",
icon_keywords: "minus, negative",
},
{
id: "27",
icon_name: "Remove",
icon_path: "images/copy.svg",
icon_keywords: "remove, minus, negative, trash, bin",
},
{
id: "28",
icon_name: "Email",
icon_path: "images/copy.svg",
icon_keywords: "email, send",
},
{
id: "29",
icon_name: "Battery",
icon_path: "images/copy.svg",
icon_keywords: "copy",
},
{
id: "30",
icon_name: "Battery - Empty",
icon_path: "images/copy.svg",
icon_keywords: "battery, charge, energy",
},
{
id: "31",
icon_name: "Battery - Half",
icon_path: "images/copy.svg",
icon_keywords: "battery, half, charged, energy",
},
{
id: "32",
icon_name: "Battery - Full",
icon_path: "images/copy.svg",
icon_keywords: "battery, full, charged, energy",
},
{
id: "33",
icon_name: "Dashboard",
icon_path: "images/copy.svg",
icon_keywords: "dashboard",
},
{
id: "34",
icon_name: "External",
icon_path: "images/copy.svg",
icon_keywords: "external",
},
{
id: "35",
icon_name: "Send",
icon_path: "images/copy.svg",
icon_keywords: "send, email",
},
{
id: "36",
icon_name: "Favourite",
icon_path: "images/copy.svg",
icon_keywords: "favourite, favorite",
},
{
id: "37",
icon_name: "News",
icon_path: "images/copy.svg",
icon_keywords: "news, book, paper, zeitgeist",
},
{
id: "38",
icon_name: "Copy",
icon_path: "images/copy.svg",
icon_keywords: "copy, duplicate, replicate",
},
{
id: "39",
icon_name: "Duplicate",
icon_path: "images/copy.svg",
icon_keywords: "copy, duplicate, replicate",
},
{
id: "40",
icon_name: "3D",
icon_path: "images/copy.svg",
icon_keywords: "3D",
},
];
function loadIcons() {
return {
search: "",
myForData: sourceData,
get filteredIcons() {
if (this.search === "") {
return this.myForData;
}
return this.myForData.filter((item) => {
return item.icon_keywords
.toLowerCase()
.includes(this.search.toLowerCase());
});
},
};
}

View file

@ -1,4 +1,5 @@
module.exports = {
purge: ["./src/**/*.html"],
theme: {
fontFamily: {
mono: [