diff --git a/package-lock.json b/package-lock.json index 0a6bfc2..c3afd74 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,7 +1,7 @@ { "name": "uffsnlp.github.io", "version": "0.1.0", - "lockfileVersion": 2, + "lockfileVersion": 1, "requires": true, "packages": { "": { @@ -21956,12 +21956,6 @@ } } }, - "@popperjs/core": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.6.0.tgz", - "integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==", - "peer": true - }, "@reach/router": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.4.tgz", @@ -23322,8 +23316,7 @@ "bootstrap": { "version": "5.0.0-beta2", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0-beta2.tgz", - "integrity": "sha512-e+uPbPHqTQWKyCX435uVlOmgH9tUt0xtjvyOC7knhKgOS643BrQKuTo+KecGpPV7qlmOyZgCfaM4xxPWtDEN/g==", - "requires": {} + "integrity": "sha512-e+uPbPHqTQWKyCX435uVlOmgH9tUt0xtjvyOC7knhKgOS643BrQKuTo+KecGpPV7qlmOyZgCfaM4xxPWtDEN/g==" }, "boxen": { "version": "4.2.0", @@ -30188,12 +30181,6 @@ "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==", "optional": true }, - "nanoid": { - "version": "3.1.20", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz", - "integrity": "sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==", - "peer": true - }, "nanomatch": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", @@ -31075,25 +31062,6 @@ "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=" }, - "postcss": { - "version": "8.2.6", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.6.tgz", - "integrity": "sha512-xpB8qYxgPuly166AGlpRjUdEYtmOWx2iCwGmrv4vqZL9YPVviDVPZPRXxnXr6xPZOdxQ9lp3ZBFCRgWJ7LE3Sg==", - "peer": true, - "requires": { - "colorette": "^1.2.1", - "nanoid": "^3.1.20", - "source-map": "^0.6.1" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "peer": true - } - } - }, "postcss-calc": { "version": "7.0.5", "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.5.tgz", @@ -34936,14 +34904,6 @@ "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz", "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=" }, - "string_decoder": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - "requires": { - "safe-buffer": "~5.1.0" - } - }, "string-env-interpolation": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/string-env-interpolation/-/string-env-interpolation-1.0.1.tgz", @@ -35053,6 +35013,14 @@ } } }, + "string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "requires": { + "safe-buffer": "~5.1.0" + } + }, "stringify-entities": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.1.0.tgz", diff --git a/package.json b/package.json index cfd2980..f75c4a1 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "license": "0BSD", "scripts": { "build": "gatsby build", - "develop": "gatsby develop", + "develop": "gatsby develop -H 0.0.0.0", "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"", "start": "npm run develop", "serve": "gatsby serve", diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index 601acff..2335c91 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -1,3 +1,4 @@ $orange: #f23827; $orange-grey: #a64f47; -$red: #a60303; \ No newline at end of file +$red: #a60303; +$grey: #eee; \ No newline at end of file diff --git a/src/components/Navbar/index.jsx b/src/components/Navbar/index.jsx new file mode 100644 index 0000000..18c8289 --- /dev/null +++ b/src/components/Navbar/index.jsx @@ -0,0 +1,37 @@ +import React, {Component} from "react"; +import "./navbar.scss"; +import { Link } from "gatsby"; + +class Navbar extends Component { + render(){ + let home="/", blog="/", bibliography = "/"; + let contact="/", join="/"; + + return ( + + ); + } +} + +export default Navbar; \ No newline at end of file diff --git a/src/components/Navbar/navbar.scss b/src/components/Navbar/navbar.scss new file mode 100644 index 0000000..cef1209 --- /dev/null +++ b/src/components/Navbar/navbar.scss @@ -0,0 +1,62 @@ +@import "../../assets/scss/variables"; + + +.navbar { + display: flex; + justify-content: flex-end; + padding: .5rem 1rem; + font-weight: 300; + background-color: $red; + box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); +} + +.navbar-fixed { + position: fixed; + top: 0; + right: 0; + left: 0; +} + +.nav-item { + padding: 1rem; + text-decoration:none; + border-radius: 0.3rem; + color: white; + + &:hover { + background-color: transparentize($color: $orange, $amount: 0.8); + } +} + +.dropdown { + position: relative; + display: inline-block; + + &-content { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; + } + + &:hover &-content { + display: block; + top: 100%; + left: 0; + } + + &-item { + display: block; + text-decoration: none; + color: darken($color: $orange-grey, $amount: 30%); + padding: 0.75rem 0.5rem; + + &:hover { + background-color: $grey + } + } + } + + \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index a39ce96..a201c9d 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,5 +1,6 @@ import React, { Component } from "react" import Header from "../components/Header" +import Navbar from "../components/Navbar"; import AOS from "aos"; import "aos/dist/aos.css"; @@ -10,6 +11,7 @@ export default class IndexPage extends Component { render() { return (
+