From 6d2c067f0d6bc78eef7ececcec3eba71cbb5d80c Mon Sep 17 00:00:00 2001 From: David Luevano Alvarado Date: Tue, 1 Jun 2021 03:21:33 -0600 Subject: add fork awesome, contact and donate pages, update general style and update readme --- .../src/doc/_includes/examples/accessible.html | 101 +++++++++++++++++++ .../src/doc/_includes/examples/animated.html | 60 +++++++++++ .../src/doc/_includes/examples/basic.html | 39 ++++++++ .../src/doc/_includes/examples/bootstrap.html | 111 +++++++++++++++++++++ .../doc/_includes/examples/bordered-pulled.html | 30 ++++++ .../src/doc/_includes/examples/custom.html | 16 +++ .../src/doc/_includes/examples/fixed-width.html | 33 ++++++ .../src/doc/_includes/examples/larger.html | 40 ++++++++ .../src/doc/_includes/examples/list.html | 30 ++++++ .../doc/_includes/examples/rotated-flipped.html | 34 +++++++ .../src/doc/_includes/examples/stacked.html | 65 ++++++++++++ 11 files changed, 559 insertions(+) create mode 100644 static/fork-awesome/src/doc/_includes/examples/accessible.html create mode 100644 static/fork-awesome/src/doc/_includes/examples/animated.html create mode 100644 static/fork-awesome/src/doc/_includes/examples/basic.html create mode 100644 static/fork-awesome/src/doc/_includes/examples/bootstrap.html create mode 100644 static/fork-awesome/src/doc/_includes/examples/bordered-pulled.html create mode 100644 static/fork-awesome/src/doc/_includes/examples/custom.html create mode 100644 static/fork-awesome/src/doc/_includes/examples/fixed-width.html create mode 100644 static/fork-awesome/src/doc/_includes/examples/larger.html create mode 100644 static/fork-awesome/src/doc/_includes/examples/list.html create mode 100644 static/fork-awesome/src/doc/_includes/examples/rotated-flipped.html create mode 100644 static/fork-awesome/src/doc/_includes/examples/stacked.html (limited to 'static/fork-awesome/src/doc/_includes/examples') diff --git a/static/fork-awesome/src/doc/_includes/examples/accessible.html b/static/fork-awesome/src/doc/_includes/examples/accessible.html new file mode 100644 index 0000000..0360a46 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/accessible.html @@ -0,0 +1,101 @@ +
+

+ Accessibility-Minded +

+
+
+

+ + + + + + + + + + + +

+ +

+ + Refreshing... + + + Saving. Hang tight! +

+ +

+

+ + +
+
+ + +
+

+ +

+ + + +

+ +

+ + Battery level: 50% +

+
+
+

+ With our thoughts on icon accessibility in mind, If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text. +

+ +{% highlight html %} + + + + + + + + + + + +{% endhighlight %} + +{% highlight html %} + +Refreshing... + + +Saving. Hang tight! +{% endhighlight %} + +{% highlight html %} +
+ + +
+
+ + +
+{% endhighlight %} + +{% highlight html %} + + + +{% endhighlight %} + +{% highlight html %} + +Battery level: 50% +{% endhighlight %} +
+
+
diff --git a/static/fork-awesome/src/doc/_includes/examples/animated.html b/static/fork-awesome/src/doc/_includes/examples/animated.html new file mode 100644 index 0000000..595bff9 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/animated.html @@ -0,0 +1,60 @@ +
+

+ Animated Icons + +

+
+
+

+ + Loading example (with fa-spinner icon) + + + Loading (with fa-circle-o-notch icon) + + + Loading example (with fa-refresh icon) + + + Loading example (with fa-cog icon) + + + Loading example (with fa-spinner icon) +

+
+
+

+ Use the fa-spin class to get any icon to rotate, and use fa-pulse to have it rotate + with 8 steps. Works well with fa-spinner, fa-refresh, and fa-cog. +

+{% highlight html %} + +Loading... + + +Loading... + + +Loading... + + +Loading... + + +Loading... +{% endhighlight %} +

+ Note: + Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See + issue #671 + for examples and possible workarounds. +

+

+ Note: CSS3 animations aren't supported in IE8 - IE9. +

+
+
+
diff --git a/static/fork-awesome/src/doc/_includes/examples/basic.html b/static/fork-awesome/src/doc/_includes/examples/basic.html new file mode 100644 index 0000000..dbccc71 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/basic.html @@ -0,0 +1,39 @@ +
+

+ Basic Icons + +

+ +
+
+

+ + Example: basic icon + fa-camera-retro +

+
+
+

+ You can place {{ site.forkawesome.name }} icons just about anywhere using the CSS Prefix fa and the icon's + name. Fork Awesome is designed to be used with inline elements (we like the <i> tag for + brevity, but using a <span> is more semantically correct). +

+{% highlight html %} + fa-camera-retro +{% endhighlight %} +
+
    +
  • + + Example: basic icon + If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, + drop shadow, and anything else that gets inherited using CSS. +
    • +
+
+
+
+
diff --git a/static/fork-awesome/src/doc/_includes/examples/bootstrap.html b/static/fork-awesome/src/doc/_includes/examples/bootstrap.html new file mode 100644 index 0000000..2ec5273 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/bootstrap.html @@ -0,0 +1,111 @@ +
+

Bootstrap 3 Examples

+
+
+

+ + Delete + + Settings +

+

+ + {{ site.forkawesome.name }}
Version {{ site.forkawesome.version }} +

