diff --git a/make b/make index 296143e..fa73a28 100755 --- a/make +++ b/make @@ -23,7 +23,7 @@ build_all() { mkdir -p $rootDir/post/ $rootDir/fonts/ cp style.css "$rootDir" - cp style.css "$rootDir/$targetDir" + cp prebuild/post/style.css "$rootDir/post/" cp fonts/* $rootDir/fonts/ @@ -61,8 +61,8 @@ while getopts ":aslrhp:" opt;do a) build_all;; s) - cp style.css "$rootDir" # root stylesheet - cp style.css "$rootDir/$targetDir" # post stylesheet + cp style.css "$rootDir" + cp prebuild/post/style.css "$rootDir/$targetDir" exit 0 ;; r) @@ -75,7 +75,6 @@ while getopts ":aslrhp:" opt;do ;; p) for file in ${@:2};do - #echo $file post $file done ;; diff --git a/prebuild/index.md b/prebuild/index.md index eea32d8..00d81fd 100644 --- a/prebuild/index.md +++ b/prebuild/index.md @@ -4,8 +4,12 @@ ## **[A quick Bhop Route showcase](/post/route1.html)** > Time to finally put that speedrunning tag to use +## **[Segmented Routes](/post/route2.html)** +> _September 13, 2019_ + ## **[DWM > i3](/post/dwm.html)** -> _August 18, 2019_ \ +> _August 18, 2019_ + > Now DWM is my new best friend ## **[Rewrites and this site](/post/rewrite.html)** diff --git a/prebuild/post/style.css b/prebuild/post/style.css new file mode 100644 index 0000000..cff1907 --- /dev/null +++ b/prebuild/post/style.css @@ -0,0 +1,264 @@ +@font-face { + font-family: 'Fixedsys'; + src: url('/fonts/FSEX300.ttf'); +} +body { + font-family: 'Fixedsys'; +} + +a { + text-decoration: none; +} + +blockquote { + border-left: 10px solid #1f8dd6; +} + p { + display: inline; + 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; +} + +.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; + } +} diff --git a/style.css b/style.css index eb05c04..9f429b6 100644 --- a/style.css +++ b/style.css @@ -81,15 +81,6 @@ The content `
    ` is where all your content goes. } -blockquote { - border-left: 7px solid #1f8dd6; -} - - blockquote p { - display: inline; - margin-left: 1em; - } - /* The `#menu` `
    ` is the parent `
    ` that contains the `.pure-menu` that appears on the left side of the page.