senaduka/old-v2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling, adding headroom library and design tweaks

Browse Source
This commit is contained in:
Moris Zen
2018-08-23 20:39:03 +02:00
parent 5cefa3e8d0
commit 96b6375740
7 changed files with 120 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
package-lock.json generated
View File

@@ -3171,11 +3171,6 @@
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz",
"integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA="
},
"envinfo": {
"version": "5.10.0",
"resolved": "https://registry.npmjs.org/envinfo/-/envinfo-5.10.0.tgz",
"integrity": "sha512-rXbzXWvnQxy+TcqZlARbWVQwgGVVouVJgFZhLVN5htjLxl1thstrP2ZGi0pXC309AbK7gVOPU+ulz/tmpCI7iw=="
},
"eol": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/eol/-/eol-0.8.1.tgz",
@@ -5381,91 +5376,6 @@
"extract-text-webpack-plugin": "^1.0.1"
}
},
"gatsby-cli": {
"version": "1.1.58",
"resolved": "https://registry.npmjs.org/gatsby-cli/-/gatsby-cli-1.1.58.tgz",
"integrity": "sha1-Xdoka5h3q5JfalEvcjwgVXryLVc=",
"requires": {
"babel-code-frame": "^6.26.0",
"babel-runtime": "^6.26.0",
"bluebird": "^3.5.0",
"common-tags": "^1.4.0",
"convert-hrtime": "^2.0.0",
"core-js": "^2.5.0",
"envinfo": "^5.8.1",
"execa": "^0.8.0",
"fs-extra": "^4.0.1",
"hosted-git-info": "^2.5.0",
"lodash": "^4.17.4",
"pretty-error": "^2.1.1",
"resolve-cwd": "^2.0.0",
"source-map": "^0.5.7",
"stack-trace": "^0.0.10",
"update-notifier": "^2.3.0",
"yargs": "^11.1.0",
"yurnalist": "^0.2.1"
},
"dependencies": {
"ansi-regex": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
},
"cliui": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
"integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
"requires": {
"string-width": "^2.1.1",
"strip-ansi": "^4.0.0",
"wrap-ansi": "^2.0.0"
}
},
"find-up": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
"integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
"requires": {
"locate-path": "^2.0.0"
}
},
"strip-ansi": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
"requires": {
"ansi-regex": "^3.0.0"
}
},
"yargs": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz",
"integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==",
"requires": {
"cliui": "^4.0.0",
"decamelize": "^1.1.1",
"find-up": "^2.1.0",
"get-caller-file": "^1.0.1",
"os-locale": "^2.0.0",
"require-directory": "^2.1.1",
"require-main-filename": "^1.0.1",
"set-blocking": "^2.0.0",
"string-width": "^2.0.0",
"which-module": "^2.0.0",
"y18n": "^3.2.1",
"yargs-parser": "^9.0.2"
}
},
"yargs-parser": {
"version": "9.0.2",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-9.0.2.tgz",
"integrity": "sha1-nM9qQ0YP5O1Aqbto9I1DuKaMwHc=",
"requires": {
"camelcase": "^4.1.0"
}
}
}
},
"gatsby-link": {
"version": "1.6.40",
"resolved": "https://registry.npmjs.org/gatsby-link/-/gatsby-link-1.6.40.tgz",
@@ -6898,6 +6808,11 @@
"resolved": "https://registry.npmjs.org/lodash-id/-/lodash-id-0.14.0.tgz",
"integrity": "sha1-uvSJNOVDobXWNG+MhGmLGoyAOJY="
},
"lodash._getnative": {
"version": "3.9.1",
"resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
"integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
},
"lodash._reinterpolate": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -6943,6 +6858,26 @@
"resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
"integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM="
},
"lodash.isarguments": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
"integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo="
},
"lodash.isarray": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
"integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
},
"lodash.keys": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
"integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
"requires": {
"lodash._getnative": "^3.0.0",
"lodash.isarguments": "^3.0.0",
"lodash.isarray": "^3.0.0"
}
},
"lodash.map": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
@@ -9269,6 +9204,14 @@
"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-0.0.4.tgz",
"integrity": "sha1-DPf4T5Rj/wrlHExLFC2VvjdyTZw="
},
"raf": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/raf/-/raf-3.4.0.tgz",
"integrity": "sha512-pDP/NMRAXoTfrhCfyfSEwJAKLaxBU9eApMeBPB1TkDouZmvPerIClV8lTAd+uF8ZiTaVl69e1FCxQrAd/VTjGw==",
"requires": {
"performance-now": "^2.1.0"
}
},
"randomatic": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz",
@@ -9462,6 +9405,26 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-3.0.0.tgz",
"integrity": "sha512-XzgvowFrwDo6TWcpJ/WTiarb9UI6lhA4PMzS7n1joK3sHfBBBOQHUc0U4u57D6DWO9vHv6lVSWx2Q/Ymfyv4hw=="
},
"react-headroom": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/react-headroom/-/react-headroom-2.2.2.tgz",
"integrity": "sha512-RqisNR8rZkS/MKeQum8xj4EQp26IQ813qEsg51a7wF0K5bMIwYplh6ZDQR7wBVVrrf+PnQ2JzTYQpG/8QCeoww==",
"requires": {
"prop-types": "^15.5.8",
"raf": "^3.3.0",
"shallowequal": "^0.2.2"
},
"dependencies": {
"shallowequal": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz",
"integrity": "sha1-HjL9W8q2rWiKSBLLDMBO/HXHAU4=",
"requires": {
"lodash.keys": "^3.1.2"
}
}
}
},
"react-helmet": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.0.tgz",

