diff --git a/css/pixel-editor-splash-page.scss b/css/pixel-editor-splash-page.scss index 36d5f30..b3838ec 100644 --- a/css/pixel-editor-splash-page.scss +++ b/css/pixel-editor-splash-page.scss @@ -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; + } + + } +} diff --git a/js/pixel-editor-splash-page.js b/js/pixel-editor-splash-page.js new file mode 100644 index 0000000..c671905 --- /dev/null +++ b/js/pixel-editor-splash-page.js @@ -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+=' '+c.login+'' + }); + + document.querySelector('.contributors').innerHTML = html; + } +}); \ No newline at end of file diff --git a/views/pixel-editor-splash-page.hbs b/views/pixel-editor-splash-page.hbs index cbd602d..9732386 100644 --- a/views/pixel-editor-splash-page.hbs +++ b/views/pixel-editor-splash-page.hbs @@ -1,29 +1,42 @@

{{title}}

-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.

Lospec Pixel Editor Screenshot

-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 Palette List 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 Palette List by clicking the pencil next to the palette +title.

-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 Firefox or Chrome.

Enter app now  {{svg "angle-right.svg" width="32" height="32"}} +
+ +

This app has been made in collaboration with contributors on GitHub. We welcome anyone to submit bugfixes and new features.

+ +
Our Contributors:
+ +
+ +
+ +View on GitHub  {{svg "github"}} + +