diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..db785c8 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,6 @@ +{ + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + } + } \ No newline at end of file diff --git a/assets/favicon.ico b/assets/favicon.ico new file mode 100644 index 0000000..7c1f0b1 Binary files /dev/null and b/assets/favicon.ico differ diff --git a/assets/icon.svg b/assets/icon.svg new file mode 100644 index 0000000..b63791a --- /dev/null +++ b/assets/icon.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/gatsby-browser.js b/gatsby-browser.js index ff807f1..86a8199 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -5,3 +5,4 @@ */ // You can delete this file if you're not using it +import 'bootstrap/dist/css/bootstrap.min.css'; diff --git a/gatsby-config.js b/gatsby-config.js index 9901537..07298bb 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -49,5 +49,13 @@ module.exports = { redirect: false, }, }, + { + resolve: 'gatsby-plugin-react-svg', + options: { + rule: { + include: /assets/, + }, + }, + }, ], }; diff --git a/gatsby-node.js b/gatsby-node.js index aec761f..6fd9940 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -3,6 +3,20 @@ * * See: https://www.gatsbyjs.com/docs/node-apis/ */ +exports.onCreatePage = ({ page, actions }) => { + const { createPage, deletePage } = actions; + deletePage(page); + // You can access the variable "locale" in your page queries now + createPage({ + ...page, + context: { + ...page.context, + locale: page.context.intl.language, + defaultLocale: page.context.intl.defaultLanguage, + }, + }); +}; + exports.createPages = async function ({ actions, graphql }) { const { data } = await graphql(` query { diff --git a/package.json b/package.json index bb5935b..ecfd1e1 100644 --- a/package.json +++ b/package.json @@ -7,12 +7,14 @@ "dependencies": { "bootstrap": "^4.6.0", "gatsby": "^2.32.8", - "gatsby-image": "^2.11.0", + "gatsby-background-image": "^1.4.1", + "gatsby-image": "^3.0.0", "gatsby-plugin-gatsby-cloud": "^1.0.2", "gatsby-plugin-intl": "^0.3.3", "gatsby-plugin-manifest": "^2.12.1", "gatsby-plugin-offline": "^3.10.2", "gatsby-plugin-react-helmet": "^3.10.0", + "gatsby-plugin-react-svg": "^3.0.0", "gatsby-plugin-sharp": "^2.14.3", "gatsby-source-filesystem": "^2.11.1", "gatsby-transformer-json": "^3.0.0", diff --git a/src/components/SiteBar.js b/src/components/SiteBar.js index a2a0724..46825af 100644 --- a/src/components/SiteBar.js +++ b/src/components/SiteBar.js @@ -1,38 +1,80 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { Navbar, Nav, NavDropdown } from 'react-bootstrap'; +import { injectIntl, Link } from 'gatsby-plugin-intl'; +import Language from './language'; +import Logo from '../../assets/icon.svg'; -import 'bootstrap/dist/css/bootstrap.min.css'; - -const SiteBar = () => { +const YEARS = ['2020', '2019', '2018', '2017']; +const SiteBar = ({ intl }) => { return ( - - React-Bootstrap + + + + ); }; -export default SiteBar; +SiteBar.propTypes = { + intl: PropTypes.object, +}; +export default injectIntl(SiteBar); diff --git a/src/components/image.js b/src/components/image.js index 2d5162d..4ed140a 100644 --- a/src/components/image.js +++ b/src/components/image.js @@ -16,7 +16,7 @@ import Img from 'gatsby-image'; const Image = () => { const data = useStaticQuery(graphql` query { - placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) { + placeholderImage: file(relativePath: { eq: "icon.svg" }) { childImageSharp { fluid(maxWidth: 300) { ...GatsbyImageSharpFluid diff --git a/src/components/language.js b/src/components/language.js new file mode 100644 index 0000000..44c5f3e --- /dev/null +++ b/src/components/language.js @@ -0,0 +1,52 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + IntlContextConsumer, + changeLocale, + injectIntl, +} from 'gatsby-plugin-intl'; +import { NavDropdown } from 'react-bootstrap'; + +const languageName = { + es: 'Español', + en: 'English', +}; + +const Language = ({ intl }) => { + const languageClick = (e, language) => { + e.preventDefault(); + changeLocale(language); + }; + return ( + + + {({ languages, language: currentLocale }) => + languages.map((language) => ( + languageClick(e, language)} + style={{ + color: currentLocale === language ? `yellow` : `black`, + }} + // margin: 10, + // textDecoration: `underline`, + // cursor: `pointer`, + // }} + href="/" + > + {languageName[language]} + + )) + } + + + ); +}; +Language.propTypes = { + intl: PropTypes.object, +}; +export default injectIntl(Language); diff --git a/src/components/layout.css b/src/components/layout.css index e5c4251..7bcd23a 100644 --- a/src/components/layout.css +++ b/src/components/layout.css @@ -14,584 +14,34 @@ body { font-weight: normal; word-wrap: break-word; font-kerning: normal; - -moz-font-feature-settings: "kern", "liga", "clig", "calt"; - -ms-font-feature-settings: "kern", "liga", "clig", "calt"; - -webkit-font-feature-settings: "kern", "liga", "clig", "calt"; - font-feature-settings: "kern", "liga", "clig", "calt"; -} -article, -aside, -details, -figcaption, -figure, -footer, -header, -main, -menu, -nav, -section, -summary { - display: block; -} -audio, -canvas, -progress, -video { - display: inline-block; -} -audio:not([controls]) { - display: none; - height: 0; -} -progress { - vertical-align: baseline; -} -[hidden], -template { - display: none; + -moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; + -ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; + -webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; + font-feature-settings: 'kern', 'liga', 'clig', 'calt'; + background: url(../images/background.webp) top center repeat-y; + background-attachment: fixed; + background-size: 100% auto; } a { - background-color: transparent; - -webkit-text-decoration-skip: objects; -} -a:active, -a:hover { - outline-width: 0; -} -abbr[title] { - border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); - cursor: help; text-decoration: none; } -b, -strong { - font-weight: inherit; - font-weight: bolder; -} -dfn { - font-style: italic; -} -h1 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 2.25rem; - line-height: 1.1; -} -mark { - background-color: #ff0; - color: #000; -} -small { - font-size: 80%; -} -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} -sub { - bottom: -0.25em; -} -sup { - top: -0.5em; -} -img { - border-style: none; - max-width: 100%; - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -svg:not(:root) { - overflow: hidden; -} -code, -kbd, -pre, -samp { - font-family: monospace; - font-size: 1em; -} -figure { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -hr { - box-sizing: content-box; - overflow: visible; - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: calc(1.45rem - 1px); - background: hsla(0, 0%, 0%, 0.2); - border: none; - height: 1px; -} -button, -input, -optgroup, -select, -textarea { - font: inherit; - margin: 0; -} -optgroup { - font-weight: 700; -} -button, -input { - overflow: visible; -} -button, -select { - text-transform: none; -} -[type="reset"], -[type="submit"], -button, -html [type="button"] { - -webkit-appearance: button; -} -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner, -button::-moz-focus-inner { - border-style: none; - padding: 0; -} -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring, -button:-moz-focusring { - outline: 1px dotted ButtonText; -} -fieldset { - border: 1px solid silver; - padding: 0.35em 0.625em 0.75em; - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -legend { - box-sizing: border-box; - color: inherit; - display: table; - max-width: 100%; - padding: 0; - white-space: normal; -} -textarea { - overflow: auto; -} -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; - padding: 0; -} -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} -[type="search"] { - -webkit-appearance: textfield; - outline-offset: -2px; -} -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; -} -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; -} -* { - box-sizing: inherit; -} -*:before { - box-sizing: inherit; -} -*:after { - box-sizing: inherit; -} -h2 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 1.62671rem; - line-height: 1.1; -} -h3 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 1.38316rem; - line-height: 1.1; -} -h4 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 1rem; - line-height: 1.1; -} -h5 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 0.85028rem; - line-height: 1.1; -} -h6 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 0.78405rem; - line-height: 1.1; -} -hgroup { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -ul { - margin-left: 1.45rem; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - list-style-position: outside; - list-style-image: none; -} -ol { - margin-left: 1.45rem; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - list-style-position: outside; - list-style-image: none; -} -dl { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -dd { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -p { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -pre { - margin-left: 0; - margin-right: 0; - margin-top: 0; - margin-bottom: 1.45rem; - font-size: 0.85rem; - line-height: 1.42; - background: hsla(0, 0%, 0%, 0.04); - border-radius: 3px; - overflow: auto; - word-wrap: normal; - padding: 1.45rem; -} -table { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - font-size: 1rem; - line-height: 1.45rem; - border-collapse: collapse; - width: 100%; -} -blockquote { - margin-left: 1.45rem; - margin-right: 1.45rem; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -form { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -noscript { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -iframe { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -address { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -b { - font-weight: bold; -} -strong { - font-weight: bold; -} -dt { - font-weight: bold; -} -th { - font-weight: bold; -} -li { - margin-bottom: calc(1.45rem / 2); -} -ol li { - padding-left: 0; -} -ul li { - padding-left: 0; -} -li > ol { - margin-left: 1.45rem; - margin-bottom: calc(1.45rem / 2); - margin-top: calc(1.45rem / 2); -} -li > ul { - margin-left: 1.45rem; - margin-bottom: calc(1.45rem / 2); - margin-top: calc(1.45rem / 2); -} -blockquote *:last-child { - margin-bottom: 0; -} -li *:last-child { - margin-bottom: 0; -} -p *:last-child { - margin-bottom: 0; -} -li > p { - margin-bottom: calc(1.45rem / 2); -} -code { - font-size: 0.85rem; - line-height: 1.45rem; -} -kbd { - font-size: 0.85rem; - line-height: 1.45rem; -} -samp { - font-size: 0.85rem; - line-height: 1.45rem; -} -abbr { - border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); - cursor: help; -} -acronym { - border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); - cursor: help; -} -thead { - text-align: left; -} -td, -th { - text-align: left; - border-bottom: 1px solid hsla(0, 0%, 0%, 0.12); - font-feature-settings: "tnum"; - -moz-font-feature-settings: "tnum"; - -ms-font-feature-settings: "tnum"; - -webkit-font-feature-settings: "tnum"; - padding-left: 0.96667rem; - padding-right: 0.96667rem; - padding-top: 0.725rem; - padding-bottom: calc(0.725rem - 1px); -} -th:first-child, -td:first-child { - padding-left: 0; -} -th:last-child, -td:last-child { - padding-right: 0; -} -tt, -code { - background-color: hsla(0, 0%, 0%, 0.04); - border-radius: 3px; - font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono", - "Liberation Mono", Menlo, Courier, monospace; - padding: 0; - padding-top: 0.2em; - padding-bottom: 0.2em; +.navbar { + background-image: linear-gradient( + to top, + rgba(255, 255, 255, 0), + rgba(255, 255, 255, 0.4) + ); } -pre code { - background: none; - line-height: 1.42; +.navbar-nav .nav-link { + color: rgba(255, 255, 255, 0.5) !important; } -code:before, -code:after, -tt:before, -tt:after { - letter-spacing: -0.2em; - content: " "; +.navbar_a { + color: rgba(255, 255, 255, 0.5); } -pre code:before, -pre code:after, -pre tt:before, -pre tt:after { - content: ""; +.cfp { + background-color: #fff; + border-radius: 25px; } -@media only screen and (max-width: 480px) { - html { - font-size: 100%; - } +.cfp a { + color: #4706a0 !important; } diff --git a/src/components/layout.js b/src/components/layout.js index cade768..b2345d8 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -7,17 +7,17 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Container } from 'react-bootstrap'; - +// import { Container } from 'react-bootstrap'; import SiteBar from './SiteBar'; +import './layout.css'; const Layout = ({ children }) => { return ( <> - - -
{children}
-
+
+ +
+
{children}