mirror of
https://github.com/Mibew/simple-icons.git
synced 2024-11-16 02:14:12 +03:00
Simplified web page
This commit is contained in:
Dan Leech
parent
198027d359
commit
dc55cfcff1
742
index.html
742
index.html
File diff suppressed because one or more lines are too long
@ -86,7 +86,7 @@ var header = fs.readFileSync('./header.html', 'utf8');
|
||||
var footer = fs.readFileSync('./footer.html', 'utf8');
|
||||
|
||||
// Build content
|
||||
var main = " <ul class=\"tiles tiles--full\">";
|
||||
var main = " <ul class=\"tiles\">";
|
||||
|
||||
for (var i = 0; i < source.icons.length; i++) {
|
||||
var fileName = source.icons[i].title.toLowerCase();
|
||||
|
||||
@ -1,18 +1,5 @@
|
||||
|
||||
</ul>
|
||||
</main>
|
||||
<script>
|
||||
function toggleNames() {
|
||||
var list = document.getElementsByClassName("tiles tiles--icons");
|
||||
if(list.length == 1) {
|
||||
list[0].className = "tiles tiles--full";
|
||||
document.getElementById("toggle-button").innerHTML = "Hide names & colour values";
|
||||
} else {
|
||||
var list = document.getElementsByClassName("tiles tiles--full");
|
||||
list[0].className = "tiles tiles--icons";
|
||||
document.getElementById("toggle-button").innerHTML = "Show names & colour values";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
108
src/header.html
108
src/header.html
@ -31,25 +31,24 @@
|
||||
<link rel="mask-icon" href="https://simpleicons.org/images/logo.svg" color="#111111">
|
||||
<style>
|
||||
html {
|
||||
font-size: 16px;
|
||||
font-size: 100%;
|
||||
}
|
||||
body {
|
||||
background-color: #FFF;
|
||||
color: #757575;
|
||||
color: #424242;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
-webkit-font-feature-settings: "dlig", "kern", "liga";
|
||||
font-feature-settings: "dlig", "kern", "liga";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-kerning: normal;
|
||||
-webkit-font-variant-ligatures: common-ligatures;
|
||||
font-variant-ligatures: common-ligatures;
|
||||
font-weight: 400;
|
||||
line-height: 1.5rem;
|
||||
margin: 0;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
a {
|
||||
color: #424242;
|
||||
color: #0091EA;
|
||||
}
|
||||
a:focus, a:hover {
|
||||
color: #BDBDBD;
|
||||
color: #00B0FF;
|
||||
}
|
||||
p {
|
||||
margin: 1.5rem 0 0;
|
||||
@ -66,29 +65,20 @@
|
||||
padding: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.button {
|
||||
.btn {
|
||||
background-color: #00C853;
|
||||
border-radius: 0.125rem;
|
||||
color: #FFF;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
padding: 0.75rem 1.5rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
.button:focus, .button:hover {
|
||||
.btn:focus, .btn:hover {
|
||||
background-color: #00E676;
|
||||
color: #FFF;
|
||||
}
|
||||
.button--primary {
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
.button--secondary {
|
||||
background-color: #0091EA;
|
||||
}
|
||||
.button--secondary:focus, .button--secondary:hover {
|
||||
background-color: #00B0FF;
|
||||
}
|
||||
.site-main {
|
||||
width: 100%;
|
||||
}
|
||||
@ -118,10 +108,6 @@
|
||||
background: #FFF;
|
||||
color: #424242;
|
||||
}
|
||||
.tiles li:hover {
|
||||
border: 0.125rem solid #FFF;
|
||||
padding: 1.125rem 0.875rem;
|
||||
}
|
||||
.tile-name {
|
||||
color: #FFF;
|
||||
display: inline-block;
|
||||
@ -133,12 +119,9 @@
|
||||
.tiles svg {
|
||||
float: left;
|
||||
height: 2rem;
|
||||
padding: 0.5rem 0.5rem 0;
|
||||
width: 2rem;
|
||||
}
|
||||
.tiles--full svg {
|
||||
margin: -0.5rem 0 0 0;
|
||||
padding-right: 1.25rem;
|
||||
padding: 0.5rem 1.25rem 0 0.5rem;
|
||||
width: 2rem;
|
||||
}
|
||||
.tiles path, .tiles ellipse, .tiles circle {
|
||||
fill: #FFF;
|
||||
@ -147,9 +130,8 @@
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.5;
|
||||
text-transform: uppercase;
|
||||
transition: opacity .3s ease-in-out;
|
||||
}
|
||||
.tiles--full .tiles__item:hover .hex, .tiles--full .tiles__item:active .hex, .tiles--full .tiles__item:focus .hex {
|
||||
.tiles__item:active .hex, .tiles__item:focus .hex, .tiles__item:hover .hex {
|
||||
opacity: 1;
|
||||
}
|
||||
@media (min-width: 800px) { .tiles li { width: 50%; } }
|
||||
@ -159,41 +141,6 @@
|
||||
@media (min-width: 1600px) { .tiles li { width: 16.666% } }
|
||||
@media (min-width: 1900px) { .tiles li { width: 12.5% } }
|
||||
@media (min-width: 2300px) { .tiles li { width: 10% } }
|
||||
.tiles--icons {
|
||||
justify-content: center;
|
||||
}
|
||||
.tiles--icons .tiles__item {
|
||||
position: relative;
|
||||
}
|
||||
.tiles--icons .icon--link {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.tiles--icons li {
|
||||
height: 4rem;
|
||||
width: 4rem !important;
|
||||
}
|
||||
.tiles--icons svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 1.5rem;
|
||||
margin: 0;
|
||||
-webkit-transform: translate(-50%,-50%);
|
||||
-ms-transform: translate(-50%,-50%);
|
||||
transform: translate(-50%,-50%);
|
||||
padding: 0;
|
||||
width: 1.5rem;
|
||||
}
|
||||
.tiles--icons .tile-name {
|
||||
visibility: hidden;
|
||||
}
|
||||
.tiles--icons .hex {
|
||||
visibility: hidden;
|
||||
}
|
||||
.icon--link:hover .tile-name, .icon--link:active .tile-name, .icon--link:focus .tile-name {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -206,16 +153,10 @@
|
||||
max-width: 25.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.block {
|
||||
background-color: #EEE;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.block--ad {
|
||||
margin: 0.5rem 0 0;
|
||||
.ad {
|
||||
background-color: #F0F0F0;
|
||||
margin: 1.5rem 0 0;
|
||||
padding: 0.75rem;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 1.5rem;
|
||||
}
|
||||
.carbon-wrap:after {
|
||||
clear: both;
|
||||
@ -254,16 +195,13 @@
|
||||
|
||||
<body>
|
||||
<header class="navbar" role="banner">
|
||||
<div class="block">
|
||||
<h1 class="title">Simple Icons</h1>
|
||||
<p><strong>SVG icons for popular brands.</strong> This project is maintained by <a href="https://twitter.com/bathtype">Dan Leech</a>. Contributions, corrections & 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 button--primary">Download</a>
|
||||
<a href="#" id="toggle-button" onclick="toggleNames();return false" class="button button--secondary">Hide names & 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 class="block block--ad">
|
||||
<h1 class="title">Simple Icons</h1>
|
||||
<p><strong>SVG icons for popular brands.</strong> This project is maintained by <a href="https://twitter.com/bathtype">Dan Leech</a>. Contributions, corrections & 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="btn">Download from GitHub</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 class="ad">
|
||||
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=simpleiconsorg" id="_carbonads_js"></script>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user