Updated landing page

Documentation update to give the front page of mini.css a little bit of a facelift. Icons were replaced with svg icons, making it look a lot more modern and fancy.
This commit is contained in:
Angelos Chalaris 2017-06-05 14:04:58 +03:00
parent 00e8ac20ca
commit f8d2364f8d
5 changed files with 222 additions and 4 deletions

79
docs/icons/bacteria.svg Normal file
View file

@ -0,0 +1,79 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<path style="fill:#FF7226;" d="M235.292,428.727c-22.298-22.298-58.581-22.299-80.879,0l-7.703,7.703
c-7.716,7.716-17.974,11.965-28.885,11.965c-10.912,0-21.17-4.25-28.885-11.964c-15.927-15.928-15.927-41.844,0-57.771
l57.771-57.771l-11.555-11.555l-57.771,57.771c-22.297,22.298-22.298,58.581,0,80.88c10.802,10.802,25.164,16.751,40.44,16.751
s29.638-5.949,40.44-16.751l7.703-7.703c15.927-15.927,41.843-15.927,57.77,0c15.927,15.927,15.927,41.843,0,57.771
c-3.191,3.191-3.191,8.364,0,11.555c3.191,3.191,8.364,3.191,11.555,0C257.59,487.309,257.59,451.026,235.292,428.727z"/>
<g>
<path style="fill:#FF9E46;" d="M372.994,83.045c3.191,3.191,8.364,3.191,11.555,0l30.81-30.811c3.191-3.191,3.191-8.364,0-11.555
c-3.191-3.191-8.364-3.191-11.555,0l-30.81,30.811C369.803,74.682,369.803,79.855,372.994,83.045z"/>
<path style="fill:#FF9E46;" d="M293.063,347.847L108.197,162.978c-3.191-3.191-8.363-3.191-11.555,0
c-3.192,3.191-3.191,8.364,0,11.555l184.867,184.868c3.191,3.191,8.363,3.191,11.555,0
C296.254,356.21,296.254,351.038,293.063,347.847z"/>
<path style="fill:#FF9E46;" d="M203.023,354.719c0-4.511-3.658-8.169-8.17-8.17c-4.513,0-8.17,3.658-8.171,8.171v37.193
c0,2.256,0.915,4.299,2.393,5.777c1.478,1.478,3.521,2.393,5.777,2.393c4.513,0,8.17-3.658,8.171-8.171V354.719z"/>
<path style="fill:#FF9E46;" d="M101.325,253.02H64.132c-4.513,0-8.17,3.658-8.171,8.171c0,2.256,0.915,4.299,2.393,5.777
c1.478,1.478,3.521,2.393,5.777,2.393h37.193c4.513,0,8.17-3.658,8.171-8.171C109.495,256.679,105.837,253.021,101.325,253.02z"/>
<path style="fill:#FF9E46;" d="M157.79,113.384l184.866,184.869c3.191,3.191,8.363,3.191,11.555,0
c3.191-3.191,3.191-8.364,0-11.555L169.345,101.83c-3.191-3.191-8.363-3.191-11.555,0C154.601,105.02,154.6,110.193,157.79,113.384
z"/>
<path style="fill:#FF9E46;" d="M308.979,45.363c0,2.256,0.915,4.299,2.393,5.777s3.521,2.393,5.777,2.393
c4.513,0,8.17-3.658,8.171-8.171V8.17c-0.001-4.511-3.659-8.169-8.17-8.17c-4.513,0-8.17,3.658-8.171,8.171V45.363z"/>
<path style="fill:#FF9E46;" d="M404.9,144.669c1.478,1.478,3.521,2.393,5.777,2.393h37.191c4.513,0,8.17-3.658,8.171-8.171
c-0.001-4.511-3.659-8.169-8.17-8.17h-37.191c-4.513,0-8.17,3.658-8.171,8.171C402.507,141.148,403.421,143.19,404.9,144.669z"/>
<path style="fill:#FF9E46;" d="M218.939,52.234l184.866,184.869c3.191,3.191,8.363,3.191,11.555,0
c3.191-3.191,3.191-8.364,0-11.555L230.493,40.681c-3.191-3.191-8.363-3.191-11.555,0C215.749,43.87,215.749,49.044,218.939,52.234
z"/>
</g>
<path style="fill:#FFD15D;" d="M117.825,184.162L240.122,61.863c42.541-42.541,111.514-42.541,154.054,0
c42.541,42.541,42.541,111.515,0,154.057L271.88,338.219c-42.541,42.541-111.514,42.541-154.054,0
C75.284,295.677,75.284,226.703,117.825,184.162z"/>
<path style="fill:#F56E92;" d="M371.069,84.971c-29.73-29.732-78.107-29.732-107.839,0l-23.108,23.108l-99.188,99.189
c-29.732,29.732-29.73,78.108,0,107.84s78.107,29.732,107.839,0L371.069,192.81C400.8,163.08,400.8,114.703,371.069,84.971z"/>
<g>
<circle style="fill:#F23E6D;" cx="332.556" cy="162.77" r="8.17"/>
<circle style="fill:#F23E6D;" cx="332.556" cy="116.549" r="8.17"/>
<circle style="fill:#F23E6D;" cx="179.449" cy="237.314" r="8.17"/>
</g>
<path style="fill:#BD0D38;" d="M219.469,237.04c-2.09,0-4.182-0.797-5.778-2.393c-3.191-3.191-3.19-8.364,0-11.554
c6.379-6.378,13.107-6.576,17.558-6.708c3.644-0.108,4.77-0.215,6.487-1.929c1.715-1.715,1.821-2.841,1.929-6.485
c0.131-4.452,0.329-11.181,6.709-17.559c6.378-6.378,13.106-6.576,17.557-6.707c3.643-0.108,4.769-0.215,6.484-1.929
c1.715-1.715,1.821-2.841,1.929-6.484c0.131-4.451,0.328-11.179,6.707-17.557c3.192-3.192,8.363-3.191,11.555-0.001
c3.191,3.191,3.191,8.364,0,11.554c-1.715,1.715-1.821,2.841-1.929,6.484c-0.131,4.452-0.328,11.18-6.707,17.558
c-6.378,6.378-13.106,6.576-17.558,6.707c-3.643,0.108-4.769,0.215-6.484,1.929c-1.716,1.716-1.824,2.842-1.93,6.486
c-0.131,4.452-0.329,11.18-6.708,17.558c-6.38,6.379-13.107,6.577-17.559,6.709c-3.644,0.108-4.77,0.215-6.486,1.929
C223.651,236.241,221.56,237.04,219.469,237.04z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.5 KiB

