diff --git a/_data/contributors.yml b/_data/contributors.yml index ad5ccd01..0156d74c 100644 --- a/_data/contributors.yml +++ b/_data/contributors.yml @@ -13,23 +13,21 @@ packages-editor: ["errdapy", "pandera", "nbless"] packages-submitted: ["earthpy"] packages-reviewed: [""] -# Editors -- name: David Nicholson - sort: 2 - title: "Editor in Chief" - editor: true - bio: 'Bio goes here just a sentence or two is great!' - organization: "" - github_username: NickleDave - github_image_id: 11934090 +## Advisory team +- name: Leonardo Uieda + advisory: true + bio: '' + organization: "University of Liverpool, JOSS" + github_username: + github_image_id: 290082 contributor_type: - - current editor - contributor packages-submitted: [""] - packages-reviewed: ["pystiche"] + packages-reviewed: [""] packages-editor: [""] - name: Ivan Ogasawara sort: 1 + advisory: true bio: 'SciPy Latin America Ambassador' organization: "SciPy Latin America, Ibis-framework" github_username: xmnlab @@ -42,6 +40,56 @@ packages-submitted: [""] packages-reviewed: ["pandera"] packages-editor: ["sevivi"] +- name: Filipe Fernandes + advisory: true + bio: '' + organization: "IOOS, Conda Forge" + github_username: ocefpaf + github_image_id: 950575 + contributor_type: + - contributor + packages-submitted: ["errdapy"] + packages-reviewed: [""] + packages-editor: [""] +- name: Lindsey Heagy + advisory: true + bio: '' + organization: "" + github_username: lheagy + github_image_id: 6361812 + contributor_type: + - contributor + packages-submitted: [""] + packages-reviewed: [""] + packages-editor: [""] +- name: Martin Fleischmann + advisory: true + bio: 'Urban Data Scientist' + organization: "Charles University in Prague, University of Liverpool" + github_username: martinfleis + github_image_id: 36797143 + twitter: martinfleis + mastodon: martinfleis@mastodon.social + orcidid: 0000-0003-3319-3366 + contributor_type: + - reviewer + packages-submitted: [""] + packages-reviewed: ["movingpandas"] +# Editors +- name: David Nicholson + sort: 2 + title: "Editor in Chief" + editor: true + bio: 'Bio goes here just a sentence or two is great!' + organization: "" + github_username: NickleDave + github_image_id: 11934090 + contributor_type: + - current editor + - contributor + packages-submitted: [""] + packages-reviewed: ["pystiche"] + packages-editor: [""] - name: Ariane Sasso bio: 'Researcher in Medical Informatics and Digital Health' organization: "Hasso Plattner Institute" @@ -124,16 +172,6 @@ packages-submitted: [""] packages-reviewed: [""] packages-editor: [""] -- name: Filipe Fernandes - bio: '' - organization: "IOOS, Conda Forge" - github_username: ocefpaf - github_image_id: 950575 - contributor_type: - - contributor - packages-submitted: ["errdapy"] - packages-reviewed: [""] - packages-editor: [""] - name: Carson Farmer bio: '' organization: "Textileio" @@ -164,16 +202,6 @@ packages-submitted: [""] packages-reviewed: [""] packages-editor: [""] -- name: Leonardo Uieda - bio: '' - organization: "University of Liverpool, JOSS" - github_username: - github_image_id: 290082 - contributor_type: - - contributor - packages-submitted: [""] - packages-reviewed: [""] - packages-editor: [""] - name: Martin Skarzynski bio: '' organization: "NCI Biostatistics Branch" @@ -215,16 +243,6 @@ packages-submitted: ["pandera"] packages-reviewed: [""] packages-editor: [""] -- name: Lindsey Heagy - bio: '' - organization: "" - github_username: lheagy - github_image_id: 6361812 - contributor_type: - - contributor - packages-submitted: [""] - packages-reviewed: [""] - packages-editor: [""] - name: Sean Gillies bio: '' organization: "Mapbox" @@ -245,15 +263,6 @@ packages-submitted: [""] packages-reviewed: ["earthpy"] packages-editor: [""] -- name: Martin Fleischmann - bio: 'Urban Data Scientist' - organization: "University of Strathclyde" - github_username: martinfleis - github_image_id: 36797143 - contributor_type: - - reviewer - packages-submitted: [""] - packages-reviewed: ["movingpandas"] - name: Morgan Williams bio: 'Postdoctoral Fellow, Geoscience Analytics' organization: "CSIRO" diff --git a/_data/navigation.yml b/_data/navigation.yml index ae36d573..39354490 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -1,12 +1,30 @@ # main links main: - title: "Peer Review & Packages" - url: /python-packages/ + url: + sub-nav: + - title: "About peer review" + icon: + url: "/about-peer-review/" + - title: "Peer review guide" + url: "https://www.pyopensci.org/peer-review-guide/" + icon: "fas fa-external-link-alt" + - title: "Python package guide" + url: "https://www.pyopensci.org/python-package-guide/" + icon: "fas fa-external-link-alt" + - title: "Our packages" + icon: "fas fa-fw fa-envelope-square" + url: "/python-packages/" - title: "Blog" url: /blog/ - - title: "Resources" - url: /resources/ - - title: "Our Community" - url: /our-community/ + # - title: "Resources" + # url: /resources/ + - title: "Community" + sub-nav: + - title: "Our Community" + url: "/our-community/" + - title: "Governance" + icon: "fas fa-external-link-alt" + url: "https://www.pyopensci.org/governance/" - title: "Contact" - url: /get-involved-contact/ + url: /get-involved-contact.html diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 00000000..7c8ae93d --- /dev/null +++ b/_includes/footer.html @@ -0,0 +1,24 @@ + + pyOpenSci is a fiscally sponsored project of Community Initiatives + + + + \ No newline at end of file diff --git a/_includes/masthead.html b/_includes/masthead.html new file mode 100644 index 00000000..789903af --- /dev/null +++ b/_includes/masthead.html @@ -0,0 +1,60 @@ +{% capture logo_path %}{{ site.logo }}{% endcapture %} + +
+
+
+ +
+
+
\ No newline at end of file diff --git a/_pages/about-peer-review.md b/_pages/about-peer-review.md new file mode 100644 index 00000000..76c740d9 --- /dev/null +++ b/_pages/about-peer-review.md @@ -0,0 +1,172 @@ +--- +layout: splash +permalink: /about-peer-review/ +title: "About the pyOpenSci Open Peer Review Process" +header: + overlay_image: images/header.jpg + overlay_filter: 0.6 +intro: + - excerpt: "Our open peer review process supports scientists getting credit for the work invested in open Python tools. It also supports standardization of packaging and improved package visibility." +toc: false +classes: wide +--- + +{% include feature_row id="intro" type="center" %} + + + +
+
+
+
+

