Merge pull request #536 from picturepan2/0.5.7

0.5.7

Author: picturepan2

CHANGELOG.md

@@ -1,5 +1,12 @@
 #### Spectre.css Changelog
 
+##### [v0.5.7](https://github.com/picturepan2/spectre/releases/tag/v0.5.7)
+
+- Add pure CSS 360-Degree Viewer
+- Improve Docs SEO
+- Change Carousels image number to variable #428
+- Fix Form textarea height issue
+
 ##### [v0.5.6](https://github.com/picturepan2/spectre/releases/tag/v0.5.6)
 
 - Add Docs Search #509 #291
@@ -10,7 +17,6 @@
 - Fix #511 issue
 - Fix sidebar background height for short docs pages
 
-
 ##### [v0.5.5](https://github.com/picturepan2/spectre/releases/tag/v0.5.5)
 
 - IMPORTANT: New Docs
@@ -145,7 +151,7 @@ IMPORTANT: Move Autocomplete to the Experimentals
 
 ##### [v0.3.1](https://github.com/picturepan2/spectre/releases/tag/v0.3.1)
 
-*IMPORTANT*: The default root font-size has been changed to `20px`, please update your `rem` numbers if you're using the custom sizes. [Learn more](https://picturepan2.github.io/spectre/getting-started.html#variables-sizes).
+*IMPORTANT*: The default root font-size has been changed to `20px`, please update your `rem` numbers if you're using the custom sizes. [Learn more](https://picturepan2.github.io/spectre/getting-started/custom.html#variables-sizes).
 
 - Fix margin and padding utilities bug
 - Add grid offset

README.md

