Remove (old) website source files (#5553)
* Remove files directly related to the website Remove all the files directly related to the Jekyll-based website in this repository. This includes the HTML, CSS and JS for the website, the assets that can be found in the images/ folder, Jekyll-related files (_config.yml, Gemfile, Gemfile.lock) and the CNAME file. * Remove website-related configurations Remove website-related files from ignore files, update the EditorConfig configuration to remove any mention of website files, and update .gitattributes to omit removed files. * Update issue templates Remove the issue templates for issues regarding the website and replace it with a issue templates configuration file [1] that provides a link to a the equivalent issue template in the simple-icons-website repository. -- 1. https://docs.github.com/en/github/building-a-strong-community/configuring-issue-templates-for-your-repository * Remove building website from verify workflow * Remove mentions of website from Contributing Guidelines * Remove mention of GitPod I believe the main advantage of GitPod was that it allows you to preview a contribution in the context of the website. Now that the website is no longer in the repository this is not a thing anymore (unless someone can configure GitPod to pull in the website from its repo), so I removed any mention of it. I'm open to reverting this change if contributors still want to use GitPod. * Add CI job for building the NodeJS package
This commit is contained in:
Eric Cornelissen
GitHub
parent
c15eb68691
commit
c368b14e62
|
|
@ -2,12 +2,6 @@
|
|||
node_modules/
|
||||
npm-debug.log
|
||||
|
||||
# Jekyll
|
||||
_site/
|
||||
.sass-cache/
|
||||
.jekyll-cache/
|
||||
.jekyll-metadata
|
||||
|
||||
# Build files
|
||||
icons/*.js
|
||||
/index.js
|
||||
|
|
|
|||
|
|
@ -18,6 +18,3 @@ trim_trailing_whitespace=false # Templates with trailing whitespace are more usa
|
|||
|
||||
[_data/simple-icons.json]
|
||||
indent_size=4
|
||||
|
||||
[index.html]
|
||||
indent_size=4
|
||||
|
|
|
|||
7
.gitattributes
vendored
7
.gitattributes
vendored
|
|
@ -5,14 +5,7 @@
|
|||
|
||||
# Don't diff machine generated files
|
||||
package-lock.json -diff
|
||||
Gemfile.lock -diff
|
||||
slugs.md -diff
|
||||
|
||||
# Treat images as binary
|
||||
*.ico binary
|
||||
*.png binary
|
||||
|
||||
# Don't export/archive these files
|
||||
.github export-ignore
|
||||
.gitpod.yml export-ignore
|
||||
CNAME export-ignore
|
||||
|
|
|
|||
4
.github/ISSUE_TEMPLATE/config.yml
vendored
Normal file
4
.github/ISSUE_TEMPLATE/config.yml
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
contact_links:
|
||||
- name: Website
|
||||
about: Issues and improvements for the website
|
||||
url: https://github.com/simple-icons/simple-icons-website/issues/new?assignees=&labels=&template=website.md
|
||||
24
.github/ISSUE_TEMPLATE/website.md
vendored
24
.github/ISSUE_TEMPLATE/website.md
vendored
|
|
@ -1,24 +0,0 @@
|
|||
---
|
||||
name: Website
|
||||
about: Issues and improvements for the website
|
||||
labels: website
|
||||
---
|
||||
|
||||
<!-- Before opening a new issue search for duplicate or closed issues -->
|
||||
|
||||
|
||||
### Kind of issue <!-- Change the one that applies to `[x]` -->
|
||||
- [ ] Improvement
|
||||
- [ ] Bug
|
||||
- [ ] Other, namely:
|
||||
|
||||
### Description
|
||||
|
||||
|
||||
<!--
|
||||
Anything relevant, for example:
|
||||
- For bugs: "Steps to reproduce" and "Expected behavior"
|
||||
- For improvements: An example of a use case
|
||||
- Website issues: What browser do you use
|
||||
- etc.
|
||||
-->
|
||||
28
.github/workflows/verify.yml
vendored
28
.github/workflows/verify.yml
vendored
|
|
@ -2,6 +2,20 @@ name: Verify Source
|
|||
on: [pull_request, push]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
name: Build package
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v2
|
||||
- name: Use Node.js 12.x
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 12.x
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
- name: Build NodeJS package
|
||||
run: npm run build
|
||||
lint:
|
||||
name: Lint
|
||||
runs-on: ubuntu-latest
|
||||
|
|
@ -20,20 +34,6 @@ jobs:
|
|||
npm run svglint
|
||||
npm run wslint
|
||||
npm run our-lint
|
||||
build:
|
||||
name: Build website
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v2
|
||||
- name: Use Ruby 2.7
|
||||
uses: ruby/setup-ruby@v1
|
||||
with:
|
||||
ruby-version: 2.7
|
||||
# https://github.com/ruby/setup-ruby/blob/master/README.md#caching-bundle-install-automatically
|
||||
bundler-cache: true
|
||||
- name: Build website
|
||||
run: bundle exec jekyll build
|
||||
test:
|
||||
name: Test package
|
||||
runs-on: ubuntu-latest
|
||||
|
|
|
|||
44
.gitignore
vendored
44
.gitignore
vendored
|
|
@ -1,10 +1,24 @@
|
|||
# Created by https://www.gitignore.io/api/macos,jekyll
|
||||
# Files generated by build script
|
||||
/index.js
|
||||
|
||||
# Ignore all files in the icons folder
|
||||
icons/*
|
||||
# Except SVG files
|
||||
!icons/*.svg
|
||||
|
||||
|
||||
### NodeJS ###
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
|
||||
### Jekyll ###
|
||||
_site/
|
||||
.sass-cache/
|
||||
.jekyll-cache/
|
||||
.jekyll-metadata
|
||||
|
||||
### macOS ###
|
||||
# General
|
||||
|
|
@ -33,21 +47,3 @@ Icon
|
|||
Network Trash Folder
|
||||
Temporary Items
|
||||
.apdisk
|
||||
|
||||
# End of https://www.gitignore.io/api/macos,jekyll
|
||||
|
||||
|
||||
# NPM dependencies
|
||||
node_modules/
|
||||
|
||||
### Ruby ###
|
||||
/.bundle/
|
||||
/vendor/bundle
|
||||
|
||||
# Files generated by build script
|
||||
/index.js
|
||||
|
||||
# Ignore all files in the icons folder
|
||||
icons/*
|
||||
# Except SVG files
|
||||
!icons/*.svg
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
ports:
|
||||
- port: 4000
|
||||
onOpen: ignore
|
||||
tasks:
|
||||
- command: gp await-port 4000 && sleep 3 && gp preview $(gp url 4000)
|
||||
- init: gem install jekyll bundler
|
||||
command: jekyll serve --host 0.0.0.0
|
||||
|
|
@ -27,7 +27,6 @@ Simple Icons welcomes contributions and corrections. Before contributing, please
|
|||
|
||||
* [Requesting an Icon](#requesting-an-icon)
|
||||
* [Adding or Updating an Icon](#adding-or-updating-an-icon)
|
||||
* [Building the Website](#building-locally)
|
||||
* [Using Docker](#using-docker)
|
||||
|
||||
## Requesting an Icon
|
||||
|
|
@ -358,15 +357,6 @@ Once you've completed the previous steps, create a pull request to merge your ed
|
|||
|
||||
If you have an affiliation to the brand you contributing that allows you to speak on their behalf then please disclose that in your pull request as it can help speed up our research and review processes.
|
||||
|
||||
## Building Website Locally
|
||||
|
||||
* Make sure you have [Ruby](https://www.ruby-lang.org/en/downloads/) installed.
|
||||
* Make sure you have [Bundler](https://bundler.io/) installed (using `$ gem install bundler`).
|
||||
* Set your local gems installation location for the simple-icons website using `$ bundle config set path 'vendor/bundle'`.
|
||||
* Install dependencies using `$ bundle install`.
|
||||
* Build and run the website locally using `$ bundle exec jekyll serve`.
|
||||
* Connect to the website in your browser via the "Server address" provided by the output of this command, e.g. `http://localhost:4000/`
|
||||
|
||||
## Testing Package Locally
|
||||
|
||||
* Make sure you have [NodeJS](https://nodejs.org/en/download/) installed. At least version 12.4.0 is required.
|
||||
|
|
@ -374,12 +364,6 @@ If you have an affiliation to the brand you contributing that allows you to spea
|
|||
* Build and test the package using `$ npm test`.
|
||||
* Run the project linting process using `$ npm run lint`.
|
||||
|
||||
## Building in Your Browser
|
||||
|
||||
Alternatively, you can build and run the website in a readily configured online workspace:
|
||||
|
||||
[](https://gitpod.io#https://github.com/simple-icons/simple-icons)
|
||||
|
||||
## Using Docker
|
||||
|
||||
You can build a Docker image for this project from the Dockerfile by running:
|
||||
|
|
@ -392,21 +376,6 @@ $ docker build . -t simple-icons
|
|||
$ docker run -it --rm --entrypoint "/bin/ash" simple-icons
|
||||
```
|
||||
|
||||
### Jekyll Server using Docker
|
||||
|
||||
To use a Docker container to run the Jekyll server for the website, run:
|
||||
|
||||
```bash
|
||||
# Start a container running `jekyll serve` in the background
|
||||
$ docker run -d -p 4000:4000 --rm --volume $PWD:/srv/jekyll --name simple-icons-server jekyll/jekyll jekyll serve
|
||||
|
||||
# Inspect the server logs
|
||||
$ docker logs simple-icons-server
|
||||
|
||||
# Stop the server (and delete the container)
|
||||
$ docker stop simple-icons-server
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# Versioning
|
||||
|
|
|
|||
7
Gemfile
7
Gemfile
|
|
@ -1,7 +0,0 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
source "https://rubygems.org"
|
||||
|
||||
git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
|
||||
|
||||
gem "jekyll", "4.2"
|
||||
68
Gemfile.lock
68
Gemfile.lock
|
|
@ -1,68 +0,0 @@
|
|||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
addressable (2.7.0)
|
||||
public_suffix (>= 2.0.2, < 5.0)
|
||||
colorator (1.1.0)
|
||||
concurrent-ruby (1.1.7)
|
||||
em-websocket (0.5.2)
|
||||
eventmachine (>= 0.12.9)
|
||||
http_parser.rb (~> 0.6.0)
|
||||
eventmachine (1.2.7)
|
||||
ffi (1.14.1)
|
||||
forwardable-extended (2.6.0)
|
||||
http_parser.rb (0.6.0)
|
||||
i18n (1.8.5)
|
||||
concurrent-ruby (~> 1.0)
|
||||
jekyll (4.2.0)
|
||||
addressable (~> 2.4)
|
||||
colorator (~> 1.0)
|
||||
em-websocket (~> 0.5)
|
||||
i18n (~> 1.0)
|
||||
jekyll-sass-converter (~> 2.0)
|
||||
jekyll-watch (~> 2.0)
|
||||
kramdown (~> 2.3)
|
||||
kramdown-parser-gfm (~> 1.0)
|
||||
liquid (~> 4.0)
|
||||
mercenary (~> 0.4.0)
|
||||
pathutil (~> 0.9)
|
||||
rouge (~> 3.0)
|
||||
safe_yaml (~> 1.0)
|
||||
terminal-table (~> 2.0)
|
||||
jekyll-sass-converter (2.1.0)
|
||||
sassc (> 2.0.1, < 3.0)
|
||||
jekyll-watch (2.2.1)
|
||||
listen (~> 3.0)
|
||||
kramdown (2.3.1)
|
||||
rexml
|
||||
kramdown-parser-gfm (1.1.0)
|
||||
kramdown (~> 2.0)
|
||||
liquid (4.0.3)
|
||||
listen (3.3.3)
|
||||
rb-fsevent (~> 0.10, >= 0.10.3)
|
||||
rb-inotify (~> 0.9, >= 0.9.10)
|
||||
mercenary (0.4.0)
|
||||
pathutil (0.16.2)
|
||||
forwardable-extended (~> 2.6)
|
||||
public_suffix (4.0.6)
|
||||
rb-fsevent (0.10.4)
|
||||
rb-inotify (0.10.1)
|
||||
ffi (~> 1.0)
|
||||
rexml (3.2.5)
|
||||
rouge (3.26.0)
|
||||
safe_yaml (1.0.5)
|
||||
sassc (2.4.0)
|
||||
ffi (~> 1.9)
|
||||
terminal-table (2.0.0)
|
||||
unicode-display_width (~> 1.1, >= 1.1.1)
|
||||
unicode-display_width (1.7.0)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
x86_64-linux
|
||||
|
||||
DEPENDENCIES
|
||||
jekyll (= 4.2)
|
||||
|
||||
BUNDLED WITH
|
||||
2.2.0
|
||||
10
_config.yml
10
_config.yml
|
|
@ -1,10 +0,0 @@
|
|||
exclude:
|
||||
- tests
|
||||
- scripts
|
||||
- composer.json
|
||||
- CONTRIBUTING.md
|
||||
- Dockerfile
|
||||
- index.js
|
||||
- package-lock.json
|
||||
- package.json
|
||||
- README.md
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
|
|
@ -1 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0C8.688 0 6 2.688 6 6s2.688 6 6 6c1.066 0 2.1171.2862 3.0371.8262 2.858 1.678 3.8167 5.3539 2.1387 8.2129h1.6797a7.4925 7.4925 0 0 0 .6425-3.0293c.003-4.144-3.356-7.5048-7.498-7.5098-2.484 0-4.5-2.016-4.5-4.5S9.516 1.5 12 1.5s4.5 2.016 4.5 4.5H18c0-3.312-2.688-6-6-6zm0 3c-1.597.04-2.8799 1.3259-2.9219 2.9219C9.0351 7.5799 10.343 8.957 12 9c1.597-.04 2.8799-1.3259 2.9219-2.9219C14.9649 4.4201 13.656 3.043 12 3zm0 1.5c.828 0 1.5.672 1.5 1.5v.002c0 .828-.672 1.5-1.5 1.5-.83 0-1.5-.673-1.5-1.502 0-.83.67-1.5 1.5-1.5zM7.5 15v1.5H9v6H4.5V24h15v-1.5H15v-6h1.5V15h-9zm3 1.5h3v6h-3v-6zm-6 1.4707V18a7.418 7.418 0 0 0 .6445 3.039h1.6836C6.3001 20.147 6 19.11 6 18v-.0293H4.5Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 889 B |
BIN
images/og.png
BIN
images/og.png
Binary file not shown.
|
Before Width: | Height: | Size: 322 KiB |
264
index.html
264
index.html
|
|
@ -1,264 +0,0 @@
|
|||
---
|
||||
---
|
||||
|
||||
{%- assign iconCount = site.data.simple-icons.icons.size -%}
|
||||
{%- assign iconsUnsortedString = "" -%}
|
||||
{%- assign greyscaleIconsUnsortedString = "" -%}
|
||||
{%- for icon in site.data.simple-icons.icons -%}
|
||||
{% assign title = icon.title %}
|
||||
|
||||
{% assign filename = icon.title %}
|
||||
|
||||
{% assign filename = filename | downcase %}
|
||||
{% assign filename = filename | replace: "à", "a" | replace: "á", "a" | replace: "â", "a" | replace: "ã", "a" | replace: "ä", "a" | replace: "ā", "a" | replace: "ă", "a" | replace: "ą", "a" %}
|
||||
{% assign filename = filename | replace: "ç", "c" | replace: "ć", "c" | replace: "ĉ", "c" | replace: "ċ", "c" | replace: "č", "c" %}
|
||||
{% assign filename = filename | replace: "ď", "d" | replace: "đ", "d" %}
|
||||
{% assign filename = filename | replace: "è", "e" | replace: "é", "e" | replace: "ê", "e" | replace: "ë", "e" | replace: "ē", "e" | replace: "ĕ", "e" | replace: "ė", "e" | replace: "ę", "e" | replace: "ě", "e" %}
|
||||
{% assign filename = filename | replace: "ĝ", "g" | replace: "ğ", "g" | replace: "ġ", "g" | replace: "ģ", "g" %}
|
||||
{% assign filename = filename | replace: "ĥ", "h" | replace: "ħ", "h" %}
|
||||
{% assign filename = filename | replace: "ì", "i" | replace: "í", "i" | replace: "î", "i" | replace: "ï", "i" | replace: "ĩ", "i" | replace: "ī", "i" | replace: "ĭ", "i" | replace: "į", "i" | replace: "ı", "i" %}
|
||||
{% assign filename = filename | replace: "ĵ", "j" %}
|
||||
{% assign filename = filename | replace: "ķ", "k" | replace: "ĸ", "k" %}
|
||||
{% assign filename = filename | replace: "ĺ", "l" | replace: "ļ", "l" | replace: "ľ", "l" | replace: "ŀ", "l" | replace: "ł", "l" %}
|
||||
{% assign filename = filename | replace: "ñ", "n" | replace: "ń", "n" | replace: "ņ", "n" | replace: "ň", "n" %}
|
||||
{% assign filename = filename | replace: "ò", "o" | replace: "ó", "o" | replace: "ô", "o" | replace: "õ", "o" | replace: "ö", "o" | replace: "ō", "o" | replace: "ŏ", "o" | replace: "ő", "o" %}
|
||||
{% assign filename = filename | replace: "ŕ", "r" | replace: "ŗ", "r" | replace: "ř", "r" %}
|
||||
{% assign filename = filename | replace: "ś", "s" | replace: "ŝ", "s" | replace: "ş", "s" | replace: "š", "s" %}
|
||||
{% assign filename = filename | replace: "ß", "ss" %}
|
||||
{% assign filename = filename | replace: "ţ", "t" | replace: "ť", "t" | replace: "ŧ", "t" %}
|
||||
{% assign filename = filename | replace: "ù", "u" | replace: "ú", "u" | replace: "û", "u" | replace: "ü", "u" | replace: "ũ", "u" | replace: "ū", "u" | replace: "ŭ", "u" | replace: "ů", "u" | replace: "ű", "u" | replace: "ų", "u" %}
|
||||
{% assign filename = filename | replace: "ŵ", "w" %}
|
||||
{% assign filename = filename | replace: "ý", "y" | replace: "ÿ", "y" | replace: "ŷ", "y" %}
|
||||
{% assign filename = filename | replace: "ź", "z" | replace: "ż", "z" | replace: "ž", "z" %}
|
||||
|
||||
{% assign searchTerm = filename %}
|
||||
{% assign filename = filename | replace: "+", "plus" %}
|
||||
{% assign filename = filename | replace: ".", "dot" %}
|
||||
{% assign filename = filename | replace: "&", "and" %}
|
||||
{% assign filename = filename | replace: " ", "" | replace: "-", "" | replace: "_", "" | replace: "!", "" | replace: ":", "" | replace: "’", "" | replace: "'", "" | replace: "°", "" %}
|
||||
{% if icon.slug %}
|
||||
{% assign filename = icon.slug %}
|
||||
{% endif %}
|
||||
|
||||
{% assign hex = icon.hex %}
|
||||
{% assign hexCharacter1 = hex | slice: 0, 1 %}
|
||||
{% assign hexCharacter2 = hex | slice: 1, 1 %}
|
||||
{% assign hexCharacter3 = hex | slice: 2, 1 %}
|
||||
{% assign hexCharacter4 = hex | slice: 3, 1 %}
|
||||
{% assign hexCharacter5 = hex | slice: 4, 1 %}
|
||||
{% assign hexCharacter6 = hex | slice: 5, 1 %}
|
||||
{% capture hexCharacterString %}{{ hexCharacter1 }},{{ hexCharacter2 }},{{ hexCharacter3 }},{{ hexCharacter4 }},{{ hexCharacter5 }},{{ hexCharacter6 }}{% endcapture %}
|
||||
{% assign hexCharacterArray = hexCharacterString | split: "," %}
|
||||
{% assign rgbString = "" %}
|
||||
{% for hexCharacter in hexCharacterArray %}
|
||||
{% case hexCharacter %}
|
||||
{% when "A" %}
|
||||
{% assign rgbString = rgbString | append: "10" %}
|
||||
{% when "B" %}
|
||||
{% assign rgbString = rgbString | append: "11" %}
|
||||
{% when "C" %}
|
||||
{% assign rgbString = rgbString | append: "12" %}
|
||||
{% when "D" %}
|
||||
{% assign rgbString = rgbString | append: "13" %}
|
||||
{% when "E" %}
|
||||
{% assign rgbString = rgbString | append: "14" %}
|
||||
{% when "F" %}
|
||||
{% assign rgbString = rgbString | append: "15" %}
|
||||
{% else %}
|
||||
{% assign rgbString = rgbString | append: hexCharacter %}
|
||||
{% endcase %}
|
||||
{% unless forloop.last %}{% assign rgbString = rgbString | append: "," %}{% endunless %}
|
||||
{% endfor %}
|
||||
|
||||
{% assign rgbArray = rgbString | split: "," %}
|
||||
{% assign rgbRed = rgbArray[0] | times: 16 | plus: rgbArray[1] | divided_by: 255.0 | round: 2 %}
|
||||
{% assign rgbGreen = rgbArray[2] | times: 16 | plus: rgbArray[3] | divided_by: 255.0 | round: 2 %}
|
||||
{% assign rgbBlue = rgbArray[4] | times: 16 | plus: rgbArray[5] | divided_by: 255.0 | round: 2 %}
|
||||
{% assign rgbMax = 0.0 %}
|
||||
|
||||
{% if rgbRed > rgbMax %}
|
||||
{% assign rgbMax = rgbRed %}
|
||||
{% endif %}
|
||||
{% if rgbGreen > rgbMax %}
|
||||
{% assign rgbMax = rgbGreen %}
|
||||
{% endif %}
|
||||
{% if rgbBlue > rgbMax %}
|
||||
{% assign rgbMax = rgbBlue %}
|
||||
{% endif %}
|
||||
{% assign rgbMin = 1.0 %}
|
||||
{% if rgbRed < rgbMin %}
|
||||
{% assign rgbMin = rgbRed %}
|
||||
{% endif %}
|
||||
{% if rgbGreen < rgbMin %}
|
||||
{% assign rgbMin = rgbGreen %}
|
||||
{% endif %}
|
||||
{% if rgbBlue < rgbMin %}
|
||||
{% assign rgbMin = rgbBlue %}
|
||||
{% endif %}
|
||||
|
||||
{% assign redLuminance = rgbArray[0] | times: 16 | plus: rgbArray[1] | times: 0.299 | round: 0 %}
|
||||
{% assign greenLuminance = rgbArray[2] | times: 16 | plus: rgbArray[3] | times: 0.587 | round: 0 %}
|
||||
{% assign blueLuminance = rgbArray[4] | times: 16 | plus: rgbArray[5] | times: 0.114 | round: 0 %}
|
||||
{% assign luminance = redLuminance | plus: greenLuminance | plus: blueLuminance %}
|
||||
{% if luminance < 160 %}
|
||||
{% assign class = "grid-item--light" %}
|
||||
{% else %}
|
||||
{% assign class = "grid-item--dark" %}
|
||||
{% endif %}
|
||||
|
||||
{% assign hslLuminance = rgbMax | plus: rgbMin | times: 50.0 %}
|
||||
{% assign rgbDelta = rgbMax | minus: rgbMin %}
|
||||
{% if rgbDelta == 0 %}
|
||||
{% assign hslHue = 0 %}
|
||||
{% assign hslSaturation = 0 %}
|
||||
{% else %}
|
||||
{% if hslLuminance < 0.5 %}
|
||||
{% assign rgbMaxPlusMin = rgbMax | plus: rgbMin %}
|
||||
{% assign hslSaturation = 100 | times: rgbDelta | divided_by: rgbMaxPlusMin %}
|
||||
{% else %}
|
||||
{% assign rgbTwoMinusMaxMinusMin = 2 | minus: rgbMax | minus: rgbMin %}
|
||||
{% assign hslSaturation = 100 | times: rgbDelta | divided_by: rgbTwoMinusMaxMinusMin %}
|
||||
{% endif %}
|
||||
{% if rgbMax == rgbRed %}
|
||||
{% assign hslHue = rgbGreen | minus: rgbBlue | divided_by: rgbDelta | times: 60.0 | modulo: 360.0 %}
|
||||
{% elsif rgbMax == rgbGreen %}
|
||||
{% assign hslHue = rgbBlue | minus: rgbRed | divided_by: rgbDelta | plus: 2.0 | times: 60.0 | modulo: 360.0 %}
|
||||
{% else %}
|
||||
{% assign hslHue = rgbRed | minus: rgbGreen | divided_by: rgbDelta | plus: 4.0 | times: 60.0 | modulo: 360.0 %}
|
||||
{% endif %}
|
||||
{% assign hslHue = hslHue | plus: 90.0 | modulo: 360.0 %}
|
||||
{% endif %}
|
||||
|
||||
{% if hslSaturation < 10 %}
|
||||
{% assign hslLuminance = hslLuminance | round: 0 | prepend: "000" | slice: -3, 3 %}
|
||||
{% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }},{{ class }},{{ searchTerm }},{{ forloop.index }}{% unless forloop.last %};{% endunless %}{% endcapture %}
|
||||
{% else %}
|
||||
{% assign hslHue = hslHue | round: 0 | prepend: "000" | slice: -3, 3 %}
|
||||
{% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }},{{ searchTerm }},{{ forloop.index }}{% unless forloop.last %};{% endunless %}{% endcapture %}
|
||||
{% endif %}
|
||||
{%- endfor -%}
|
||||
|
||||
{%- assign iconsArray = iconsUnsortedString | split: ";" | sort -%}
|
||||
{%- assign greyscaleIconsArray = greyscaleIconsUnsortedString | split: ";" | sort | reverse -%}
|
||||
|
||||
{%- assign allIconNames = "" -%}
|
||||
{%- for icon in iconsArray -%}
|
||||
{% assign iconArray = icon | split: "," %}
|
||||
{% capture allIconNames %}{{ allIconNames }}"{{ iconArray[7] }}",{% endcapture %}
|
||||
{%- endfor -%}
|
||||
{%- for icon in greyscaleIconsArray -%}
|
||||
{% assign iconArray = icon | split: "," %}
|
||||
{% capture allIconNames %}{{ allIconNames }}"{{ iconArray[7] }}"{% unless forloop.last %},{% endunless %}{% endcapture %}
|
||||
{%- endfor -%}
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en-gb">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="initial-scale=1, shrink-to-fit=no, width=device-width" name="viewport">
|
||||
<link rel="preconnect" href="//www.google-analytics.com">
|
||||
<link rel="preconnect" href="//cdn.carbonads.com">
|
||||
<link rel="preconnect" href="//github.com">
|
||||
<title>Simple Icons</title>
|
||||
<meta name="description" content="{{ iconCount }} Free SVG icons for popular brands.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Simple Icons">
|
||||
<meta property="og:description" content="{{ iconCount }} Free SVG icons for popular brands.">
|
||||
<meta property="og:url" content="https://simpleicons.org">
|
||||
<meta property="og:site_name" content="Simple Icons">
|
||||
<meta property="og:image" content="https://simpleicons.org/images/og.png">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Simple Icons">
|
||||
<meta name="twitter:description" content="{{ iconCount }} Free SVG icons for popular brands.">
|
||||
<meta name="twitter:domain" content="Simple Icons">
|
||||
<meta name="twitter:image:src" content="https://simpleicons.org/images/og.png">
|
||||
<link rel="icon" type="image/x-icon" href="https://simpleicons.org/images/favicon.ico">
|
||||
<link rel="icon" type="image/png" href="https://simpleicons.org/images/favicon.png">
|
||||
<link rel="apple-touch-icon" href="https://simpleicons.org/images/apple-touch-icon.png">
|
||||
<link rel="mask-icon" href="https://simpleicons.org/images/logo.svg" color="#111111">
|
||||
<link rel="stylesheet" href="stylesheet.css" type="text/css">
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-100751516-2', 'auto');
|
||||
ga('send', 'pageview');
|
||||
|
||||
var icons = [{{ allIconNames }}];
|
||||
</script>
|
||||
</head>
|
||||
<body class="order-by-color">
|
||||
<header class="navbar" role="banner">
|
||||
<ul class="navbar__nav" role="navigation">
|
||||
<li class="navbar__nav-item navbar__nav-item--home"><a href="/">Simple Icons</a></li>
|
||||
<li class="navbar__nav-item"><a href="https://github.com/simple-icons/simple-icons/blob/develop/README.md">About</a></li>
|
||||
<li class="navbar__nav-item"><a href="https://github.com/simple-icons/simple-icons">GitHub</a></li>
|
||||
<li class="navbar__nav-item"><a href="https://www.npmjs.com/package/simple-icons">NPM</a></li>
|
||||
<li class="navbar__nav-item"><a href="https://packagist.org/packages/simple-icons/simple-icons">Packagist</a></li>
|
||||
</ul>
|
||||
<p class="redesign-banner">We're redesigning the website! Please <a href="https://simple-icons.github.io/simple-icons-website/">Check it out</a> and <a href="https://github.com/simple-icons/simple-icons/discussions/4865">Share your feedback</a>. <span>Hide this message <button id="hide-feedback-request-once">Once</button> or <button id="hide-feedback-request">Always</button> | <button id="redirect-to-redesign">Redirect automatically</button></span></p>
|
||||
</header>
|
||||
<main role="main">
|
||||
<p class="hero">{{ iconCount }} Free <abbr title="Scalable Vector Graphic">SVG</abbr> icons for popular brands</p>
|
||||
<div class="search">
|
||||
<div class="search__wrapper">
|
||||
<div class="search__close"><span>×</span></div>
|
||||
<input type="text" placeholder="Search by brand …" title="Search not available when JavaScript is disabled" disabled />
|
||||
</div>
|
||||
<svg id="sort-color" class="sort-btn" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Sort by color</title><path d="M9.219 18.857H6.648V.429A.414.414 0 0 0 6.219 0H3.648a.418.418 0 0 0-.308.121.418.418 0 0 0-.121.308v18.428H.648a.4.4 0 0 0-.402.268c-.071.17-.04.326.094.469l4.286 4.287c.098.08.2.119.308.119a.447.447 0 0 0 .308-.119l4.272-4.273a.506.506 0 0 0 .134-.32.417.417 0 0 0-.429-.431z"/><path d="M12.219 3.429h3.429A.412.412 0 0 0 16.076 3V.429A.416.416 0 0 0 15.648 0h-3.429a.414.414 0 0 0-.429.429V3a.414.414 0 0 0 .429.429z"/><path d="M12.219 10.286h6a.42.42 0 0 0 .309-.12.42.42 0 0 0 .121-.308V7.286a.418.418 0 0 0-.121-.308.417.417 0 0 0-.309-.121h-6a.414.414 0 0 0-.308.121.417.417 0 0 0-.12.308v2.572c0 .125.04.228.12.308a.42.42 0 0 0 .308.12z"/><path d="M12.219 17.143h8.572c.125 0 .229-.039.309-.119s.119-.184.119-.309v-2.572c0-.125-.039-.227-.119-.307s-.184-.121-.309-.121h-8.572a.418.418 0 0 0-.308.121.415.415 0 0 0-.12.307v2.572c0 .125.04.229.12.309.081.08.183.119.308.119z"/><path d="M23.67 20.693a.408.408 0 0 0-.307-.121H12.219a.416.416 0 0 0-.429.428v2.572c0 .125.04.227.121.309a.42.42 0 0 0 .308.119h11.144a.414.414 0 0 0 .307-.119.424.424 0 0 0 .121-.309V21a.416.416 0 0 0-.121-.307z"/></svg>
|
||||
<svg id="sort-alphabetically" class="sort-btn" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Sort alphabetically</title><path d="M10.096 18.857H7.525V.429A.414.414 0 0 0 7.096 0H4.525a.414.414 0 0 0-.429.429v18.429H1.525c-.196 0-.331.089-.402.268-.072.17-.04.326.094.469l4.286 4.286c.098.079.2.119.308.119.116 0 .219-.04.308-.12l4.272-4.272a.506.506 0 0 0 .134-.321.414.414 0 0 0-.429-.43z"/><path d="M20.102 22.474H16.78c-.188 0-.322.009-.402.026l-.188.026V22.5l.148-.147c.133-.16.227-.276.281-.348l4.941-7.099v-1.191h-7.594v3.066h1.607v-1.54h3.107c.16 0 .295-.014.4-.04a.856.856 0 0 0 .102-.007c.039-.004.068-.007.086-.007v.04l-.146.121c-.08.08-.176.2-.281.361L13.9 22.795V24h7.82v-3.12h-1.619v1.594h.001z"/><path d="M21.977 8.866L18.895 0h-2.168l-3.082 8.866h-.936v1.419h3.842V8.866h-1.004l.631-1.929h3.254l.629 1.929h-1.004v1.419h3.857V8.866h-.937zm-5.358-3.402l.977-2.92c.037-.107.07-.236.102-.388s.047-.232.047-.241l.039-.268h.055c0 .036.008.125.025.268l.162.629.963 2.92h-2.37z"/></svg>
|
||||
<svg id="sort-relevance" class="sort-btn" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Sort by relevance</title><path d="M9.219,18.857H6.648V0.429C6.656,0.201,6.478,0.008,6.25,0H3.648C3.533-0.004,3.421,0.04,3.34,0.121C3.259,0.203,3.215,0.314,3.219,0.429v18.428H0.648c-0.179-0.012-0.344,0.098-0.402,0.268c-0.071,0.17-0.04,0.326,0.094,0.469l4.286,4.287C4.724,23.961,4.826,24,4.934,24c0.114,0.001,0.224-0.041,0.308-0.119l4.272-4.273c0.081-0.086,0.128-0.199,0.134-0.318c0.008-0.23-0.172-0.423-0.402-0.432C9.237,18.857,9.228,18.857,9.219,18.857z"/><path d="M22.971,4.984c0.226-0.22,0.304-0.543,0.207-0.843c-0.099-0.3-0.352-0.515-0.666-0.561l-2.777-0.403c-0.119-0.018-0.221-0.092-0.274-0.199l-1.241-2.519C18.079,0.174,17.797,0,17.479,0c-0.316,0-0.598,0.176-0.737,0.458l-1.243,2.519c-0.054,0.108-0.156,0.183-0.273,0.199L12.445,3.58c-0.311,0.043-0.569,0.261-0.665,0.56c-0.098,0.3-0.019,0.624,0.207,0.843l2.012,1.96c0.086,0.084,0.125,0.207,0.104,0.322l-0.475,2.769c-0.041,0.245,0.021,0.481,0.18,0.667c0.244,0.292,0.674,0.381,1.016,0.201l2.486-1.307c0.104-0.056,0.232-0.054,0.339,0l2.485,1.307C20.256,10.967,20.387,11,20.518,11c0.245,0,0.477-0.109,0.633-0.298c0.156-0.185,0.223-0.429,0.18-0.667l-0.475-2.768c-0.021-0.117,0.02-0.24,0.104-0.322L22.971,4.984z"/><path d="M22.966,17.984c0.227-0.219,0.307-0.543,0.209-0.844c-0.099-0.299-0.354-0.516-0.666-0.561l-2.777-0.404c-0.119-0.018-0.221-0.092-0.274-0.199l-1.241-2.518c-0.141-0.283-0.422-0.46-0.738-0.46s-0.6,0.177-0.738,0.46l-1.242,2.518c-0.054,0.107-0.156,0.184-0.275,0.199l-2.775,0.404c-0.314,0.045-0.568,0.259-0.666,0.561c-0.098,0.301-0.018,0.623,0.207,0.844l2.011,1.961c0.087,0.082,0.124,0.205,0.104,0.322l-0.475,2.769c-0.055,0.312,0.07,0.618,0.328,0.806c0.254,0.186,0.586,0.207,0.865,0.063l2.484-1.307c0.107-0.056,0.234-0.056,0.341,0l2.485,1.307C20.253,23.968,20.384,24,20.515,24c0.172,0,0.34-0.055,0.482-0.158c0.256-0.188,0.383-0.494,0.329-0.806l-0.478-2.769c-0.02-0.117,0.021-0.24,0.104-0.322L22.966,17.984z M20.874,23.115c0.021,0.14-0.029,0.273-0.145,0.354c-0.115,0.086-0.258,0.094-0.385,0.029l-2.487-1.309c-0.118-0.063-0.251-0.096-0.382-0.096s-0.264,0.032-0.385,0.098l-2.485,1.307c-0.124,0.064-0.269,0.057-0.382-0.029c-0.116-0.08-0.168-0.215-0.146-0.354l0.479-2.77c0.045-0.267-0.043-0.539-0.236-0.729l-2.014-1.96c-0.104-0.099-0.135-0.237-0.092-0.371c0.045-0.136,0.154-0.228,0.295-0.249l2.778-0.403c0.269-0.038,0.5-0.207,0.618-0.448l1.242-2.521c0.064-0.127,0.184-0.202,0.326-0.202c0.144,0,0.265,0.075,0.328,0.202l1.242,2.521c0.117,0.241,0.35,0.41,0.617,0.448l2.78,0.403c0.14,0.021,0.249,0.113,0.292,0.249c0.044,0.134,0.011,0.272-0.092,0.371l-2.01,1.96c-0.192,0.189-0.281,0.461-0.235,0.729L20.874,23.115z"/></svg>
|
||||
</div>
|
||||
<ul class="grid">
|
||||
<li class="grid-item--if-empty">
|
||||
Icon missing? Request it <a href="https://github.com/simple-icons/simple-icons/issues/new?template=icon_request.md">here</a>.
|
||||
</li>
|
||||
<li class="grid-item grid-item--ad">
|
||||
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIPK7M&placement=simpleiconsorg" id="_carbonads_js"></script>
|
||||
</li>
|
||||
{%- for icon in iconsArray -%}
|
||||
{%- assign iconArray = icon | split: "," -%}
|
||||
{%- assign hex0 = iconArray[4] | slice: 0 -%}
|
||||
{%- assign hex1 = iconArray[4] | slice: 1 -%}
|
||||
{%- assign hex2 = iconArray[4] | slice: 2 -%}
|
||||
{%- assign hex3 = iconArray[4] | slice: 3 -%}
|
||||
{%- assign hex4 = iconArray[4] | slice: 4 -%}
|
||||
{%- assign hex5 = iconArray[4] | slice: 5 -%}
|
||||
<li class="grid-item {{ iconArray[6] }}" style="background-color: #{%- if hex0 == hex1 and hex2 == hex3 and hex4 == hex5 -%}{{hex0}}{{hex2}}{{hex4}}{%- else -%}{{ iconArray[4] }}{%- endif -%}; --order-alpha: {{ iconArray[8] }}">
|
||||
<a class="grid-item__link" href="/icons/{{ iconArray[3] }}.svg" download>
|
||||
{%- assign filePath = iconArray[3] | prepend: "icons/" | append: ".svg" -%}
|
||||
{%- include_relative {{ filePath }} -%}
|
||||
<h2 class="grid-item__title">{{ iconArray[5] }}</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#{{ iconArray[4] }}</p>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
{%- for icon in greyscaleIconsArray -%}
|
||||
{%- assign iconArray = icon | split: "," -%}
|
||||
{%- assign hex0 = iconArray[4] | slice: 0 -%}
|
||||
{%- assign hex1 = iconArray[4] | slice: 1 -%}
|
||||
{%- assign hex2 = iconArray[4] | slice: 2 -%}
|
||||
{%- assign hex3 = iconArray[4] | slice: 3 -%}
|
||||
{%- assign hex4 = iconArray[4] | slice: 4 -%}
|
||||
{%- assign hex5 = iconArray[4] | slice: 5 -%}
|
||||
<li class="grid-item {{ iconArray[6] }}" style="background-color: #{%- if hex0 == hex1 and hex2 == hex3 and hex4 == hex5 -%}{{hex0}}{{hex2}}{{hex4}}{%- else -%}{{ iconArray[4] }}{%- endif -%}; --order-alpha: {{ iconArray[8] }}">
|
||||
<a class="grid-item__link" href="/icons/{{ iconArray[1] }}.svg" download>
|
||||
{%- assign filePath = iconArray[1] | prepend: "icons/" | append: ".svg" -%}
|
||||
{%- include_relative {{ filePath }} -%}
|
||||
<h2 class="grid-item__title">{{ iconArray[5] }}</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#{{ iconArray[4] }}</p>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</main>
|
||||
<footer class="footer" role="contentinfo">
|
||||
<p>A <a href="https://github.com/simple-icons/simple-icons/blob/develop/LICENSE.md">CC0</a> project maintained by the <a href="https://github.com/simple-icons/simple-icons/graphs/contributors">Simple Icons Contributors</a>.<br>
|
||||
Use <a href="https://github.com/simple-icons/simple-icons">GitHub</a> for requests, corrections and contributions.</p>
|
||||
<a class="share-button" href="https://twitter.com/share?url=https%3A%2F%2Fsimpleicons.org&text=Simple%20Icons%3A%20free%20SVG%20icons%20for%20popular%20brands.">Share this on Twitter!</a>
|
||||
</footer>
|
||||
<script type="text/javascript" src="site_script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
249
site_script.js
249
site_script.js
|
|
@ -1,249 +0,0 @@
|
|||
(function(document) {
|
||||
var $body = document.body,
|
||||
$grid = document.querySelector('.grid'),
|
||||
$icons = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'),
|
||||
$search = document.querySelector('.search'),
|
||||
$searchClose = $search.querySelector('.search__close'),
|
||||
$searchInput = $search.querySelector('input'),
|
||||
$orderByColor = document.getElementById('sort-color'),
|
||||
$orderAlphabetically = document.getElementById('sort-alphabetically'),
|
||||
$orderByRelevance = document.getElementById('sort-relevance');
|
||||
|
||||
var queryParameter = 'q',
|
||||
orderingPreferenceIdentifier = 'ordering-preference',
|
||||
previousQuery = '',
|
||||
previousOrdering = $orderByColor;
|
||||
|
||||
// Remove the "disabled" attribute from the search input
|
||||
$searchInput.setAttribute('title', 'Search Simple Icons');
|
||||
$searchInput.removeAttribute('disabled');
|
||||
$searchInput.focus();
|
||||
|
||||
// include a modified debounce underscorejs helper function.
|
||||
// see
|
||||
// - http://underscorejs.org/docs/underscore.html#section-83
|
||||
// - http://underscorejs.org/#debounce
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout, args, context, timestamp, result;
|
||||
|
||||
var later = function() {
|
||||
var last = +new Date - timestamp;
|
||||
|
||||
if (last < wait && last >= 0) {
|
||||
timeout = setTimeout(later, wait - last);
|
||||
} else {
|
||||
timeout = null;
|
||||
if (!immediate) {
|
||||
result = func.apply(context, args);
|
||||
if (!timeout) context = args = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return function() {
|
||||
context = this;
|
||||
args = arguments;
|
||||
timestamp = +new Date;
|
||||
var callNow = immediate && !timeout;
|
||||
if (!timeout) timeout = setTimeout(later, wait);
|
||||
if (callNow) {
|
||||
result = func.apply(context, args);
|
||||
context = args = null;
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
// Get a parameter from the URL's search section (location.search). Based on:
|
||||
// - https://davidwalsh.name/query-string-javascript
|
||||
// - https://github.com/WebReflection/url-search-params
|
||||
// - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Escaping
|
||||
function getUrlParameter(parameter) {
|
||||
var name = parameter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
||||
var results = regex.exec(location.search);
|
||||
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
||||
}
|
||||
|
||||
function normalizeSearchTerm(value) {
|
||||
return value.toLowerCase()
|
||||
.replace(/đ/g, "d")
|
||||
.replace(/ħ/g, "h")
|
||||
.replace(/ı/g, "i")
|
||||
.replace(/ĸ/g, "k")
|
||||
.replace(/ŀ/g, "l")
|
||||
.replace(/ł/g, "l")
|
||||
.replace(/ß/g, "ss")
|
||||
.replace(/ŧ/g, "t")
|
||||
.normalize("NFD")
|
||||
.replace(/[\u0300-\u036f]/g, "");
|
||||
}
|
||||
|
||||
function search(value) {
|
||||
var query = normalizeSearchTerm(value)
|
||||
queryLetters = query.split('');
|
||||
|
||||
var matchedIcons = icons.filter(function(iconName, iconIndex) {
|
||||
var element = $icons[iconIndex];
|
||||
var score = iconName.length - query.length;
|
||||
var index = 0;
|
||||
|
||||
for (var i = 0; i < queryLetters.length; i++) {
|
||||
var letter = queryLetters[i];
|
||||
index = iconName.indexOf(letter, index);
|
||||
|
||||
if (index === -1) {
|
||||
element.classList.add('hidden');
|
||||
return false;
|
||||
}
|
||||
|
||||
score += index;
|
||||
index++;
|
||||
}
|
||||
|
||||
element.style.setProperty("--order-relevance", score);
|
||||
element.classList.remove('hidden');
|
||||
return true;
|
||||
});
|
||||
|
||||
$grid.classList.toggle('search__empty', matchedIcons.length == 0);
|
||||
$body.classList.toggle('search__active', matchedIcons.length < icons.length);
|
||||
|
||||
if (query === '') {
|
||||
if ($body.classList.contains('order-by-relevance')) {
|
||||
selectOrdering(previousOrdering);
|
||||
}
|
||||
} else {
|
||||
if (previousQuery === '') {
|
||||
selectOrdering($orderByRelevance);
|
||||
}
|
||||
}
|
||||
|
||||
previousQuery = query;
|
||||
}
|
||||
function selectOrdering(selected) {
|
||||
// Set the ordering type as a class on body
|
||||
$body.classList.remove('order-alphabetically', 'order-by-color', 'order-by-relevance');
|
||||
if (selected === $orderByColor) {
|
||||
$body.classList.add('order-by-color');
|
||||
} else if (selected === $orderAlphabetically) {
|
||||
$body.classList.add('order-alphabetically');
|
||||
} else if (selected === $orderByRelevance) {
|
||||
$body.classList.add('order-by-relevance');
|
||||
}
|
||||
|
||||
// Store ordering preference
|
||||
var preferenceOptions = [$orderByColor, $orderAlphabetically];
|
||||
if (localStorage && preferenceOptions.includes(selected)) {
|
||||
localStorage.setItem(orderingPreferenceIdentifier, selected.id);
|
||||
}
|
||||
if (selected !== $orderByRelevance) {
|
||||
previousOrdering = selected;
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Restore ordering preference of the user. This should be performed before
|
||||
// applying the search query as it would overwrite "order by relevance"
|
||||
if (localStorage) {
|
||||
var storedOrderingId = localStorage.getItem(orderingPreferenceIdentifier);
|
||||
var ordering = document.getElementById(storedOrderingId);
|
||||
if (ordering) selectOrdering(ordering);
|
||||
}
|
||||
|
||||
// Load search query if present
|
||||
var query = getUrlParameter(queryParameter);
|
||||
if (query) {
|
||||
$search.classList.add('search--active');
|
||||
$searchInput.value = query;
|
||||
search(query);
|
||||
}
|
||||
});
|
||||
$search.addEventListener('input', debounce(function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var value = e.target.value;
|
||||
if (value) {
|
||||
$search.classList.add('search--active');
|
||||
window.history.replaceState(null, '', '?' + queryParameter + '=' + value);
|
||||
} else {
|
||||
$search.classList.remove('search--active');
|
||||
window.history.replaceState(null, '', '/');
|
||||
}
|
||||
search(value);
|
||||
}, 200), false);
|
||||
$searchClose.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
|
||||
$searchInput.value = '';
|
||||
$search.classList.remove('search--active');
|
||||
window.history.replaceState(null, '', '/');
|
||||
search('');
|
||||
}, false);
|
||||
|
||||
$orderByColor.addEventListener('click', function() {
|
||||
selectOrdering($orderByColor);
|
||||
});
|
||||
$orderAlphabetically.addEventListener('click', function() {
|
||||
selectOrdering($orderAlphabetically);
|
||||
});
|
||||
$orderByRelevance.addEventListener('click', function() {
|
||||
selectOrdering($orderByRelevance);
|
||||
});
|
||||
|
||||
/* Redesign */
|
||||
|
||||
var $banner = document.querySelector('.redesign-banner'),
|
||||
$redirectAutomatically = document.getElementById('redirect-to-redesign'),
|
||||
$hideOnce = document.getElementById('hide-feedback-request-once'),
|
||||
$hideAlways = document.getElementById('hide-feedback-request');
|
||||
|
||||
var redesignUrl = 'https://simple-icons.github.io/simple-icons-website/',
|
||||
redesignRootDomain = 'simple-icons.github.io',
|
||||
hideBannerAlwaysIdentifier = 'hide-banner',
|
||||
redirectAutomaticallyIdentifier = 'redirect-to-redesign';
|
||||
|
||||
$redirectAutomatically.addEventListener('click', function() {
|
||||
var redirect = true;
|
||||
if (localStorage) {
|
||||
var currentVal = localStorage.getItem(redirectAutomaticallyIdentifier);
|
||||
if (currentVal === 'true') {
|
||||
redirect = false;
|
||||
}
|
||||
|
||||
localStorage.setItem(redirectAutomaticallyIdentifier, redirect);
|
||||
}
|
||||
|
||||
if (redirect) {
|
||||
window.location.replace(redesignUrl);
|
||||
} else {
|
||||
$redirectAutomatically.innerHTML = "Redirect automatically";
|
||||
}
|
||||
});
|
||||
$hideOnce.addEventListener('click', function () {
|
||||
$banner.classList.add('hidden');
|
||||
});
|
||||
$hideAlways.addEventListener('click', function () {
|
||||
if (localStorage) {
|
||||
localStorage.setItem(hideBannerAlwaysIdentifier, true);
|
||||
}
|
||||
|
||||
$banner.classList.add('hidden');
|
||||
});
|
||||
|
||||
if (localStorage) {
|
||||
var redirect = localStorage.getItem(redirectAutomaticallyIdentifier);
|
||||
if (redirect === 'true') {
|
||||
$redirectAutomatically.innerHTML = "Disable redirect";
|
||||
if (document.referrer.split('/')[2] !== redesignRootDomain) {
|
||||
window.location.replace(redesignUrl);
|
||||
}
|
||||
}
|
||||
|
||||
var hide = localStorage.getItem(hideBannerAlwaysIdentifier);
|
||||
if (hide) {
|
||||
$banner.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
})( document );
|
||||
405
stylesheet.css
405
stylesheet.css
|
|
@ -1,405 +0,0 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
abbr {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #263238;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 0.875rem;
|
||||
height: 100%;
|
||||
line-height: 1.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
#carbonads {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
#carbonads a {
|
||||
color: #263238;
|
||||
}
|
||||
#carbonads > span {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.carbon-img {
|
||||
display: block;
|
||||
padding: 1rem 1rem 0.5rem;
|
||||
}
|
||||
|
||||
.carbon-text {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
margin: 0 auto;
|
||||
max-width: 15rem;
|
||||
}
|
||||
|
||||
.carbon-poweredby {
|
||||
font-size: 0.625rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.5rem;
|
||||
opacity: 0.25;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #EEE;
|
||||
margin-top: auto;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
@media (min-width: 45rem) {
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 3rem;
|
||||
}
|
||||
}
|
||||
.footer a {
|
||||
color: #263238;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.footer p {
|
||||
margin: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
a.share-button {
|
||||
background-color: #1DA1F2;
|
||||
border-radius: 0.125rem;
|
||||
color: #FFF;
|
||||
display: block;
|
||||
margin: 0.75rem 0 0;
|
||||
padding: 0.75rem 1.5rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (min-width: 45rem) {
|
||||
a.share-button {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
margin: 0;
|
||||
padding: 3rem 1.5rem 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
@media (min-width: 45rem) {
|
||||
.hero {
|
||||
padding: 4.5rem 3rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 1rem 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
@media (min-width: 45rem) {
|
||||
.search {
|
||||
margin: 1rem 3rem;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.search .search__wrapper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.search .search__close {
|
||||
display: none;
|
||||
font-size: 1rem;
|
||||
padding: 6px 12px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 1px;
|
||||
}
|
||||
.search .search__close span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search input {
|
||||
color: #333;
|
||||
font-size: 1rem;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
@media (min-width: 45rem) {
|
||||
.search input {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.search--active .search__close {
|
||||
display: block;
|
||||
}
|
||||
.search--active input {
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.sort-btn {
|
||||
cursor: pointer;
|
||||
margin-left: .5rem;
|
||||
opacity: .5;
|
||||
}
|
||||
.sort-btn:first-of-type {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.sort-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.sort-btn:hover path:first-of-type {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
#sort-color:hover path:nth-of-type(2) {
|
||||
fill: #E57373;
|
||||
}
|
||||
#sort-color:hover path:nth-of-type(3) {
|
||||
fill: #F44336;
|
||||
}
|
||||
#sort-color:hover path:nth-of-type(4) {
|
||||
fill: #D32F2F;
|
||||
}
|
||||
#sort-color:hover path:nth-of-type(5) {
|
||||
fill: #B71C1C;
|
||||
}
|
||||
|
||||
#sort-alphabetically:hover path:nth-of-type(2),
|
||||
#sort-alphabetically:hover path:nth-of-type(3) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#sort-relevance:hover path:not(:nth-of-type(1)) {
|
||||
fill: #fbc02d;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: 1.5rem;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@media (min-width: 45rem) {
|
||||
.grid {
|
||||
margin: 3rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.grid > .grid-item--if-empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.grid.search__empty > .grid-item--if-empty {
|
||||
display: block;
|
||||
font-size: 1.25em;
|
||||
grid-column: span 3;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
@supports (display: grid) {
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
grid-column-gap: 0.375rem;
|
||||
grid-row-gap: 0.375rem;
|
||||
grid-auto-flow: dense;
|
||||
}
|
||||
.grid.search__empty:after {
|
||||
grid-column: 1/span 2;
|
||||
}
|
||||
|
||||
@media (min-width: 30.75rem) {
|
||||
.grid.search__empty:after {
|
||||
grid-column: 1/-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: #757575;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
.grid-item--light {
|
||||
color: #FFF;
|
||||
}
|
||||
.grid-item--dark {
|
||||
color: #222;
|
||||
}
|
||||
@supports not (display: grid) {
|
||||
.grid-item {
|
||||
border: 0.1875rem solid #FFF;
|
||||
padding: 0 0 0.75rem;
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-item--ad {
|
||||
background-color: #EEE;
|
||||
grid-column: -2 / -1;
|
||||
grid-row-end: span 2;
|
||||
height: auto;
|
||||
}
|
||||
@media (min-width: 21.75rem) {
|
||||
.grid-item--ad {
|
||||
grid-column: -3 / -1;
|
||||
}
|
||||
}
|
||||
@supports not (display: grid) {
|
||||
.grid-item--ad {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-item__link {
|
||||
color: inherit;
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-item__image {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.grid-item__title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.grid-item__subtitle {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
margin: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #263238;
|
||||
}
|
||||
|
||||
.navbar__nav {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@media (min-width: 45rem) {
|
||||
.navbar__nav {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar__nav-item a {
|
||||
color: #FFF;
|
||||
display: block;
|
||||
opacity: 0.5;
|
||||
padding: 1.5rem 0.375rem;
|
||||
}
|
||||
.navbar__nav-item a:focus, .navbar__nav-item a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.navbar__nav-item:last-child a {
|
||||
padding: 1.5rem 1.5rem 1.5rem 0.375rem;
|
||||
}
|
||||
|
||||
.navbar__nav-item--home {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.navbar__nav-item--home a {
|
||||
opacity: 1;
|
||||
padding: 1.5rem 0 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.redesign-banner {
|
||||
background-color: #565f63;
|
||||
color: #FFF;
|
||||
margin: 0;
|
||||
padding: 0.5rem 1.5rem;
|
||||
}
|
||||
.redesign-banner a {
|
||||
color: #0096ee;
|
||||
}
|
||||
.redesign-banner a:focus, .redesign-banner a:hover,
|
||||
.redesign-banner button:focus, .redesign-banner button:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.redesign-banner span {
|
||||
float: right
|
||||
}
|
||||
.redesign-banner button {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: #0096ee;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.order-by-color #sort-color {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
body.order-by-relevance .grid-item {
|
||||
order: var(--order-relevance);
|
||||
}
|
||||
|
||||
body.order-by-relevance #sort-relevance {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
body.order-alphabetically .grid-item {
|
||||
order: var(--order-alpha);
|
||||
}
|
||||
|
||||
body.order-alphabetically #sort-alphabetically {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
body:not(.search__active) #sort-relevance {
|
||||
display: none;
|
||||
}
|
||||
Loading…
Reference in a new issue