Ready to Submit a Package for Review?

+
+

You're in the right place! Learn about the steps to submit a package + for open peer review in our guidebook.

+
+

View our Author Guide

+
+
+
+ +
+
+
+

Want to Review a Python Package for Us?

+
+

We could use your help! Fill our our reviewer form. We will + contact you if we have a package that we need reviewers for. + It's OK if you've never reviewed a package before! We'll walk you + through it.

+
+

+ Signup Now (Google Form)

+
+
+
+ +
+
+
+

See Our Review Process in Action

+
+

Our reviewers happen in GitHub issues. This means that anyone can + check in on any part of any review and read all of the conversation. + Check it out.

+
+

See Open Reviews

+
+
+
+
+ +
+## Why Peer Review for Python Scientific Software? +Peer review of Python scientific software addresses several challenges in the +open source community: + +1. **Citations Support Credit & Acknowledgement:** Peer review provides credit and acknowledgement for the hard work invested in creating and supporting core tools that support open science workflows. +2. **Standard Packaging & Documentation:** Currently there are numerous ways to create a Python package. Peer review enforces standards thus promoting standardization of Python packaging across the scientific Python ecosystem. +3. **Removed Redundancy:** Peer review addresses the issue of multiple tools on pyPi that perform similar tasks but have varying levels of documenation, support and maintainence. One maintained package that is broadly useful and maintained will help scientists select tools that they can rely on. +4. **Long Term Maintenance:** Package maintainers often use their free time to work on Python tools. Once a package is reviewed by pyOpenSci we will keep in touch with the maintainer to ensure continued maintainance of the tool. If a maintainer needs to step down, we will try to find someone new to take over, or sunset the tool as needed. +5. **Community:** At the core of peer review is community around the tools that scientists need to process their data. + +### Who can submit a package? +pyOpenSci packages are community developed, submitted and reviewed. Anyone is +welcome to submit a package to pyOpenSci to be reviewed. Once the package is reviewed, +and accepted, pyOpenSci will promote it as a peer-reviewed tool for science! + +### How do I decide whether to submit to you or the Journal of Open Source Software (JOSS) + +You don't have to chose between pyOpenSci and JOSS. We have a collaboration with +JOSS where you can submit your package to us for review. If your package is accepted +and if it is in scope for JOSS, it will then be fast tracked through their +review process; they will only review your paper.md file. Consider this a +win-win! + +
+ + + +## Our editorial board + +We value our volunteer editors. Learn more about what editors do and how we select +them here. + +{% assign editors = site.data.contributors | where: 'editor', true %} + +
+{% for aperson in editors %} +
+ {% if aperson.github_image_id %} +
+ image of {{ aperson.name}} +
+ {% endif %} +
+

