1
0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-06-17 01:43:20 +02:00

color contrast ratio tweaks

This commit is contained in:
Matthias Kretschmann 2018-09-15 20:26:41 +02:00
parent 846a22db1e
commit c914aa56e5
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 25 additions and 26 deletions

View File

@ -17,6 +17,7 @@
## Table of Contents
- [Features](#features)
- [Lighthouse score](#lighthouse-score)
- [One data file to rule all pages](#one-data-file-to-rule-all-pages)
- [Theme switcher](#theme-switcher)
- [SEO component](#seo-component)
@ -37,6 +38,10 @@
The whole [portfolio](https://matthiaskretschmann.com) is a React-based Single Page App built with [Gatsby v2](https://www.gatsbyjs.org).
### Lighthouse score
[![Lighthouse scores](https://lighthouse.now.sh/?perf=99&pwa=100&a11y=100&bp=100&seo=100)](https://travis-ci.com/kremalicious/portfolio)
### One data file to rule all pages
All content is powered by one YAML file, [`data/projects.yml`](data/projects.yml) where all the portfolio's projects are defined. The project description itself is transformed from Markdown.

View File

@ -3,7 +3,7 @@
.icon {
width: $font-size-base;
height: $font-size-base;
fill: $brand-grey;
fill: $brand-grey-light;
stroke: none;
vertical-align: baseline;
margin-bottom: -.04rem;

View File

@ -18,7 +18,7 @@ const query = graphql`
const Animation = posed.div(moveInBottom)
class LogoUnit extends PureComponent {
export default class LogoUnit extends PureComponent {
state = { minimal: false }
static propTypes = {
@ -44,7 +44,7 @@ class LogoUnit extends PureComponent {
<StaticQuery
query={query}
render={data => {
const meta = data.dataYaml
const { title, tagline } = data.dataYaml
const { minimal } = this.state
return (
@ -53,11 +53,10 @@ class LogoUnit extends PureComponent {
<div className={minimal ? styles.minimal : styles.logounit}>
<Logo className={styles.logounit__logo} />
<h1 className={styles.logounit__title}>
{meta.title.toLowerCase()}
{title.toLowerCase()}
</h1>
<p className={styles.logounit__description}>
<span>{'{ '}</span> {meta.tagline.toLowerCase()}{' '}
<span>{' }'}</span>
{tagline.toLowerCase()}
</p>
</div>
</Animation>
@ -68,5 +67,3 @@ class LogoUnit extends PureComponent {
)
}
}
export default LogoUnit

View File

@ -29,14 +29,19 @@
.logounit__description {
font-size: $font-size-h4;
color: $brand-grey;
color: $brand-grey-light;
:global(.dark) & {
color: $brand-grey-light;
&::before,
&::after {
opacity: .4;
}
span {
opacity: .4;
&::before {
content: '{ ';
}
&::after {
content: ' }';
}
}
@ -49,11 +54,7 @@
// stylelint-disable no-descending-specificity
.logounit__title,
.logounit__description {
color: $brand-grey-light;
:global(.dark) & {
color: $brand-grey;
}
color: $text-color-light--dark;
}
// stylelint-enable no-descending-specificity

View File

@ -36,7 +36,3 @@
}
}
}
.footer__copyright {
opacity: .7;
}

View File

@ -9,7 +9,7 @@ $brand-cyan: #43a699;
$brand-main-light: #88bec8;
$brand-light: #e7eef4;
$brand-grey: #6b7f88;
$brand-grey: #4e5d63;
$brand-grey-light: lighten($brand-grey, 15%);
$brand-grey-dimmed: lighten($brand-grey, 50%);
@ -17,7 +17,7 @@ $brand-grey-dimmed: lighten($brand-grey, 50%);
/////////////////////////////////////
$body-background-color: $brand-light;
$body-background-color--dark: darken($brand-grey, 30%);
$body-background-color--dark: darken($brand-grey, 22%);
// Text Colors
/////////////////////////////////////
@ -25,8 +25,8 @@ $body-background-color--dark: darken($brand-grey, 30%);
$text-color: $brand-grey;
$text-color-light: $brand-grey-light;
$text-color--dark: $brand-grey-light;
$text-color-light--dark: $brand-grey;
$text-color--dark: lighten($brand-grey-light, 5%);
$text-color-light--dark: lighten($brand-grey-light, 5%);
// Typography
/////////////////////////////////////