diff --git a/site/public/stylesheet/style.css b/site/public/stylesheet/style.css index 7829ea0..1793f4a 100644 --- a/site/public/stylesheet/style.css +++ b/site/public/stylesheet/style.css @@ -1,2 +1,2 @@ -html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0;}table th{text-align:left}*,*::before,*::after,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}input,button,textarea,select{color:inherit;font-size:inherit;font-style:inherit;font-family:inherit;-webkit-border-radius:0;border-radius:0;-webkit-padding-start:0;align-items:flex-start;text-index:0;border:none;outline:none;background:none;padding:0;margin:0;width:auto;height:auto;line-height:1em}input[type=text],input[type=reset],input[type=password],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=time],input[type=week],input[type=month],input[type=date],input[type=datetime],input[type=datetime-local],input[type=number],input[type=submit],input[type=color],input[type=file],button,textarea,select{height:1em;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=color]{width:1em}input::-ms-clear{display:none}details,summary{-webkit-appearance:none;-moz-appearance:none;appearance:none}mark{background:none}hr{height:1px;margin:0;padding:0}u{text-decoration:none}a{color:inherit;outline:none}@font-face{font-family:'Stellar';src:url("../fonts/Stellar-Regular.eot");src:url("../fonts/Stellar-Regular.eot?#iefix") format('embedded-opentype'),url("../fonts/Stellar-Regular.woff2") format('woff2'),url("../fonts/Stellar-Regular.woff") format('woff'),url("../fonts/Stellar-Regular.ttf") format('truetype');font-weight:normal;font-style:normal}@font-face{font-family:'Ubuntu Mono';src:url("../fonts/UbuntuMono-Regular.eot");src:url("../fonts/UbuntuMono-Regular.eot?#iefix") format('embedded-opentype'),url("../fonts/UbuntuMono-Regular.woff2") format('woff2'),url("../fonts/UbuntuMono-Regular.woff") format('woff'),url("../fonts/UbuntuMono-Regular.ttf") format('truetype');font-weight:normal;font-style:normal}body{font-family:Helvetica,Arial;font-size:12px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased}body.projects{background:#323759;color:#fff;}body.projects ::-moz-selection{background:#f1eff9}body.projects ::selection{background:#f1eff9}body.projects .gradient-backgroud{position:absolute;top:0;left:0;width:100%;height:920px;background:linear-gradient(0,#323759,#5e50c3 33%,#c9b2cd)}body.projects p,body.projects ul{font-size:14px;line-height:18px;margin-bottom:1em}body.projects code{font-family:'Ubuntu Mono'}body.projects section.landing{position:relative;margin-bottom:60px;}body.projects section.landing .logo{position:absolute;top:315px;left:50%;}body.projects section.landing .logo .disks .disk{position:absolute;border-radius:50%;background:#fff;transform:translateX(-50%) translateY(-50%);opacity:.2;}body.projects section.landing .logo .disks .disk.index-0{width:100px;height:100px;opacity:.7}body.projects section.landing .logo .disks .disk.index-1{width:200px;height:200px}body.projects section.landing .logo .disks .disk.index-2{width:300px;height:300px}body.projects section.landing .logo .disks .disk.index-3{width:400px;height:400px}body.projects section.landing .logo .disks .disk.index-4{width:500px;height:500px}body.projects section.landing .logo .title{font-size:45px;font-family:'Stellar';}body.projects section.landing .logo .title .letter{position:absolute;top:0;left:0;line-height:8px;}body.projects section.landing .logo .title .letter.index-0{left:90px}body.projects section.landing .logo .title .letter.index-1{left:140px}body.projects section.landing .logo .title .letter.index-2{left:190px}body.projects section.landing .logo .title .letter.index-3{left:240px}body.projects section.landing .logo .title .letter.index-4{left:290px}body.projects section.landing .logo .title .letter.index-5{left:340px}body.projects section.landing .logo .title .letter.index-6{left:390px}body.projects section.landing .punch-line{padding-top:600px;text-align:center;}body.projects section.landing .punch-line .text{text-transform:uppercase;font-size:18px;margin:0 0 8px 0}body.projects section.landing .punch-line .links a.link{display:inline-block;padding:5px 10px;margin:0 5px;background:rgba(255,255,255,0.2);text-decoration:none;transition:background .15s;}body.projects section.landing .punch-line .links a.link:hover{background:rgba(255,255,255,0.3)}body.projects section.projects{position:relative;width:640px;margin:0 auto 90px auto;}body.projects section.projects .head{height:45px;line-height:45px;background:#333759;text-align:center;font-size:14px}body.projects section.projects .content{width:100%;}body.projects section.projects .content span.no-project{display:block;padding:17px 0;background:#eef0fa;text-align:center;color:#6c6e7c;font-size:16px;font-weight:bold;}body.projects section.projects .content span.no-project .title{opacity:.4}body.projects section.projects .content a.project{display:block;background:#eef0fa;color:#6c6e7c;border-bottom:1px solid #dadada;transition:background .15s;}body.projects section.projects .content a.project .title{display:inline-block;vertical-align:top;width:400px;font-size:16px;font-weight:bold;padding:17px}body.projects section.projects .content a.project .details{display:inline-block;vertical-align:top;width:240px;text-align:right;}body.projects section.projects .content a.project .details .detail{display:inline-block;padding:11px 10px;text-align:right;}body.projects section.projects .content a.project .details .detail .label{font-size:10px;opacity:.5;margin-bottom:2px}body.projects section.projects .content a.project .details .detail .value{font-weight:bold}body.projects section.projects .content a.project:last-child{border-bottom:none}body.projects section.projects .content a.project:hover{background:#f6f7fc}body.projects section.text{position:relative;width:640px;margin:0 auto 90px auto;text-align:center;}body.projects section.text .title{margin-bottom:18px;font-family:'Stellar';font-size:32px}body.projects section.text ul{display:inline-block;text-align:left}body.projects section.text pre{width:400px;margin:0 auto 2em auto;background:#282c47;padding:12px 18px;text-align:left;}body.projects section.text pre span.line:before{display:inline-block;content:'$';padding:0 8px 0 0}body.projects section.text pre .opacity-20{opacity:.2;pointer-events:none}body.project{background:#31344a;color:#fff;}body.project .label{font-size:10px;margin-bottom:2px}body.project header{position:relative;height:80px;overflow:hidden;}body.project header .logo{position:absolute;top:40px;left:-35px;}body.project header .logo .disks .disk{position:absolute;border-radius:50%;background:#fff;transform:translateX(-50%) translateY(-50%);}body.project header .logo .disks .disk.index-0{width:70px;height:70px;background:#fff}body.project header .logo .disks .disk.index-1{width:140px;height:140px;background:#666b99}body.project header .logo .disks .disk.index-2{width:210px;height:210px;background:#555980}body.project header .logo .disks .disk.index-3{width:280px;height:280px;background:#474a6b}body.project header .logo .disks .disk.index-4{width:350px;height:350px;background:#3b3e59}body.project header .logo .title{position:absolute;top:0;left:80px;line-height:4px;font-size:28px;font-family:'Stellar';text-transform:uppercase;letter-spacing:2px}body.project aside.aside{position:fixed;top:80px;left:0;bottom:0;width:240px;}body.project aside.aside header.aside-header{position:relative;width:100%;height:115px;padding:12px 20px 0 20px;border-top:1px solid #515771;border-bottom:1px solid #515771;background:rgba(0,0,0,0.2);}body.project aside.aside header.aside-header .name{position:absolute;top:15px;left:20px;font-weight:bold}body.project aside.aside header.aside-header .details{text-align:right;}body.project aside.aside header.aside-header .details .detail{margin-bottom:6px;}body.project aside.aside header.aside-header .details .detail .value{font-weight:bold}body.project aside.aside .aside-tree{position:absolute;top:115px;left:0;width:100%;bottom:110px;overflow-y:scroll}body.project aside.aside footer.aside-footer{position:absolute;bottom:0;left:0;width:100%;height:110px;padding:15px 20px 0 20px;border-top:1px solid #515771;background:rgba(0,0,0,0.2)}body.project section.main{position:fixed;top:80px;left:240px;right:0;bottom:0} +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0;}table th{text-align:left}*,*::before,*::after,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}input,button,textarea,select{color:inherit;font-size:inherit;font-style:inherit;font-family:inherit;-webkit-border-radius:0;border-radius:0;-webkit-padding-start:0;align-items:flex-start;text-index:0;border:none;outline:none;background:none;padding:0;margin:0;width:auto;height:auto;line-height:1em}input[type=text],input[type=reset],input[type=password],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=time],input[type=week],input[type=month],input[type=date],input[type=datetime],input[type=datetime-local],input[type=number],input[type=submit],input[type=color],input[type=file],button,textarea,select{height:1em;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=color]{width:1em}input::-ms-clear{display:none}details,summary{-webkit-appearance:none;-moz-appearance:none;appearance:none}mark{background:none}hr{height:1px;margin:0;padding:0}u{text-decoration:none}a{color:inherit;outline:none}@font-face{font-family:'Stellar';src:url("../fonts/Stellar-Regular.eot");src:url("../fonts/Stellar-Regular.eot?#iefix") format('embedded-opentype'),url("../fonts/Stellar-Regular.woff2") format('woff2'),url("../fonts/Stellar-Regular.woff") format('woff'),url("../fonts/Stellar-Regular.ttf") format('truetype');font-weight:normal;font-style:normal}@font-face{font-family:'Ubuntu Mono';src:url("../fonts/UbuntuMono-Regular.eot");src:url("../fonts/UbuntuMono-Regular.eot?#iefix") format('embedded-opentype'),url("../fonts/UbuntuMono-Regular.woff2") format('woff2'),url("../fonts/UbuntuMono-Regular.woff") format('woff'),url("../fonts/UbuntuMono-Regular.ttf") format('truetype');font-weight:normal;font-style:normal}body{font-family:Helvetica,Arial;font-size:12px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased}body.projects{background:#323759;color:#fff;}body.projects ::-moz-selection{background:#f1eff9}body.projects ::selection{background:#f1eff9}body.projects .gradient-backgroud{position:absolute;top:0;left:0;width:100%;height:920px;background:linear-gradient(0,#323759,#5e50c3 33%,#c9b2cd)}body.projects p,body.projects ul{font-size:14px;line-height:18px;margin-bottom:1em}body.projects code{font-family:'Ubuntu Mono'}body.projects section.landing{position:relative;margin-bottom:60px;}body.projects section.landing .logo{position:absolute;top:315px;left:50%;}body.projects section.landing .logo .disks .disk{position:absolute;border-radius:50%;background:#fff;transform:translateX(-50%) translateY(-50%);opacity:.2;}body.projects section.landing .logo .disks .disk.index-0{width:100px;height:100px;opacity:.7}body.projects section.landing .logo .disks .disk.index-1{width:200px;height:200px}body.projects section.landing .logo .disks .disk.index-2{width:300px;height:300px}body.projects section.landing .logo .disks .disk.index-3{width:400px;height:400px}body.projects section.landing .logo .disks .disk.index-4{width:500px;height:500px}body.projects section.landing .logo .title{font-size:45px;font-family:'Stellar';}body.projects section.landing .logo .title .letter{position:absolute;top:0;left:0;line-height:8px;}body.projects section.landing .logo .title .letter.index-0{left:90px}body.projects section.landing .logo .title .letter.index-1{left:140px}body.projects section.landing .logo .title .letter.index-2{left:190px}body.projects section.landing .logo .title .letter.index-3{left:240px}body.projects section.landing .logo .title .letter.index-4{left:290px}body.projects section.landing .logo .title .letter.index-5{left:340px}body.projects section.landing .logo .title .letter.index-6{left:390px}body.projects section.landing .punch-line{padding-top:600px;text-align:center;}body.projects section.landing .punch-line .text{text-transform:uppercase;font-size:18px;margin:0 0 8px 0}body.projects section.landing .punch-line .links a.link{display:inline-block;padding:5px 10px;margin:0 5px;background:rgba(255,255,255,0.2);text-decoration:none;transition:background .15s;}body.projects section.landing .punch-line .links a.link:hover{background:rgba(255,255,255,0.3)}body.projects section.projects{position:relative;width:640px;margin:0 auto 90px auto;}body.projects section.projects .head{height:45px;line-height:45px;background:#333759;text-align:center;font-size:14px}body.projects section.projects .content{width:100%;}body.projects section.projects .content span.no-project{display:block;padding:17px 0;background:#eef0fa;text-align:center;color:#6c6e7c;font-size:16px;font-weight:bold;}body.projects section.projects .content span.no-project .title{opacity:.4}body.projects section.projects .content a.project{display:block;background:#eef0fa;color:#6c6e7c;border-bottom:1px solid #dadada;transition:background .15s;}body.projects section.projects .content a.project .title{display:inline-block;vertical-align:top;width:400px;font-size:16px;font-weight:bold;padding:17px}body.projects section.projects .content a.project .details{display:inline-block;vertical-align:top;width:240px;text-align:right;}body.projects section.projects .content a.project .details .detail{display:inline-block;padding:11px 10px;text-align:right;}body.projects section.projects .content a.project .details .detail .label{font-size:10px;opacity:.5;margin-bottom:2px}body.projects section.projects .content a.project .details .detail .value{font-weight:bold}body.projects section.projects .content a.project:last-child{border-bottom:none}body.projects section.projects .content a.project:hover{background:#f6f7fc}body.projects section.text{position:relative;width:640px;margin:0 auto 90px auto;text-align:center;}body.projects section.text .title{margin-bottom:18px;font-family:'Stellar';font-size:32px}body.projects section.text ul{display:inline-block;text-align:left}body.projects section.text pre{width:400px;margin:0 auto 2em auto;background:#282c47;padding:12px 18px;text-align:left;}body.projects section.text pre span.line:before{display:inline-block;content:'$';padding:0 8px 0 0}body.projects section.text pre .opacity-20{opacity:.2;pointer-events:none}body.project{background:#31344a;color:#fff;}body.project .label{font-size:10px;margin-bottom:2px}body.project header{position:relative;height:80px;overflow:hidden;}body.project header .logo{position:absolute;top:40px;left:-35px;}body.project header .logo .disks .disk{position:absolute;border-radius:50%;background:#fff;transform:translateX(-50%) translateY(-50%);}body.project header .logo .disks .disk.index-0{width:70px;height:70px;background:#fff}body.project header .logo .disks .disk.index-1{width:140px;height:140px;background:#666b99}body.project header .logo .disks .disk.index-2{width:210px;height:210px;background:#555980}body.project header .logo .disks .disk.index-3{width:280px;height:280px;background:#474a6b}body.project header .logo .disks .disk.index-4{width:350px;height:350px;background:#3b3e59}body.project header .logo .title{position:absolute;top:0;left:80px;line-height:4px;font-size:28px;font-family:'Stellar';text-transform:uppercase;letter-spacing:2px}body.project aside.aside{position:fixed;top:80px;left:0;bottom:0;width:240px;}body.project aside.aside header.aside-header{position:relative;width:100%;height:115px;padding:12px 20px 0 20px;border-top:1px solid #515771;border-bottom:1px solid #515771;background:rgba(0,0,0,0.2);}body.project aside.aside header.aside-header .name{position:absolute;top:15px;left:20px;font-weight:bold}body.project aside.aside header.aside-header .details{text-align:right;}body.project aside.aside header.aside-header .details .detail{margin-bottom:6px;}body.project aside.aside header.aside-header .details .detail .value{font-weight:bold}body.project aside.aside .aside-tree{position:absolute;top:115px;left:0;width:100%;bottom:110px;overflow-y:scroll;}body.project aside.aside .aside-tree nav.files-tree-nav{position:absolute;top:0;left:0;width:100%;}body.project aside.aside .aside-tree nav.files-tree-nav li{line-height:24px;font-size:12px;cursor:pointer;}body.project aside.aside .aside-tree nav.files-tree-nav li .name{position:relative;display:inline-block;padding-left:20px;padding-right:6px;-webkit-font-smoothing:auto;font-smoothing:auto;}@media only screen and (min-resolution:1.5dppx),only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-resolution:144dpi){body.project aside.aside .aside-tree nav.files-tree-nav li .name{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased}}body.project aside.aside .aside-tree nav.files-tree-nav li .notif{display:inline-block;height:12px;margin:0 2px 0 3px;padding:0 4px;line-height:12px;border-radius:6px;font-size:8px;-webkit-font-smoothing:auto;font-smoothing:auto;}body.project aside.aside .aside-tree nav.files-tree-nav li .notif.new-file{background:#748bd5}body.project aside.aside .aside-tree nav.files-tree-nav li .notif.new-version{background:#ec399e;line-height:13px}body.project aside.aside .aside-tree nav.files-tree-nav li > span{display:block;padding-left:16px}body.project aside.aside .aside-tree nav.files-tree-nav li li > span{padding-left:32px}body.project aside.aside .aside-tree nav.files-tree-nav li li li > span{padding-left:48px}body.project aside.aside .aside-tree nav.files-tree-nav li li li li > span{padding-left:64px}body.project aside.aside .aside-tree nav.files-tree-nav li li li li li > span{padding-left:80px}body.project aside.aside .aside-tree nav.files-tree-nav li li li li li li > span{padding-left:96px}body.project aside.aside .aside-tree nav.files-tree-nav li li li li li li li > span{padding-left:112px}body.project aside.aside .aside-tree nav.files-tree-nav li li li li li li li li > span{padding-left:128px}body.project aside.aside .aside-tree nav.files-tree-nav li li li li li li li li li > span{padding-left:144px}body.project aside.aside .aside-tree nav.files-tree-nav li.active{background:#4d5b8d}body.project aside.aside .aside-tree nav.files-tree-nav i{position:absolute;top:25%;left:0;display:block;width:12px;height:50%;background:center center no-repeat;}body.project aside.aside .aside-tree nav.files-tree-nav i.folder{background-image:url("../svg/folder.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.folder-active{background-image:url("../svg/folder-active.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.js{background-image:url("../svg/js.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.html{background-image:url("../svg/html.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.sass{background-image:url("../svg/sass.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.less{background-image:url("../svg/less.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.css{background-image:url("../svg/css.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.php{background-image:url("../svg/php.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.json{background-image:url("../svg/json.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.jade{background-image:url("../svg/jade.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.md{background-image:url("../svg/md.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.sql{background-image:url("../svg/sql.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.apache{background-image:url("../svg/apache.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.yml{background-image:url("../svg/yml.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.svg{background-image:url("../svg/svg.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.font{background-image:url("../svg/font.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.image{background-image:url("../svg/image.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.video{background-image:url("../svg/video.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.audio{background-image:url("../svg/audio.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.zip{background-image:url("../svg/zip.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.txt{background-image:url("../svg/txt.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.coffee{background-image:url("../svg/coffee.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.git{background-image:url("../svg/git.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.xml{background-image:url("../svg/xml.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.twig{background-image:url("../svg/twig.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.c{background-image:url("../svg/c.svg")}body.project aside.aside .aside-tree nav.files-tree-nav i.random{background-image:url("../svg/random.svg")}body.project aside.aside footer.aside-footer{position:absolute;bottom:0;left:0;width:100%;height:110px;padding:15px 20px 0 20px;border-top:1px solid #515771;background:rgba(0,0,0,0.2)}body.project section.main{position:fixed;top:80px;left:240px;right:0;bottom:0;}body.project section.main section.no-file{position:absolute;top:0;left:0;width:100%;height:100%;border-top:1px solid #515771;border-left:1px solid #515771;}body.project section.main section.no-file .text{position:absolute;top:50%;left:0;width:100%;text-align:center;color:#c6c0d8;text-transform:uppercase;font-size:20px;opacity:.2;font-weight:bold}body.project section.main section.file{top:0;left:0;width:100%;height:100%;}body.project section.main section.file header.file-header{position:absolute;top:0;left:200px;right:0;height:30px;background:#4d5b8d} /*# sourceMappingURL=style.css.map */ diff --git a/site/public/stylus/pages/project.styl b/site/public/stylus/pages/project.styl index 1a61ee6..dec2205 100644 --- a/site/public/stylus/pages/project.styl +++ b/site/public/stylus/pages/project.styl @@ -93,6 +93,130 @@ body.project bottom 110px overflow-y scroll + nav.files-tree-nav + position absolute + top 0 + left 0 + width 100% + + li + line-height 24px + font-size 12px + cursor pointer + + .name + position relative + display inline-block + padding-left 20px + padding-right 6px + font-smoothing(auto) + +retina() + font-smoothing(antialiased) + + .notif + display inline-block + height 12px + margin 0 2px 0 3px + padding 0 4px + line-height 12px + border-radius 6px + font-size 8px + font-smoothing(auto) + + &.new-file + background #748bd5 + + &.new-version + background #ec399e + line-height 13px + + > span + display block + padding-left 16px * 1 + li > span + padding-left 16px * 2 + li li > span + padding-left 16px * 3 + li li li > span + padding-left 16px * 4 + li li li li > span + padding-left 16px * 5 + li li li li li > span + padding-left 16px * 6 + li li li li li li > span + padding-left 16px * 7 + li li li li li li li > span + padding-left 16px * 8 + li li li li li li li li > span + padding-left 16px * 9 + + &.active + background #4d5b8d + + i + position absolute + top 25% + left 0 + display block + width 12px + height 50% + background center center no-repeat + + &.folder + background-image url('../svg/folder.svg') + &.folder-active + background-image url('../svg/folder-active.svg') + &.js + background-image url('../svg/js.svg') + &.html + background-image url('../svg/html.svg') + &.sass + background-image url('../svg/sass.svg') + &.less + background-image url('../svg/less.svg') + &.css + background-image url('../svg/css.svg') + &.php + background-image url('../svg/php.svg') + &.json + background-image url('../svg/json.svg') + &.jade + background-image url('../svg/jade.svg') + &.md + background-image url('../svg/md.svg') + &.sql + background-image url('../svg/sql.svg') + &.apache + background-image url('../svg/apache.svg') + &.yml + background-image url('../svg/yml.svg') + &.svg + background-image url('../svg/svg.svg') + &.font + background-image url('../svg/font.svg') + &.image + background-image url('../svg/image.svg') + &.video + background-image url('../svg/video.svg') + &.audio + background-image url('../svg/audio.svg') + &.zip + background-image url('../svg/zip.svg') + &.txt + background-image url('../svg/txt.svg') + &.coffee + background-image url('../svg/coffee.svg') + &.git + background-image url('../svg/git.svg') + &.xml + background-image url('../svg/xml.svg') + &.twig + background-image url('../svg/twig.svg') + &.c + background-image url('../svg/c.svg') + &.random + background-image url('../svg/random.svg') + footer.aside-footer position absolute bottom 0 @@ -110,3 +234,38 @@ body.project left 240px right 0 bottom 0 + + section.no-file + position absolute + top 0 + left 0 + width 100% + height 100% + border-top 1px solid #515771 + border-left 1px solid #515771 + + .text + position absolute + top 50% + left 0 + width 100% + text-align center + color #c6c0d8 + text-transform uppercase + font-size 20px + opacity 0.2 + font-weight bold + + section.file + top 0 + left 0 + width 100% + height 100% + + header.file-header + position absolute + top 0 + left 200px + right 0 + height 30px + background #4d5b8d \ No newline at end of file diff --git a/site/views/pages/index/project.jade b/site/views/pages/index/project.jade index 8b83a86..bfc076b 100644 --- a/site/views/pages/index/project.jade +++ b/site/views/pages/index/project.jade @@ -13,10 +13,10 @@ script(type="text/ng-template",id="folder_template.html") span.name i(ng-class="_file.data.icon") | {{_file.name}} - span.notif(ng-if="_file.data.notif") - | [{{_file.data.notif}}] - span.new(ng-if="_file.data.new") - | [new] + span.notif.new-file(ng-if="_file.data.new") + | new + span.notif.new-version(ng-if="_file.data.notif") + | {{_file.data.notif}} div(ng-controller="ProjectController as controller",ng-init="init('" + project_slug + "')") @@ -70,7 +70,8 @@ div(ng-controller="ProjectController as controller",ng-init="init('" + project_s section.main section.no-file(ng-if="!file") - | No file + .text + | Choose a file section.file(ng-if="file") header.file-header span.path