mirror of
https://github.com/msikma/pokesprite.git
synced 2026-04-24 23:47:29 -05:00
Remove legacy resource files for the old docs
This commit is contained in:
Michiel Sikma
parent
106f67096d
commit
a2141d4c86
|
|
@ -1,45 +0,0 @@
|
|||
<!doctype html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
||||
<!--
|
||||
|
||||
{{$title_str}} v{{$version}} ({{$revision}}) {{$website_txt}}
|
||||
{{$copyright_str}}
|
||||
{{$copyright_gf}}
|
||||
{{$copyright_contrib_notice}}
|
||||
{{$generated_on}}
|
||||
|
||||
-->
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>{{$title_str}} v{{$version}} ({{$revision}}) – Files</title>
|
||||
<!-- Pokémon icons -->
|
||||
<link type="text/css" href="{{$css_output_min}}" rel="stylesheet" media="screen" />
|
||||
<script charset="utf-8" src="{{$js_output_min}}" ></script>
|
||||
<!-- Overview CSS (generated from {{$resources_dir}}overview.scss) -->
|
||||
<link type="text/css" href="overview.min.css" rel="stylesheet" media="screen" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="top">
|
||||
<div class="description">
|
||||
<div class="header">
|
||||
<h1>PokéSprite</h1>
|
||||
<p>Pokémon icon database and sprite sheet generator</p>
|
||||
</div>
|
||||
<div class="docs-container">
|
||||
<h2>Files (v{{$version}}; {{$revision}})</h2>
|
||||
<p>To implement PokéSprite on a website, you need to include one CSS file, one JS file and one image. Depending on where you want to keep the image, you'll need to edit the CSS file to point to the right location.</p>
|
||||
<p>Generated on <span class="time">{{$script_date_html}}</span> (<span class="amount">{{$icons_amount}}</span> icons).</p>
|
||||
<p class="build-section"><strong>Standard build:</strong></p>
|
||||
<p>Contains Pokémon (regular and shiny; with forms, with right-facing alternate icons), and items.</p>
|
||||
<ul>
|
||||
<li><a href="pokesprite.min.css">pokesprite.min.css</a></li>
|
||||
<li><a href="pokesprite.min.js">pokesprite.min.js</a></li>
|
||||
<li><a href="pokesprite.png">pokesprite.png</a></li>
|
||||
</ul>
|
||||
<p>For more information about the project, visit <a href="{{$website_html}}">{{$website_html}}</a>.</p>
|
||||
<p><a href="{{$html_rel_home}}">Back to overview.</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
// PokéSprite
|
||||
// ----------
|
||||
// Overview HTML page SCSS mixins and functions.
|
||||
//
|
||||
// The use of this source code is governed by the MIT license.
|
||||
// See the COPYRIGHT file for more information.
|
||||
|
||||
|
||||
// Mixins and Functions
|
||||
// --------------------
|
||||
|
||||
// Add rounding to a table (regardless of its structure).
|
||||
@mixin table-rounded($amount:"m") {
|
||||
// Note: this will be overridden by .inner-borders if set.
|
||||
border-collapse: separate;
|
||||
|
||||
// If the <thead> et al. elements are not the first
|
||||
// then they must be followed by either a <caption> or a <colgroup>.
|
||||
// Otherwise, the table is invalid HTML.
|
||||
thead:first-child, tbody:first-child, tfoot:first-child,
|
||||
caption + thead, caption + tbody, caption + tfoot,
|
||||
colgroup + thead, colgroup + tbody, colgroup + tfoot {
|
||||
tr:first-child {
|
||||
th:first-child, td:first-child {
|
||||
@include border-radius($amount, ("tl"));
|
||||
}
|
||||
th:last-child, td:last-child {
|
||||
@include border-radius($amount, ("tr"));
|
||||
}
|
||||
}
|
||||
}
|
||||
thead:last-child, tbody:last-child, tfoot:last-child {
|
||||
tr:last-child {
|
||||
th:first-child, td:first-child {
|
||||
@include border-radius($amount, ("bl"));
|
||||
}
|
||||
th:last-child, td:last-child {
|
||||
@include border-radius($amount, ("br"));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add border to a table.
|
||||
@mixin table-border($color-border) {
|
||||
// See the @table-rounded mixin for more info.
|
||||
thead:first-child, tbody:first-child, tfoot:first-child,
|
||||
caption + thead, caption + tbody, caption + tfoot,
|
||||
colgroup + thead, colgroup + tbody, colgroup + tfoot {
|
||||
tr {
|
||||
&:first-child {
|
||||
th, td {
|
||||
border-top: 1px solid $color-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
thead, tbody, tfoot {
|
||||
th, td {
|
||||
&:first-child {
|
||||
border-left: 1px solid $color-border;
|
||||
}
|
||||
&:last-child {
|
||||
border-right: 1px solid $color-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
thead:last-child, tbody:last-child, tfoot:last-child {
|
||||
tr {
|
||||
&:last-child {
|
||||
th, td {
|
||||
border-bottom: 1px solid $color-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Box model setting
|
||||
// See <http://www.paulirish.com/2012/box-sizing-border-box-ftw/> for more info.
|
||||
// It's recommended to use either content-box or border-box.
|
||||
|
||||
@mixin box-sizing($value:border-box) {
|
||||
@if $pkspr-compatibility-mode {
|
||||
-moz-box-sizing: $value; // Firefox current
|
||||
-webkit-box-sizing: $value; // iOS <= 4, Android <= 2.3
|
||||
}
|
||||
box-sizing: $value;
|
||||
}
|
||||
|
||||
// Mixin for border radiuses
|
||||
//
|
||||
// $amount can be a regular value, or 'xs', 's', 'm', or 'l'.
|
||||
//
|
||||
// $corners needs to be a list with any of 'tl', 'tr', 'bl', 'br',
|
||||
// in any order. For example, ('tl', 'tr'), which would apply the
|
||||
// border radius only to the top left and top right corners.
|
||||
|
||||
@mixin border-radius($amount:"m", $corners:("tl", "tr", "bl", "br")) {
|
||||
// If the $amount variable is a string, check if we have a variable
|
||||
// with a standardized radius size.
|
||||
$radius: 0;
|
||||
$radiuses: (
|
||||
xs: $border-radius-xs,
|
||||
s: $border-radius-s,
|
||||
m: $border-radius-m,
|
||||
l: $border-radius-l,
|
||||
);
|
||||
$amount-val: map-get($radiuses, $amount);
|
||||
|
||||
// Either take our standard value or use whatever was passed to $amount.
|
||||
@if ($amount-val != null) {
|
||||
$radius: $amount-val;
|
||||
}
|
||||
@else {
|
||||
$radius: $amount;
|
||||
}
|
||||
|
||||
// Reset the border radius first.
|
||||
border-radius: 0;
|
||||
|
||||
// Loop through the $corners argument.
|
||||
$i: length($corners);
|
||||
$cmap: (
|
||||
tl: border-top-left-radius,
|
||||
tr: border-top-right-radius,
|
||||
bl: border-bottom-left-radius,
|
||||
br: border-bottom-right-radius,
|
||||
);
|
||||
@while $i > 0 {
|
||||
$corner: nth($corners, $i);
|
||||
$attr: map-get($cmap, $corner);
|
||||
#{$attr}: $radius;
|
||||
$i: $i - 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
<!doctype html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
||||
<!--
|
||||
|
||||
{{$title_str}} v{{$version}} ({{$revision}}) {{$website_txt}}
|
||||
{{$copyright_str}}
|
||||
{{$copyright_gf}}
|
||||
{{$copyright_contrib_notice}}
|
||||
{{$generated_on}}
|
||||
|
||||
-->
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>{{$title_str}} v{{$version}} ({{$revision}}) – Icon Overview</title>
|
||||
<!-- Pokémon icons -->
|
||||
<link type="text/css" href="{{$css_output_min}}" rel="stylesheet" media="screen" />
|
||||
<script charset="utf-8" src="{{$js_output_min}}" ></script>
|
||||
<!-- Overview CSS (generated from {{$resources_dir}}overview.scss) -->
|
||||
<link type="text/css" href="overview.min.css" rel="stylesheet" media="screen" />
|
||||
<script>
|
||||
// By far the easiest method to use this script is simply to tell it
|
||||
// to wait for the DOM to load and then process it completely.
|
||||
// It's not particularly efficient, however, so in this example we've
|
||||
// commented it out. See the other <script> tags in the document
|
||||
// for an example of how the decorator pattern works.
|
||||
//PkSpr.process_dom();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="top">
|
||||
<div class="description">
|
||||
<div class="header">
|
||||
<h1>PokéSprite</h1>
|
||||
<p>Pokémon icon database and sprite sheet generator</p>
|
||||
</div>
|
||||
<div class="docs-container">
|
||||
<h2>Icon overview (v{{$version}}; {{$revision}})</h2>
|
||||
<p>The following list is a complete overview of all icons and the HTML necessary to display them.</p>
|
||||
<p>Generated on <span class="time">{{$script_date_html}}</span> (<span class="amount">{{$icons_amount}}</span> icons).</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
{{$icons}}
|
||||
</div>
|
||||
<div class="description">
|
||||
<div class="docs-container">
|
||||
<p>For more information about the project, visit <a href="{{$website_html}}">{{$website_html}}</a>.</p>
|
||||
<p><a href="{{$html_rel_home}}">Back to overview.</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,245 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
// PokéSprite
|
||||
// ----------
|
||||
// The use of this source code is governed by the MIT license.
|
||||
// See the COPYRIGHT file for more information.
|
||||
|
||||
// This file contains the SCSS for the icon overview page that's generated
|
||||
// along with the sprite image and SCSS file. To properly display the
|
||||
// overview HTML page that the script generates, compile this SCSS
|
||||
// file to `output/overview.css`.
|
||||
|
||||
@import 'includes/functions.scss';
|
||||
|
||||
|
||||
// Variables
|
||||
// ---------
|
||||
|
||||
$border-radius-xs: 2px;
|
||||
$border-radius-s: 2.5px;
|
||||
$border-radius-m: 3px;
|
||||
$border-radius-l: 4px;
|
||||
|
||||
$font-header: 'Helvetica', 'Arial', sans-serif;
|
||||
$font-primary: 'Helvetica Neue', 'Arial', sans-serif;
|
||||
$font-mono: 'Menlo', 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||
|
||||
$font-base-size: 14px;
|
||||
$font-small-size: 12px;
|
||||
$font-base-lineheight: 20px / $font-base-size;
|
||||
$font-mono-size: 13.3px;
|
||||
|
||||
$color-table-border: #dedcdc;
|
||||
$color-text: #050202;
|
||||
$color-link: #1F85EB;
|
||||
$color-example: $color-text;
|
||||
$color-example-class: #112e39;
|
||||
$background-example-class: #cfecf7;
|
||||
|
||||
// Whether to compile for compatibility mode (no browser hacks).
|
||||
// Keep this true, otherwise the layout breaks.
|
||||
$pkspr-compatibility-mode: true;
|
||||
|
||||
|
||||
// Overview Styling
|
||||
// ----------------
|
||||
|
||||
// Implement the border-box format site-wide.
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
font-size: $font-base-size;
|
||||
line-height: $font-base-lineheight;
|
||||
font-family: $font-primary;
|
||||
color: $color-text;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// Main containing div.
|
||||
#top {
|
||||
padding: 10px;
|
||||
width: 1140px;
|
||||
margin: auto;
|
||||
|
||||
a {
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
// Top project description.
|
||||
.description {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
h1 {
|
||||
font-family: $font-header;
|
||||
font-size: 30px;
|
||||
margin: 0;
|
||||
padding: 10px 0 0;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: #686868;
|
||||
}
|
||||
}
|
||||
.docs-container {
|
||||
margin: auto;
|
||||
width: 770px;
|
||||
|
||||
@media screen and (max-width: 770px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0 0 6px;
|
||||
|
||||
&.build-section {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
&.img {
|
||||
margin-bottom: 30px;
|
||||
|
||||
// The overview image on the homepage.
|
||||
> img.pkspr.banner {
|
||||
@media screen and (max-width: 640px) {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
image-rendering: -moz-auto;
|
||||
image-rendering: -webkit-auto;
|
||||
image-rendering: auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The table containing all our icons.
|
||||
.table.pkspr-overview {
|
||||
@include table-rounded();
|
||||
@include table-border($color-table-border);
|
||||
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
text-align: left;
|
||||
|
||||
p, pre {
|
||||
margin: 0;
|
||||
}
|
||||
pre {
|
||||
font-size: percentage($font-mono-size / $font-base-size);
|
||||
}
|
||||
pre, code {
|
||||
font-family: $font-mono;
|
||||
white-space: normal;
|
||||
}
|
||||
tr {
|
||||
th {
|
||||
white-space: nowrap;
|
||||
}
|
||||
td, th {
|
||||
border-left: 1px solid $color-table-border;
|
||||
border-bottom: 1px solid $color-table-border;
|
||||
padding: 0 8px;
|
||||
margin: 0;
|
||||
height: 30px;
|
||||
|
||||
&.n {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
|
||||
.spacer {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
&[rowspan]:not([rowspan="1"]) {
|
||||
padding-top: 5px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.idx {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
|
||||
p.idx {
|
||||
}
|
||||
}
|
||||
&.file {
|
||||
font-size: percentage($font-small-size / $font-base-size);
|
||||
}
|
||||
&.example {
|
||||
color: $color-example !important;
|
||||
|
||||
.class {
|
||||
@include border-radius("s");
|
||||
color: $color-example-class;
|
||||
background-color: $background-example-class;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
}
|
||||
&.icon {
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
|
||||
// We're displaying the .pkspr icons at full height (TODO: FIX)
|
||||
.pkspr {
|
||||
display: block;
|
||||
margin: auto;
|
||||
|
||||
> i {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Some modifications for smaller screens (including mobile).
|
||||
@media screen and (max-width: 1140px) {
|
||||
width: 100%;
|
||||
}
|
||||
// Hide the 'file' column on very small sizes, as a last resort.
|
||||
@media screen and (max-width: 770px) {
|
||||
th, td {
|
||||
&.file {
|
||||
display: none;
|
||||
}
|
||||
&.example {
|
||||
border-right: 1px solid $color-table-border;
|
||||
}
|
||||
}
|
||||
tr:first-child {
|
||||
th, td {
|
||||
&.example {
|
||||
@include border-radius("m", ("tr"));
|
||||
}
|
||||
}
|
||||
}
|
||||
tr:last-child {
|
||||
th, td {
|
||||
&.example {
|
||||
@include border-radius("m", ("br"));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user