v2.4 icon added
This commit is contained in:
parent
f48355078b
commit
7bd9f80d93
|
|
@ -0,0 +1,488 @@
|
|||
Vue.component('icon', {
|
||||
template: `
|
||||
<div class="single-icon">
|
||||
<span
|
||||
v-bind:class="this.class"
|
||||
v-on:click="copyToClipboard(utf8)"
|
||||
class="actual-icon"
|
||||
ref="icon"></span>
|
||||
<span
|
||||
class="copy-icon-popup"
|
||||
v-bind:class="{ 'success': isCopied}"
|
||||
ref="element">Copied!</span>
|
||||
<p
|
||||
class="icon-name"
|
||||
v-on:click="copyToClipboard(span)"
|
||||
ref="span">{{ this.name }}</p>
|
||||
</div>
|
||||
`,
|
||||
props: ['name'],
|
||||
data() {
|
||||
return {
|
||||
utf8: '',
|
||||
isCopied: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
class: function () {
|
||||
return "brz9-icon-" + this.name;
|
||||
},
|
||||
span: function () {
|
||||
return '<span class="brz9-icon-' + this.name + '"></span>';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
copyToClipboard(text) {
|
||||
const textarea = document.createElement('textarea')
|
||||
textarea.value = text
|
||||
document.body.appendChild(textarea)
|
||||
textarea.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(textarea)
|
||||
this.copyDone();
|
||||
},
|
||||
copyDone() {
|
||||
this.isCopied = true;
|
||||
this.$refs.element.addEventListener('animationend', () => {
|
||||
this.isCopied = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
query = '.' + this.class
|
||||
let span = document.querySelector(query)
|
||||
let style = window.getComputedStyle(span, ':before')
|
||||
let content = style.getPropertyValue('content')
|
||||
console.log(content)
|
||||
this.utf8 = content.replace('"', '').replace('"', '')
|
||||
}
|
||||
})
|
||||
|
||||
let vm = new Vue({
|
||||
data() {
|
||||
return {
|
||||
os: [
|
||||
"gnu",
|
||||
"debian",
|
||||
"yunohost",
|
||||
"void",
|
||||
"archlinux",
|
||||
"gentoo",
|
||||
"redhat",
|
||||
"fedora",
|
||||
"manjaro",
|
||||
"linuxmint",
|
||||
"freebsd",
|
||||
"apple",
|
||||
"windows"
|
||||
],
|
||||
streaming: [
|
||||
"bandcamp",
|
||||
"spotify",
|
||||
"applemusic",
|
||||
"soundcloud",
|
||||
"tidal"
|
||||
],
|
||||
payment: [
|
||||
"cart",
|
||||
"price-tag",
|
||||
"price-tags",
|
||||
"barcode",
|
||||
"qrcode",
|
||||
"ticket",
|
||||
"credit-card",
|
||||
"visa",
|
||||
"mastercard",
|
||||
"applepay",
|
||||
"paypal",
|
||||
"stripe",
|
||||
"bitcoin",
|
||||
"dash",
|
||||
"monero",
|
||||
"ethereum",
|
||||
"ltc",
|
||||
"woocommerce",
|
||||
"liberapay",
|
||||
"patreon",
|
||||
"tipeee",
|
||||
"flattr"
|
||||
],
|
||||
navigation: [
|
||||
"arrow-down",
|
||||
"arrow-down-left",
|
||||
"arrow-down-right",
|
||||
"arrow-left",
|
||||
"arrow-right",
|
||||
"arrow-up",
|
||||
"arrow-up-left",
|
||||
"arrow-up-right",
|
||||
"chevron-circle-down",
|
||||
"chevron-circle-left",
|
||||
"chevron-circle-right",
|
||||
"chevron-circle-up",
|
||||
"chevron-down",
|
||||
"chevron-left",
|
||||
"chevron-right",
|
||||
"chevron-up",
|
||||
"circle-down",
|
||||
"circle-left",
|
||||
"circle-right",
|
||||
"circle-up",
|
||||
"zoom-in",
|
||||
"zoom-out",
|
||||
"undo",
|
||||
"redo",
|
||||
"undo-arrow",
|
||||
"redo-arrow",
|
||||
"forward-arrow",
|
||||
"reply-arrow",
|
||||
"envelope",
|
||||
"envelope-open",
|
||||
"bubble",
|
||||
"bubbles",
|
||||
"bubbles2",
|
||||
"shrink",
|
||||
"shrink2",
|
||||
"enlarge",
|
||||
"enlarge2",
|
||||
"share",
|
||||
"share-out",
|
||||
"search",
|
||||
"plus",
|
||||
"minus",
|
||||
"cross",
|
||||
"checkmark",
|
||||
"checkmark-outline",
|
||||
"link",
|
||||
"embed",
|
||||
"embed-slash"
|
||||
],
|
||||
form: [
|
||||
"radio-checked",
|
||||
"radio-checked-alt",
|
||||
"radio-unchecked",
|
||||
"checkbox-checked",
|
||||
"checkbox-unchecked"
|
||||
],
|
||||
network: [
|
||||
"tree",
|
||||
"cloud",
|
||||
"cloud-check",
|
||||
"cloud-download",
|
||||
"cloud-upload",
|
||||
"upload",
|
||||
"download",
|
||||
"switch",
|
||||
"sphere",
|
||||
"earth",
|
||||
"power",
|
||||
"power-cord",
|
||||
"wifi"
|
||||
],
|
||||
alert: [
|
||||
"warning",
|
||||
"info",
|
||||
"question",
|
||||
"cancel-circle",
|
||||
"blocked",
|
||||
"notification",
|
||||
"floppy-disk",
|
||||
"trophy",
|
||||
"newspaper",
|
||||
"pacman",
|
||||
"music",
|
||||
"leaf",
|
||||
"gift",
|
||||
"flag",
|
||||
"bug",
|
||||
"bell",
|
||||
"bin",
|
||||
"bin-alt",
|
||||
"book",
|
||||
"books",
|
||||
"bookmark",
|
||||
"bookmarks",
|
||||
"attachment",
|
||||
"address-book",
|
||||
"accessibility"
|
||||
],
|
||||
time: [
|
||||
"calendar",
|
||||
"clock",
|
||||
"clock2",
|
||||
"alarm"
|
||||
],
|
||||
login: [
|
||||
"user",
|
||||
"users",
|
||||
"enter",
|
||||
"exit",
|
||||
"equalizer",
|
||||
"equalizer2",
|
||||
"cog"
|
||||
],
|
||||
afknav: [
|
||||
"compass",
|
||||
"compass2",
|
||||
"location",
|
||||
"location2",
|
||||
"map",
|
||||
"map2",
|
||||
"home",
|
||||
"office",
|
||||
"lab",
|
||||
"binoculars"
|
||||
],
|
||||
fediverse: [
|
||||
"mastodon",
|
||||
"diaspora",
|
||||
"peertube",
|
||||
"pixelfed",
|
||||
"rss",
|
||||
"rss-square"
|
||||
],
|
||||
socials: [
|
||||
"instagram",
|
||||
"threads",
|
||||
"twitter",
|
||||
"x",
|
||||
"wordpress",
|
||||
"nextcloud",
|
||||
"dropbox",
|
||||
"vk",
|
||||
"tripadvisor",
|
||||
"facebook",
|
||||
"tiktok",
|
||||
"twitch",
|
||||
"kick",
|
||||
"vimeo",
|
||||
"youtube",
|
||||
"reddit",
|
||||
"blogger",
|
||||
"medium",
|
||||
"linkedin",
|
||||
"fiverr",
|
||||
"stackoverflow",
|
||||
"quora",
|
||||
"pinterest",
|
||||
"tumblr",
|
||||
"unsplash",
|
||||
"pexels",
|
||||
"behance",
|
||||
"deviantart",
|
||||
"dribbble",
|
||||
"notion",
|
||||
"pocket",
|
||||
"feedly",
|
||||
"steam"
|
||||
],
|
||||
privacy: [
|
||||
"gpg",
|
||||
"tor",
|
||||
"signal",
|
||||
"ublockorigin",
|
||||
"riot"
|
||||
],
|
||||
spyware: [
|
||||
"telegram",
|
||||
"discord",
|
||||
"whatsapp",
|
||||
"skype",
|
||||
"slack",
|
||||
"messenger"
|
||||
],
|
||||
edit: [
|
||||
"bold",
|
||||
"italic",
|
||||
"underline",
|
||||
"strikethrough",
|
||||
"ligature",
|
||||
"sigma",
|
||||
"omega",
|
||||
"text-height",
|
||||
"text-width",
|
||||
"font-size",
|
||||
"paragraph-center",
|
||||
"paragraph-justify",
|
||||
"paragraph-left",
|
||||
"paragraph-right",
|
||||
"stats-bars",
|
||||
"stats-dots",
|
||||
"pie-chart",
|
||||
"scissors",
|
||||
"crop",
|
||||
"quill",
|
||||
"pen",
|
||||
"pencil",
|
||||
"pencil2",
|
||||
"quotes-left",
|
||||
"quotes-right",
|
||||
"copy",
|
||||
"paste",
|
||||
"paint-format",
|
||||
"eyedropper",
|
||||
"droplet",
|
||||
"list-numbered",
|
||||
"list-check",
|
||||
"list-bullet",
|
||||
"filter",
|
||||
"sort-alpha-asc",
|
||||
"sort-alpha-desc",
|
||||
"sort-numberic-desc",
|
||||
"sort-numeric-asc",
|
||||
"table",
|
||||
"table2"
|
||||
],
|
||||
ratings: [
|
||||
"star-empty",
|
||||
"star-full",
|
||||
"star-half",
|
||||
"heart",
|
||||
"heart-broken"
|
||||
],
|
||||
keyboard: [
|
||||
"tab",
|
||||
"shift",
|
||||
"ctrl",
|
||||
"opt",
|
||||
"command"
|
||||
],
|
||||
media: [
|
||||
"play",
|
||||
"pause",
|
||||
"stop",
|
||||
"previous",
|
||||
"next",
|
||||
"backward",
|
||||
"forward",
|
||||
"first",
|
||||
"last",
|
||||
"play-circle",
|
||||
"pause-circle",
|
||||
"stop-circle",
|
||||
"previous-circle",
|
||||
"next-circle",
|
||||
"backward-circle",
|
||||
"forward-circle",
|
||||
"volume-decrease",
|
||||
"volume-increase",
|
||||
"volume-mute",
|
||||
"volume-mute2",
|
||||
"volume-low",
|
||||
"volume-medium",
|
||||
"volume-high",
|
||||
"loop",
|
||||
"loop2",
|
||||
"shuffle",
|
||||
"infinite",
|
||||
"play-yt",
|
||||
"eject",
|
||||
"airplayaudio",
|
||||
"airplayvideo"
|
||||
],
|
||||
files: [
|
||||
"folder",
|
||||
"folder-open",
|
||||
"folder-download",
|
||||
"folder-upload",
|
||||
"folder-plus",
|
||||
"folder-minus",
|
||||
"image",
|
||||
"images",
|
||||
"file-empty",
|
||||
"file-music",
|
||||
"file-picture",
|
||||
"file-play",
|
||||
"file-text2",
|
||||
"file-video",
|
||||
"file-zip",
|
||||
"files-empty",
|
||||
"box-add",
|
||||
"box-remove",
|
||||
"film"
|
||||
],
|
||||
devices: [
|
||||
"display",
|
||||
"tablet",
|
||||
"mobile",
|
||||
"tv",
|
||||
"video-camera",
|
||||
"camera",
|
||||
"headphones",
|
||||
"mic",
|
||||
"printer",
|
||||
"keyboard",
|
||||
"phone",
|
||||
"phone-hang-up",
|
||||
"raspberrypi",
|
||||
"arduino",
|
||||
"terminal"
|
||||
],
|
||||
screen: [
|
||||
"sun",
|
||||
"brightness-contrast",
|
||||
"contrast",
|
||||
"eye",
|
||||
"eye-blocked",
|
||||
"eye-minus",
|
||||
"eye-plus"
|
||||
],
|
||||
programing: [
|
||||
"c",
|
||||
"go",
|
||||
"python",
|
||||
"ruby",
|
||||
"rust",
|
||||
"php",
|
||||
"vue-dot-js",
|
||||
"react",
|
||||
"angular",
|
||||
"svelte",
|
||||
"npm",
|
||||
"html5",
|
||||
"css3",
|
||||
"javascript",
|
||||
"typescript",
|
||||
"postgresql",
|
||||
"docker",
|
||||
"git",
|
||||
"gitea",
|
||||
"github",
|
||||
"gitlab",
|
||||
"openai",
|
||||
"jupyter",
|
||||
"fastapi",
|
||||
"blender",
|
||||
"adobe",
|
||||
"inkscape",
|
||||
"affinitydesigner",
|
||||
"affinityphoto",
|
||||
"affinitypublisher",
|
||||
""
|
||||
],
|
||||
spinners: [
|
||||
"spinner",
|
||||
"spinner2",
|
||||
"spinner3"
|
||||
],
|
||||
license: [
|
||||
"cc",
|
||||
"cc-zero",
|
||||
"cc-sa",
|
||||
"cc-nd",
|
||||
"cc-nc",
|
||||
"cc-remix",
|
||||
"cc-by",
|
||||
"cc-share",
|
||||
"amicale",
|
||||
"gpl",
|
||||
"lgpl",
|
||||
"agpl",
|
||||
"wtfpl",
|
||||
"ofl",
|
||||
"mit",
|
||||
"bsd"
|
||||
]
|
||||
}
|
||||
}
|
||||
}).$mount('#root')
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.4/brz9-v2.4.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="root">
|
||||
|
||||
<main>
|
||||
<h1>Icon font</h1>
|
||||
<p>This icon font was created with <a href="https://icomoon.io/" target="_blank" rel="noopener noreferrer" class="ext">Icomoon</a>. I tried to group them by category. You can download the whole pack as a zip <a href="https://file.brz9.dev/cdn/fonts/brz9-v2.4.zip" target="_blank" rel="noopener noreferrer" class="ext">here</a>. This page can be used to copy the utf8 characters by clicking on the icons. This can be useful to use them in Inkscape or GIMP after installing the .ttf file on your computer. By clicking on the name of the icon, the html span with the appropriate class in your clipboard.</p>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#icon-os">OS</a></li>
|
||||
<li><a href="#icon-mu">Music Streaming</a></li>
|
||||
<li><a href="#icon-pay">Payment</a></li>
|
||||
<li><a href="#icon-nav">Navigation</a></li>
|
||||
<li><a href="#icon-form">Form</a></li>
|
||||
<li><a href="#icon-network">Network</a></li>
|
||||
<li><a href="#icon-alert">Alert</a></li>
|
||||
<li><a href="#icon-time">Time</a></li>
|
||||
<li><a href="#icon-fediverse">Fediverse</a></li>
|
||||
<li><a href="#icon-social">Social Network</a></li>
|
||||
<li><a href="#icon-privacy">Privacy</a></li>
|
||||
<li><a href="#icon-communication">Communication</a></li>
|
||||
<li><a href="#icon-edit">Edit</a></li>
|
||||
<li><a href="#icon-keyboard">Keyboard</a></li>
|
||||
<li><a href="#icon-media">Media</a></li>
|
||||
<li><a href="#icon-file">Files</a></li>
|
||||
<li><a href="#icon-device">Devices</a></li>
|
||||
<li><a href="#icon-screen">Screen</a></li>
|
||||
<li><a href="#icon-programming">Programming</a></li>
|
||||
<li><a href="#icon-spin">Spinners</a></li>
|
||||
<li><a href="#icon-license">License</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<h2 id="icon-os">OS</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in os" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-mu">Music Streaming</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in streaming" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-pay">Payment</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in payment" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-nav">Navigation</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in navigation" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-form">Form</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in form" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-network">Network</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in network" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-alert">Alert</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in alert" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-time">Time</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in time" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-login">Login</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in login" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-afknav">AFK Navigation</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in afknav" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-fediverse">Fediverse</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in fediverse" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-social">Social Network</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in socials" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-privacy">Privacy</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in privacy" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-communication">Communication</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in spyware" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-edit">Edit</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in edit" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-keyboard">Keyboard</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in keyboard" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-media">Media</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in media" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-file">Files</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in files" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-device">Devices</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in devices" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-screen">Screen</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in screen" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-programming">Programming</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in programing" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-spin">Spinners</h2>
|
||||
<p>To make this kind of spinner:</p>
|
||||
<div class="spindemo">
|
||||
<span class="brz9-icon-spinner2"></span>
|
||||
</div>
|
||||
<p>You can use the following:</p>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in spinners" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="icon-license">License</h2>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in license" :key="icon">
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#root" class="go-up" alt="">
|
||||
<span class="brz9-icon-chevron-up"></span>
|
||||
</a>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
<script src="https://ed.brz9.dev/assets/js/vue.min.js"></script>
|
||||
<script src="icons.js"></script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
@import url(../../assets/css/style.css);
|
||||
|
||||
div.single-icon {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.single-icon p {
|
||||
margin-top: 15px;
|
||||
font-size: 1rem;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
div.single-icon span.actual-icon {
|
||||
font-size: 2rem;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
div.single-icon span.actual-icon::before {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
span.copy-icon-popup {
|
||||
position: absolute;
|
||||
background-color: var(--success);
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
padding: 10px;
|
||||
transform: rotate(12deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
span.copy-icon-popup.success {
|
||||
animation: fade-in 2s forwards;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
scale: 0%;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
scale: 100%;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
span.actual-icon, p.icon-name {
|
||||
cursor: pointer;
|
||||
}
|
||||
/* center div.icon-grid on the screen
|
||||
div.icongrid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
height: 100%;@
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
padding: 0;
|
||||
}*/
|
||||
|
||||
div.icon-grid-item {
|
||||
display: inline-flex;
|
||||
border: 4px solid var(--white);
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
margin: -2px;
|
||||
}
|
||||
|
||||
div.spindemo span {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
animation: spin 1s linear infinite;
|
||||
color: var(--fail);
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
a.go-up {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
font-size: 2rem;
|
||||
padding: 10px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
||||
/*smooth scroll on the whole page on a click*/
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
transition: 5s;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
Loading…
Reference in New Issue