mirror/devicon
1
0
Fork 0
mirror of https://github.com/konpa/devicon.git synced 2025-08-12 17:44:24 +02:00
Code Issues Releases Wiki Activity

Merge pull request #980 from devicons/thomas/feature/websiteUpgrade

Browse Source 
Upgrade Website
This commit is contained in:
Clemens Bastian
2022-01-28 08:49:09 +01:00
committed by GitHub
parent 7e21027444 a4fe13311c
commit 7b06adf362
6 changed files with 315 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
docs/assets/css/style.css
View File

@@ -2,6 +2,17 @@
@import '//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css';
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Damion);
:root {
/* color */
--primaryColor: #60be86;
--primaryColorDark: #2D804E;
--primaryColorLight: #65d693;
--grey: #4c6857;
/* sizing */
--listItemPadding: 0.4rem;
}
html {
box-sizing: border-box; }
@@ -17,71 +28,6 @@ html {
background-size: cover;
}
.icon-brush:before {
content: "\e600"; }
.icon-type:before {
content: "\e601"; }
.icon-github:before {
content: "\e602"; }
.icon-github2:before {
content: "\e603"; }
.icon-bucket:before {
content: "\e605"; }
.icon-github3:before {
content: "\e604"; }
.icon-bucket2:before {
content: "\e606"; }
/* Cachons la case à cocher */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px; }
/* on prépare le label */
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
cursor: pointer;
position: relative;
z-index: 10;
display: inline-block;
padding: 0.71429rem 1.07143rem;
margin-left: 0.35714rem;
font-family: "Lato", Calibri, Arial, sans-serif;
font-weight: 700;
color: #60be86;
background: #4f755e;
box-shadow: 0px 6px 0px #4a5c51;
border-radius: 5px; }
/* Aspect si "cochée" */
[type="checkbox"]:checked + label {
top: 6px;
box-shadow: 0px 0px 0px #4a5c51; }
.button {
position: relative;
z-index: 10;
display: inline-block;
padding: 0.71429rem 1.07143rem;
margin: 0 0.71429rem;
font-family: "Lato", Calibri, Arial, sans-serif;
font-weight: 700;
color: #60be86;
background: #4c6857;
text-decoration: none;
border-radius: 5px;
box-shadow: 0px 6px 0px #4a5c51; }
.button:active {
top: 6px;
box-shadow: 0px 0px 0px #4a5c51; }
/* General Blueprint Style */
*,
*:after,
@@ -105,12 +51,11 @@ html {
clear: both; }
body {
color: #47a3da;
font-family: 'Lato', Calibri, Arial, sans-serif; }
a {
color: #f0f0f0;
text-decoration: none; }
}
a:hover {
color: #000; }
@@ -137,7 +82,7 @@ a:hover {
.cbp-ig-grid li > span {
display: block;
height: 100%;
color: #60be86;
color: var(--primaryColor);
-webkit-transition: background 0.2s;
-moz-transition: background 0.2s;
transition: background 0.2s;
@@ -173,7 +118,7 @@ a:hover {
.cbp-ig-grid .cbp-ig-title:before {
content: '';
position: absolute;
background: #60be86;
background: var(--primaryColor);
width: 60px;
height: 2px;
top: 0;
@@ -184,7 +129,7 @@ a:hover {
transition: margin-top 0.2s; }
.cbp-ig-grid li > span:hover {
background: #60be86; }
background: var(--primaryColor); }
.cbp-ig-grid li > span:hover .cbp-ig-icon {
-webkit-transform: translateY(10px);
@@ -252,7 +197,7 @@ header {
padding: 0 2rem;
width: 480px;
color: whitesmoke;
background: #60be86; }
background: var(--primaryColor); }
header > h1,
header > h3 {
font-weight: 400;
@@ -266,24 +211,24 @@ header {
header > h2 {
font-weight: 400;
font-size: 1.3rem; }
header .download {
header .buttonLink {
margin: 2rem 0 0;
font-weight: 900;
font-size: 1.3rem;
text-align: center; }
header .download i {
header .buttonLink i {
position: relative;
top: 12px;
left: -10px;
font-size: 3rem; }
header .download a {
header .buttonLink > a {
padding: 1.3rem 1.8rem;
border: 6px solid #60be86;
color: #60be86;
background: whitesmoke; }
header .download a:hover {
border-color: whitesmoke;
color: #60be86; }
border: 6px solid var(--primaryColor);
color: var(--primaryColor);
background: whitesmoke;
text-decoration: none;}
header .buttonLink a:hover {
border-color: whitesmoke; }
header > h3 {
margin: 4rem 0 0;
font-size: 3rem;
@@ -306,20 +251,24 @@ header {
header .icons-list {
margin: 1rem 0;
padding: 0;
list-style: none; }
list-style: none;
position: relative; }
header .icons-list > div {
display: inline; }
header .icons-list li {
position: relative;
display: inline-block;
width: 6.5rem;
margin: .5rem .3rem;
padding: .4rem;
padding: var(--listItemPadding);
cursor: pointer;
border: 5px solid #60be86; }
border: 5px solid var(--primaryColor); }
header .icons-list li:hover {
border: 5px solid #65d693;
border: 5px solid var(--primaryColorLight);
border-radius: 5px; }
header .icons-list li:hover::before {
content: ' ';
position: absolute;
@@ -330,10 +279,12 @@ header {
height: 0px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #65d693; }
border-top: 15px solid var(--primaryColorLight); }
header .icons-list li.selected-version {
border: 5px solid #65d693;
border: 5px solid var(--primaryColorLight);
border-radius: 5px; }
header .icons-list li.selected-version::before {
position: absolute;
bottom: -19px;
@@ -341,15 +292,117 @@ header {
display: block;
width: 0;
height: 0;
border-top: 15px solid #65d693;
border-top: 15px solid var(--primaryColorLight);
border-right: 15px solid transparent;
border-left: 15px solid transparent;
content: ' '; }
header .icons-list i {
font-size: 5rem; }
header .icons-list i,
.svgLogo {
font-size: 5rem;
position: absolute;
left: 0;
top: 0;
margin: var(--listItemPadding);
}
header .icons-list img {
max-width: 100%; }
/** color picker */
.colorPicker {
height: 0.8em;
width: 0.8em;
border-radius: 50%;
}
.colorPicker:hover {
cursor: pointer;
border: 1px solid whitesmoke;
}
.colorPickerMenu {
position: absolute;
font-size: 1rem;
background-color: var(--primaryColor);
border-radius: 0.2em;
border: 1px solid var(--grey);
transform: translate(0, -30%);
padding: 1em;
margin-left: 1em;
font-weight: normal;
z-index: 1;
display: none;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
}
.colorPickerMenuCloseBtn > span:hover {
cursor: pointer;
}
.colorPickerBtn {
margin: auto;
margin-top: 0.5em;
width: min-content;
background-color: var(--primaryColor);
border-radius: 1em;
border: 1px solid var(--grey);
display: inline-block;
}
.colorPickerBtn:hover {
background-color: var(--grey);
}
.checkerboardInput {
width: 1.25em;
height: 1.25em;
position: relative;
top: 0.2em;
}
.checkerboardInput:hover {
cursor: pointer;
}
input[type='color'] {
width: 1.25em;
height: 1.25em;
padding: 0;
}
input[type='color']:hover {
cursor: pointer;
}
/** Copy Btn */
.copyBtn {
height: 1.25em;
width: 1.25em;
margin-left: 0.25em;
position: relative;
top: 0.5em;
border-radius: 20%;
padding: 0.25em;
box-sizing: content-box;
transition: background-color 0.25s;
}
.copyBtn:hover {
cursor: pointer;
background-color: var(--primaryColorDark);
}
.tooltip {
visibility: hidden;
background-color: var(--primaryColorDark);
border-radius: 0.25em;
padding: 0.25em;
}
.borders {
position: fixed;
top: 0;
@@ -357,7 +410,7 @@ header {
bottom: 0;
left: 0;
z-index: -1;
border: 8px solid #60be86; }
border: 8px solid var(--primaryColor); }
.main {
margin: 0 0 0 480px; }
@@ -369,32 +422,34 @@ header {
margin: 4rem;
padding: .5rem 1rem;
border: 0;
border-bottom: 2px solid #60be86;
color: #60be86;
border-bottom: 2px solid var(--primaryColor);
color: var(--primaryColor);
background: none;
font-size: 1.2rem;
text-align: center; }
::-webkit-input-placeholder {
color: #60be86; }
color: var(--primaryColor); }
:-moz-placeholder {
/* Firefox 18- */
color: #60be86; }
color: var(--primaryColor); }
::-moz-placeholder {
/* Firefox 19+ */
color: #60be86; }
color: var(--primaryColor); }
:-ms-input-placeholder {
color: #60be86; }
color: var(--primaryColor); }
/* Code related CSS */
.cde {
white-space: nowrap;
padding: 1rem;
border-radius: 4px;
color: #4c6857;
background: #65d693;
color: var(--grey);
background: var(--primaryColorLight);
font-size: .9rem;
font-family: courier;
overflow: auto; }
@@ -403,15 +458,9 @@ header {
padding: 0 0 0 .5rem; }
.cde-com {
color: #4c6857;
color: var(--grey);
opacity: .5; }
.footer {
footer {
margin-top: 6rem;
text-align: center; }
input[type='color'] {
width: 1.25em;
height: 1.25em;
margin-left: 0.5em;
}

BIN
docs/assets/img/checkerboard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
docs/assets/img/color_wheel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

5
docs/assets/img/copy.svg Normal file
View File

@@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>copy</title>
<path fill="#f5f5f5" d="M20 8v-8h-14l-6 6v18h12v8h20v-24h-12zM6 2.828v3.172h-3.172l3.172-3.172zM2 22v-14h6v-6h10v6l-6 6v8h-10zM18 10.828v3.172h-3.172l3.172-3.172zM30 30h-16v-14h6v-6h10v20z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 356 B

68
docs/assets/js/script.js
View File

@@ -1,5 +1,4 @@
var devicon = angular.module('devicon', ['ngSanitize', 'ngAnimate']);
const DEFAULT_BACKGROUND = "#60be86";
/*
||==============================================================
@@ -41,8 +40,14 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
// background color related stuff
// default is the default site background color
$scope.fontBackground = DEFAULT_BACKGROUND;
$scope.svgBackground = DEFAULT_BACKGROUND;
$scope.DEFAULT_BACKGROUND = "#60be86";
$scope.fontBackground = $scope.DEFAULT_BACKGROUND;
$scope.svgBackground = $scope.DEFAULT_BACKGROUND;
// whether to display the checkerboard img in the background
// for the font and svg respectively
$scope.fontDisplayChecker = false;
$scope.svgDisplayChecker = false;
// Loop through devicon.json
angular.forEach(data, function(devicon, key) {
@@ -95,6 +100,7 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
/*
| Change selected icon
| param icon: the new icon.
|--------------------------------
*/
$scope.selectIcon = function(icon) {
@@ -105,8 +111,8 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
$scope.selectedSvgIndex = 0;
// reset color
$scope.fontBackground = DEFAULT_BACKGROUND;
$scope.svgBackground = DEFAULT_BACKGROUND;
$scope.fontBackground = $scope.DEFAULT_BACKGROUND;
$scope.svgBackground = $scope.DEFAULT_BACKGROUND;
}
/*---- End of "Change selected icon" ----*/
@@ -158,6 +164,58 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
}
/*---- End of "Change selected svg icon" ----*/
/**
* Copy the text located using `id` into the user's clipboard.
* @param {Event} event - a JS Event object.
* @param {String} id - id of the element we are copying its text
* content from.
*/
$scope.copyToClipboard = function(event, id) {
let text = document.getElementById(id).textContent
navigator.clipboard.writeText(text)
.then(() => {
$scope.displayTooltip("Copied", event.target)
})
.catch(() => {
$scope.displayTooltip("Failed to copy", event.target)
})
}
/**
* Display a tooltip.
* @param {String} text - text the tooltip should have.
* @param {Element} copyBtn - the copyBtn element, which is an <img>
*/
$scope.displayTooltip = function(text, copyBtn) {
let tooltip = copyBtn.parentElement.getElementsByClassName("tooltip")[0]
tooltip.textContent = text
// reset opacity (for some reason, default opacity is null)
tooltip.style.opacity = 1
tooltip.style.visibility = "visible"
// create fade out effect after 2 sec
setTimeout(() => {
let count = 10
let intervalObj
intervalObj = setInterval(() => {
tooltip.style.opacity -= 0.1
if (--count == 0) {
clearInterval(intervalObj)
tooltip.style.visibility = "hidden"
}
}, 50)
}, 2000)
}
/**
* Display the color picker.
* @param {String} id - id of the menu we are showing.
*/
$scope.toggleColorPickerMenu = function(id) {
let menu = document.getElementById(id)
menu.style.display = menu.style.display == "none" || menu.style.display == "" ? "inherit" : "none"
}
});
/*================ End of "Devicons controller" ================*/

119
docs/index.html
View File

@@ -56,82 +56,147 @@
<div class="container">
<header class="clearfix">
<h1>Devicon <span><a href="https://github.com/devicons/devicon/releases">{{ latestReleaseTagging }}</a></span></h1>
<h2>Devicon is a set of icons representing programming languages, designing & development tools. You can use it as a font or directly copy/paste the svg code into your project.</h2>
<h2>Devicon is a set of icons representing programming languages, designing, and development tools. You can use it as a font or directly copy/paste the SVG code into your project.</h2>
<i>*Please read the legal conditions of using the logos here at the bottom of this header</i>
<h3>(Super) Quick Setup</h3>
<h5>First select an icon on the right, then select the version below and copy/paste the code into your project.</h5>
<ul>
<li>
<h4>Font versions <input type='color' value='#60be86' ng-model="fontBackground"></h4>
<h4>
Font versions
<span>
<img src="./assets/img/color_wheel.png" class='colorPicker' ng-click="toggleColorPickerMenu('fontColorPickerMenu')">
<span class='colorPickerMenu' id='fontColorPickerMenu'>
<div>
<input type='color' value='#60be86' ng-model="fontBackground">
Background Color
</div>
<div>
<input type='checkbox' id='checkboardInputFont' class='checkerboardInput' ng-model="fontDisplayCheckerboard">
<label for='checkboardInputFont' >Checkerboard</label>
</div>
<button class='colorPickerBtn' ng-click="toggleColorPickerMenu('fontColorPickerMenu')">Close</button>
<button class='colorPickerBtn' ng-click="fontBackground = DEFAULT_BACKGROUND; fontDisplayCheckerboard=0; toggleColorPickerMenu('fontColorPickerMenu')">Reset</button>
</span>
</span>
</h4>
<p>
Place this in your header (once per HTML file)
<span>
<img src="./assets/img/copy.svg" class='copyBtn' ng-click="copyToClipboard($event, 'headerLinkCode')">
<span class='tooltip'></span>
</span>
</p>
<div class="cde" id='headerLinkCode'>
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@{{ latestReleaseTagging }}/devicon.min.css"&gt;
</div>
<ul class="icons-list">
<div ng-repeat="fontVersion in selectedIcon.font">
<li ng-click="selectFont(fontVersion, false, $index)" ng-class="{'selected-version' : ($index == selectedFontIndex && !colored)}" ng-style="{'background-color': fontBackground}">
<img src="assets/img/checkerboard.png" ng-style="{'visibility': fontDisplayCheckerboard ? 'visible' : 'hidden'}">
<i class="devicon-{{selectedIcon.name}}-{{fontVersion}}"></i>
</li>
<li ng-click="selectFont(fontVersion, true, $index)" ng-class="{'selected-version' : ($index == selectedFontIndex && colored)}" ng-style="{'background-color': fontBackground}">
<img src="assets/img/checkerboard.png" ng-style="{'visibility': fontDisplayCheckerboard ? 'visible' : 'hidden'}">
<i class="devicon-{{selectedIcon.name}}-{{fontVersion}} colored"></i>
</li>
</div>
</ul>
<p>Place this in your header</p>
<div class="cde">
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@{{ latestReleaseTagging }}/devicon.min.css"&gt;
</div>
<p>Use this in your body</p>
<div class="cde">
<p>
Place this in your body
<span>
<img src="./assets/img/copy.svg" class='copyBtn' ng-click="copyToClipboard($event, 'iconClassCode')">
<span class='tooltip'></span>
</span>
</p>
<div class="cde" id="iconClassCode">
&lt;i class="devicon-{{selectedIcon.name}}-{{selectedFontIcon}}<span ng-if="colored"> colored</span>"&gt;&lt;/i&gt;<br />
</div>
<p><i>*To change the size, change the <code>i</code>'s <code>font-size</code></i></p>
<p><i>*To change the size, change the &lt;i&gt;'s <code>`font-size`</code>.</i></p>
</li>
<li>
<h4>SVG versions <input type='color' value='#60be86' ng-model="svgBackground"></h4>
<h4>
SVG versions
<span>
<img src="./assets/img/color_wheel.png" class='colorPicker' ng-click="toggleColorPickerMenu('svgColorPickerMenu')">
<span class='colorPickerMenu' id='svgColorPickerMenu'>
<div>
<input type='color' value='#60be86' ng-model="svgBackground">
Background Color
</div>
<div>
<input type='checkbox' id='checkboardInputSvg' class='checkerboardInput' ng-model="svgDisplayCheckerboard">
<label for='checkboardInputSvg' >Checkerboard</label>
</div>
<button class='colorPickerBtn' ng-click="toggleColorPickerMenu('svgColorPickerMenu')">Close</button>
<button class='colorPickerBtn' ng-click="svgBackground = DEFAULT_BACKGROUND; svgDisplayCheckerboard=0; toggleColorPickerMenu('svgColorPickerMenu')">Reset</button>
</span>
</span>
</h4>
<ul class="icons-list">
<li ng-repeat="svgVersion in selectedIcon.svg" ng-click="selectSvg(svgVersion, $index)" ng-class="{'selected-version' : $index == selectedSvgIndex}" ng-style="{'background-color': svgBackground}">
<img ng-src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{svgVersion}}.svg">
<img src="assets/img/checkerboard.png" ng-style="{'visibility': svgDisplayCheckerboard ? 'visible' : 'hidden'}">
<img class='svgLogo' ng-src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{svgVersion}}.svg">
</li>
</ul>
<p>Using &lt;img&gt; element</p>
<div class="cde">
<p>
Using &lt;img&gt; element
<span>
<img src="./assets/img/copy.svg" class='copyBtn' ng-click="copyToClipboard($event, 'imgCode')">
<span class='tooltip'></span>
</span>
</p>
<div class="cde" id='imgCode'>
&lt;img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{selectedIcon.svg[selectedSvgIndex]}}.svg" /&gt;<br />
</div>
<p><i>*To change the size, change the <code>img</code>'s <code>height</code> and <code>width</code></i></p>
<p><i>*To change the size, change the &lt;img&gt;'s <code>`height`</code> and <code>`width`</code>.</i></p>
<br />
<p>Using Pure SVG</p>
<div class="cde">
<p>
Using Pure SVG
<span>
<img src="./assets/img/copy.svg" class='copyBtn' ng-click="copyToClipboard($event, 'svgCode')">
<span class='tooltip'></span>
</span>
</p>
<div class="cde" id='svgCode'>
&lt;svg viewBox="0 0 128 128"&gt;<br />
<div class="cde-ind">{{selectedSvgIcon}}</div>
&lt;/svg&gt;
</div>
<p><i>*To change the size, change the <code>svg</code>'s <code>height</code> and <code>width</code></i></p>
<p><i>*To change the size, change the &lt;svg&gt;'s <code>`height`</code> and <code>`width`</code>.</i></p>
</li>
</ul>
<h3>GitHub repository</h3>
<h5>If you prefer a local install, you can download all the files on the GitHub repository.</h5>
<p class="download">
<p class="buttonLink">
<a href="https://github.com/devicons/devicon/archive/master.zip"><i class="devicon-github-original"></i>DOWNLOAD</a>
</p>
<p class="download">
<p class="buttonLink">
<a href="https://github.com/devicons/devicon/" target="blank"><i class="devicon-github-original"></i>GO TO THE REPOSITORY</a>
</p>
<p class="download">
<p class="buttonLink">
<a href="https://github.com/devicons/devicon/blob/master/CONTRIBUTING.md" target="blank"><i class="devicon-github-original"></i>CONTRIBUTE</a>
</p>
<p class="download">
<p class="buttonLink">
<a href="https://discord.gg/hScy8KWACQ" target="blank"><i class="discord-logo"></i>DISCORD SERVER</a>
</p>
<p class="footer">
<h3>Contact</h3>
<h5>If you have any legal concerns regarding copyrights or want to report an abuse, please reach out to us at <b><a href="mailto:info@devicon.dev">info@devicon.dev</a></b>. Any code/logo contributions should be made through our GitHub repository listed above.</h5>
<footer>
Originally created by <a href="https://github.com/konpa">Konpa</a> (under <a href="https://github.com/devicons/devicon/blob/master/LICENSE">MIT License</a>) and <br />
supported by various <a href="https://github.com/devicons/devicon/graphs/contributors">contributors</a>.<br />
Copyright &copy; 2015 <a href="https://github.com/konpa">Konpa</a><br />
<br />
Final font build with <a href="https://icomoon.io/">Icomoon app</a><br />
<br />
<i>All product names, logos, and brandsare property of their respective owners. All company, product and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement.</i>
</p>
Final font build with <a href="https://icomoon.io/">Icomoon</a><br />
<br>
<i>*All product names, logos, and brandsare property of their respective owners. All company, product and service names used in this website are for identification purposes only. Usage of these names, logos, and brands does not imply endorsement of Devicon or its members. All icons/SVGs in this project are not monetized in anyway. It is up to the user to use the logo properly according to the company/group's brand policy. Usage of this site or any icons/SVGs from Devicon means acknowledgement of these conditions.</i>
</footer>
</header>
<div class="main">