+
+
+
+ -
+
-
+
+
+
{{icon.name}}
+ +
+
diff --git a/devicon.json b/devicon.json index a20801b99..289c0ab25 100644 --- a/devicon.json +++ b/devicon.json @@ -257,12 +257,21 @@ "original-wordmark" ], "font": [ - "plain", - "plain-wordmark" + "original", + "original-wordmark" ] }, "color": "#205081", - "aliases": [] + "aliases": [ + { + "base": "original", + "alias": "plain" + }, + { + "base": "original-wordmark", + "alias": "plain-wordmark" + } + ] }, { "name": "bootstrap", @@ -548,12 +557,21 @@ "original-wordmark" ], "font": [ - "plain", - "plain-wordmark" + "original", + "original-wordmark" ] }, "color": "#205081", - "aliases": [] + "aliases": [ + { + "base": "original", + "alias": "plain" + }, + { + "base": "original-wordmark", + "alias": "plain-wordmark" + } + ] }, { "name": "couchdb", @@ -893,7 +911,12 @@ ] }, "color": "#dd3f24", - "aliases": [] + "aliases": [ + { + "base": "original-wordmark", + "alias": "plain-wordmark" + } + ] }, { "name": "erlang", @@ -2468,12 +2491,21 @@ "original-wordmark" ], "font": [ - "plain", - "plain-wordmark" + "original", + "original-wordmark" ] }, "color": "#205081", - "aliases": [] + "aliases": [ + { + "base": "original", + "alias": "plain" + }, + { + "base": "original-wordmark", + "alias": "plain-wordmark" + } + ] }, { "name": "ssh", @@ -2486,12 +2518,21 @@ "original-wordmark" ], "font": [ - "plain", - "plain-wordmark" + "original", + "original-wordmark" ] }, "color": "#231F20", - "aliases": [] + "aliases": [ + { + "base": "original", + "alias": "plain" + }, + { + "base": "original-wordmark", + "alias": "plain-wordmark" + } + ] }, { "name": "stylus", @@ -2625,11 +2666,16 @@ "original" ], "font": [ - "plain" + "original" ] }, "color": "#1da1f2", - "aliases": [] + "aliases": [ + { + "base": "original", + "alias": "plain" + } + ] }, { "name": "typescript", diff --git a/docs/CNAME b/docs/CNAME new file mode 100644 index 000000000..0d1b34d93 --- /dev/null +++ b/docs/CNAME @@ -0,0 +1 @@ +devicon.dev \ No newline at end of file diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css new file mode 100644 index 000000000..1c1d2ae22 --- /dev/null +++ b/docs/assets/css/style.css @@ -0,0 +1,403 @@ +@charset "UTF-8"; +@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); +html { + box-sizing: border-box; } + +*, *::after, *::before { + box-sizing: inherit; } + + +.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, +*:before { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } + +body, +html { + margin: 0; + padding: 0; + font-size: 100%; } + +.clearfix:before, +.clearfix:after { + display: table; + content: ' '; } + +.clearfix:after { + clear: both; } + +body { + color: #47a3da; + font-family: 'Lato', Calibri, Arial, sans-serif; } + +a { + color: #f0f0f0; + text-decoration: none; } + +a:hover { + color: #000; } + +.cbp-ig-grid { + list-style: none; + padding: 0 0 50px; + margin: 0; } + +.cbp-ig-grid:before, +.cbp-ig-grid:after { + content: " "; + display: table; } + +.cbp-ig-grid:after { + clear: both; } + +.cbp-ig-grid li { + width: 25%; + float: left; + height: 200px; + text-align: center; } + +.cbp-ig-grid li > span { + display: block; + height: 100%; + color: #60be86; + -webkit-transition: background 0.2s; + -moz-transition: background 0.2s; + transition: background 0.2s; + cursor: pointer; } + +.cbp-ig-icon { + padding: 30px 0 0; + display: block; + -webkit-transition: -webkit-transform 0.2s; + transition: -moz-transform 0.2s; + transition: transform 0.2s; } + +.cbp-ig-icon:before { + font-family: 'devicon'; + font-size: 6em; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; } + +.cbp-ig-grid .cbp-ig-title { + margin: 20px 0 10px; + padding: 20px 0 0; + font-size: 1em; + position: relative; + -webkit-transition: -webkit-transform 0.2s; + -moz-transition: -moz-transform 0.2s; + transition: transform 0.2s; } + +.cbp-ig-grid .cbp-ig-title:before { + content: ''; + position: absolute; + background: #60be86; + width: 60px; + height: 2px; + top: 0; + left: 50%; + margin: 0 0 0 -30px; + -webkit-transition: margin-top 0.2s; + -moz-transition: margin-top 0.2s; + transition: margin-top 0.2s; } + +.cbp-ig-grid li > span:hover { + background: #60be86; } + +.cbp-ig-grid li > span:hover .cbp-ig-icon { + -webkit-transform: translateY(10px); + -moz-transform: translateY(10px); + -ms-transform: translateY(10px); + transform: translateY(10px); } + +.cbp-ig-grid li > span:hover .cbp-ig-icon:before, +.cbp-ig-grid li > span:hover .cbp-ig-title { + color: #fff; } + +.cbp-ig-grid li > span:hover .cbp-ig-title { + -webkit-transform: translateY(-30px); + -moz-transform: translateY(-30px); + -ms-transform: translateY(-30px); + transform: translateY(-30px); } + +.cbp-ig-grid li > span:hover .cbp-ig-title:before { + background: #fff; + margin-top: 80px; } + +@media screen and (max-width: 62.75em) { + .cbp-ig-grid li { + width: 50%; } } + +@media screen and (max-width: 41.6em) { + .cbp-ig-grid li { + width: 100%; } } + +@media screen and (max-width: 25em) { + .cbp-ig-grid { + font-size: 80%; } } + +html { + background: whitesmoke; } + +html, +body { + color: #323232; + font-size: 14px; + font-family: "Lato", Calibri, Arial, sans-serif; + line-height: 1.5; } + +::-webkit-input-placeholder { + color: #4f755e; } + +:-moz-placeholder { + color: #4f755e; } + +::-moz-placeholder { + color: #4f755e; } + +:-ms-input-placeholder { + color: #4f755e; } + +html, +body { + min-width: 900px; } + +header { + position: fixed; + top: 0; + bottom: 0; + overflow: auto; + padding: 0 2rem; + width: 480px; + color: whitesmoke; + background: #60be86; } + header > h1, + header > h3 { + font-weight: 400; + font-family: "Damion", sans-serif; + text-align: center; } + header > h1 { + margin: 1rem 0 0; + font-size: 5rem; } + header > h1 > span { + font-size: 2rem; } + header > h2 { + font-weight: 400; + font-size: 1.3rem; } + header .download { + margin: 2rem 0 0; + font-weight: 900; + font-size: 1.3rem; + text-align: center; } + header .download i { + position: relative; + top: 12px; + left: -10px; + font-size: 3rem; } + header .download a { + padding: 1.3rem 1.8rem; + border: 6px solid #60be86; + color: #60be86; + background: whitesmoke; } + header .download a:hover { + border-color: whitesmoke; + color: #60be86; } + header > h3 { + margin: 4rem 0 0; + font-size: 3rem; + text-align: left; } + header > h5 { + margin: 0; + font-weight: 400; + font-style: italic; + font-size: 1.2rem; } + header > ul { + margin: 0; + padding: 0; + list-style: none; } + header > ul h4 { + margin: 0; + border-bottom: 1px solid whitesmoke; + font-size: 1.5rem; } + header > ul li { + margin: .8rem 0 2rem; } + header .icons-list { + margin: 1rem 0; + padding: 0; + list-style: none; } + header .icons-list > div { + display: inline; } + header .icons-list li { + position: relative; + display: inline-block; + width: 6.5rem; + margin: .5rem .3rem; + padding: .4rem; + cursor: pointer; + border: 5px solid #60be86; } + header .icons-list li:hover { + border: 5px solid #65d693; + border-radius: 5px; } + header .icons-list li:hover::before { + content: ' '; + position: absolute; + bottom: -18px; + left: 25px; + display: block; + width: 0px; + height: 0px; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-top: 15px solid #65d693; } + header .icons-list li.selected-version { + border: 5px solid #65d693; + border-radius: 5px; } + header .icons-list li.selected-version::before { + position: absolute; + bottom: -19px; + left: 25px; + display: block; + width: 0; + height: 0; + border-top: 15px solid #65d693; + border-right: 15px solid transparent; + border-left: 15px solid transparent; + content: ' '; } + header .icons-list i { + font-size: 5rem; } + header .icons-list img { + max-width: 100%; } + +.borders { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + border: 8px solid #60be86; } + +.main { + margin: 0 0 0 480px; } + +.search { + text-align: center; } + .search input { + width: 300px; + margin: 4rem; + padding: .5rem 1rem; + border: 0; + border-bottom: 2px solid #60be86; + color: #60be86; + background: none; + font-size: 1.2rem; + text-align: center; } + +::-webkit-input-placeholder { + color: #60be86; } + +:-moz-placeholder { + /* Firefox 18- */ + color: #60be86; } + +::-moz-placeholder { + /* Firefox 19+ */ + color: #60be86; } + +:-ms-input-placeholder { + color: #60be86; } + +.cde { + white-space: nowrap; + padding: 1rem; + border-radius: 4px; + color: #4c6857; + background: #65d693; + font-size: .9rem; + font-family: courier; + overflow: auto; } + +.cde-ind { + padding: 0 0 0 .5rem; } + +.cde-com { + color: #4c6857; + opacity: .5; } + +.footer { + margin-top: 6rem; + text-align: center; } diff --git a/docs/assets/img/logo.png b/docs/assets/img/logo.png new file mode 100644 index 000000000..11c448ae7 Binary files /dev/null and b/docs/assets/img/logo.png differ diff --git a/docs/assets/js/script.js b/docs/assets/js/script.js new file mode 100644 index 000000000..e47145787 --- /dev/null +++ b/docs/assets/js/script.js @@ -0,0 +1,195 @@ +var devicon = angular.module('devicon', ['ngSanitize', 'ngAnimate']); + +/* +||============================================================== +|| Devicons controller +||============================================================== +*/ + +devicon.controller('IconListCtrl', function($scope, $http, $compile) { + + var baseUrl = window.location.origin; + + // Get devicon.json + $http.get(baseUrl + '/devicon.json').success(function(data) { + + /* + | Re-format devicon.json + |----------------------------------------- + */ + + $scope.icons = []; + $scope.selectedIcon = {}; + + // Loop through devicon.json + angular.forEach(data, function(devicon, key) { + + // New icon format + var icon = { + name: devicon.name, + svg: devicon.versions.svg, + font: devicon.versions.font, + main: "" + }; + + // Loop through devicon.json icons + for (var i = 0; i < devicon.versions.font.length; i++) { + + // Store all versions that should become main in order + var mainVersionsArray = [ + "plain", + "line", + "original", + "plain-wordmark", + "line-wordmark", + "original-wordmark", + ]; + + // Loop through mainVersionsArray + for (var j = 0; j < mainVersionsArray.length; j++) { + + // Check if icon version can be "main", if not continue, if yes break the loops + if (devicon.name + devicon.versions.font[i] == devicon.name + mainVersionsArray[j]) { + icon.main = devicon.name + "-" + devicon.versions.font[i]; + i = 99999; // break first loop (and second) + } + } + } + + // Push new icon format to $scope.icons + $scope.icons.push(icon); + }); + + // Select first icon by default in scope + $scope.selectedIcon = $scope.icons[0]; + $scope.selectedFontIcon = $scope.icons[0].font[0]; + $scope.selectedSvgIcon = $scope.selectSvg($scope.icons[0].svg[0], 0); + $scope.selectedFontIndex = 0; + + /*------ End of "Re-format devicon.json" ------*/ + }); + + + /* + | Change selected icon + |-------------------------------- + */ + $scope.selectIcon = function(icon) { + $scope.selectedIcon = icon; + $scope.selectedFontIcon = icon.font[0]; + $scope.selectedFontIndex = 0; + $scope.selectedSvgIcon = $scope.selectSvg(icon.svg[0], 0); + + } + /*---- End of "Change selected icon" ----*/ + + + /* + | Change selected icon font version + |-------------------------------- + */ + $scope.selectFont = function(fontVersion, colored, index) { + $scope.selectedFontIcon = fontVersion; + $scope.colored = colored ? true : false; + $scope.selectedFontIndex = index; + } + /*---- End of "Change selected font icon" ----*/ + + /* + | Change selected icon svg version + |-------------------------------- + */ + $scope.selectSvg = function(svgVersion, index) { + + $http.get(baseUrl + '/icons/' + $scope.selectedIcon.name + '/' + $scope.selectedIcon.name + '-' + svgVersion + '.svg').success(function(data){ + + var svg = angular.element(data); + var innerSVG = (svg[0].innerHTML); + + $scope.selectedSvgIcon = innerSVG; + $scope.selectedSvgIndex = index; + }); + } + /*---- End of "Change selected svg icon" ----*/ + +}); + +/*================ End of "Devicons controller" ================*/ + +/* +||================================================================== +|| Convert icon img to svg +||================================================================== +*/ + +devicon.directive('imgToSvg', function ($http, $compile) { + + var baseUrl = window.location.href; + + return { + link : function($scope, $element, $attrs) { + + $attrs.$observe('src', function(val){ + + $http.get(baseUrl + val).success(function(data){ + + var svg = angular.element(data); + svg = svg.removeAttr('xmlns'); + svg = svg.addClass('not-colored'); + svg = svg.attr('svg-color', ''); + var $e = $compile(svg)($scope); + $element.replaceWith($e); + $element = $e; + }); + }); + } + }; +}); + +/*================ End of "Convert icon img to svg" ================*/ + +/* +||================================================================== +|| Add color to svg when hovering +||================================================================== +*/ + +devicon.directive('svgColor', function () { + + return { + link : function($scope, $element, $attrs) { + $element.on('mouseenter', function(){ + $element.removeClass('not-colored'); + }); + $element.on('mouseleave', function(){ + $element.addClass('not-colored'); + }); + } + }; +}); + +/*================ End of "Add color to svg when hovering" ================*/ + +/* +||================================================================== +|| Show all icons on click +||================================================================== +*/ + +devicon.directive('iconDetails', function ($http, $compile) { + + return { + template: '
+ DOWNLOAD +
++ GO TO REPO +
++ CONTRIBUTE +
+ + +