+ {{ aperson.name }} + +

+

+ {% if aperson.title %} + {{ aperson.title }} + {% endif %} +

+

+ {% if aperson.focus-areas %} + {% for anArea in aperson.focus-areas %} + {{ anArea }}{% if forloop.last == false %}, {% endif %} + {% endfor %} + {% endif %} +

+
+ +

+ + {{ aperson.name}} is also a + {% for atype in aperson.contributor_type %} + {{ atype }}{% if forloop.last == false %}, {% endif %} + {% endfor %} for pyOpenSci. + +

+

Affiliation: {{ aperson.organization }}

+
+{% endfor %} +
+ +
\ No newline at end of file diff --git a/_pages/contributors.md b/_pages/contributors.md index 9c89fe97..ad86974e 100644 --- a/_pages/contributors.md +++ b/_pages/contributors.md @@ -8,28 +8,58 @@ header: overlay_image: images/header.jpg overlay_filter: 0.6 redirect_from: - - /contributors/ + - /contributors.html --- ## Our pyOpenSci Community + -There are many different ways to get involved with pyOpenSci! Contributions -of all kinds are welcome - big and small, technical and non-technical. --> +## External advisory committee +{: .clearall } +{% assign advisory_sorted = site.data.advisory | sort: 'sort' %} +
+{% for aperson in advisory_sorted %} +
+
+ {% if aperson.github_image_id %} +
+ +
+ {% endif %} +

+ {{ aperson.name }} + +

+

+ {% if aperson.title %} + {{ aperson.title }} + {% endif %} +

+

{{ aperson.organization }}

+
+
+{% endfor %} +
-## PyOpenSci Team & Contributors +## PyOpenSci working advisory committee +{: .clearall } +pyOpenSci advisory committee members are volunteer experts in the scientific Python open +source space who provide high-level guidance on the development of the organization. -{% assign ppl_sorted = site.data.contributors | sort: 'sort' | reverse %} +{% assign advisory_working = site.data.contributors | "advisory" == true | sort: 'sort' %}
-{% for aperson in ppl_sorted %} +{% for aperson in advisory_working %} + {% if aperson.advisory %}
{% if aperson.github_image_id %} @@ -57,16 +87,18 @@ of all kinds are welcome - big and small, technical and non-technical. -->

{{ aperson.organization }}

+ {% endif %} {% endfor %}
-

External advisory committee

+## PyOpenSci Team & Contributors +{: .clearall } -{% assign advisory_sorted = site.data.advisory | sort: 'sort' %} +{% assign ppl_sorted = site.data.contributors | sort: 'sort' | reverse %}
-{% for aperson in advisory_sorted %} +{% for aperson in ppl_sorted %}
{% if aperson.github_image_id %} @@ -83,6 +115,14 @@ of all kinds are welcome - big and small, technical and non-technical. --> {{ aperson.title }} {% endif %}

+ +

+ + {% for atype in aperson.contributor_type %} + {{ atype }} {% if forloop.last == false %}* {% endif %} + {% endfor %} + +

{{ aperson.organization }}

