Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Styles for intro complete

  • Loading branch information...
commit 35b5bda70e42a8e77fd9d97ccc5edcf94473ecb8 1 parent 2b0d7c7
@jakearchibald authored
View
181 www/assets/7/style/_components.scss
@@ -1,9 +1,11 @@
// Logo
.cow-logo {
- background: url('imgs/sprites1.png') no-repeat -2px -66px;
+ background: url("imgs/sprites1.png") no-repeat -2px -66px;
width: 448px;
height: 388px;
- margin: 0 auto;
+ margin: 66px auto 29px;
+ position: relative;
+ left: 25px;
}
// Headings
.h-main {
@@ -140,4 +142,179 @@
text-shadow: rgba(0,0,0,0.5) 0 2px 0;
@include linear-gradient((top, rgba(255,185,90,1) 0%, rgba(255,108,0,1) 50%, rgba(199,58,0,1) 100%));
+ }
+// CSS output
+ .css-output {
+ display: block;
+ white-space: pre;
+ background: rgba(0, 0, 0, 0.1);
+ padding: 20px 30px;
+ overflow: auto;
+ position: relative;
+
+ .intro & {
+ height: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ overflow: hidden;
+ }
+
+ & code {
+ font-size: 1.2em;
+ line-height: 1;
+ }
+
+ & .file-path {
+ position: relative;
+ display: inline-block;
+
+ &::before {
+ outline: 1px dotted #fff;
+ position: absolute;
+ top: -3px;
+ left: 0;
+ bottom: -4px;
+ right: 0;
+ content: "";
+ }
+ }
+ & .file {
+ cursor: pointer;
+ }
+
+ & input[type='text'] {
+ position: absolute;
+ border: 1px solid #ccc;
+ background: #fff;
+ color: #333;
+ font: normal 12px/1 monospace;
+ padding: 3px;
+ outline: none;
+ }
+ }
+// Toolbar
+ .toolbar {
+ overflow: hidden;
+ padding: 5px 6px 0;
+ position: relative;
+ z-index: 1;
+ border-style: solid;
+ border-width: 1px 0;
+ border-color: #e2e2e2 #000 #888;
+ color: #333;
+ border-radius: 5px 5px 0 0;
+ @include linear-gradient((top, #d0d0d0, #a7a7a7));
+
+ .intro & {
+ height: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ border-top-width: 0;
+ border-bottom-width: 0;
+ }
+
+ & [role=button] {
+ float: left;
+ margin: 0 5px 5px 0;
+ border: 1px solid #888;
+ border-radius: 4px;
+ cursor: pointer;
+
+ @include linear-gradient((top, #fefefe, #b8b8b8));
+
+ &::before {
+ content: '';
+ padding: 4px 10px 4px 26px;
+ background: url('imgs/sprites1.png') no-repeat;
+ }
+ &.active {
+ background: #707070;
+ box-shadow: inset 0 3px 7px rgba(0,0,0,0.6);
+ color: #fff;
+ }
+ &.no-label::before {
+ width: 26px;
+ padding: 4px 0;
+ text-indent: -5000px;
+ }
+ &.select-sprite {
+ border-width: 1px;
+ border-radius: 4px 0 0 4px;
+ margin-right: 0;
+ }
+ &.select-sprite::before {
+ background-position: -863px 3px;
+ }
+ &.pick-bg {
+ border-radius: 0 4px 4px 0;
+ margin-right: 5px;
+ border-left-width: 0;
+ }
+ &.pick-bg::before {
+ background-position: -864px -79px;
+ }
+ &.open-img::before {
+ background-position: -864px -37px;
+ }
+ &.invert-bg::before {
+ background-position: -867px -121px;
+ }
+ &.reload-img::before {
+ background-position: -867px -164px;
+ }
+ }
+ & .feedback {
+ float: left;
+ padding: 5px;
+ color: #555;
+ opacity: 0;
+ }
+ }
+// Footer
+ .main-footer {
+ display: table-row;
+ overflow: hidden;
+ background: rgba(0, 0, 0, .23);
+
+ & p {
+ float: right;
+ padding: 12px 16px 0;
+ margin: 0;
+ }
+ & .the-team-logo {
+ background: url('imgs/sprites1.png') no-repeat -4px -29px;
+ width: 88px;
+ height: 17px;
+ display: inline-block;
+ text-indent: -5000px;
+ vertical-align: top;
+ margin: -1px 0 0 4px;
+ }
+ & ul {
+ float: left;
+ padding: 13px 16px;
+ }
+ & li {
+ display: inline;
+
+ & a:link,
+ & a:visited {
+ font-weight: normal;
+ color: #fff;
+ float: left;
+ padding: 0 10px 0 0;
+ margin: 0 10px 0 0;
+ border-right: 1px solid #fff;
+ }
+ &:last-child a:link,
+ &:last-child a:visited {
+ padding: 0;
+ margin: 0;
+ border: none;
+ }
+ }
+ }
+// Feature tests
+ .feature-test {
+ display: none;
}
View
32 www/assets/7/style/_structure.scss
@@ -29,6 +29,7 @@
&.intro {
width: 635px;
+ height: auto;
}
& > * {
display: table-row;
@@ -47,4 +48,35 @@
display: none;
}
}
+ }
+// Further detail
+ .further-detail {
+ display: table-cell;
+ overflow: hidden;
+
+ .intro & {
+ }
+ }
+ .intro-copy {
+ display: none;
+
+ & > section {
+ display: table-cell;
+ padding: 30px;
+ width: 50%;
+ }
+ & h1 {
+ font: normal 30px/1 oswald, sans-serif;
+ margin: 0;
+ text-shadow: #004a86 0 4px;
+ }
+ & p {
+ font: normal 1.1em/1.5 sans-serif;
+ }
+ }
+// Toolbar
+ .toolbar-container {
+ display: table-row;
+ position: relative;
+ @include user-select(none);
}
View
257 www/assets/7/style/all.css
@@ -156,38 +156,73 @@ body {
table-layout: fixed; }
/* line 30, _structure.scss */
.container.intro {
- width: 635px; }
- /* line 33, _structure.scss */
+ width: 635px;
+ height: auto; }
+ /* line 34, _structure.scss */
.container > * {
display: table-row; }
-/* line 38, _structure.scss */
+/* line 39, _structure.scss */
.main-header {
display: table-cell;
vertical-align: middle;
height: 0; }
- /* line 43, _structure.scss */
+ /* line 44, _structure.scss */
.intro .main-header {
height: 169px; }
- /* line 46, _structure.scss */
+ /* line 47, _structure.scss */
.intro .main-header .h-main {
display: none; }
+/* line 53, _structure.scss */
+.further-detail {
+ display: table-cell;
+ overflow: hidden; }
+
+/* line 60, _structure.scss */
+.intro-copy {
+ display: none; }
+ /* line 63, _structure.scss */
+ .intro-copy > section {
+ display: table-cell;
+ padding: 30px;
+ width: 50%; }
+ /* line 68, _structure.scss */
+ .intro-copy h1 {
+ font: normal 30px/1 oswald, sans-serif;
+ margin: 0;
+ text-shadow: #004a86 0 4px; }
+ /* line 73, _structure.scss */
+ .intro-copy p {
+ font: normal 1.1em/1.5 sans-serif; }
+
+/* line 78, _structure.scss */
+.toolbar-container {
+ display: table-row;
+ position: relative;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none; }
+
/* line 2, _components.scss */
.cow-logo {
background: url("imgs/sprites1.png") no-repeat -2px -66px;
width: 448px;
height: 388px;
- margin: 0 auto; }
+ margin: 66px auto 29px;
+ position: relative;
+ left: 25px; }
-/* line 9, _components.scss */
+/* line 11, _components.scss */
.h-main {
font: normal 59px/1 oswald, sans-serif;
color: white;
text-shadow: #004A86 0 4px 1px;
text-align: center; }
-/* line 16, _components.scss */
+/* line 18, _components.scss */
.canvas-view {
text-align: center;
-webkit-user-select: none;
@@ -195,38 +230,38 @@ body {
-ms-user-select: none;
-o-user-select: none;
user-select: none; }
- /* line 20, _components.scss */
+ /* line 22, _components.scss */
.canvas-view .upload-input {
position: absolute;
top: -5000px;
left: -5000px;
cursor: pointer;
z-index: 10; }
- /* line 27, _components.scss */
+ /* line 29, _components.scss */
.canvas-view .lg-button {
display: none; }
- /* line 29, _components.scss */
+ /* line 31, _components.scss */
.intro .canvas-view .lg-button {
display: inline-block; }
-/* line 34, _components.scss */
+/* line 36, _components.scss */
.canvas-cell {
display: table-cell;
height: 100%;
position: relative; }
- /* line 39, _components.scss */
+ /* line 41, _components.scss */
.intro .canvas-cell {
height: 139px;
cursor: auto; }
-/* line 44, _components.scss */
+/* line 46, _components.scss */
.canvas-inner {
overflow: auto;
background: white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX///8AAABVwtN+AAAAAnRSTlMzMz0oyR4AAAARSURBVAgdY/jPwIAVYRf9DwB+vw/xbMOy9QAAAABJRU5ErkJggg==");
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
position: relative;
height: 100%; }
- /* line 51, _components.scss */
+ /* line 53, _components.scss */
.opera .canvas-inner {
/*
Opera treats the 100% height as the height of the body element, not the
@@ -241,19 +276,19 @@ body {
right: 0;
bottom: 0;
height: auto; }
- /* line 67, _components.scss */
+ /* line 69, _components.scss */
.intro .canvas-inner {
overflow: hidden; }
-/* line 71, _components.scss */
+/* line 73, _components.scss */
.sprite-canvas-container {
position: absolute;
min-width: 100%;
min-height: 100%; }
- /* line 76, _components.scss */
+ /* line 78, _components.scss */
.sprite-canvas-container canvas {
display: block; }
- /* line 80, _components.scss */
+ /* line 82, _components.scss */
.sprite-canvas-container .highlight {
background: rgba(0, 90, 255, 0.25);
position: absolute;
@@ -275,19 +310,19 @@ body {
-ms-transition-property: border, background;
-o-transition-property: border, background;
transition-property: border, background; }
- /* line 95, _components.scss */
+ /* line 97, _components.scss */
.sprite-canvas-container .highlight.high-vis {
background-color: rgba(0, 255, 48, 0.25);
border-color: rgba(0, 255, 51, 0.5); }
- /* line 101, _components.scss */
+ /* line 103, _components.scss */
.intro .sprite-canvas-container {
opacity: 0; }
-/* line 105, _components.scss */
+/* line 107, _components.scss */
.select-btn {
margin: 0 48px 0 0; }
-/* line 108, _components.scss */
+/* line 110, _components.scss */
.start-buttons {
position: absolute;
top: 39px;
@@ -295,7 +330,7 @@ body {
width: 100%;
text-align: center; }
-/* line 115, _components.scss */
+/* line 117, _components.scss */
.drop-indicator {
position: absolute;
top: 0;
@@ -306,12 +341,12 @@ body {
box-shadow: inset 0 0 18px #175a00;
display: none;
pointer-events: none; }
- /* line 126, _components.scss */
+ /* line 128, _components.scss */
.drag-over .drop-indicator {
display: block;
opacity: 1; }
-/* line 132, _components.scss */
+/* line 134, _components.scss */
.lg-button {
width: 192px;
border-radius: 100px;
@@ -326,3 +361,173 @@ body {
background: -ms-linear-gradient(top, #ffb95a 0%, #ff6c00 50%, #c73a00 100%);
background: -o-linear-gradient(top, #ffb95a 0%, #ff6c00 50%, #c73a00 100%);
background: linear-gradient(top, #ffb95a 0%, #ff6c00 50%, #c73a00 100%); }
+
+/* line 147, _components.scss */
+.css-output {
+ display: block;
+ white-space: pre;
+ background: rgba(0, 0, 0, 0.1);
+ padding: 20px 30px;
+ overflow: auto;
+ position: relative; }
+ /* line 155, _components.scss */
+ .intro .css-output {
+ height: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ overflow: hidden; }
+ /* line 162, _components.scss */
+ .css-output code {
+ font-size: 1.2em;
+ line-height: 1; }
+ /* line 167, _components.scss */
+ .css-output .file-path {
+ position: relative;
+ display: inline-block; }
+ /* line 171, _components.scss */
+ .css-output .file-path::before {
+ outline: 1px dotted #fff;
+ position: absolute;
+ top: -3px;
+ left: 0;
+ bottom: -4px;
+ right: 0;
+ content: ""; }
+ /* line 181, _components.scss */
+ .css-output .file {
+ cursor: pointer; }
+ /* line 185, _components.scss */
+ .css-output input[type='text'] {
+ position: absolute;
+ border: 1px solid #ccc;
+ background: #fff;
+ color: #333;
+ font: normal 12px/1 monospace;
+ padding: 3px;
+ outline: none; }
+
+/* line 196, _components.scss */
+.toolbar {
+ overflow: hidden;
+ padding: 5px 6px 0;
+ position: relative;
+ z-index: 1;
+ border-style: solid;
+ border-width: 1px 0;
+ border-color: #e2e2e2 #000 #888;
+ color: #333;
+ border-radius: 5px 5px 0 0;
+ background: -webkit-linear-gradient(top, #d0d0d0, #a7a7a7);
+ background: -moz-linear-gradient(top, #d0d0d0, #a7a7a7);
+ background: -ms-linear-gradient(top, #d0d0d0, #a7a7a7);
+ background: -o-linear-gradient(top, #d0d0d0, #a7a7a7);
+ background: linear-gradient(top, #d0d0d0, #a7a7a7); }
+ /* line 208, _components.scss */
+ .intro .toolbar {
+ height: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ border-top-width: 0;
+ border-bottom-width: 0; }
+ /* line 216, _components.scss */
+ .toolbar [role=button] {
+ float: left;
+ margin: 0 5px 5px 0;
+ border: 1px solid #888;
+ border-radius: 4px;
+ cursor: pointer;
+ background: -webkit-linear-gradient(top, #fefefe, #b8b8b8);
+ background: -moz-linear-gradient(top, #fefefe, #b8b8b8);
+ background: -ms-linear-gradient(top, #fefefe, #b8b8b8);
+ background: -o-linear-gradient(top, #fefefe, #b8b8b8);
+ background: linear-gradient(top, #fefefe, #b8b8b8); }
+ /* line 225, _components.scss */
+ .toolbar [role=button]::before {
+ content: '';
+ padding: 4px 10px 4px 26px;
+ background: url("imgs/sprites1.png") no-repeat; }
+ /* line 230, _components.scss */
+ .toolbar [role=button].active {
+ background: #707070;
+ box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.6);
+ color: #fff; }
+ /* line 235, _components.scss */
+ .toolbar [role=button].no-label::before {
+ width: 26px;
+ padding: 4px 0;
+ text-indent: -5000px; }
+ /* line 240, _components.scss */
+ .toolbar [role=button].select-sprite {
+ border-width: 1px;
+ border-radius: 4px 0 0 4px;
+ margin-right: 0; }
+ /* line 245, _components.scss */
+ .toolbar [role=button].select-sprite::before {
+ background-position: -863px 3px; }
+ /* line 248, _components.scss */
+ .toolbar [role=button].pick-bg {
+ border-radius: 0 4px 4px 0;
+ margin-right: 5px;
+ border-left-width: 0; }
+ /* line 253, _components.scss */
+ .toolbar [role=button].pick-bg::before {
+ background-position: -864px -79px; }
+ /* line 256, _components.scss */
+ .toolbar [role=button].open-img::before {
+ background-position: -864px -37px; }
+ /* line 259, _components.scss */
+ .toolbar [role=button].invert-bg::before {
+ background-position: -867px -121px; }
+ /* line 262, _components.scss */
+ .toolbar [role=button].reload-img::before {
+ background-position: -867px -164px; }
+ /* line 266, _components.scss */
+ .toolbar .feedback {
+ float: left;
+ padding: 5px;
+ color: #555;
+ opacity: 0; }
+
+/* line 274, _components.scss */
+.main-footer {
+ display: table-row;
+ overflow: hidden;
+ background: rgba(0, 0, 0, 0.23); }
+ /* line 279, _components.scss */
+ .main-footer p {
+ float: right;
+ padding: 12px 16px 0;
+ margin: 0; }
+ /* line 284, _components.scss */
+ .main-footer .the-team-logo {
+ background: url("imgs/sprites1.png") no-repeat -4px -29px;
+ width: 88px;
+ height: 17px;
+ display: inline-block;
+ text-indent: -5000px;
+ vertical-align: top;
+ margin: -1px 0 0 4px; }
+ /* line 293, _components.scss */
+ .main-footer ul {
+ float: left;
+ padding: 13px 16px; }
+ /* line 297, _components.scss */
+ .main-footer li {
+ display: inline; }
+ /* line 301, _components.scss */
+ .main-footer li a:link, .main-footer li a:visited {
+ font-weight: normal;
+ color: #fff;
+ float: left;
+ padding: 0 10px 0 0;
+ margin: 0 10px 0 0;
+ border-right: 1px solid #fff; }
+ /* line 310, _components.scss */
+ .main-footer li:last-child a:link, .main-footer li:last-child a:visited {
+ padding: 0;
+ margin: 0;
+ border: none; }
+
+/* line 318, _components.scss */
+.feature-test {
+ display: none; }
View
2  www/unmin.html
@@ -50,7 +50,7 @@ <h1 class="h-main">Sprite Cow</h1>
</section>
</div>
</div>
- <footer class="main">
+ <footer class="main-footer">
<ul>
<li><a href="https://github.com/jakearchibald/sprite-cow">Github</a></li>
<li><a href="https://github.com/jakearchibald/sprite-cow/issues">Bug/feature tracker</a></li>
Please sign in to comment.
Something went wrong with that request. Please try again.