diff --git a/root/style.css b/root/style.css deleted file mode 100644 index c75f437..0000000 --- a/root/style.css +++ /dev/null @@ -1,271 +0,0 @@ -@font-face { - font-family: 'Fixedsys'; - src: url('/media/fonts/FSEX300.ttf'); -} -body { - font-family: 'Fixedsys'; - background: #212121; -} - -a { - text-decoration: none; - color: white; -} - -code { - color: lightgreen; -} - -blockquote { - border-left: 10px solid #1f8dd6; -} - -p { - margin-left: 1em; -} - - -.pure-img-responsive { - max-width: 100%; - height: auto; -} - -/* -Add transition to containers so they can push in and out. -*/ -#layout, -#menu, -.menu-link { - -webkit-transition: all 0.2s ease-out; - -moz-transition: all 0.2s ease-out; - -ms-transition: all 0.2s ease-out; - -o-transition: all 0.2s ease-out; - transition: all 0.2s ease-out; -} - -/* -This is the parent `
` that contains the menu and the content area. -*/ -#layout { - position: relative; - left: 0; - padding-left: 0; -} - #layout.active #menu { - left: 150px; - width: 150px; - } - - #layout.active .menu-link { - left: 150px; - } -/* -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; - color: whitesmoke; -} - -.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 -appears on the left side of the page. -*/ - -#menu { - margin-left: -150px; /* "#menu" width */ - width: 150px; - position: fixed; - top: 0; - left: 0; - bottom: 0; - z-index: 1000; /* so the menu or its navicon stays above all content */ - background: #191818; - overflow-y: auto; - -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; - } - - /* - 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 a { - color: #fff; - } - - /* - This styles the menu heading. - */ - #menu .pure-menu-heading { - font-size: 110%; - color: #fff; - margin: 0; - } - -/* -- Dynamic Button For Responsive Menu -------------------------------------*/ - -/* -The button to open/close the Menu is custom-made and not part of Pure. Here's -how it works: -*/ - -/* -`.menu-link` represents the responsive menu toggle that shows/hides on -small screens. -*/ -.menu-link { - position: fixed; - display: block; /* show this only on small screens */ - top: 0; - left: 0; /* "#menu width" */ - background: #000; - background: rgba(0,0,0,0.7); - font-size: 10px; /* change this value to increase/decrease button size */ - z-index: 10; - width: 2em; - height: auto; - padding: 2.1em 1.6em; -} - - .menu-link:hover, - .menu-link:focus { - background: #000; - } - - .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:before, - .menu-link span:after { - position: absolute; - margin-top: -0.6em; - content: " "; - } - - .menu-link span:after { - margin-top: 0.6em; - } - - -/* -- Responsive Styles (Media Queries) ------------------------------------- */ - -/* -Hides the menu at `48em`, but modify this based on your app's needs. -*/ -@media (min-width: 48em) { - - .header, - .content { - padding-left: 2em; - padding-right: 2em; - } - - #layout { - padding-left: 150px; /* left col width "#menu" */ - left: 0; - } - #menu { - left: 150px; - } - - .menu-link { - position: fixed; - left: 150px; - display: none; - } - - #layout.active .menu-link { - left: 150px; - } -} - -@media (max-width: 48em) { - /* Only apply this when the window is small. Otherwise, the following - case results in extra padding on the left: - * Make the window small. - * Tap the menu to trigger the active state. - * Make the window large again. - */ - #layout.active { - position: relative; - left: 150px; - } -}