@@ -90,3 +130,5 @@ of all kinds are welcome - big and small, technical and non-technical. -->
+ + diff --git a/_pages/get-in-touch.md b/_pages/get-in-touch.md index 6038bb26..54079d9b 100644 --- a/_pages/get-in-touch.md +++ b/_pages/get-in-touch.md @@ -4,7 +4,9 @@ title: "Get Involved pyOpenSci" author_profile: false published: true site-map: true -permalink: /get-involved-contact/ +permalink: /get-involved-contact.html +redirect_from: + - /get-involved-contact/ --- ## Get in Touch diff --git a/_pages/python-packages.md b/_pages/python-packages.md index a8ed8479..1ffb1fce 100644 --- a/_pages/python-packages.md +++ b/_pages/python-packages.md @@ -1,180 +1,22 @@ --- layout: splash -permalink: /python-packages/ +permalink: /python-packages.html title: "pyOpenSci Open Peer Review & Accepted Packages" classes: header: overlay_image: images/header.jpg overlay_filter: 0.6 intro: - - excerpt: "Our open peer review process supports scientists getting credit for the work invested in open Python tools. It also supports standardization of packaging and improved package visibility." + - excerpt: "Below you will find a list of scientific Python packages that have + been accepted into the pyOpenSci ecosystem through the open peer review process." toc: false classes: wide +redirect_from: + - /python-packages/ --- {% include feature_row id="intro" type="center" %} - - - -
- -
-
-
-

Ready to Submit a Package for Review?

-
-

You're in the right place! Learn about the steps to submit a package - for open peer review in our guidebook.

-
-

View our Author Guide

-
-
-
- -
-
-
-

Want to Review a Python Package for Us?

-
-

We could use your help! Fill our our reviewer form. We will - contact you if we have a package that we need reviewers for. - It's OK if you've never reviewed a package before! We'll walk you - through it.

-
-

- Signup Now (Google Form)

-
-
-
- -
-
-
-

See Our Review Process in Action

-
-

Our reviews happen in GitHub issues. This means that anyone can - check in on any part of any review and read all of the conversation. - Check it out.

-
-

See Open Reviews

-
-
-
-
- -
-## Why Peer Review for Python Scientific Software? -Peer review of Python scientific software addresses several challenges in the -open source community: - -1. **Citations Support Credit & Acknowledgement:** Peer review provides credit and acknowledgement for the hard work invested in creating and supporting core tools that support open science workflows. -2. **Standard Packaging & Documentation:** Currently there are numerous ways to create a Python package. Peer review enforces standards thus promoting standardization of Python packaging across the scientific Python ecosystem. -3. **Removed Redundancy:** Peer review addresses the issue of multiple tools on pyPi that perform similar tasks but have varying levels of documenation, support and maintainence. One maintained package that is broadly useful and maintained will help scientists select tools that they can rely on. -4. **Long Term Maintenance:** Package maintainers often use their free time to work on Python tools. Once a package is reviewed by pyOpenSci we will keep in touch with the maintainer to ensure continued maintainance of the tool. If a maintainer needs to step down, we will try to find someone new to take over, or sunset the tool as needed. -5. **Community:** At the core of peer review is community around the tools that scientists need to process their data. - -### Who can submit a package? -pyOpenSci packages are community developed, submitted and reviewed. Anyone is -welcome to submit a package to pyOpenSci to be reviewed. Once the package is reviewed, -and accepted, pyOpenSci will promote it as a peer-reviewed tool for science! - -### How do I decide whether to submit to you or the Journal of Open Source Software (JOSS) - -You don't have to chose between pyOpenSci and JOSS. We have a collaboration with -JOSS where you can submit your package to us for review. If your package is accepted -and if it is in scope for JOSS, it will then be fast tracked through their -review process; they will only review your paper.md file. Consider this a -win-win! - -
- - - -## Our editorial board - -We value our volunteer editors. Learn more about what editors do and how we select -them here. - -{% assign editors = site.data.contributors | where: 'editor', true %} - -
-{% for aperson in editors %} -
- {% if aperson.github_image_id %} -
- image of {{ aperson.name}} -
- {% endif %} -
-

- {{ aperson.name }} - -

-

- {% if aperson.title %} - {{ aperson.title }} - {% endif %} -

-

- {% if aperson.focus-areas %} - {% for anArea in aperson.focus-areas %} - {{ anArea }}{% if forloop.last == false %}, {% endif %} - {% endfor %} - {% endif %} -

-
- -

- - {{ aperson.name}} is also a - {% for atype in aperson.contributor_type %} - {{ atype }}{% if forloop.last == false %}, {% endif %} - {% endfor %} for pyOpenSci. - -

-

Affiliation: {{ aperson.organization }}