74
docs/icons/meteor.svg Normal file
View file

@ -0,0 +1,74 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path style="fill:#FCD999;" d="M378.203,260.162L378.203,260.162L250.74,132.725v-0.001c-17.489-5.419-36.035-8.434-55.258-8.635
v386.822c105.882-1.104,191.363-87.268,191.363-193.411C386.844,297.536,383.818,278.28,378.203,260.162z"/>
<path style="fill:#FEECCC;" d="M195.482,124.089c-0.683-0.011-1.377-0.011-2.059-0.011C86.596,124.078,0,210.674,0,317.5
C0,376.595,26.5,429.5,68.266,464.979l70.896,38.23c17.215,5.021,35.424,7.714,54.261,7.714c0.683,0,1.377,0,2.059-0.011
c87.029-1.343,157.23-87.415,157.23-193.411S282.51,125.432,195.482,124.089z"/>
<path style="fill:#FCD999;" d="M250.74,132.725c-42.26,12.611-73.074,51.769-73.074,98.131c0,56.554,45.847,102.4,102.4,102.4
c46.369,0,85.531-30.822,98.137-73.094C359.385,199.443,311.461,151.538,250.74,132.725z"/>
<path style="fill:#FBC566;" d="M114.369,419.911l14.302,79.906c3.447,1.229,6.952,2.355,10.49,3.391
c12.14-8.181,20.127-22.062,20.127-37.797C159.289,440.471,139.23,420.218,114.369,419.911z"/>
<g>
<path style="fill:#FCD999;" d="M136.533,465.411c0,13.733-3.049,26.066-7.862,34.406c-22.3-7.919-42.724-19.82-60.405-34.839
c0.25-24.951,20.526-45.079,45.511-45.079c0.193,0,0.387,0,0.592,0.011C126.669,420.537,136.533,440.676,136.533,465.411z"/>
<circle style="fill:#FCD999;" cx="73.956" cy="283.363" r="17.067"/>
</g>
<path style="fill:#FBC566;" d="M226.759,373.251v68.267c18.842,0,34.133-15.28,34.133-34.133
C260.892,388.531,245.601,373.251,226.759,373.251z"/>
<path style="fill:#FCD999;" d="M226.759,373.251c6.281,0,11.378,15.28,11.378,34.133c0,18.853-5.097,34.133-11.378,34.133
c-18.853,0-34.133-15.28-34.133-34.133C192.626,388.531,207.906,373.251,226.759,373.251z"/>
<g>
<circle style="fill:#F9B233;" cx="412.809" cy="33.746" r="8.533"/>
<circle style="fill:#F9B233;" cx="436.952" cy="9.61" r="8.533"/>
<path style="fill:#F9B233;" d="M404.769,138.335c-8.886,8.886-23.295,8.886-32.181,0c-8.886-8.886-8.886-23.295,0-32.181
l16.09-16.09c8.886-8.886,8.886-23.295,0-32.181s-23.295-8.886-32.181,0l-60.34,60.34l-39.261,89.465l55.352,55.352
L404.769,138.335z"/>
</g>
<path style="fill:#FA9647;" d="M505.335,69.95c-8.886-8.886-23.295-8.886-32.181,0L296.157,246.946l96.544-32.181l112.634-112.634
C514.222,93.244,514.222,78.836,505.335,69.95z"/>
<path style="fill:#FD5F6E;" d="M360.52,214.765v-32.181l-128.725,96.544c26.66,26.66,69.883,26.659,96.544,0l64.363-64.363H360.52z"
/>
<path style="fill:#FA9647;" d="M328.339,182.584v-32.182h-32.181v-32.181l-64.363,64.363c-26.659,26.659-26.659,69.883,0,96.544
c8.886,8.886,37.703-5.522,64.363-32.181l64.363-64.363H328.339z"/>
<path style="fill:#FEECCC;" d="M280.066,196.722l-11.378,34.133l11.378,34.133c18.852,0,34.133-15.282,34.133-34.133
S298.918,196.722,280.066,196.722z"/>
<path style="fill:#FFFFFF;" d="M245.933,230.856c0,18.852,15.283,34.133,34.133,34.133v-68.267
C261.216,196.722,245.933,212.004,245.933,230.856z"/>
<g>
<circle style="fill:#FCD999;" cx="108.089" cy="232.163" r="8.533"/>
<circle style="fill:#FCD999;" cx="295.026" cy="407.381" r="8.533"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