+
+
+ + + + + + + + + + + + +
+
+
+
+ + +
+
+ + +
+
+
+
+ User + + + + +
+
+ +
+
+

+ {{ site.forkawesome.name }} works great with the full range of Bootstrap components. +

+{% highlight html %} + + Delete + + Settings + + + {{ site.forkawesome.name }}
Version {{ site.fontawesome.version }} + +
+ + + + + + + + + + + + +
+ +
+ + +
+
+ + +
+ +
+ User + + + + +
+{% endhighlight %} +
+
+
diff --git a/static/fork-awesome/src/doc/_includes/examples/bordered-pulled.html b/static/fork-awesome/src/doc/_includes/examples/bordered-pulled.html new file mode 100644 index 0000000..78928fc --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/bordered-pulled.html @@ -0,0 +1,30 @@ +
+

+ Bordered & Pulled Icons + +

+
+
+

+ + …tomorrow we will run faster, stretch out our arms farther… And then one fine morning— + So we beat on, boats against the current, borne back ceaselessly into the past. +

+
+
+

+ Use fa-border and fa-pull-right or fa-pull-left for easy pull quotes or + article icons. +

+{% highlight html %} + +...tomorrow we will run faster, stretch out our arms farther... +And then one fine morning— So we beat on, boats against the +current, borne back ceaselessly into the past. +{% endhighlight %} +
+
+
diff --git a/static/fork-awesome/src/doc/_includes/examples/custom.html b/static/fork-awesome/src/doc/_includes/examples/custom.html new file mode 100644 index 0000000..2de7ad7 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/custom.html @@ -0,0 +1,16 @@ +
+

Custom CSS

+
+
+

Anything you can do with CSS font styles, you can do with Font Awesome.

+
+
+

Star Ratings (inspired by CSS Tricks)

+
+ + + +
+
+
+
diff --git a/static/fork-awesome/src/doc/_includes/examples/fixed-width.html b/static/fork-awesome/src/doc/_includes/examples/fixed-width.html new file mode 100644 index 0000000..0ba0610 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/fixed-width.html @@ -0,0 +1,33 @@ +
+

+ Fixed Width Icons + +

+
+
+
+   Home +   Library +   Applications +   Settings +
+
+
+

+ Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. + Especially useful in things like nav lists & list groups. +

+{% highlight html %} +
+   Home +   Library +   Applications +   Settings +
+{% endhighlight %} +
+
+
diff --git a/static/fork-awesome/src/doc/_includes/examples/larger.html b/static/fork-awesome/src/doc/_includes/examples/larger.html new file mode 100644 index 0000000..7b9a250 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/larger.html @@ -0,0 +1,40 @@ +
+

+ Larger Icons + +

+
+
+

fa-lg

+

fa-2x

+

fa-3x

+

fa-4x

+

fa-5x

+
+
+

+ To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, + fa-3x, fa-4x, or fa-5x classes. +

+{% highlight html %} + fa-lg + fa-2x + fa-3x + fa-4x + fa-5x +{% endhighlight %} +
+
    +
  • + + If your icons are getting chopped off on top and bottom, make sure you have + sufficient line-height. +
    • +
+
+
+
+
diff --git a/static/fork-awesome/src/doc/_includes/examples/list.html b/static/fork-awesome/src/doc/_includes/examples/list.html new file mode 100644 index 0000000..c164356 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/list.html @@ -0,0 +1,30 @@ +
+

+ List Icons + +

+
+
+
    +
  • List icons
    • +
  • can be used
    • +
  • as bullets
    • +
  • in lists
    • +
+
+
+

Use fa-ul and fa-li to easily replace default bullets in unordered lists.

+{% highlight html %} +
    +
  • List icons
    • +
  • can be used
    • +
  • as bullets
    • +
  • in lists
    • +
+{% endhighlight %} +
+
+
diff --git a/static/fork-awesome/src/doc/_includes/examples/rotated-flipped.html b/static/fork-awesome/src/doc/_includes/examples/rotated-flipped.html new file mode 100644 index 0000000..a649962 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/rotated-flipped.html @@ -0,0 +1,34 @@ +
+

+ Rotated & Flipped + +

+
+
+

+   normal
+   fa-rotate-90
+   fa-rotate-180
+   fa-rotate-270
+   fa-flip-horizontal
+   fa-flip-vertical +

+
+
+

+ To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes. +

+{% highlight html %} + normal
+ fa-rotate-90
+ fa-rotate-180
+ fa-rotate-270
+ fa-flip-horizontal
+ fa-flip-vertical +{% endhighlight %} +
+
+
diff --git a/static/fork-awesome/src/doc/_includes/examples/stacked.html b/static/fork-awesome/src/doc/_includes/examples/stacked.html new file mode 100644 index 0000000..65b3603 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/stacked.html @@ -0,0 +1,65 @@ +
+

+ Stacked Icons + +

+
+
+
+ + fa-twitter on fa-square-o
+ + fa-flag on fa-circle
+ + fa-terminal on fa-square
+ + fa-ban on fa-camera +
+
+
+

+ To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x + for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse + can be used as an alternative icon color. You can even throw larger icon classes on the parent + to get further control of sizing. +

+{% highlight html %} + + + + +fa-twitter on fa-square-o
+ + + + +fa-flag on fa-circle
+ + + + +fa-terminal on fa-square
+ + + + +fa-ban on fa-camera +{% endhighlight %} +
+
+
-- cgit v1.2.3-70-g09d2