From 0c5f80d41b52d3c3533cdb94ff64d2fb0133526a Mon Sep 17 00:00:00 2001 From: Li Haoyi Date: Sun, 28 Dec 2014 16:20:43 +0100 Subject: scalatex split out for reals --- book/src/main/resources/css/side-menu.css | 331 ++++++++++++----------------- book/src/main/scala/book/Main.scala | 9 +- book/src/main/scala/book/Utils.scala | 9 +- examples/demos/src/main/scala/Splash.scala | 11 +- 4 files changed, 155 insertions(+), 205 deletions(-) diff --git a/book/src/main/resources/css/side-menu.css b/book/src/main/resources/css/side-menu.css index 6439a28..ed06b5f 100755 --- a/book/src/main/resources/css/side-menu.css +++ b/book/src/main/resources/css/side-menu.css @@ -1,12 +1,4 @@ -body { - color: #777; -} -*{ - position: relative; -} -p{ - text-align: justify; -} + #main{ position: fixed; max-width: 100%; @@ -15,11 +7,39 @@ p{ height: 100%; overflow-y: scroll } + .pure-img-responsive { max-width: 100%; height: auto; } + +.header { + margin: 0; + color: #333; + text-align: center; + padding: 2.5em 2em 0; + border-bottom: 1px solid #eee; +} +.header h1 { + margin: 0.2em 0; + font-size: 3em; + font-weight: 300; +} +.header h2 { + font-weight: 300; + color: #ccc; + padding: 0; + margin-top: 0; +} + +.content-subhead { + margin: 50px 0 20px 0; + font-weight: 300; + color: #888; +} + + /* Add transition to containers so they can push in and out. */ @@ -33,62 +53,6 @@ Add transition to containers so they can push in and out. transition: all 0.2s ease-out; } -/* -This is the parent `
` that contains the menu and the content area. -*/ -#layout { - position: relative; - padding-left: 0; -} - #layout.active { - position: relative; - left: 250px; - } - #layout.active #menu { - left: 250px; - width: 250px; - } - - #layout.active .menu-link { - left: 250px; - } -/* -The content `
` is where all your content goes. -*/ -.content { - margin: 0 auto; - padding: 0 2em; - max-width: 800px; - margin-bottom: 50px; - line-height: 1.6em; -} - -.header { - margin: 0; - color: #333; - text-align: center; - padding: 2.5em 2em 0; - border-bottom: 1px solid #eee; - } - .header h1 { - margin: 0.2em 0; - font-size: 3em; - font-weight: 300; - } - .header h2 { - font-weight: 300; - color: #ccc; - padding: 0; - margin-top: 0; - } - -.content-subhead { - margin: 50px 0 20px 0; - font-weight: 300; - color: #888; -} - - /* The `#menu` `
` is the parent `
` that contains the `.pure-menu` that @@ -108,61 +72,61 @@ appears on the left side of the page. overflow-x: hidden; -webkit-overflow-scrolling: touch; } - /* - All anchors inside the menu should be styled like this. - */ - #menu a { - color: #999; - border: none; - padding: 0.6em 0 0.6em 0.6em; - } +/* +All anchors inside the menu should be styled like this. +*/ +#menu a { + color: #999; + border: none; + padding: 0.6em 0 0.6em 0.6em; +} - /* - Remove all background/borders, since we are applying them to #menu. - */ - #menu .pure-menu, - #menu .pure-menu ul { - border: none; - background: transparent; - } +/* +Remove all background/borders, since we are applying them to #menu. +*/ +#menu .pure-menu, +#menu .pure-menu ul { + border: none; + background: transparent; +} - /* - Add that light border to separate items into groups. - */ - #menu .pure-menu ul, - #menu .pure-menu .menu-item-divided { - border-top: 1px solid #333; - } - /* - Change color of the anchor links on hover/focus. - */ - #menu .pure-menu li a:hover, - #menu .pure-menu li a:focus { - background: #333; - } - - /* - This styles the selected menu item `
  • `. - */ - #menu .pure-menu-selected, - #menu .pure-menu-heading { - background: #1f8dd6; - } - /* - This styles a link within a selected menu item `
  • `. - */ - #menu .pure-menu-selected { - color: #fff; - } - - /* - This styles the menu heading. - */ - #menu .pure-menu-heading { - font-size: 110%; - color: #fff; - margin: 0; - } +/* +Add that light border to separate items into groups. +*/ +#menu .pure-menu ul, +#menu .pure-menu .menu-item-divided { + border-top: 1px solid #333; +} +/* +Change color of the anchor links on hover/focus. +*/ +#menu .pure-menu li a:hover, +#menu .pure-menu li a:focus { + background: #333; +} + +/* +This styles the selected menu item `
  • `. +*/ +#menu .pure-menu-selected, +#menu .pure-menu-heading { + background: #1f8dd6; +} +/* +This styles a link within a selected menu item `
  • `. +*/ +#menu .pure-menu-selected { + color: #fff; +} + +/* +This styles the menu heading. +*/ +#menu .pure-menu-heading { + font-size: 110%; + color: #fff; + margin: 0; +} /* -- Dynamic Button For Responsive Menu -------------------------------------*/ @@ -189,34 +153,34 @@ small screens. padding: 2.1em 1.6em; } - .menu-link:hover, - .menu-link:focus { - background: #000; - } +.menu-link:hover, +.menu-link:focus { + background: #000; +} - .menu-link span { - position: relative; - display: block; - } +.menu-link span { + position: relative; + display: block; +} - .menu-link span, - .menu-link span:before, - .menu-link span:after { - background-color: #fff; - width: 100%; - height: 0.2em; - } +.menu-link span, +.menu-link span:before, +.menu-link span:after { + background-color: #fff; + width: 100%; + height: 0.2em; +} - .menu-link span:before, - .menu-link span:after { - position: absolute; - margin-top: -0.6em; - content: " "; - } +.menu-link span:before, +.menu-link span:after { + position: absolute; + margin-top: -0.6em; + content: " "; +} - .menu-link span:after { - margin-top: 0.6em; - } +.menu-link span:after { + margin-top: 0.6em; +} /* -- Responsive Styles (Media Queries) ------------------------------------- */ @@ -253,55 +217,7 @@ Hides the menu at `48em`, but modify this based on your app's needs. left: 250px; } } -/* Custom Stuff */ -a:link { - color: #479; - text-decoration: none; -} -a:visited { - color: #858; - text-decoration: none; -} -a:hover { - text-decoration: underline; -} -a:active { - color: #000; - text-decoration: underline; -} -code{ - color: #000; -} -.half-table{ - width: 100%; -} -.half-table td{ - width: 50%; -} -.half-table th{ - width: 50%; -} -.header-link{ - position: absolute; - right: 0px; -} -*:hover > .header-link:hover{ - opacity: 1.0; -} -*:hover > .header-link:active{ - opacity: 0.75; -} -*:hover > .header-link{ - text-align: right; - text-decoration: none; - opacity: 0.5; -} -.header-link > i{ - color: #777; -} -.header-link{ - opacity: 0.05; -} + #menu .collapsed .menu-item-list .hide ul li > a{ padding-top: 0px; padding-bottom: 0px; @@ -338,7 +254,34 @@ code{ top: 0px; } -/*Workaround for bug in highlight.js IDEA theme*/ -span.hljs-tag, span.hljs-symbol{ - background: none; + +.half-table{ + width: 100%; } +.half-table td{ + width: 50%; +} +.half-table th{ + width: 50%; +} + + +/* +This is the parent `
    ` that contains the menu and the content area. +*/ +#layout { + position: relative; + padding-left: 0; +} +#layout.active { + position: relative; + left: 250px; +} +#layout.active #menu { + left: 250px; + width: 250px; +} + +#layout.active .menu-link { + left: 250px; +} \ No newline at end of file diff --git a/book/src/main/scala/book/Main.scala b/book/src/main/scala/book/Main.scala index 62bbf92..eeaa79d 100644 --- a/book/src/main/scala/book/Main.scala +++ b/book/src/main/scala/book/Main.scala @@ -60,8 +60,13 @@ object Main { div(id:="menu") ), - div(id:="main", - div(id:="main-box")( + div( + id:="main", + div( + id:="main-box", + cls:="scalatex-content", + maxWidth:="800px", + lineHeight:="1.6em", frag ) ), diff --git a/book/src/main/scala/book/Utils.scala b/book/src/main/scala/book/Utils.scala index e551621..c14a6ba 100644 --- a/book/src/main/scala/book/Utils.scala +++ b/book/src/main/scala/book/Utils.scala @@ -16,10 +16,13 @@ case class pureTable(header: Frag*){ object sect extends scalatex.site.Section{ var indent = 0 - override val headers: Seq[Header] = Seq( - Header((h, s, l) => div(cls:="header")(h1(h, l), h2(s)), f => div(cls:="content", f)), - Header((h, s, l) => div(cls:="header")(h1(id:=munge(h), h, l), br)), + Header( + (l, h, s) => div(cls:="header")(h1(h, l), br, h2(s)), + f => div(cls:="content", f) + ), + Header( + (l, h, s) => div(cls:="header")(h1(id:=munge(h), h, l), br)), h1, h2, h3, h4, h5, h6 ) } diff --git a/examples/demos/src/main/scala/Splash.scala b/examples/demos/src/main/scala/Splash.scala index c68bdca..1cda98c 100644 --- a/examples/demos/src/main/scala/Splash.scala +++ b/examples/demos/src/main/scala/Splash.scala @@ -15,7 +15,7 @@ object Splash extends{ } clear() - val renderer = + val brush = canvas.getContext("2d") .asInstanceOf[dom.CanvasRenderingContext2D] @@ -26,18 +26,17 @@ object Splash extends{ type Graph = (String, Double => Double) val graphs = Seq[Graph]( ("red", sin), - ("green", x => 1 - abs(x % 4 - 2)), - ("blue", x => pow(sin(x/12), 2) * sin(x)) + ("green", x => abs(x % 4 - 2) - 1), + ("blue", x => sin(x/12) * sin(x)) ).zipWithIndex dom.setInterval(() => { x = (x + 1) % w; if (x == 0) clear() for (((color, f), i) <- graphs) { val offset = h / 3 * (i + 0.5) val y = f(x / w * 75) * h / 30 - renderer.fillStyle = color - renderer.fillRect(x, y + offset, 3, 3) + brush.fillStyle = color + brush.fillRect(x, y + offset, 3, 3) } }, 20) - } } \ No newline at end of file -- cgit v1.2.3