51
docs/icons/wings.svg Normal file
View file

@ -0,0 +1,51 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path style="fill:#BBE095;" d="M486.935,146.104l-7.905,7.905l-144.751,23.714L394.063,70.51l92.873-45.444
C520.355,58.487,520.355,112.682,486.935,146.104z"/>
<path style="fill:#E0F4B4;" d="M486.935,25.065L334.278,177.722l23.714-144.751l7.905-7.905
C399.318-8.355,453.513-8.355,486.935,25.065z"/>
<polygon style="fill:#5EDAFF;" points="357.992,154.008 203.478,308.522 243.002,147.96 357.992,32.97 "/>
<polygon style="fill:#089AC6;" points="243.002,268.997 104.298,407.701 128.013,262.951 243.002,147.96 "/>
<path style="fill:#4B58E3;" d="M128.013,383.987l-68.32,68.32c0-80.897-8.157-112.88,25.224-146.261l43.096-43.096
C128.013,262.951,128.013,383.987,128.013,383.987z"/>
<polygon style="fill:#089AC6;" points="479.029,154.008 364.04,268.997 203.478,308.522 357.992,154.008 "/>
<polygon style="fill:#4B58E3;" points="364.04,268.997 249.049,383.987 104.298,407.701 243.002,268.997 "/>
<g>
<path style="fill:#693F9E;" d="M249.049,383.987l-43.096,43.096c-33.382,33.382-65.365,25.224-146.261,25.224l68.32-68.32H249.049z
"/>
<path style="fill:#693F9E;" d="M2.619,509.381c-3.492-3.492-3.492-9.154,0-12.648L456.897,42.457c3.492-3.492,9.156-3.492,12.648,0
c3.492,3.492,3.492,9.154,0,12.648L15.267,509.381C11.774,512.873,6.112,512.873,2.619,509.381z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -81,7 +81,8 @@
<div class="col-sm-12 col-md-8 col-md-offset-2 col-lg col-lg col-lg-offset-0 box-centered row">
<div class="card fluid">
<div class="section">
<h2>Minimal<small>Size matters!</small></h2><br> <i class="fa fa-compress fa-4x" aria-hidden="true"></i><br><br>
<h2>Minimal<small>Size matters!</small></h2><br/>
<img src="icons/wings.svg" width="96px" height="96px"/><br/><br/>
<p><strong>mini.css</strong> aims to provide as much functionality as possible in less than 7KB gzipped. This very small footprint means that your websites and web applications will load faster, while still looking great utilising the modern components we provide!</p><br>
</div>
</div>
@ -89,7 +90,8 @@
<div class="col-sm-12 col-md-8 col-md-offset-2 col-lg col-lg col-lg-offset-0 box-centered row">
<div class="card fluid">
<div class="section">
<h2>Responsive<small>Think mobile!</small></h2><br> <i class="fa fa-mobile fa-4x" aria-hidden="true"></i><br><br>
<h2>Responsive<small>Think mobile!</small></h2><br/>
<img src="icons/bacteria.svg" width="96px" height="96px"/><br/><br/>
<p><strong>mini.css</strong> is crafted with both desktops and mobile devices in mind. All of its components are well-tested on different devices and will respond to any changes in the viewport, allowing for an experience tailored to each user's device!</p><br>
</div>
</div>
@ -97,7 +99,8 @@
<div class="col-sm-12 col-md-8 col-md-offset-2 col-lg col-lg-offset-0 box-centered row">
<div class="card fluid">
<div class="section">
<h2>Style-agnostic<small>Infinitely customizable!</small></h2><br> <i class="fa fa-paint-brush fa-4x" aria-hidden="true"></i><br><br>
<h2>Style-agnostic<small>Infinitely customizable!</small></h2><br/>
<img src="icons/meteor.svg" width="96px" height="96px"/><br/><br/>
<p><strong>mini.css</strong> provides you with a customizable flavor system, allowing you to be a designer without all the hard work. This way you can create your own custom design and personalize your websites any way you want!</p><br>
</div>
</div>
@ -185,6 +188,7 @@
</div>
</div></main>
<!-- End of page content-->
<footer style="text-align: justify;"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
<footer style="text-align: justify;"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.<br/>
<small>Icons made by <a href="http://www.freepik.com" title="Freepik"><small>Freepik</small></a> from <a href="http://www.flaticon.com" title="Flaticon"><small>www.flaticon.com</small></a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank"><small>CC 3.0 BY</small></a></small></footer>
</body>
</html>

View file

@ -1186,3 +1186,13 @@
- Fixed a typo in `tab`.
- Fixed a typo in `table`.
- Fixed a typo in `input_control`.
# v2.3.0 Development Log
## 20170605
- Updated packaging information etc. (structural updates for next release)
- Spent a long while, but found the icons to replace the front page's style:
- http://www.flaticon.com/free-icon/wings_262678 (Feather)
- http://www.flaticon.com/free-icon/bacteria_191004 (Bacteria)
- http://www.flaticon.com/free-icon/meteor_433944 (Meteor)