mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

added contributors to splash page

This commit is contained in:
Sam Keddy 2020-04-16 18:21:34 +00:00
parent 737afc6e79
commit f1fe597b80
3 changed files with 71 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
css/pixel-editor-splash-page.scss
View File

@ -1,3 +1,4 @@
$base-color: #332f35;
.pixel-editor-screenshot {
box-shadow: 0px 10px 40px 0px rgba(0,0,0,0.45);
@ -7,4 +8,31 @@
border: solid 5px white;
}
hr {
margin: 4em 0 2em;
}
.contributors {
display: flex;
flex-wrap: wrap;
a {
display: flex;
flex-direction: column;
font-size: 0.7em;
text-align: center;
padding: 1em;
align-items: center;
color: lighten($base-color,50%);
img {
width: 60px;
height: 60px;
}
&:hover {
background: darken($base-color,5%);
color: white;
}
}
}

20
js/pixel-editor-splash-page.js Normal file
View File

@ -0,0 +1,20 @@
ajax('https://api.github.com/repos/lospec/pixel-editor/contributors', response => {
console.log(response)
if (Array.isArray(response)) {
var html = '';
response.forEach(c => {
//skip lospec
if (c.login == 'lospec') return;
//add to html
html+='<a target="_blank" href="'+c.html_url+'"><img src="'+c.avatar_url+'&s=60" /> '+c.login+'</a>'
});
document.querySelector('.contributors').innerHTML = html;
}
});

33
views/pixel-editor-splash-page.hbs
View File

@ -1,29 +1,42 @@
<h1>{{title}}</h1>
<p>
The Lospec Pixel editor is a free pixel art program that you can use right here
in your web browser. Our goal was to create an easy to use, intuitive and
unobtrusive pixel art application that you can use anywhere. Whether you're
creating assets for a game or just want to make 8 bit art, this tool is an easy
The Lospec Pixel editor is a free pixel art program that you can use right here
in your web browser. Our goal was to create an easy to use, intuitive and
unobtrusive pixel art application that you can use anywhere. Whether you're
creating assets for a game or just want to make 8 bit art, this tool is an easy
way to pixel fast.
</p>
<img class="pixel-editor-screenshot" src="/pixel-editor/pixel-editor-screenshot.png" alt="Lospec Pixel Editor Screenshot" />
<p>
This application does not have all the features of more advanced desktop editor,
but we will add more over time. It currently features a pencil, eraser, fill, pan, eyedropper
and zoom tool. You can also easily adjust any colors in your palette. You can
use any palette in our <a href="/palette-list">Palette List</a> by clicking the pencil next to the palette
title.
This application does not have all the features of more advanced desktop editor,
but we will add more over time. It currently features a pencil, eraser, fill, pan, eyedropper
and zoom tool. You can also easily adjust any colors in your palette. You can
use any palette in our <a href="/palette-list">Palette List</a> by clicking the pencil next to the palette
title.
</p>
<p>
This app currently only works on desktops, and requires a modern browser such as
This app currently only works on desktops, and requires a modern browser such as
the latest versions of <a target="_blank" href="https://www.mozilla.org/en-US/firefox/new/">Firefox or Chrome</a>.
</p>
<a class="link-button" href="/pixel-editor/app">Enter app now&nbsp;&nbsp;{{svg "angle-right.svg" width="32" height="32"}}</a>
<hr />
<p>This app has been made in collaboration with <a {{outbound}} href="https://github.com/lospec/pixel-editor/graphs/contributors">contributors</a> on GitHub. We welcome anyone to submit bugfixes and new features.</p>
<div><strong>Our Contributors:</strong></div>
<div class="contributors">
</div>
<a class="link-button" {{outbound}} href="https://github.com/lospec/pixel-editor">View on GitHub&nbsp;&nbsp;{{svg "github"}}</a>