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

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 {