diff --git a/README.md b/README.md index d8e52a2..c2b2fc1 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ A couple of files need changing to get the site working for you. 1. Copy `config/config.yaml.dist` and rename it to `config.yaml`. Fill in the fields according to their descriptions and save. 2. For `chem_name_lookup_service` I recommend setting it to `https://cactus.nci.nih.gov/chemical/structure/$name/smiles`. 3. For `sourire_service` you'll want to point it to your local [Sourire](https://github.com/tmoerman/sourire) server. For example `http://localhost:8080/molecule/$smiles`. +4. Create a file at `templates/_analytics.txt` for your analytics code. Leave it blank if you like, but you must create it. ## Building Clone the project down and open the folder in your favourite editor. It's a JetBrains PhpStorm project but you can use whichever paid/free software takes your fancy. @@ -54,3 +55,7 @@ gulp ``` This command will need running again every time you make a change to a Less or CoffeeScript file. If you're working on them, run `gulp watch` in a terminal to watch for file changes and compile accordingly. + +## Acknowledgements + +[Jay Holtslander](https://codepen.io/j_holtslander/) put together the hamburger menu/sidebar combo in his [Pen](https://codepen.io/j_holtslander/pen/XmpMEp) on CodePen. I believe it's derived from earlier work by [maridlcrmn](https://bootsnipp.com/maridlcrmn). diff --git a/src/coffee/hamburger.coffee b/src/coffee/hamburger.coffee index 375fb66..f75f59d 100644 --- a/src/coffee/hamburger.coffee +++ b/src/coffee/hamburger.coffee @@ -1,3 +1,22 @@ +### +# Copyright (c) 2017 by Jay Holtslander (http://codepen.io/j_holtslander/pen/XmpMEp) +# +# Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated +# documentation files (the "Software"), to deal in the Software without restriction, including without limitation the +# rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit +# persons to whom the Software is furnished to do so, subject to the following conditions: +# +# The above copyright notice and this permission notice shall be included in all copies or substantial portions of the +# Software. +# +# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE +# WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +# COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR +# OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +# +# Converted to CoffeeScript by Saul Johnson. +### + $(document).ready -> trigger = $('.hamburger') # var overlay = $('.overlay'); diff --git a/src/less/main.less b/src/less/main.less index a6309bd..13b4947 100644 --- a/src/less/main.less +++ b/src/less/main.less @@ -1,416 +1,4 @@ -/*-------------------------------*/ -/* VARIABLES */ -/*-------------------------------*/ -// BACKGROUND COLOR -@bg-color: #000; - -// TEXT COLOR -@text-color: #fff; - -// SIDEBAR LINK COLOR VARIABLES -@side-color-1: #1a1a1a; -@side-color-2: darken(@side-color-3, 5%); -@side-color-3: darken(@side-color-4, 5%); -@side-color-4: @bg-color; -@side-color-5: lighten(@side-color-4, 5%); -@side-color-6: lighten(@side-color-5, 5%); -@side-color-7: lighten(@side-color-6, 5%); -@side-color-8: lighten(@side-color-7, 5%); -@side-color-9: lighten(@side-color-8, 5%); - -// HAMBURGER COLOR -@hamburger-color-closed: fadeout(@text-color, 30); -@hamburger-color-open: @text-color; - -// WIDTH VARIABLES -@width1: 220px; -@width2: 100px; -@full-width: 100%; - -// HEIGHT VARIABLES -@full-height: 100%; - -body { - position: relative; - overflow-x: hidden; -} - -html { - background-color: @bg-color; -} - - - - - - - -.nav { - .open>a { - background-color: transparent; - &:hover { - background-color: transparent; - } - &:focus { - background-color: transparent; - } - } -} - - - - - - - - - - - - - -/*-------------------------------*/ -/* Wrappers */ -/*-------------------------------*/ - -#wrapper { - -moz-transition: all 0.5s ease; - -o-transition: all 0.5s ease; - -webkit-transition: all 0.5s ease; - padding-left: 0; - transition: all 0.5s ease; -} -#wrapper.toggled { - padding-left: 220px; - #sidebar-wrapper { - width: @width1; - } - #page-content-wrapper { - margin-right: -220px; - position: absolute; - } -} -#sidebar-wrapper { - -moz-transition: all 0.5s ease; - -o-transition: all 0.5s ease; - -webkit-transition: all 0.5s ease; - background: #1a1a1a; - height: @full-height; - left: 220px; - margin-left: -220px; - overflow-x: hidden; - overflow-y: auto; - transition: all 0.5s ease; - width: 0; - z-index: 1000; - &::-webkit-scrollbar { - display: none; - } -} -#page-content-wrapper { - padding-top: 70px; - width: @full-width; -} - - - - - - - - - - - - - - - - - - - - - - - - -/*-------------------------------*/ -/* Sidebar nav styles */ -/*-------------------------------*/ - -.sidebar-nav { - list-style: none; - margin: 0; - padding: 0; - position: absolute; - top: 0; - width: @width1; - li { - display: inline-block; - line-height: 20px; - position: relative; - width: @full-width; - &:before { - background-color: #1c1c1c; - content: ''; - height: @full-height; - left: 0; - position: absolute; - top: 0; - transition: width .2s ease-in; - width: 3px; - z-index: -1; - } - &:first-child { - a { - background-color: @side-color-1; - color: #ffffff; - } - } - &:nth-child(2) { - &:before { - background-color: @side-color-2; - } - } - &:nth-child(3) { - &:before { - background-color: @side-color-3; - } - } - &:nth-child(4) { - &:before { - background-color: @side-color-4; - } - } - &:nth-child(5) { - &:before { - background-color: @side-color-5; - } - } - &:nth-child(6) { - &:before { - background-color: @side-color-6; - } - } - &:nth-child(7) { - &:before { - background-color: @side-color-7; - } - } - &:nth-child(8) { - &:before { - background-color: @side-color-8; - } - } - &:nth-child(9) { - &:before { - background-color: @side-color-9; - } - } - &:hover { - &:before { - transition: width .2s ease-in; - width: @full-width; - } - } - a { - color: #dddddd; - display: block; - padding: 10px 15px 10px 30px; - text-decoration: none; - } - } - li.open { - &:hover { - before { - transition: width .2s ease-in; - width: @full-width; - } - } - } - .dropdown-menu { - background-color: #222222; - border-radius: 0; - border: none; - box-shadow: none; - margin: 0; - padding: 0; - position: relative; - width: @full-width; - } -} -.sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus { - background-color: transparent; - color: #ffffff; - text-decoration: none; -} -.sidebar-nav>.sidebar-brand { - font-size: 20px; - height: 65px; - line-height: 44px; -} - - - - - - - - - - - - - - - - - - - - - - - - - - - -/*-------------------------------*/ -/* Hamburger-Cross */ -/*-------------------------------*/ - -.hamburger { - background: transparent; - border: none; - display: block; - height: 32px; - margin-left: 15px; - position: absolute; - top: 20px; - width: 32px; - z-index: 999; - &:hover { - outline: none; - } - &:focus { - outline: none; - } - &:active { - outline: none; - } -} -.hamburger.is-closed { - &:before { - -webkit-transform: translate3d(0,0,0); - -webkit-transition: all .35s ease-in-out; - color: #ffffff; - content: ''; - display: block; - font-size: 14px; - line-height: 32px; - opacity: 0; - text-align: center; - width: @width2; - } - &:hover { - before { - -webkit-transform: translate3d(-100px,0,0); - -webkit-transition: all .35s ease-in-out; - display: block; - opacity: 1; - } - .hamb-top { - -webkit-transition: all .35s ease-in-out; - top: 0; - } - .hamb-bottom { - -webkit-transition: all .35s ease-in-out; - bottom: 0; - } - } - .hamb-top { - -webkit-transition: all .35s ease-in-out; - background-color: @hamburger-color-closed; - top: 5px; - } - .hamb-middle { - background-color: @hamburger-color-closed; - margin-top: -2px; - top: 50%; - } - .hamb-bottom { - -webkit-transition: all .35s ease-in-out; - background-color: @hamburger-color-closed; - bottom: 5px; - } -} -.hamburger.is-closed .hamb-top, .hamburger.is-closed .hamb-middle, .hamburger.is-closed .hamb-bottom, .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-middle, .hamburger.is-open .hamb-bottom { - height: 4px; - left: 0; - position: absolute; - width: @full-width; -} -.hamburger.is-open { - .hamb-top { - -webkit-transform: rotate(45deg); - -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08); - background-color: @hamburger-color-open; - margin-top: -2px; - top: 50%; - } - .hamb-middle { - background-color: @hamburger-color-open; - display: none; - } - .hamb-bottom { - -webkit-transform: rotate(-45deg); - -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08); - // background-color: #1a1a1a; - background-color: @hamburger-color-open; - margin-top: -2px; - top: 50%; - } - &:before { - -webkit-transform: translate3d(0,0,0); - -webkit-transition: all .35s ease-in-out; - color: #ffffff; - content: ''; - display: block; - font-size: 14px; - line-height: 32px; - opacity: 0; - text-align: center; - width: @width2; - } - &:hover { - before { - -webkit-transform: translate3d(-100px,0,0); - -webkit-transition: all .35s ease-in-out; - display: block; - opacity: 1; - } - } -} - -/*-------------------------------*/ -/* Dark Overlay */ -/*-------------------------------*/ - -.overlay { - position: absolute; - display: none; - width: @full-width; - height: @full-height; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0,0,0,.4); - z-index: 1; -} /*-------------------------------*/ /* Style Mods */ @@ -547,4 +135,4 @@ button { bottom: 8px; padding: 4px; font-size: 8pt; -} +} \ No newline at end of file diff --git a/src/less/sidebar.less b/src/less/sidebar.less new file mode 100644 index 0000000..eac6f7c --- /dev/null +++ b/src/less/sidebar.less @@ -0,0 +1,430 @@ +/** + * Copyright (c) 2017 by Jay Holtslander (http://codepen.io/j_holtslander/pen/XmpMEp) + * + * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated + * documentation files (the "Software"), to deal in the Software without restriction, including without limitation the + * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to + * permit persons to whom the Software is furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the + * Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE + * WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR + * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR + * OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + **/ + +/*-------------------------------*/ +/* VARIABLES */ +/*-------------------------------*/ + +// BACKGROUND COLOR +@bg-color: #000; + +// TEXT COLOR +@text-color: #fff; + +// SIDEBAR LINK COLOR VARIABLES +@side-color-1: #1a1a1a; +@side-color-2: darken(@side-color-3, 5%); +@side-color-3: darken(@side-color-4, 5%); +@side-color-4: @bg-color; +@side-color-5: lighten(@side-color-4, 5%); +@side-color-6: lighten(@side-color-5, 5%); +@side-color-7: lighten(@side-color-6, 5%); +@side-color-8: lighten(@side-color-7, 5%); +@side-color-9: lighten(@side-color-8, 5%); + +// HAMBURGER COLOR +@hamburger-color-closed: fadeout(@text-color, 30); +@hamburger-color-open: @text-color; + +// WIDTH VARIABLES +@width1: 220px; +@width2: 100px; +@full-width: 100%; + +// HEIGHT VARIABLES +@full-height: 100%; + +body { + position: relative; + overflow-x: hidden; +} + +html { + background-color: @bg-color; +} + + + + + + + +.nav { + .open>a { + background-color: transparent; + &:hover { + background-color: transparent; + } + &:focus { + background-color: transparent; + } + } +} + + + + + + + + + + + + + +/*-------------------------------*/ +/* Wrappers */ +/*-------------------------------*/ + +#wrapper { + -moz-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + -webkit-transition: all 0.5s ease; + padding-left: 0; + transition: all 0.5s ease; +} +#wrapper.toggled { + padding-left: 220px; + #sidebar-wrapper { + width: @width1; + } + #page-content-wrapper { + margin-right: -220px; + position: absolute; + } +} +#sidebar-wrapper { + -moz-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + -webkit-transition: all 0.5s ease; + background: #1a1a1a; + height: @full-height; + left: 220px; + margin-left: -220px; + overflow-x: hidden; + overflow-y: auto; + transition: all 0.5s ease; + width: 0; + z-index: 1000; + &::-webkit-scrollbar { + display: none; + } +} +#page-content-wrapper { + padding-top: 70px; + width: @full-width; +} + + + + + + + + + + + + + + + + + + + + + + + + +/*-------------------------------*/ +/* Sidebar nav styles */ +/*-------------------------------*/ + +.sidebar-nav { + list-style: none; + margin: 0; + padding: 0; + position: absolute; + top: 0; + width: @width1; + li { + display: inline-block; + line-height: 20px; + position: relative; + width: @full-width; + &:before { + background-color: #1c1c1c; + content: ''; + height: @full-height; + left: 0; + position: absolute; + top: 0; + transition: width .2s ease-in; + width: 3px; + z-index: -1; + } + &:first-child { + a { + background-color: @side-color-1; + color: #ffffff; + } + } + &:nth-child(2) { + &:before { + background-color: @side-color-2; + } + } + &:nth-child(3) { + &:before { + background-color: @side-color-3; + } + } + &:nth-child(4) { + &:before { + background-color: @side-color-4; + } + } + &:nth-child(5) { + &:before { + background-color: @side-color-5; + } + } + &:nth-child(6) { + &:before { + background-color: @side-color-6; + } + } + &:nth-child(7) { + &:before { + background-color: @side-color-7; + } + } + &:nth-child(8) { + &:before { + background-color: @side-color-8; + } + } + &:nth-child(9) { + &:before { + background-color: @side-color-9; + } + } + &:hover { + &:before { + transition: width .2s ease-in; + width: @full-width; + } + } + a { + color: #dddddd; + display: block; + padding: 10px 15px 10px 30px; + text-decoration: none; + } + } + li.open { + &:hover { + before { + transition: width .2s ease-in; + width: @full-width; + } + } + } + .dropdown-menu { + background-color: #222222; + border-radius: 0; + border: none; + box-shadow: none; + margin: 0; + padding: 0; + position: relative; + width: @full-width; + } +} +.sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus { + background-color: transparent; + color: #ffffff; + text-decoration: none; +} +.sidebar-nav>.sidebar-brand { + font-size: 20px; + height: 65px; + line-height: 44px; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + +/*-------------------------------*/ +/* Hamburger-Cross */ +/*-------------------------------*/ + +.hamburger { + background: transparent; + border: none; + display: block; + height: 32px; + margin-left: 15px; + position: absolute; + top: 20px; + width: 32px; + z-index: 999; + &:hover { + outline: none; + } + &:focus { + outline: none; + } + &:active { + outline: none; + } +} +.hamburger.is-closed { + &:before { + -webkit-transform: translate3d(0,0,0); + -webkit-transition: all .35s ease-in-out; + color: #ffffff; + content: ''; + display: block; + font-size: 14px; + line-height: 32px; + opacity: 0; + text-align: center; + width: @width2; + } + &:hover { + before { + -webkit-transform: translate3d(-100px,0,0); + -webkit-transition: all .35s ease-in-out; + display: block; + opacity: 1; + } + .hamb-top { + -webkit-transition: all .35s ease-in-out; + top: 0; + } + .hamb-bottom { + -webkit-transition: all .35s ease-in-out; + bottom: 0; + } + } + .hamb-top { + -webkit-transition: all .35s ease-in-out; + background-color: @hamburger-color-closed; + top: 5px; + } + .hamb-middle { + background-color: @hamburger-color-closed; + margin-top: -2px; + top: 50%; + } + .hamb-bottom { + -webkit-transition: all .35s ease-in-out; + background-color: @hamburger-color-closed; + bottom: 5px; + } +} +.hamburger.is-closed .hamb-top, .hamburger.is-closed .hamb-middle, .hamburger.is-closed .hamb-bottom, .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-middle, .hamburger.is-open .hamb-bottom { + height: 4px; + left: 0; + position: absolute; + width: @full-width; +} +.hamburger.is-open { + .hamb-top { + -webkit-transform: rotate(45deg); + -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08); + background-color: @hamburger-color-open; + margin-top: -2px; + top: 50%; + } + .hamb-middle { + background-color: @hamburger-color-open; + display: none; + } + .hamb-bottom { + -webkit-transform: rotate(-45deg); + -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08); + // background-color: #1a1a1a; + background-color: @hamburger-color-open; + margin-top: -2px; + top: 50%; + } + &:before { + -webkit-transform: translate3d(0,0,0); + -webkit-transition: all .35s ease-in-out; + color: #ffffff; + content: ''; + display: block; + font-size: 14px; + line-height: 32px; + opacity: 0; + text-align: center; + width: @width2; + } + &:hover { + before { + -webkit-transform: translate3d(-100px,0,0); + -webkit-transition: all .35s ease-in-out; + display: block; + opacity: 1; + } + } +} + +/*-------------------------------*/ +/* Dark Overlay */ +/*-------------------------------*/ + +.overlay { + position: absolute; + display: none; + width: @full-width; + height: @full-height; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0,0,0,.4); + z-index: 1; +}