@@ -50,7 +50,7 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 - [Tables](https://picturepan2.github.io/spectre/elements/tables.html)
 - [Buttons](https://picturepan2.github.io/spectre/elements/buttons.html)
 - [Forms](https://picturepan2.github.io/spectre/elements/forms.html)
-- [Icons](https://picturepan2.github.io/spectre/elements/icons.html) - CSS only
+- [Icons](https://picturepan2.github.io/spectre/elements/icons.html) - CSS ONLY
 - [Labels](https://picturepan2.github.io/spectre/elements/labels.html)
 - [Code](https://picturepan2.github.io/spectre/elements/code.html)
 - [Media](https://picturepan2.github.io/spectre/elements/media.html)
@@ -87,14 +87,15 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 - [Utilities](https://picturepan2.github.io/spectre/utilities.html) - colors, display, divider, loading, position, shapes and text utilities
 
 ### Experimentals
+- [360-Degree Viewer](https://picturepan2.github.io/spectre/experimentals/viewer-360.html) - CSS ONLY
 - [Autocomplete](https://picturepan2.github.io/spectre/experimentals/autocomplete.html)
 - [Calendars](https://picturepan2.github.io/spectre/experimentals/calendars.html)
-- [Carousels](https://picturepan2.github.io/spectre/experimentals/carousels.html) - CSS only
-- [Comparison Sliders](https://picturepan2.github.io/spectre/experimentals/comparison.html) - CSS only
-- [Filters](https://picturepan2.github.io/spectre/experimentals/filters.html) - CSS only
+- [Carousels](https://picturepan2.github.io/spectre/experimentals/carousels.html) - CSS ONLY
+- [Comparison Sliders](https://picturepan2.github.io/spectre/experimentals/comparison.html) - CSS ONLY
+- [Filters](https://picturepan2.github.io/spectre/experimentals/filters.html) - CSS ONLY
 - [Meters](https://picturepan2.github.io/spectre/experimentals/meters.html)
-- [Off-canvas](https://picturepan2.github.io/spectre/experimentals/off-canvas.html) - CSS only
-- [Parallax](https://picturepan2.github.io/spectre/experimentals/parallax.html) - CSS only
+- [Off-canvas](https://picturepan2.github.io/spectre/experimentals/off-canvas.html) - CSS ONLY
+- [Parallax](https://picturepan2.github.io/spectre/experimentals/parallax.html) - CSS ONLY
 - [Progress](https://picturepan2.github.io/spectre/experimentals/progress.html)
 - [Sliders](https://picturepan2.github.io/spectre/experimentals/sliders.html)
 - [Timelines](https://picturepan2.github.io/spectre/experimentals/timelines.html)

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "spectre.css",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "description": "Spectre.css: A lightweight, responsive and modern CSS framework",
   "homepage": "http://picturepan2.github.io/spectre",
   "repository": "picturepan2/spectre",

dist/spectre-exp.css

@@ -1,4 +1,4 @@
-/*! Spectre.css Experimentals v0.5.6 | MIT License | github.com/picturepan2/spectre */
+/*! Spectre.css Experimentals v0.5.7 | MIT License | github.com/picturepan2/spectre */
 .form-autocomplete {
   position: relative;
 }
@@ -271,6 +271,30 @@
   white-space: nowrap;
 }
 
+.carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1),
+.carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
+.carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
+.carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4),
+.carousel .carousel-locator:nth-of-type(5):checked ~ .carousel-container .carousel-item:nth-of-type(5),
+.carousel .carousel-locator:nth-of-type(6):checked ~ .carousel-container .carousel-item:nth-of-type(6),
+.carousel .carousel-locator:nth-of-type(7):checked ~ .carousel-container .carousel-item:nth-of-type(7),
+.carousel .carousel-locator:nth-of-type(8):checked ~ .carousel-container .carousel-item:nth-of-type(8) {
+  animation: carousel-slidein .75s ease-in-out 1;
+  opacity: 1;
+  z-index: 100;
+}
+
+.carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
+.carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
+.carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
+.carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4),
+.carousel .carousel-locator:nth-of-type(5):checked ~ .carousel-nav .nav-item:nth-of-type(5),
+.carousel .carousel-locator:nth-of-type(6):checked ~ .carousel-nav .nav-item:nth-of-type(6),
+.carousel .carousel-locator:nth-of-type(7):checked ~ .carousel-nav .nav-item:nth-of-type(7),
+.carousel .carousel-locator:nth-of-type(8):checked ~ .carousel-nav .nav-item:nth-of-type(8) {
+  color: #f7f8f9;
+}
+
 .carousel {
   background: #f7f8f9;
   display: block;
@@ -330,22 +354,6 @@
   right: 1rem;
 }
 
-.carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1),
-.carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
-.carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
-.carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) {
-  animation: carousel-slidein .75s ease-in-out 1;
-  opacity: 1;
-  z-index: 100;
-}
-
-.carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
-.carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
-.carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
-.carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4) {
-  color: #f7f8f9;
-}
-
 .carousel .carousel-nav {
   bottom: .4rem;
   display: flex;
@@ -1046,4 +1054,175 @@
 
 .timeline .timeline-item .timeline-icon.icon-lg::before {
   content: none;
+}
+
+.viewer-360 {
+  align-items: center;
+  display: flex;
+  display: -ms-flexbox;
+  -ms-flex-align: center;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.viewer-360 .viewer-slider[value="1"] + .viewer-image {
+  background-position-y: 0;
+}
+
+.viewer-360 .viewer-slider[value="2"] + .viewer-image {
+  background-position-y: 2.8571428571%;
+}
+
+.viewer-360 .viewer-slider[value="3"] + .viewer-image {
+  background-position-y: 5.7142857143%;
+}
+
+.viewer-360 .viewer-slider[value="4"] + .viewer-image {
+  background-position-y: 8.5714285714%;
+}
+
+.viewer-360 .viewer-slider[value="5"] + .viewer-image {
+  background-position-y: 11.4285714286%;
+}
+
+.viewer-360 .viewer-slider[value="6"] + .viewer-image {
+  background-position-y: 14.2857142857%;
+}
+
+.viewer-360 .viewer-slider[value="7"] + .viewer-image {
+  background-position-y: 17.1428571429%;
+}
+
+.viewer-360 .viewer-slider[value="8"] + .viewer-image {
+  background-position-y: 20%;
+}
+
+.viewer-360 .viewer-slider[value="9"] + .viewer-image {
+  background-position-y: 22.8571428571%;
+}
+
+.viewer-360 .viewer-slider[value="10"] + .viewer-image {
+  background-position-y: 25.7142857143%;
+}
+
+.viewer-360 .viewer-slider[value="11"] + .viewer-image {
+  background-position-y: 28.5714285714%;
+}
+
+.viewer-360 .viewer-slider[value="12"] + .viewer-image {
+  background-position-y: 31.4285714286%;
+}
+
+.viewer-360 .viewer-slider[value="13"] + .viewer-image {
+  background-position-y: 34.2857142857%;
+}
+
+.viewer-360 .viewer-slider[value="14"] + .viewer-image {
+  background-position-y: 37.1428571429%;
+}
+
+.viewer-360 .viewer-slider[value="15"] + .viewer-image {
+  background-position-y: 40%;
+}
+
+.viewer-360 .viewer-slider[value="16"] + .viewer-image {
+  background-position-y: 42.8571428571%;
+}
+
+.viewer-360 .viewer-slider[value="17"] + .viewer-image {
+  background-position-y: 45.7142857143%;
+}
+
+.viewer-360 .viewer-slider[value="18"] + .viewer-image {
+  background-position-y: 48.5714285714%;
+}
+
+.viewer-360 .viewer-slider[value="19"] + .viewer-image {
+  background-position-y: 51.4285714286%;
+}
+
+.viewer-360 .viewer-slider[value="20"] + .viewer-image {
+  background-position-y: 54.2857142857%;
+}
+
+.viewer-360 .viewer-slider[value="21"] + .viewer-image {
+  background-position-y: 57.1428571429%;
+}
+
+.viewer-360 .viewer-slider[value="22"] + .viewer-image {
+  background-position-y: 60%;
+}
+
+.viewer-360 .viewer-slider[value="23"] + .viewer-image {
+  background-position-y: 62.8571428571%;
+}
+
+.viewer-360 .viewer-slider[value="24"] + .viewer-image {
+  background-position-y: 65.7142857143%;
+}
+
+.viewer-360 .viewer-slider[value="25"] + .viewer-image {
+  background-position-y: 68.5714285714%;
+}
+
+.viewer-360 .viewer-slider[value="26"] + .viewer-image {
+  background-position-y: 71.4285714286%;
+}
+
+.viewer-360 .viewer-slider[value="27"] + .viewer-image {
+  background-position-y: 74.2857142857%;
+}
+
+.viewer-360 .viewer-slider[value="28"] + .viewer-image {
+  background-position-y: 77.1428571429%;
+}
+
+.viewer-360 .viewer-slider[value="29"] + .viewer-image {
+  background-position-y: 80%;
+}
+
+.viewer-360 .viewer-slider[value="30"] + .viewer-image {
+  background-position-y: 82.8571428571%;
+}
+
+.viewer-360 .viewer-slider[value="31"] + .viewer-image {
+  background-position-y: 85.7142857143%;
+}
+
+.viewer-360 .viewer-slider[value="32"] + .viewer-image {
+  background-position-y: 88.5714285714%;
+}
+
+.viewer-360 .viewer-slider[value="33"] + .viewer-image {
+  background-position-y: 91.4285714286%;
+}
+
+.viewer-360 .viewer-slider[value="34"] + .viewer-image {
+  background-position-y: 94.2857142857%;
+}
+
+.viewer-360 .viewer-slider[value="35"] + .viewer-image {
+  background-position-y: 97.1428571429%;
+}
+
+.viewer-360 .viewer-slider[value="36"] + .viewer-image {
+  background-position-y: 100%;
+}
+
+.viewer-360 .viewer-slider {
+  cursor: ew-resize;
+  -ms-flex-order: 2;
+  margin: 1rem;
+  order: 2;
+  width: 60%;
+}
+
+.viewer-360 .viewer-image {
+  background-position-y: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  -ms-flex-order: 1;
+  height: 9rem;
+  order: 1;
+  width: 24rem;
 }

dist/spectre-exp.min.css

@@ -1,4 +1,4 @@
-/*! Spectre.css Icons v0.5.6 | MIT License | github.com/picturepan2/spectre */
+/*! Spectre.css Icons v0.5.7 | MIT License | github.com/picturepan2/spectre */
 .icon {
   box-sizing: border-box;
   display: inline-block;