diff options
| -rw-r--r-- | app/assets/stylesheets/app.scss | 5 | ||||
| -rw-r--r-- | app/assets/stylesheets/application.css | 3 | ||||
| -rw-r--r-- | app/assets/stylesheets/application.scss | 5 | ||||
| -rw-r--r-- | app/assets/stylesheets/components/type.scss | 8 | ||||
| -rw-r--r-- | app/assets/stylesheets/layouts/_global.scss | 81 | ||||
| -rw-r--r-- | app/assets/stylesheets/layouts/reset.scss | 1 | ||||
| -rw-r--r-- | app/views/home/main.html.erb | 46 | ||||
| -rw-r--r-- | app/views/layouts/application.html.erb | 2 |
8 files changed, 148 insertions, 3 deletions
diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss new file mode 100644 index 0000000..47695ad --- /dev/null +++ b/app/assets/stylesheets/app.scss @@ -0,0 +1,5 @@ +@import "layouts/reset"; + +@import "components/type"; + +@import "layouts/global"; diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index f9cd5b3..b1bc0e8 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -10,6 +10,7 @@ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new * file per style scope. * - *= require_tree . + *= require app *= require_self + * */ diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss new file mode 100644 index 0000000..47695ad --- /dev/null +++ b/app/assets/stylesheets/application.scss @@ -0,0 +1,5 @@ +@import "layouts/reset"; + +@import "components/type"; + +@import "layouts/global"; diff --git a/app/assets/stylesheets/components/type.scss b/app/assets/stylesheets/components/type.scss new file mode 100644 index 0000000..7e8fc05 --- /dev/null +++ b/app/assets/stylesheets/components/type.scss @@ -0,0 +1,8 @@ +.font-weight-semibold { + font-weight: 600; +} + + +.font-size-28 { + font-size: 28px; +} diff --git a/app/assets/stylesheets/layouts/_global.scss b/app/assets/stylesheets/layouts/_global.scss new file mode 100644 index 0000000..e952fb2 --- /dev/null +++ b/app/assets/stylesheets/layouts/_global.scss @@ -0,0 +1,81 @@ +body { + font-family: Avenir, Verdana, Helvetica, sans-serif; + color: #170e0b; +} + + +.display-block { + display: block; +} + + +.margin-top-70 { + margin-top: 70px; +} + + +.padding-13 { + padding: 13px; +} + + +.position-fixed { + position: fixed; +} + + +.top-0 { + top: 0; +} + + +.min-height-100\% { + min-height: 100%; +} + + +.header { + background-color: rgb(229, 226, 216); + width: 100%; + height: 30px; + padding: 20px; +} + + +$sidebar-width: 250px; + +.sidebar { + background-color: rgb(242, 239, 239); + width: $sidebar-width; + height: 100%; + border-right: 2px solid rgb(234, 224, 224); + overflow: auto; + + a { + border-bottom: 1px solid rgb(213, 202, 202); + color: rgb(18, 113, 18); + text-decoration: none; + } + + a:hover, + .active { + background: #249124; /* Old browsers */ + background: -moz-linear-gradient(top, #249124 0%, #127112 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#249124), color-stop(100%,#127112)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #249124 0%,#127112 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #249124 0%,#127112 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #249124 0%,#127112 100%); /* IE10+ */ + background: linear-gradient(to bottom, #249124 0%,#127112 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#249124', endColorstr='#127112',GradientType=0 ); /* IE6-9 */ + + color: #ddd; + } +} + + +.note-editor { + margin-left: $sidebar-width; + padding: 12px 15px; + font: 18px/1.7 Georgia, Times, serif; + outline: none; +} diff --git a/app/assets/stylesheets/layouts/reset.scss b/app/assets/stylesheets/layouts/reset.scss new file mode 100644 index 0000000..685c00a --- /dev/null +++ b/app/assets/stylesheets/layouts/reset.scss @@ -0,0 +1 @@ +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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} diff --git a/app/views/home/main.html.erb b/app/views/home/main.html.erb index b2ebb94..c3bbcd5 100644 --- a/app/views/home/main.html.erb +++ b/app/views/home/main.html.erb @@ -1 +1,45 @@ -hello from home +<div class="header position-fixed top-0"> + <h1 class="font-size-28 font-weight-semibold">Notes</h1> +</div> + +<div class="margin-top-70"> + <div class="sidebar position-fixed min-height-100%"> + <a href="#" class="display-block padding-13">A Note</a> + <a href="#" class="display-block padding-13">A Note</a> + <a href="#" class="display-block padding-13">A Note</a> + </div> + + <div class="note-editor" contenteditable> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in eleifend tellus, sed porta sapien. Nullam eget sodales neque. Proin non ornare libero, et condimentum risus. Suspendisse felis orci, rhoncus vitae mauris et, finibus sagittis felis. Aliquam egestas orci eu viverra varius. Suspendisse sollicitudin maximus purus, non egestas tellus lacinia et. Duis hendrerit arcu eu molestie dignissim. Curabitur pharetra erat vitae nibh posuere malesuada. Suspendisse tempus, massa eget elementum ultrices, nunc velit euismod justo, vitae interdum ipsum justo in lectus. + + Cras vel faucibus sapien, in laoreet ligula. Donec magna libero, vulputate nec fringilla id, dictum quis urna. Aenean non vehicula metus. Integer nec libero consequat justo elementum scelerisque. Morbi elementum elit quis diam feugiat, sed sagittis eros placerat. Vivamus pretium porta eros, sed accumsan urna venenatis et. Donec egestas tortor id iaculis placerat. Ut sit amet sollicitudin mauris. Quisque pharetra nunc felis, quis vulputate lacus mollis vel. Pellentesque accumsan efficitur congue. Sed sed est risus. In eu elementum nibh. Aliquam pretium ex felis, vitae cursus lorem sagittis eu. Vestibulum at turpis non odio consequat dignissim. + + Proin lobortis nec sem non aliquam. Curabitur pulvinar turpis sit amet felis ullamcorper blandit. In feugiat sem enim, id egestas tellus faucibus eget. Etiam neque neque, porta vitae est vel, vehicula condimentum urna. Nunc dignissim nunc at nisl facilisis porta. Nulla auctor, elit sed imperdiet tincidunt, tellus mauris consectetur massa, at luctus ligula est vitae lacus. Cras a ultricies elit, id porta turpis. Morbi id metus et justo scelerisque auctor ac id nunc. Proin mauris arcu, sodales in vestibulum eu, semper non sem. Donec pellentesque laoreet tellus eget dignissim. Sed est justo, bibendum ac nulla eget, aliquet ullamcorper odio. + + In iaculis interdum velit vel faucibus. In commodo tellus massa, sit amet mattis libero faucibus a. Curabitur a nunc id tellus condimentum venenatis. Pellentesque sem nisl, imperdiet eu est et, accumsan ornare nulla. Duis eget velit tempus, porttitor ligula et, tincidunt dolor. Pellentesque orci lorem, pulvinar quis posuere sed, cursus semper mauris. Suspendisse potenti. Integer scelerisque, neque ut cursus mollis, urna ipsum sagittis ante, eu placerat est enim mollis neque. Aliquam sit amet lectus sit amet justo placerat semper at et quam. Quisque in congue arcu. Curabitur condimentum, metus ut vehicula pharetra, sapien lectus porta arcu, vel posuere nulla ligula vel lacus. + + Mauris non mi eget sem aliquam volutpat. Sed orci nisi, facilisis ac sem nec, faucibus vestibulum metus. Mauris augue turpis, lobortis finibus vulputate at, efficitur id ipsum. Sed et bibendum eros. Proin tempor quam at elit euismod cursus. Cras ac ipsum eget leo condimentum bibendum at eget urna. Sed non felis sit amet leo molestie commodo sed in mauris. Nulla faucibus porttitor felis, eget fermentum est commodo non. Nulla facilisi. Ut nulla arcu, tincidunt auctor sapien eu, condimentum facilisis risus. Cras malesuada quis risus vitae fermentum. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in eleifend tellus, sed porta sapien. Nullam eget sodales neque. Proin non ornare libero, et condimentum risus. Suspendisse felis orci, rhoncus vitae mauris et, finibus sagittis felis. Aliquam egestas orci eu viverra varius. Suspendisse sollicitudin maximus purus, non egestas tellus lacinia et. Duis hendrerit arcu eu molestie dignissim. Curabitur pharetra erat vitae nibh posuere malesuada. Suspendisse tempus, massa eget elementum ultrices, nunc velit euismod justo, vitae interdum ipsum justo in lectus. + + Cras vel faucibus sapien, in laoreet ligula. Donec magna libero, vulputate nec fringilla id, dictum quis urna. Aenean non vehicula metus. Integer nec libero consequat justo elementum scelerisque. Morbi elementum elit quis diam feugiat, sed sagittis eros placerat. Vivamus pretium porta eros, sed accumsan urna venenatis et. Donec egestas tortor id iaculis placerat. Ut sit amet sollicitudin mauris. Quisque pharetra nunc felis, quis vulputate lacus mollis vel. Pellentesque accumsan efficitur congue. Sed sed est risus. In eu elementum nibh. Aliquam pretium ex felis, vitae cursus lorem sagittis eu. Vestibulum at turpis non odio consequat dignissim. + + Proin lobortis nec sem non aliquam. Curabitur pulvinar turpis sit amet felis ullamcorper blandit. In feugiat sem enim, id egestas tellus faucibus eget. Etiam neque neque, porta vitae est vel, vehicula condimentum urna. Nunc dignissim nunc at nisl facilisis porta. Nulla auctor, elit sed imperdiet tincidunt, tellus mauris consectetur massa, at luctus ligula est vitae lacus. Cras a ultricies elit, id porta turpis. Morbi id metus et justo scelerisque auctor ac id nunc. Proin mauris arcu, sodales in vestibulum eu, semper non sem. Donec pellentesque laoreet tellus eget dignissim. Sed est justo, bibendum ac nulla eget, aliquet ullamcorper odio. + + In iaculis interdum velit vel faucibus. In commodo tellus massa, sit amet mattis libero faucibus a. Curabitur a nunc id tellus condimentum venenatis. Pellentesque sem nisl, imperdiet eu est et, accumsan ornare nulla. Duis eget velit tempus, porttitor ligula et, tincidunt dolor. Pellentesque orci lorem, pulvinar quis posuere sed, cursus semper mauris. Suspendisse potenti. Integer scelerisque, neque ut cursus mollis, urna ipsum sagittis ante, eu placerat est enim mollis neque. Aliquam sit amet lectus sit amet justo placerat semper at et quam. Quisque in congue arcu. Curabitur condimentum, metus ut vehicula pharetra, sapien lectus porta arcu, vel posuere nulla ligula vel lacus. + + Mauris non mi eget sem aliquam volutpat. Sed orci nisi, facilisis ac sem nec, faucibus vestibulum metus. Mauris augue turpis, lobortis finibus vulputate at, efficitur id ipsum. Sed et bibendum eros. Proin tempor quam at elit euismod cursus. Cras ac ipsum eget leo condimentum bibendum at eget urna. Sed non felis sit amet leo molestie commodo sed in mauris. Nulla faucibus porttitor felis, eget fermentum est commodo non. Nulla facilisi. Ut nulla arcu, tincidunt auctor sapien eu, condimentum facilisis risus. Cras malesuada quis risus vitae fermentum. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in eleifend tellus, sed porta sapien. Nullam eget sodales neque. Proin non ornare libero, et condimentum risus. Suspendisse felis orci, rhoncus vitae mauris et, finibus sagittis felis. Aliquam egestas orci eu viverra varius. Suspendisse sollicitudin maximus purus, non egestas tellus lacinia et. Duis hendrerit arcu eu molestie dignissim. Curabitur pharetra erat vitae nibh posuere malesuada. Suspendisse tempus, massa eget elementum ultrices, nunc velit euismod justo, vitae interdum ipsum justo in lectus. + + Cras vel faucibus sapien, in laoreet ligula. Donec magna libero, vulputate nec fringilla id, dictum quis urna. Aenean non vehicula metus. Integer nec libero consequat justo elementum scelerisque. Morbi elementum elit quis diam feugiat, sed sagittis eros placerat. Vivamus pretium porta eros, sed accumsan urna venenatis et. Donec egestas tortor id iaculis placerat. Ut sit amet sollicitudin mauris. Quisque pharetra nunc felis, quis vulputate lacus mollis vel. Pellentesque accumsan efficitur congue. Sed sed est risus. In eu elementum nibh. Aliquam pretium ex felis, vitae cursus lorem sagittis eu. Vestibulum at turpis non odio consequat dignissim. + + Proin lobortis nec sem non aliquam. Curabitur pulvinar turpis sit amet felis ullamcorper blandit. In feugiat sem enim, id egestas tellus faucibus eget. Etiam neque neque, porta vitae est vel, vehicula condimentum urna. Nunc dignissim nunc at nisl facilisis porta. Nulla auctor, elit sed imperdiet tincidunt, tellus mauris consectetur massa, at luctus ligula est vitae lacus. Cras a ultricies elit, id porta turpis. Morbi id metus et justo scelerisque auctor ac id nunc. Proin mauris arcu, sodales in vestibulum eu, semper non sem. Donec pellentesque laoreet tellus eget dignissim. Sed est justo, bibendum ac nulla eget, aliquet ullamcorper odio. + + In iaculis interdum velit vel faucibus. In commodo tellus massa, sit amet mattis libero faucibus a. Curabitur a nunc id tellus condimentum venenatis. Pellentesque sem nisl, imperdiet eu est et, accumsan ornare nulla. Duis eget velit tempus, porttitor ligula et, tincidunt dolor. Pellentesque orci lorem, pulvinar quis posuere sed, cursus semper mauris. Suspendisse potenti. Integer scelerisque, neque ut cursus mollis, urna ipsum sagittis ante, eu placerat est enim mollis neque. Aliquam sit amet lectus sit amet justo placerat semper at et quam. Quisque in congue arcu. Curabitur condimentum, metus ut vehicula pharetra, sapien lectus porta arcu, vel posuere nulla ligula vel lacus. + + Mauris non mi eget sem aliquam volutpat. Sed orci nisi, facilisis ac sem nec, faucibus vestibulum metus. Mauris augue turpis, lobortis finibus vulputate at, efficitur id ipsum. Sed et bibendum eros. Proin tempor quam at elit euismod cursus. Cras ac ipsum eget leo condimentum bibendum at eget urna. Sed non felis sit amet leo molestie commodo sed in mauris. Nulla faucibus porttitor felis, eget fermentum est commodo non. Nulla facilisi. Ut nulla arcu, tincidunt auctor sapien eu, condimentum facilisis risus. Cras malesuada quis risus vitae fermentum. + + + </div> +</div> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index e859a3e..2b9affc 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <head> - <title>AngularDemo</title> + <title>Notes</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> |