diff --git a/lib/librarix/assets/application.scss b/lib/librarix/assets/application.scss index f9d2014..2af243a 100644 --- a/lib/librarix/assets/application.scss +++ b/lib/librarix/assets/application.scss @@ -2,11 +2,41 @@ body { margin: 10px; } -h2 { - margin-top: 0; +a { + text-decoration: none; + color: #666; + + &:hover { + color: #888; + } } -body > form #search-main { +h2 { + margin-top: 0; + overflow: hidden; + text-overflow: ellipsis; + + font-size: 1.2em; + font-family: Verdana,Arial,sans-serif; +} + +ul#movies, ul#menu { + list-style-type: none; + margin: 0; + padding: 0; +} + +ul#menu { + display: flex; + flex-flow: row wrap; + justify-content: flex-end; + + li { + margin: 5px; + } +} + +form #search-main { display: flex; input { @@ -26,12 +56,6 @@ body > form #search-main { } } -ul#movies { - list-style-type: none; - margin: 0; - padding: 0; -} - .default, .compact { li { padding: 10px 0; diff --git a/lib/librarix/menu.rb b/lib/librarix/menu.rb index d622da8..d5b0552 100644 --- a/lib/librarix/menu.rb +++ b/lib/librarix/menu.rb @@ -27,7 +27,7 @@ module Librarix private def around(content) - "" + "" end class Element diff --git a/lib/librarix/public/application.css b/lib/librarix/public/application.css index b5854e9..611cc15 100644 --- a/lib/librarix/public/application.css +++ b/lib/librarix/public/application.css @@ -1 +1 @@ -body{margin:10px}h2{margin-top:0}body>form #search-main{display:flex}body>form #search-main input{border-radius:0.4em;border:solid 3px #f4f4f4}body>form #search-main input[type="submit"]{background-color:#f4f4f4}body>form #search-main input[type="text"]{flex-grow:1;min-width:50px;font-size:1.4em;padding:5px}ul#movies{list-style-type:none;margin:0;padding:0}.default li,.compact li{padding:10px 0}.default li:nth-child(even),.compact li:nth-child(even){background-color:#f4f4f4}.default .movie,.compact .movie{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.default .movie .poster,.compact .movie .poster{margin-right:10px}.default .movie .informations,.compact .movie .informations{align-self:flex-start;flex:1 1 300px}.poster{display:flex;flex-flow:row wrap}.poster .movie{width:160px} +body{margin:10px}a{text-decoration:none;color:#666}a:hover{color:#888}h2{margin-top:0;overflow:hidden;text-overflow:ellipsis;font-size:1.2em;font-family:Verdana,Arial,sans-serif}ul#movies,ul#menu{list-style-type:none;margin:0;padding:0}ul#menu{display:flex;flex-flow:row wrap;justify-content:flex-end}ul#menu li{margin:5px}form #search-main{display:flex}form #search-main input{border-radius:0.4em;border:solid 3px #f4f4f4}form #search-main input[type="submit"]{background-color:#f4f4f4}form #search-main input[type="text"]{flex-grow:1;min-width:50px;font-size:1.4em;padding:5px}.default li,.compact li{padding:10px 0}.default li:nth-child(even),.compact li:nth-child(even){background-color:#f4f4f4}.default .movie,.compact .movie{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.default .movie .poster,.compact .movie .poster{margin-right:10px}.default .movie .informations,.compact .movie .informations{align-self:flex-start;flex:1 1 300px}.poster{display:flex;flex-flow:row wrap}.poster .movie{width:160px}