-
-{% endfor %} -
- -
- - ## Our accepted Python open source packages diff --git a/_pages/resources.md b/_pages/resources.md index 346a191d..09e8f3b6 100644 --- a/_pages/resources.md +++ b/_pages/resources.md @@ -4,7 +4,7 @@ title: "pyOpenSci Resources" author_profile: false published: true site-map: true -permalink: /resources/ +permalink: /resources.html --- We are currently working on all of our organization-wide documentation and diff --git a/assets/css/main.scss b/assets/css/main.scss index 9c93d024..9236d450 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -1,29 +1,27 @@ --- # Only the main Sass file needs front matter (the dashes are enough) +search: false --- // VARIABLES +$border-color: #ccc; +$intro-transition: intro 0.3s both !default; +$primary-color: #ccc; +$nav-font-color: #535a60; +$nav-hover-color: #8d0065; +$global-transition: all 0.2s ease-in-out !default; + /* system typefaces */ $serif: Georgia, Times, serif !default; $sans-serif: "Open Sans", sans-serif; //-apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", //"Helvetica Neue", "Lucida Grande", Arial, sans-serif !default; -$monospace: Monaco, Consolas, "Lucida Console", monospace !default; +$monospace: 'Open Sans', sans-serif!default; /* sans serif typefaces */ $sans-serif-narrow: $sans-serif !default; -//$helvetica: - $header-font: 'Raleway', sans-serif; $body-font: 'Open Sans', sans-serif; -$secondary-text: #757575; - -/* serif typefaces */ -// $georgia: Georgia, serif !default; -// $times: Times, serif !default; -// $bodoni: "Bodoni MT", serif !default; -// $calisto: "Calisto MT", serif !default; -// $garamond: Garamond, serif !default; $global-font-family: $body-font !default; $header-font-family: $header-font !default; @@ -39,6 +37,7 @@ $type-size-6: 0.75em !default; // ~12px $type-size-7: 0.6875em !default; // ~11px $type-size-8: 0.625em !default; // ~10px +body {font-size:90%;} h1, h2, @@ -49,7 +48,6 @@ h6, .archive__item-title { margin: 2em 0 0.5em; line-height: 1.2; font-family: $header-font-family; - //font-weight: bold; } h2 { @@ -66,15 +64,11 @@ h3 { font-size: .9em !important; } -body { - //font-size:90% -} - .page__content p, .page__content li { font-size: $type-size-5!important; } -// Sidebar author with circle font and header font adjustment +/* Sidebar author with circle font and header font adjustment */ .sidebar .author__name { font-family: $header-font!important; font-size: .9em; @@ -84,19 +78,16 @@ body { font-size: 1em!important; } - -// styles for the grid of people +/* styles for the people grid */ .contrib_avatar { border-radius: 50%; } - - /* Create & style a 3x3 grid wrapper */ .grid { display: grid; - gap: 1px; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-gap: .3rem; h4.grid_title { font-size: 1.4em; @@ -128,35 +119,368 @@ body { div > div { padding: 10px; - //background-color: #ccc; } -@media screen and (max-width: 800px) { +.contrib_org {font-weight:normal; + font-size:70%!important; + margin-bottom: 0!important; +} + +/* BEGIN Top nav drop down styles +/* replaces mm greedy_nav */ +.nav__topbar { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 2em; + background: #fff; +} + +/* Center logo in div - TODO: adjust fonts (will do this at end) */ +.site-subtitle { + font-weight: 400; + font-size: .8em!important; + color: $nav-font-color; +} + +.site-logo img { + margin-left: auto; + margin-right: auto; + display: block; +} + +.nav__links { + overflow: hidden; + display: flex; + align-items: center; + margin-left: auto!important; + + a { + float: left; + display: block; + color: $nav-font-color!important; + text-align: center; + padding: 14px 16px; + text-decoration: none; + transition: $global-transition; + } - .grid { - display: grid; - gap: 1px; - grid-template-columns: repeat(2, 1fr); + a:hover { + color: $nav-hover-color!important; + } + + .icon { + display: none; } } -@media screen and (max-width: 600px) { +/* down arrow works better with ascii vs font awesome */ +.downBtn { + font-size: .8em; +} - .grid { - display: grid; - gap: 1px; - grid-template-columns: repeat(1, 1fr); +/* Force button and a href fonts to be same size and style */ +.dropdown .dropbtn, .nav__links a { + font-size: 1em!important; +} + +/* Make sure drop down horizontal doesn't push content down +(put push it down in vertical mode */ +.nav__links .dropdown .dropdown-content { + position: absolute; + max-width: 25%; +} + +/* Upon click the menu should turn into a vertical stacked menu with a soft +drop shadow +*/ +.nav__links.vertical { + position: absolute; + display: flex; + flex-direction: column; + align-items: flex-start; + padding-top: 2em; + top: 70%; + left: 40%; + width: 60%; + font-size: 1.2em; + background-color: #fff; + z-index: 1; + border: 1px solid #f2f3f3; + border-radius: 4px; + -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); + + li { + width: 100%; + } + + .dropdown-content { + min-width: 100%; + } + .dropbtn { + width: 100%; + text-align: left; + } + + a { + float: none; + display: block; + text-align: left; + } + .dropdown { + float: none; + } + + .dropdown-content {position: relative;} + + .dropdown .dropbtn { + display: block; + width: 100%; + text-align: left; + } + + .dropdown .dropdown-content { + position: relative!important; + width: 100%; } } +/* End nav links bar styles */ + +/* Begin burger stylin */ + +.hamburger__btn-toggle { + display: none; + align-self: center; + height: 2rem; + border: 0; + outline: none; + -ms-flex-item-align: center; + background-color: transparent; + cursor: pointer; +} + +/* Setup the background with the white width and height 100% of screen */ +.hamburger__btn-toggle::before { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + background-color: #fff; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + pointer-events: none; +} + +/* Turn on white background when clicked - x for close */ +.hamburger__btn-toggle.close::before { + opacity: 0.9; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + pointer-events: auto; + z-index: -1!important; +} + +/* Begin burger styling: actual hamburger element (the horiz lines)*/ + .burger__icon { + position: relative; + width: 1.5rem; + height: .25rem; + background: #6f777d; + margin: auto; + -webkit-transition: 0.3s; + transition: 0.3s; +} +/* Position the burger in it's x closed state - min mistakes didn't have to do this */ +.close .burger__icon { + position: absolute; + top: auto; + right: .1em; +} +/* Hide the middle bar when in "closed" style state so it's an x */ +.close .burger__icon { + background: transparent; +} -.contrib_org {font-weight:normal; - font-size:70%!important; - margin-bottom: 0!important; +.burger__icon::before, .burger__icon::after { + content: ""; + position: absolute; + left: 0; + width: 1.5rem; + height: .25rem; + background: #6f777d; + -webkit-transition: 0.3s; + transition: 0.3s; +} +.burger__icon::after { + bottom: -.5rem; +} +.burger__icon::before { + top: -.5rem; } +// This creates the x by rotating the burger bars +.close .burger__icon::after { + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); +} +.close .burger__icon::before { + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); +} + +.close .burger__icon::before, .close .burger__icon::after { + -webkit-transform-origin: 50% 50%; + -ms-transform-origin: 50% 50%; + transform-origin: 50% 50%; + top: 0; + width: 1.5rem; +} + +.visually-hidden { + position: absolute !important; + clip: rect(1px, 1px, 1px, 1px); + height: 1px !important; + width: 1px !important; + border: 0 !important; + overflow: hidden; +} +/* end burger */ + +/* Dropdown container for nav links */ +.dropdown { + float: left; + overflow: hidden; + + .dropbtn { + border: none; + outline: none; + color: $nav-font-color; + padding: 14px 16px; + background-color: inherit; + font-family: inherit; + margin: 0; + } +} + +/* Style the dropdown content (hidden by default) */ +.dropdown-content { + display: none; + background-color: #fff; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; + width: 100%; + transition: all 0.25s ease-in; + transform: translateY(-10px); +} + +/* Style the links inside the dropdown */ +.dropdown-content a { + float: none; + // color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + text-align: left; +} + +.dropdown-content a:hover { + background-color: #fff; + color: $nav-hover-color; +} + +.dropdown .dropdown-content.open { + display: block; +} +/* This style may be removed ultimately - it is the fancy underline */ + +.hover-underline { + display: inline-block; + position: relative; + color: #0087ca; +} + +.hover-underline { + width: 100%; + text-align: left !important; +} + +.hover-underline:after { + content: ''; + position: absolute; + width: 100%; + transform: scaleX(0); + height: 2px; + bottom: 0; + left: 0; + background-color: $primary-color; + -webkit-transition: $global-transition; + transition: $global-transition; + -webkit-transform: scaleX(0) translate3d(0, 0, 0); + transform: scaleX(0) translate3d(0, 0, 0); // hide +} + +.hover-underline:hover:after { + -webkit-transform: scaleX(1); + -ms-transform: scaleX(1); + transform: scaleX(1); // reveal +} + +/* Add an active class to highlight the current page - might want to reinstate this */ +.active { + background-color: #04AA6D; + color: white; +} + +/* 768 px */ +@media screen and (max-width: 768px) { + + .hamburger__btn-toggle { + //position: fixed; // not sure if this will help? + display: block; + position: fixed; + top: 5%; + right: 5%;} + + burger__icon, burger__icon::before, burger__icon::after { + display: block; } + + /* Hide horizontal drop down links at 48em / 768px */ + .nav__links { display: none;} + +/* Nav links goes vertical in responsive mode */ + .nav__links .vertical { + position: absolute; + display: flex; + flex-direction: column; + align-items: flex-start; +/* padding-top: 2em; + top: 50%; + left: 70%; + background-color: #fff; */ + } + /* position search toggle by burger */ + .search__toggle { + position: fixed; + right: 8%; + font-size: 1.4em; + top: 5%; + } +} + +/* End media query 48em / 768 px */ + /* package cards splash */ .cards { @@ -170,10 +494,6 @@ div > div { font-size: 1.2em; } - // h3 { - // font-size: 1.3em; - // } - h3.card__title.no_toc { margin-top: .3em; font-size: 1.5em; @@ -193,48 +513,12 @@ div > div { ul a { text-decoration: none; } - } .grid__wrapper { display: flex; } -/* Blog & author cards */ - -// CARDS - -.card-title { - font-size: .8em!important; -} -.card-excerpt { - font-size:.65em!important; -} -.card-wrapper { - display: flex; -} -.card { - padding: 10px 30px; - border-radius: 4px; - background: #f5f5f5; - box-shadow: 0 20px 25px -15px rgba(0, 0, 0, .3); - text-decoration: none; - - &:hover { - background: #ccc; - } -} - -.card a { - text-decoration: none; - color: $secondary-text; -} - - - - -/* Author cards */ - .cards h2 a { text-decoration: none; font-size: 1.2em; @@ -320,7 +604,7 @@ h2.clearall { font-size: 1.0em; } -.wide__p_text{ +.wide__p_text { -webkit-box-flex: 0; -webkit-flex: 0 0 66.66667%; -ms-flex: 0 0 66.66667%; @@ -328,8 +612,7 @@ h2.clearall { max-width: 66.66667%; } -/* TWITTER */ - +/* TWITTER cards */ .twitter-tweet { border: 1px solid #ccc; border-radius: .5em; @@ -345,6 +628,17 @@ h2.clearall { filter: drop-shadow(5px 5px 4px #ccc); } +// .drop-down-off { +// opacity: 0; +// } + +// .drop-down-off .vis-opac { +// opacity: 1; +// } + +// .drop-down-on { +// opacity: 1; +// } @charset "utf-8"; @import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin diff --git a/assets/js/dropdown.js b/assets/js/dropdown.js new file mode 100644 index 00000000..09cb8558 --- /dev/null +++ b/assets/js/dropdown.js @@ -0,0 +1,35 @@ +//Jquery to manage drop downs and accessibility + $(document).ready(function () { + $(".hamburger__btn-toggle").click(function (e) { + $(this).toggleClass("close"); + // toggle expanded to try on click + $(this).attr('aria-expanded', function (i, attr) { + return attr == 'true' ? 'false' : 'true'}); + + e.preventDefault(); + $(".nav__links").toggleClass("vertical"); + }); + + $(".dropdown").click(function (e) { + // close when user clicks nav + $(this).find(".dropdown-content").toggleClass("open"); + // Handle making sure other drop menus are "closed" when another is open + $(this).siblings(".dropdown").find(".dropdown-content").removeClass("open"); + $(this).siblings(".dropdown").find(".dropbtn").attr("aria-expanded", "false"); + + // this works but if user clicks on another drop down it should also return to closed + // with this code it just toggles the next thing that the user clicks so both + // dropdowns are set to expanded:true + $(this).find(".dropbtn").attr('aria-expanded', function (i, attr) { + return attr == 'true' ? 'false' : 'true' }); + }); + + // Close dropdown when u click outside of the nav ul + $(document).click(function (e) { + if (!e.target.closest("ul") && $(".dropdown-content").hasClass("open")) { + $(".dropdown-content").removeClass("open"); + } + + + }); +}); \ No newline at end of file