1
package.json
View File

@@ -12,6 +12,7 @@
"gatsby-plugin-sharp": "^1.6.48",
"gatsby-source-wordpress": "^2.0.93",
"gatsby-transformer-sharp": "^1.6.27",
"react-headroom": "^2.2.2",
"react-helmet": "^5.2.0",
"react-responsive-mixin": "^0.4.0",
"slideout": "^1.0.1",

13
src/components/Header.js
View File

@@ -1,6 +1,6 @@
import React, { Component } from 'react'
import Link, { withPrefix } from 'gatsby-link'
import LogoSaburly from '../images/saburly-logo-purple.svg'
import LogoSaburly from '../images/logo-saburly-colorful.svg'
import LogoSaburlyWhite from '../images/logo-saburly-white.svg'
import Button from './Button'
@@ -16,16 +16,7 @@ class Header extends Component {
<nav className="container border-saburly-header mx-auto flex items-center justify-between lg:p-6 p-4">
<Link to="/">
<div className="max-w-xs mr-8">
<img
src={LogoSaburly}
className="w-full lg:block hidden"
alt="Saburly Logo"
/>
<img
src={LogoSaburlyWhite}
className="w-full lg:hidden"
alt="Saburly Logo"
/>
<img src={LogoSaburly} className="w-full" alt="Saburly Logo" />
</div>
</Link>

2
src/components/SideMenu.css
View File

@@ -8,7 +8,7 @@
-webkit-overflow-scrolling: touch;
z-index: 0;
display: none;
background-color: #7444cf;
background-color: #393990;
}
.slideout-menu-left {

4
src/styles/general.css
View File

@@ -21,7 +21,7 @@
}
.bg-saburly-light-header {
background: #7444cf;
background: #393990;
@media (min-width: 992px) {
background: linear-gradient(
90deg,
@@ -113,6 +113,6 @@
.bg-saburly-light-header {
@media (max-width: 991px) {
box-shadow: 0 4px 2px -2px #000000;
box-shadow: 0 4px 2px -2px #777777;
}
}

80
src/styles/index.css
View File

@@ -659,7 +659,7 @@ table {
}
.bg-black {
background-color: #111;
background-color: #2d2d2d;
}
.bg-black-light {
@@ -955,7 +955,7 @@ table {
}
.group:hover .group-hover\:bg-black {
background-color: #111;
background-color: #2d2d2d;
}
.group:hover .group-hover\:bg-black-light {
@@ -1251,7 +1251,7 @@ table {
}
.hover\:bg-black:hover {
background-color: #111;
background-color: #2d2d2d;
}
.hover\:bg-black-light:hover {
@@ -1619,7 +1619,7 @@ table {
}
.border-black {
border-color: #111;
border-color: #2d2d2d;
}
.border-black-light {
@@ -1915,7 +1915,7 @@ table {
}
.hover\:border-black:hover {
border-color: #111;
border-color: #2d2d2d;
}
.hover\:border-black-light:hover {
@@ -4537,7 +4537,7 @@ table {
}
.text-black {
color: #111;
color: #2d2d2d;
}
.text-black-light {
@@ -4833,7 +4833,7 @@ table {
}
.group:hover .group-hover\:text-black {
color: #111;
color: #2d2d2d;
}
.group:hover .group-hover\:text-black-light {
@@ -5129,7 +5129,7 @@ table {
}
.hover\:text-black:hover {
color: #111;
color: #2d2d2d;
}
.hover\:text-black-light:hover {
@@ -5801,7 +5801,7 @@ table {
}
.sm\:bg-black {
background-color: #111;
background-color: #2d2d2d;
}
.sm\:bg-black-light {
@@ -6097,7 +6097,7 @@ table {
}
.group:hover .sm\:group-hover\:bg-black {
background-color: #111;
background-color: #2d2d2d;
}
.group:hover .sm\:group-hover\:bg-black-light {
@@ -6393,7 +6393,7 @@ table {
}
.sm\:hover\:bg-black:hover {
background-color: #111;
background-color: #2d2d2d;
}
.sm\:hover\:bg-black-light:hover {
@@ -6753,7 +6753,7 @@ table {
}
.sm\:border-black {
border-color: #111;
border-color: #2d2d2d;
}
.sm\:border-black-light {
@@ -7049,7 +7049,7 @@ table {
}
.sm\:hover\:border-black:hover {
border-color: #111;
border-color: #2d2d2d;
}
.sm\:hover\:border-black-light:hover {
@@ -9655,7 +9655,7 @@ table {
}
.sm\:text-black {
color: #111;
color: #2d2d2d;
}
.sm\:text-black-light {
@@ -9951,7 +9951,7 @@ table {
}
.group:hover .sm\:group-hover\:text-black {
color: #111;
color: #2d2d2d;
}
.group:hover .sm\:group-hover\:text-black-light {
@@ -10247,7 +10247,7 @@ table {
}
.sm\:hover\:text-black:hover {
color: #111;
color: #2d2d2d;
}
.sm\:hover\:text-black-light:hover {
@@ -10920,7 +10920,7 @@ table {
}
.md\:bg-black {
background-color: #111;
background-color: #2d2d2d;
}
.md\:bg-black-light {
@@ -11216,7 +11216,7 @@ table {
}
.group:hover .md\:group-hover\:bg-black {
background-color: #111;
background-color: #2d2d2d;
}
.group:hover .md\:group-hover\:bg-black-light {
@@ -11512,7 +11512,7 @@ table {
}
.md\:hover\:bg-black:hover {
background-color: #111;
background-color: #2d2d2d;
}
.md\:hover\:bg-black-light:hover {
@@ -11872,7 +11872,7 @@ table {
}
.md\:border-black {
border-color: #111;
border-color: #2d2d2d;
}
.md\:border-black-light {
@@ -12168,7 +12168,7 @@ table {
}
.md\:hover\:border-black:hover {
border-color: #111;
border-color: #2d2d2d;
}
.md\:hover\:border-black-light:hover {
@@ -14774,7 +14774,7 @@ table {
}
.md\:text-black {
color: #111;
color: #2d2d2d;
}
.md\:text-black-light {
@@ -15070,7 +15070,7 @@ table {
}
.group:hover .md\:group-hover\:text-black {
color: #111;
color: #2d2d2d;
}
.group:hover .md\:group-hover\:text-black-light {
@@ -15366,7 +15366,7 @@ table {
}
.md\:hover\:text-black:hover {
color: #111;
color: #2d2d2d;
}
.md\:hover\:text-black-light:hover {
@@ -16039,7 +16039,7 @@ table {
}
.lg\:bg-black {
background-color: #111;
background-color: #2d2d2d;
}
.lg\:bg-black-light {
@@ -16335,7 +16335,7 @@ table {
}
.group:hover .lg\:group-hover\:bg-black {
background-color: #111;
background-color: #2d2d2d;
}
.group:hover .lg\:group-hover\:bg-black-light {
@@ -16631,7 +16631,7 @@ table {
}
.lg\:hover\:bg-black:hover {
background-color: #111;
background-color: #2d2d2d;
}
.lg\:hover\:bg-black-light:hover {
@@ -16991,7 +16991,7 @@ table {
}
.lg\:border-black {
border-color: #111;
border-color: #2d2d2d;
}
.lg\:border-black-light {
@@ -17287,7 +17287,7 @@ table {
}
.lg\:hover\:border-black:hover {
border-color: #111;
border-color: #2d2d2d;
}
.lg\:hover\:border-black-light:hover {
@@ -19893,7 +19893,7 @@ table {
}
.lg\:text-black {
color: #111;
color: #2d2d2d;
}
.lg\:text-black-light {
@@ -20189,7 +20189,7 @@ table {
}
.group:hover .lg\:group-hover\:text-black {
color: #111;
color: #2d2d2d;
}
.group:hover .lg\:group-hover\:text-black-light {
@@ -20485,7 +20485,7 @@ table {
}
.lg\:hover\:text-black:hover {
color: #111;
color: #2d2d2d;
}
.lg\:hover\:text-black-light:hover {
@@ -21158,7 +21158,7 @@ table {
}
.xl\:bg-black {
background-color: #111;
background-color: #2d2d2d;
}
.xl\:bg-black-light {
@@ -21454,7 +21454,7 @@ table {
}
.group:hover .xl\:group-hover\:bg-black {
background-color: #111;
background-color: #2d2d2d;
}
.group:hover .xl\:group-hover\:bg-black-light {
@@ -21750,7 +21750,7 @@ table {
}
.xl\:hover\:bg-black:hover {
background-color: #111;
background-color: #2d2d2d;
}
.xl\:hover\:bg-black-light:hover {
@@ -22110,7 +22110,7 @@ table {
}
.xl\:border-black {
border-color: #111;
border-color: #2d2d2d;
}
.xl\:border-black-light {
@@ -22406,7 +22406,7 @@ table {
}
.xl\:hover\:border-black:hover {
border-color: #111;
border-color: #2d2d2d;
}
.xl\:hover\:border-black-light:hover {
@@ -25012,7 +25012,7 @@ table {
}
.xl\:text-black {
color: #111;
color: #2d2d2d;
}
.xl\:text-black-light {
@@ -25308,7 +25308,7 @@ table {
}
.group:hover .xl\:group-hover\:text-black {
color: #111;
color: #2d2d2d;
}
.group:hover .xl\:group-hover\:text-black-light {
@@ -25604,7 +25604,7 @@ table {
}
.xl\:hover\:text-black:hover {
color: #111;
color: #2d2d2d;
}
.xl\:hover\:text-black-light:hover {

22
yarn.lock
View File

@@ -5539,7 +5539,7 @@ lodash.isequal@^4.0.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
lodash.keys@^3.0.0:
lodash.keys@^3.0.0, lodash.keys@^3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
dependencies:
@@ -7520,6 +7520,12 @@ querystringify@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.0.0.tgz#fa3ed6e68eb15159457c89b37bc6472833195755"
raf@^3.3.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
dependencies:
performance-now "^2.1.0"
randomatic@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.0.0.tgz#d35490030eb4f7578de292ce6dfb04a91a128923"
@@ -7616,6 +7622,14 @@ react-error-overlay@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655"
react-headroom@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/react-headroom/-/react-headroom-2.2.2.tgz#5ddea3bc87cd54be38f6f98c3fde4527e2a5fb0f"
dependencies:
prop-types "^15.5.8"
raf "^3.3.0"
shallowequal "^0.2.2"
react-helmet@^5.2.0:
version "5.2.0"
resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.0.tgz#a81811df21313a6d55c5f058c4aeba5d6f3d97a7"
@@ -8405,6 +8419,12 @@ shallow-compare@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/shallow-compare/-/shallow-compare-1.2.2.tgz#fa4794627bf455a47c4f56881d8a6132d581ffdb"
shallowequal@^0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-0.2.2.tgz#1e32fd5bcab6ad688a4812cb0cc04efc75c7014e"
dependencies:
lodash.keys "^3.1.2"
shallowequal@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.0.2.tgz#1561dbdefb8c01408100319085764da3fcf83f8f"