Mibew/simple-icons
1
0
Fork 0
mirror of https://github.com/Mibew/simple-icons.git synced 2025-10-31 10:31:06 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Makes some minor changes to the sidebar

Browse Source
This commit is contained in:
Dan Leech 2016-12-19 19:42:25 +00:00
parent 439c923fcf
commit 29c56f051b
3 changed files with 66 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
404.html
View File

@ -32,7 +32,7 @@
} }
body { body {
background-color: #FFF; background-color: #FFF;
color: #666; color: #757575;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-webkit-font-feature-settings: "dlig", "kern", "liga"; -webkit-font-feature-settings: "dlig", "kern", "liga";
font-feature-settings: "dlig", "kern", "liga"; font-feature-settings: "dlig", "kern", "liga";
@ -43,10 +43,13 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
a { a {
color: #333; color: #424242;
} }
a:focus, a:hover { a:focus, a:hover {
color: #999; color: #BDBDBD;
}
p {
margin: 1.5rem 0 0;
} }
.navbar { .navbar {
font-size: 0.75rem; font-size: 0.75rem;
@ -61,8 +64,7 @@
text-transform: uppercase; text-transform: uppercase;
} }
.button { .button {
background-color: #6C6; background-color: #00C853;
border-bottom: 0.125rem solid rgba(0,0,0,0.25);
border-radius: 0.125rem; border-radius: 0.125rem;
color: #FFF; color: #FFF;
display: block; display: block;
@ -72,18 +74,17 @@
text-decoration: none; text-decoration: none;
} }
.button:focus, .button:hover { .button:focus, .button:hover {
background-color: #5B5; background-color: #00E676;
color: #FFF; color: #FFF;
} }
.button:active { .button--primary {
border-bottom: 0.125rem solid rgba(0,0,0,0); margin-bottom: 0.375rem;
transform: translateY(0.125rem);
} }
.button--secondary { .button--secondary {
background-color: #999; background-color: #0091EA;
} }
.button--secondary:focus, .button--secondary:hover { .button--secondary:focus, .button--secondary:hover {
background-color: #888; background-color: #00B0FF;
} }
.search-field { .search-field {
-webkit-appearance: none; -webkit-appearance: none;
@ -94,7 +95,7 @@
border: none; border: none;
border-bottom: 1px solid #EEE; border-bottom: 1px solid #EEE;
box-sizing: border-box; box-sizing: border-box;
color: #999; color: #BDBDBD;
display: block; display: block;
font-family: inherit; font-family: inherit;
font-size: 1rem; font-size: 1rem;
@ -116,7 +117,7 @@
} }
.tiles li { .tiles li {
box-sizing: border-box; box-sizing: border-box;
background: #333; background: #424242;
border: 0.25rem solid #FFF; border: 0.25rem solid #FFF;
color: #FFF; color: #FFF;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -127,11 +128,11 @@
} }
.tiles ::selection { .tiles ::selection {
background: #FFF; background: #FFF;
color: #333; color: #424242;
} }
.tiles ::-moz-selection { .tiles ::-moz-selection {
background: #FFF; background: #FFF;
color: #333; color: #424242;
} }
.tiles li:hover { .tiles li:hover {
border: 0.125rem solid #FFF; border: 0.125rem solid #FFF;
@ -246,7 +247,7 @@
width: calc(100% - 130px - 0.75rem); width: calc(100% - 130px - 0.75rem);
} }
.carbon-poweredby { .carbon-poweredby {
color: #AAA; color: #BDBDBD;
display: block; display: block;
margin: 0.25rem 0 0; margin: 0.25rem 0 0;
text-align: center; text-align: center;
@ -273,8 +274,11 @@
<h1 class="title">Simple Icons</h1> <h1 class="title">Simple Icons</h1>
<input type="text" id="search" class="search-field" autofocus> <input type="text" id="search" class="search-field" autofocus>
<p><strong>SVG icons for popular brands.</strong> This project is maintained by <a href="https://twitter.com/bathtype">Dan Leech</a>. Contributions, corrections &amp; requests can be left on <a href="https://github.com/danleech/simple-icons">GitHub</a>. Company logos in icons are copyright of their respective owners.</p> <p><strong>SVG icons for popular brands.</strong> This project is maintained by <a href="https://twitter.com/bathtype">Dan Leech</a>. Contributions, corrections &amp; requests can be left on <a href="https://github.com/danleech/simple-icons">GitHub</a>. Company logos in icons are copyright of their respective owners.</p>
<p><a href="https://github.com/danleech/simple-icons/tree/gh-pages/icons" class="button">Download</a></p> <p>
<p><a href="#" id="toggle-button" onclick="toggleNames();return false" class="button button--secondary">Hide names &amp; colour values</a></p> <a href="https://github.com/danleech/simple-icons/tree/gh-pages/icons" class="button button--primary">Download</a>
<a href="#" id="toggle-button" onclick="toggleNames();return false" class="button button--secondary">Hide names &amp; colour values</a>
</p>
<p><a href="https://twitter.com/intent/tweet?text=This%20free%20set%20of%20SVG%20icons%20for%20popular%20brands%20is%20a%20great%20web%20design%20resource!&url=https%3A%2F%2Fsimpleicons.org&via=bathtype&hashtags=icons,svg,webdesign" target="_blank">Sharing this page on Twitter</a> will help bring in new users and new requests that will help this icon set grow!</p>
</div> </div>
<div class="block block--ad"> <div class="block block--ad">
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=simpleiconsorg" id="_carbonads_js"></script> <script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=simpleiconsorg" id="_carbonads_js"></script>

40
index.html
View File

@ -32,7 +32,7 @@
} }
body { body {
background-color: #FFF; background-color: #FFF;
color: #666; color: #757575;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-webkit-font-feature-settings: "dlig", "kern", "liga"; -webkit-font-feature-settings: "dlig", "kern", "liga";
font-feature-settings: "dlig", "kern", "liga"; font-feature-settings: "dlig", "kern", "liga";
@ -43,10 +43,13 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
a { a {
color: #333; color: #424242;
} }
a:focus, a:hover { a:focus, a:hover {
color: #999; color: #BDBDBD;
}
p {
margin: 1.5rem 0 0;
} }
.navbar { .navbar {
font-size: 0.75rem; font-size: 0.75rem;
@ -61,8 +64,7 @@
text-transform: uppercase; text-transform: uppercase;
} }
.button { .button {
background-color: #6C6; background-color: #00C853;
border-bottom: 0.125rem solid rgba(0,0,0,0.25);
border-radius: 0.125rem; border-radius: 0.125rem;
color: #FFF; color: #FFF;
display: block; display: block;
@ -72,18 +74,17 @@
text-decoration: none; text-decoration: none;
} }
.button:focus, .button:hover { .button:focus, .button:hover {
background-color: #5B5; background-color: #00E676;
color: #FFF; color: #FFF;
} }
.button:active { .button--primary {
border-bottom: 0.125rem solid rgba(0,0,0,0); margin-bottom: 0.375rem;
transform: translateY(0.125rem);
} }
.button--secondary { .button--secondary {
background-color: #999; background-color: #0091EA;
} }
.button--secondary:focus, .button--secondary:hover { .button--secondary:focus, .button--secondary:hover {
background-color: #888; background-color: #00B0FF;
} }
.search-field { .search-field {
-webkit-appearance: none; -webkit-appearance: none;
@ -94,7 +95,7 @@
border: none; border: none;
border-bottom: 1px solid #EEE; border-bottom: 1px solid #EEE;
box-sizing: border-box; box-sizing: border-box;
color: #999; color: #BDBDBD;
display: block; display: block;
font-family: inherit; font-family: inherit;
font-size: 1rem; font-size: 1rem;
@ -116,7 +117,7 @@
} }
.tiles li { .tiles li {
box-sizing: border-box; box-sizing: border-box;
background: #333; background: #424242;
border: 0.25rem solid #FFF; border: 0.25rem solid #FFF;
color: #FFF; color: #FFF;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -127,11 +128,11 @@
} }
.tiles ::selection { .tiles ::selection {
background: #FFF; background: #FFF;
color: #333; color: #424242;
} }
.tiles ::-moz-selection { .tiles ::-moz-selection {
background: #FFF; background: #FFF;
color: #333; color: #424242;
} }
.tiles li:hover { .tiles li:hover {
border: 0.125rem solid #FFF; border: 0.125rem solid #FFF;
@ -246,7 +247,7 @@
width: calc(100% - 130px - 0.75rem); width: calc(100% - 130px - 0.75rem);
} }
.carbon-poweredby { .carbon-poweredby {
color: #AAA; color: #BDBDBD;
display: block; display: block;
margin: 0.25rem 0 0; margin: 0.25rem 0 0;
text-align: center; text-align: center;
@ -273,8 +274,11 @@
<h1 class="title">Simple Icons</h1> <h1 class="title">Simple Icons</h1>
<input type="text" id="search" class="search-field" autofocus> <input type="text" id="search" class="search-field" autofocus>
<p><strong>SVG icons for popular brands.</strong> This project is maintained by <a href="https://twitter.com/bathtype">Dan Leech</a>. Contributions, corrections &amp; requests can be left on <a href="https://github.com/danleech/simple-icons">GitHub</a>. Company logos in icons are copyright of their respective owners.</p> <p><strong>SVG icons for popular brands.</strong> This project is maintained by <a href="https://twitter.com/bathtype">Dan Leech</a>. Contributions, corrections &amp; requests can be left on <a href="https://github.com/danleech/simple-icons">GitHub</a>. Company logos in icons are copyright of their respective owners.</p>
<p><a href="https://github.com/danleech/simple-icons/tree/gh-pages/icons" class="button">Download</a></p> <p>
<p><a href="#" id="toggle-button" onclick="toggleNames();return false" class="button button--secondary">Hide names &amp; colour values</a></p> <a href="https://github.com/danleech/simple-icons/tree/gh-pages/icons" class="button button--primary">Download</a>
<a href="#" id="toggle-button" onclick="toggleNames();return false" class="button button--secondary">Hide names &amp; colour values</a>
</p>
<p><a href="https://twitter.com/intent/tweet?text=This%20free%20set%20of%20SVG%20icons%20for%20popular%20brands%20is%20a%20great%20web%20design%20resource!&url=https%3A%2F%2Fsimpleicons.org&via=bathtype&hashtags=icons,svg,webdesign" target="_blank">Sharing this page on Twitter</a> will help bring in new users and new requests that will help this icon set grow!</p>
</div> </div>
<div class="block block--ad"> <div class="block block--ad">
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=simpleiconsorg" id="_carbonads_js"></script> <script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=simpleiconsorg" id="_carbonads_js"></script>

40
src/header.html
View File

@ -32,7 +32,7 @@
} }
body { body {
background-color: #FFF; background-color: #FFF;
color: #666; color: #757575;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-webkit-font-feature-settings: "dlig", "kern", "liga"; -webkit-font-feature-settings: "dlig", "kern", "liga";
font-feature-settings: "dlig", "kern", "liga"; font-feature-settings: "dlig", "kern", "liga";
@ -43,10 +43,13 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
a { a {
color: #333; color: #424242;
} }
a:focus, a:hover { a:focus, a:hover {
color: #999; color: #BDBDBD;
}
p {
margin: 1.5rem 0 0;
} }
.navbar { .navbar {
font-size: 0.75rem; font-size: 0.75rem;
@ -61,8 +64,7 @@
text-transform: uppercase; text-transform: uppercase;
} }
.button { .button {
background-color: #6C6; background-color: #00C853;
border-bottom: 0.125rem solid rgba(0,0,0,0.25);
border-radius: 0.125rem; border-radius: 0.125rem;
color: #FFF; color: #FFF;
display: block; display: block;
@ -72,18 +74,17 @@
text-decoration: none; text-decoration: none;
} }
.button:focus, .button:hover { .button:focus, .button:hover {
background-color: #5B5; background-color: #00E676;
color: #FFF; color: #FFF;
} }
.button:active { .button--primary {
border-bottom: 0.125rem solid rgba(0,0,0,0); margin-bottom: 0.375rem;
transform: translateY(0.125rem);
} }
.button--secondary { .button--secondary {
background-color: #999; background-color: #0091EA;
} }
.button--secondary:focus, .button--secondary:hover { .button--secondary:focus, .button--secondary:hover {
background-color: #888; background-color: #00B0FF;
} }
.search-field { .search-field {
-webkit-appearance: none; -webkit-appearance: none;
@ -94,7 +95,7 @@
border: none; border: none;
border-bottom: 1px solid #EEE; border-bottom: 1px solid #EEE;
box-sizing: border-box; box-sizing: border-box;
color: #999; color: #BDBDBD;
display: block; display: block;
font-family: inherit; font-family: inherit;
font-size: 1rem; font-size: 1rem;
@ -116,7 +117,7 @@
} }
.tiles li { .tiles li {
box-sizing: border-box; box-sizing: border-box;
background: #333; background: #424242;
border: 0.25rem solid #FFF; border: 0.25rem solid #FFF;
color: #FFF; color: #FFF;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -127,11 +128,11 @@
} }
.tiles ::selection { .tiles ::selection {
background: #FFF; background: #FFF;
color: #333; color: #424242;
} }
.tiles ::-moz-selection { .tiles ::-moz-selection {
background: #FFF; background: #FFF;
color: #333; color: #424242;
} }
.tiles li:hover { .tiles li:hover {
border: 0.125rem solid #FFF; border: 0.125rem solid #FFF;
@ -246,7 +247,7 @@
width: calc(100% - 130px - 0.75rem); width: calc(100% - 130px - 0.75rem);
} }
.carbon-poweredby { .carbon-poweredby {
color: #AAA; color: #BDBDBD;
display: block; display: block;
margin: 0.25rem 0 0; margin: 0.25rem 0 0;
text-align: center; text-align: center;
@ -273,8 +274,11 @@
<h1 class="title">Simple Icons</h1> <h1 class="title">Simple Icons</h1>
<input type="text" id="search" class="search-field" autofocus> <input type="text" id="search" class="search-field" autofocus>
<p><strong>SVG icons for popular brands.</strong> This project is maintained by <a href="https://twitter.com/bathtype">Dan Leech</a>. Contributions, corrections &amp; requests can be left on <a href="https://github.com/danleech/simple-icons">GitHub</a>. Company logos in icons are copyright of their respective owners.</p> <p><strong>SVG icons for popular brands.</strong> This project is maintained by <a href="https://twitter.com/bathtype">Dan Leech</a>. Contributions, corrections &amp; requests can be left on <a href="https://github.com/danleech/simple-icons">GitHub</a>. Company logos in icons are copyright of their respective owners.</p>
<p><a href="https://github.com/danleech/simple-icons/tree/gh-pages/icons" class="button">Download</a></p> <p>
<p><a href="#" id="toggle-button" onclick="toggleNames();return false" class="button button--secondary">Hide names &amp; colour values</a></p> <a href="https://github.com/danleech/simple-icons/tree/gh-pages/icons" class="button button--primary">Download</a>
<a href="#" id="toggle-button" onclick="toggleNames();return false" class="button button--secondary">Hide names &amp; colour values</a>
</p>
<p><a href="https://twitter.com/intent/tweet?text=This%20free%20set%20of%20SVG%20icons%20for%20popular%20brands%20is%20a%20great%20web%20design%20resource!&url=https%3A%2F%2Fsimpleicons.org&via=bathtype&hashtags=icons,svg,webdesign" target="_blank">Sharing this page on Twitter</a> will help bring in new users and new requests that will help this icon set grow!</p>
</div> </div>
<div class="block block--ad"> <div class="block block--ad">
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=simpleiconsorg" id="_carbonads_js"></script> <script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=simpleiconsorg" id="_carbonads_js"></script>