diff --git a/assets/stylesheets/application.css b/assets/stylesheets/application.css index aea4b1b..e8ac3e5 100644 --- a/assets/stylesheets/application.css +++ b/assets/stylesheets/application.css @@ -1 +1 @@ -@import url("http://fonts.googleapis.com/css?family=Roboto:400,300");@import url("http://fonts.googleapis.com/css?family=Source+Code+Pro");*{margin:0;padding:0;border:0;outline:0}html,body{height:100%}body{font-family:"Roboto",sans-serif;font-size:24px;background-color:#ecf0f1;line-height:1.5}h1{color:#1abc9c;font-weight:300;text-align:center;padding-bottom:1em}h2{border-bottom:2px solid #ccc;line-height:1;margin-bottom:1em}p{padding-bottom:1em}a{color:#1abc9c;text-decoration:none;border-bottom:1px solid #ccc}hr{background-color:#1abc9c;width:33%;height:2px;margin:5em auto}.wrapper{position:relative;width:100%}.wrapper .content{max-width:700px;width:100%;padding:3em 1em;margin:0 auto}.wrapper .content form label,.wrapper .content form .submit{background-color:#1abc9c;font-size:1em;padding:1em 2em;display:block;color:#fff;text-align:center;margin:0 auto;transition:all 0.3s ease;cursor:pointer}.wrapper .content form label:hover,.wrapper .content form .submit:hover{background-color:#148f77}.wrapper .content form .submit{background-color:#16a085;margin-top:1em}.wrapper .content form .submit:hover{background-color:#107360}.wrapper .content form .file{display:none}.wrapper .content .result-box{display:none}.wrapper .content .result-box .controls-box .controls table{width:100%}.wrapper .content .result-box .controls-box .controls table tr th{padding-right:1em;text-align:right}.wrapper .content .result-box .controls-box .code{background-color:#222;color:#fff;font-family:"Source Code Pro",sans-serif;font-size:0.5em;padding:1em 2em}.result,.demo{width:100%;position:relative}.result svg,.demo svg{max-width:90%;max-height:90%;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto}.result svg path,.result svg rect,.result svg text,.result svg polygon,.demo svg path,.demo svg rect,.demo svg text,.demo svg polygon{fill-opacity:0;stroke:#1abc9c;stroke-width:2px;stroke-linecap:round;animation-name:draw;animation-duration:5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-fill-mode:none}.demo{height:300px}.demo svg path,.demo svg rect,.demo svg text,.demo svg polygon{fill:#1393d5;animation:draw_demo 5s infinite linear}.result{height:400px}@keyframes draw{to{stroke-dashoffset:0}}@keyframes draw_demo{50%{stroke-dashoffset:1;stroke-width:2px;fill-opacity:0}60%,100%{stroke-dashoffset:1;stroke-width:0px;fill-opacity:1}} +@import url("http://fonts.googleapis.com/css?family=Roboto:400,300");@import url("http://fonts.googleapis.com/css?family=Source+Code+Pro");*{margin:0;padding:0;border:0;outline:0}html,body{height:100%}body{font-family:"Roboto",sans-serif;font-size:24px;background-color:#ecf0f1;line-height:1.5}h1{color:#1abc9c;font-weight:300;text-align:center;padding-bottom:1em}h2{border-bottom:2px solid #ccc;line-height:1;margin-bottom:1em}p{padding-bottom:1em}a{color:#1abc9c;text-decoration:none;border-bottom:1px solid #ccc}hr{background-color:#1abc9c;width:33%;height:2px;margin:5em auto}.wrapper{width:100%}.wrapper .content{max-width:700px;width:100%;padding:3em 1em;margin:0 auto}.wrapper .content form label,.wrapper .content form .submit{background-color:#1abc9c;font-size:1em;padding:1em 2em;display:block;color:#fff;text-align:center;margin:0 auto;transition:all 0.3s ease;cursor:pointer}.wrapper .content form label:hover,.wrapper .content form .submit:hover{background-color:#148f77}.wrapper .content form .submit{background-color:#16a085;margin-top:1em}.wrapper .content form .submit:hover{background-color:#107360}.wrapper .content form .file{display:none}.wrapper .content .result-box{display:none}.wrapper .content .result-box .controls-box .controls table{width:100%}.wrapper .content .result-box .controls-box .controls table tr th{padding-right:1em;text-align:right}.wrapper .content .result-box .controls-box .code{background-color:#222;color:#fff;font-family:"Source Code Pro",sans-serif;font-size:0.5em;padding:1em 2em}.result,.demo{width:100%;position:relative}.result svg,.demo svg{max-width:90%;max-height:90%;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto}.result svg path,.result svg rect,.result svg text,.result svg polygon,.demo svg path,.demo svg rect,.demo svg text,.demo svg polygon{fill-opacity:0;stroke:#1abc9c;stroke-width:2px;stroke-linecap:round;animation-name:draw;animation-duration:5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-fill-mode:none}.demo{height:300px}.demo svg path,.demo svg rect,.demo svg text,.demo svg polygon{fill:#1393d5;animation:draw_demo 5s infinite linear}.result{height:400px}@keyframes draw{to{stroke-dashoffset:0}}@keyframes draw_demo{50%{stroke-dashoffset:1;stroke-width:2px;fill-opacity:0}60%,100%{stroke-dashoffset:1;stroke-width:0px;fill-opacity:1}} diff --git a/assets/stylesheets/application.sass b/assets/stylesheets/application.sass index 1c99b00..f70b38b 100644 --- a/assets/stylesheets/application.sass +++ b/assets/stylesheets/application.sass @@ -42,7 +42,6 @@ hr margin: 5em auto .wrapper - position: relative width: 100% .content max-width: 700px diff --git a/index.html b/index.html index 9ff43a5..30a849c 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,9 @@
+ +