mirror of
https://github.com/kremalicious/blog.git
synced 2025-02-01 12:29:49 +01:00
Merge pull request #188 from kremalicious/feature/icons
Switch to consistent icon theme
This commit is contained in:
GitHub
commit
24fe7b0610
39
.github/workflows/test.yml
vendored
Normal file
39
.github/workflows/test.yml
vendored
Normal file
@ -0,0 +1,39 @@
|
||||
name: Test
|
||||
|
||||
on: [push]
|
||||
|
||||
jobs:
|
||||
test:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- name: Use Node.js ${{ matrix.node-version }}
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: '12.x'
|
||||
|
||||
- name: Cache node modules
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: ~/.npm
|
||||
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
|
||||
restore-keys: ${{ runner.os }}-node-
|
||||
|
||||
- name: Cache Gatsby build output
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: public
|
||||
key: ${{ runner.os }}-public
|
||||
|
||||
- name: Install Dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Test
|
||||
run: npm test
|
||||
|
||||
- name: Build
|
||||
run: npm run build
|
||||
env:
|
||||
CI: true
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,7 +1,5 @@
|
||||
node_modules
|
||||
yarn.lock
|
||||
.yarnclean
|
||||
package-lock.json
|
||||
public
|
||||
.cache
|
||||
plugins/gatsby-redirect-from
|
||||
|
||||
@ -7,8 +7,8 @@ git:
|
||||
depth: 10
|
||||
|
||||
cache:
|
||||
npm: true
|
||||
directories:
|
||||
- node_modules
|
||||
- public
|
||||
|
||||
before_install:
|
||||
|
||||
@ -3,7 +3,6 @@ type: link
|
||||
|
||||
title: What makes Twitter Twitter?
|
||||
linkurl: http://alt.adrianshort.co.uk/blog/2012/06/30/what-makes-twitter-twitter/
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2012-07-07 08:18:58+00:00
|
||||
---
|
||||
|
||||
@ -22,7 +22,7 @@ The above picture might be blurry depending on the device you're using so here's
|
||||
They are completely styled with CSS3 so they're sharp on all screens no matter how high the dpi. Have a look at the [full demo](http://lab.kremalicious.com/kbdfun/) or grab the project folder with the CSS & LESS files from GitHub. The code is under the MIT license so you're free to use it in any personal or commercial project.
|
||||
|
||||
<p class="content-download">
|
||||
<a class="btn-primary icon-eye" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
|
||||
<a class="btn-primary icon-compass" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
|
||||
<a class="icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
|
||||
</p>
|
||||
|
||||
|
||||
@ -16,9 +16,9 @@ tags:
|
||||
The badges provided by all app store providers just don't play well together with their varying typography and different sizing. So let's make them all visually unified, infinitely scalable, with pure text for easier localization and some web interaction styles. And while we’re at it: different sizes with the same markup by using some modifier classes.
|
||||
|
||||
<p class="content-download">
|
||||
<a class="btn-primary icon-eye" href="https://lab.kremalicious.com/appstorebadges/">Demo</a>
|
||||
<a class="btn-primary icon-compass" href="https://lab.kremalicious.com/appstorebadges/">Demo</a>
|
||||
<a class="icon-github" href="https://github.com/kremalicious/appstorebadges/">GitHub</a>
|
||||
<a href="http://codepen.io/kremalicious/details/EVVraP/">Codepen</a>
|
||||
<a class="icon-code" href="http://codepen.io/kremalicious/details/EVVraP/">Codepen</a>
|
||||
</p>
|
||||
|
||||
## Styling
|
||||
|
||||
@ -2,7 +2,7 @@ version: '3'
|
||||
services:
|
||||
blog:
|
||||
build: .
|
||||
command: npm run start:docker
|
||||
command: npm start
|
||||
volumes:
|
||||
- .:/blog
|
||||
- /blog/node_modules
|
||||
|
||||
@ -87,7 +87,12 @@ module.exports = {
|
||||
{
|
||||
resolve: 'gatsby-plugin-svgr',
|
||||
options: {
|
||||
icon: true
|
||||
icon: false,
|
||||
svgoConfig: {
|
||||
plugins: {
|
||||
removeViewBox: false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -228,5 +233,11 @@ module.exports = {
|
||||
'gatsby-plugin-offline',
|
||||
'gatsby-plugin-typescript',
|
||||
'gatsby-plugin-webpack-size'
|
||||
// {
|
||||
// resolve: 'gatsby-plugin-webpack-bundle-analyser-v2',
|
||||
// options: {
|
||||
// devMode: true
|
||||
// }
|
||||
// }
|
||||
]
|
||||
}
|
||||
|
||||
25775
package-lock.json
generated
Normal file
25775
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -7,8 +7,7 @@
|
||||
"license": "MIT",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "gatsby develop",
|
||||
"start:docker": "gatsby develop --host 0.0.0.0",
|
||||
"start": "gatsby develop --host 0.0.0.0",
|
||||
"build": "gatsby build && npm run copy",
|
||||
"ssr": "npm run build && serve -s public/",
|
||||
"test": "npm run lint && jest --coverage",
|
||||
@ -34,6 +33,7 @@
|
||||
"date-fns": "^2.6.0",
|
||||
"dms2dec": "^1.1.0",
|
||||
"fast-exif": "^1.0.1",
|
||||
"feather-icons": "^4.24.1",
|
||||
"fraction.js": "^4.0.12",
|
||||
"gatsby": "^2.17.15",
|
||||
"gatsby-image": "^2.2.33",
|
||||
@ -71,6 +71,7 @@
|
||||
"react-blockies": "^1.4.1",
|
||||
"react-clipboard.js": "^2.0.13",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-feather": "^2.0.3",
|
||||
"react-helmet": "^5.2.1",
|
||||
"react-modal": "^3.11.1",
|
||||
"react-pose": "^4.0.9",
|
||||
@ -111,6 +112,7 @@
|
||||
"eslint-plugin-prettier": "^3.1.1",
|
||||
"eslint-plugin-react": "^7.16.0",
|
||||
"fs-extra": "^8.1.0",
|
||||
"gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.8",
|
||||
"identity-obj-proxy": "^3.0.0",
|
||||
"jest": "^24.9.0",
|
||||
"markdownlint-cli": "^0.19.0",
|
||||
@ -121,7 +123,7 @@
|
||||
"prettier": "^1.19.1",
|
||||
"prettier-stylelint": "^0.4.2",
|
||||
"shortid": "^2.2.15",
|
||||
"stylelint": "^11.1.1",
|
||||
"stylelint": "^12.0.0",
|
||||
"stylelint-config-css-modules": "^2.0.0",
|
||||
"stylelint-config-prettier": "^6.0.0",
|
||||
"stylelint-config-standard": "^19.0.0",
|
||||
|
||||
@ -1,15 +1,24 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
.hamburger {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
position: relative;
|
||||
transform: rotate(0deg);
|
||||
cursor: pointer;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.hamburgerLine {
|
||||
@include transition;
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: $text-color-light;
|
||||
border-radius: 20px;
|
||||
border-bottom: $stroke-width solid $brand-grey-light;
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
transform: rotate(0deg);
|
||||
@ -20,12 +29,12 @@
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
top: 5px;
|
||||
top: 7px;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
top: 10px;
|
||||
top: 14px;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
@ -43,7 +52,7 @@
|
||||
|
||||
&:nth-child(3) {
|
||||
transform: rotate(-45deg);
|
||||
top: 12px;
|
||||
top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -62,17 +71,7 @@
|
||||
outline: 0;
|
||||
|
||||
.hamburgerLine {
|
||||
background: $brand-cyan;
|
||||
border-color: $brand-cyan;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
position: relative;
|
||||
transform: rotate(0deg);
|
||||
cursor: pointer;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
12
src/components/atoms/Icon.module.scss
Normal file
12
src/components/atoms/Icon.module.scss
Normal file
@ -0,0 +1,12 @@
|
||||
@import 'variables';
|
||||
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
stroke: currentColor;
|
||||
stroke-width: $stroke-width;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
fill: none;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
22
src/components/atoms/Icon.test.tsx
Normal file
22
src/components/atoms/Icon.test.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import React from 'react'
|
||||
import { render } from '@testing-library/react'
|
||||
|
||||
import Icon from './Icon'
|
||||
|
||||
describe('Icon', () => {
|
||||
it('renders correctly', () => {
|
||||
const { container, rerender } = render(<Icon name={'Compass'} />)
|
||||
expect(container.firstChild.nodeName).toBe('svg')
|
||||
|
||||
rerender(<Icon name={'Download'} />)
|
||||
expect(container.firstChild.nodeName).toBe('svg')
|
||||
|
||||
rerender(<Icon name={'Twitter'} />)
|
||||
expect(container.firstChild.nodeName).toBe('svg')
|
||||
})
|
||||
|
||||
it('does not render with unknown name', () => {
|
||||
const { container } = render(<Icon name={'whatever'} />)
|
||||
expect(container.firstChild).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
56
src/components/atoms/Icon.tsx
Normal file
56
src/components/atoms/Icon.tsx
Normal file
@ -0,0 +1,56 @@
|
||||
import React from 'react'
|
||||
|
||||
// https://featherstyles.com
|
||||
// import * as Feather from 'react-feather'
|
||||
import {
|
||||
ArrowDownCircle,
|
||||
Edit,
|
||||
GitHub,
|
||||
Twitter,
|
||||
Rss,
|
||||
Sun,
|
||||
Moon,
|
||||
Compass,
|
||||
X,
|
||||
Clipboard,
|
||||
Search,
|
||||
ExternalLink,
|
||||
Link,
|
||||
ChevronRight,
|
||||
ChevronLeft
|
||||
} from 'react-feather'
|
||||
// custom icons
|
||||
import { ReactComponent as Jsonfeed } from '../../images/jsonfeed.svg'
|
||||
import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
|
||||
import styles from './Icon.module.scss'
|
||||
|
||||
const components: any = {
|
||||
Download: ArrowDownCircle,
|
||||
Jsonfeed,
|
||||
Bitcoin,
|
||||
ArrowDownCircle,
|
||||
Edit,
|
||||
GitHub,
|
||||
Twitter,
|
||||
Rss,
|
||||
Sun,
|
||||
Moon,
|
||||
Compass,
|
||||
X,
|
||||
Clipboard,
|
||||
Search,
|
||||
ExternalLink,
|
||||
Link,
|
||||
ChevronRight,
|
||||
ChevronLeft
|
||||
}
|
||||
|
||||
const Icon = ({ name }: { name: string }) => {
|
||||
const IconMapped = components[name]
|
||||
// const IconFeather = (Feather as any)[name]
|
||||
if (!IconMapped) return null
|
||||
|
||||
return <IconMapped className={styles.icon} />
|
||||
}
|
||||
|
||||
export default Icon
|
||||
@ -26,7 +26,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.modal__content {
|
||||
.modalContent {
|
||||
outline: 0;
|
||||
background: $body-background-color;
|
||||
position: relative;
|
||||
@ -47,25 +47,29 @@
|
||||
}
|
||||
}
|
||||
|
||||
.modal__close {
|
||||
.modalClose {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
appearance: none;
|
||||
line-height: 1;
|
||||
font-size: $font-size-h2;
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: $spacer / 4;
|
||||
right: ($spacer/4);
|
||||
color: $brand-grey-light;
|
||||
font-weight: 500;
|
||||
outline: 0;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke: $brand-grey-light;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $brand-grey;
|
||||
svg {
|
||||
stroke: $brand-cyan;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -80,7 +84,7 @@
|
||||
// }
|
||||
}
|
||||
|
||||
.modal__title {
|
||||
.modalTitle {
|
||||
font-size: $font-size-h4;
|
||||
margin-top: $spacer / 2;
|
||||
margin-bottom: $spacer / 2;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import ReactModal from 'react-modal'
|
||||
|
||||
import Icon from './Icon'
|
||||
import styles from './Modal.module.scss'
|
||||
|
||||
if (process.env.NODE_ENV !== 'test') ReactModal.setAppElement('#___gatsby')
|
||||
@ -22,16 +22,16 @@ export default function Modal({
|
||||
return (
|
||||
<ReactModal
|
||||
overlayClassName={styles.modal}
|
||||
className={styles.modal__content}
|
||||
className={styles.modalContent}
|
||||
htmlOpenClassName={styles.isModalOpen}
|
||||
shouldReturnFocusAfterClose={false}
|
||||
isOpen={isOpen}
|
||||
{...props}
|
||||
>
|
||||
{title && <h1 className={styles.modal__title}>{title}</h1>}
|
||||
{title && <h1 className={styles.modalTitle}>{title}</h1>}
|
||||
{children}
|
||||
<button className={styles.modal__close} onClick={handleCloseModal}>
|
||||
×
|
||||
<button className={styles.modalClose} onClick={handleCloseModal}>
|
||||
<Icon name="X" />
|
||||
</button>
|
||||
</ReactModal>
|
||||
)
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React from 'react'
|
||||
import { QRCode } from 'react-qr-svg'
|
||||
import Clipboard from 'react-clipboard.js'
|
||||
import { ReactComponent as IconClipboard } from '../../images/clipboard.svg'
|
||||
|
||||
import styles from './Qr.module.scss'
|
||||
import Icon from './Icon'
|
||||
|
||||
const onCopySuccess = (e: any) => {
|
||||
e.trigger.classList.add(styles.copied)
|
||||
@ -36,7 +36,7 @@ export default function Qr({
|
||||
onSuccess={e => onCopySuccess(e)}
|
||||
className={styles.button}
|
||||
>
|
||||
<IconClipboard />
|
||||
<Icon name="Clipboard" />
|
||||
</Clipboard>
|
||||
</pre>
|
||||
</>
|
||||
|
||||
@ -18,28 +18,10 @@
|
||||
}
|
||||
|
||||
svg {
|
||||
transition: color 0.3s ease-in-out;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transition: stroke 0.3s ease-in-out;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.twitter:hover {
|
||||
fill: #019ad2;
|
||||
}
|
||||
|
||||
.facebook:hover {
|
||||
fill: #3b5998;
|
||||
}
|
||||
|
||||
.github:hover {
|
||||
fill: #333;
|
||||
}
|
||||
|
||||
.rss:hover {
|
||||
fill: #e15a00;
|
||||
}
|
||||
|
||||
.json:hover {
|
||||
fill: #8be028;
|
||||
}
|
||||
|
||||
@ -1,30 +1,23 @@
|
||||
import React from 'react'
|
||||
import styles from './IconLinks.module.scss'
|
||||
|
||||
import { ReactComponent as Twitter } from '../../images/twitter.svg'
|
||||
import { ReactComponent as Github } from '../../images/github.svg'
|
||||
import { ReactComponent as Facebook } from '../../images/facebook.svg'
|
||||
import { ReactComponent as Rss } from '../../images/rss.svg'
|
||||
import { ReactComponent as Jsonfeed } from '../../images/jsonfeed.svg'
|
||||
import Icon from '../atoms/Icon'
|
||||
|
||||
function NetworkIcon({ link }: { link: string }) {
|
||||
let Icon
|
||||
let IconComp
|
||||
|
||||
if (link.includes('twitter')) {
|
||||
Icon = <Twitter className={styles.twitter} />
|
||||
IconComp = <Icon name="Twitter" />
|
||||
} else if (link.includes('github')) {
|
||||
Icon = <Github className={styles.github} />
|
||||
} else if (link.includes('facebook')) {
|
||||
Icon = <Facebook className={styles.facebook} />
|
||||
IconComp = <Icon name="GitHub" />
|
||||
} else if (link.includes('feed.xml')) {
|
||||
Icon = <Rss className={styles.rss} />
|
||||
IconComp = <Icon name="Rss" />
|
||||
} else if (link.includes('feed.json')) {
|
||||
Icon = <Jsonfeed className={styles.json} />
|
||||
IconComp = <Icon name="Jsonfeed" />
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
|
||||
return Icon
|
||||
return IconComp
|
||||
}
|
||||
|
||||
export default function IconLinks({ links }: { links: string[] }) {
|
||||
|
||||
@ -74,10 +74,11 @@ export default function RelatedPosts({
|
||||
function getPosts() {
|
||||
return photos
|
||||
? photosWithDataFilter(posts)
|
||||
: postsWithDataFilter(posts, 'tags', tags)
|
||||
: tags && postsWithDataFilter(posts, 'tags', tags)
|
||||
}
|
||||
|
||||
const [filteredPosts, setFilteredPosts] = useState(getPosts())
|
||||
if (!filteredPosts) return null
|
||||
|
||||
function refreshPosts() {
|
||||
setFilteredPosts(getPosts())
|
||||
|
||||
@ -13,21 +13,21 @@
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $text-color-light;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
stroke: $brand-grey-light;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
svg {
|
||||
fill: $brand-cyan;
|
||||
stroke: $brand-cyan;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
svg {
|
||||
fill: darken($brand-cyan, 30%);
|
||||
stroke: darken($brand-cyan, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import { ReactComponent as SearchIcon } from '../../../images/magnifying-glass.svg'
|
||||
import styles from './SearchButton.module.scss'
|
||||
import Icon from '../../atoms/Icon'
|
||||
|
||||
const SearchButton = (props: any) => (
|
||||
<button
|
||||
@ -9,7 +9,7 @@ const SearchButton = (props: any) => (
|
||||
className={styles.searchButton}
|
||||
{...props}
|
||||
>
|
||||
<SearchIcon />
|
||||
<Icon name="Search" />
|
||||
</button>
|
||||
)
|
||||
|
||||
|
||||
@ -11,12 +11,18 @@
|
||||
.searchInputClose {
|
||||
position: absolute;
|
||||
right: $spacer / 2;
|
||||
top: $spacer / 5;
|
||||
font-size: $font-size-h3;
|
||||
color: $brand-grey-light;
|
||||
top: $spacer / 2;
|
||||
|
||||
svg {
|
||||
stroke: $brand-grey-light;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $link-color;
|
||||
svg {
|
||||
stroke: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React from 'react'
|
||||
import Input from '../../atoms/Input'
|
||||
import Icon from '../../atoms/Icon'
|
||||
import styles from './SearchInput.module.scss'
|
||||
|
||||
export default function SearchInput({
|
||||
@ -26,7 +27,7 @@ export default function SearchInput({
|
||||
onClick={onToggle}
|
||||
title="Close search"
|
||||
>
|
||||
×
|
||||
<Icon name="X" />
|
||||
</button>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -7,15 +7,14 @@
|
||||
margin-bottom: $spacer * $line-height;
|
||||
|
||||
svg {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
stroke: $brand-grey-light;
|
||||
width: $font-size-base;
|
||||
height: $font-size-base;
|
||||
margin-top: -0.05rem;
|
||||
fill: $brand-grey-light;
|
||||
|
||||
&:last-child {
|
||||
margin-top: -0.1rem;
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
width: $font-size-base * 0.9;
|
||||
height: $font-size-base * 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
import React from 'react'
|
||||
import Helmet from 'react-helmet'
|
||||
import useDarkMode from 'use-dark-mode'
|
||||
import { ReactComponent as Day } from '../../images/day.svg'
|
||||
import { ReactComponent as Night } from '../../images/night.svg'
|
||||
import styles from './ThemeSwitch.module.scss'
|
||||
import Icon from '../atoms/Icon'
|
||||
|
||||
const ThemeToggle = () => (
|
||||
<span id="toggle" className={styles.checkboxContainer} aria-live="assertive">
|
||||
<Day />
|
||||
<Icon name="Sun" />
|
||||
<span className={styles.checkboxFake} />
|
||||
<Night />
|
||||
<Icon name="Moon" />
|
||||
</span>
|
||||
)
|
||||
|
||||
|
||||
@ -18,10 +18,6 @@
|
||||
bottom: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $brand-grey-light;
|
||||
}
|
||||
}
|
||||
|
||||
.theme {
|
||||
@ -67,20 +63,17 @@
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 0.25rem;
|
||||
margin-bottom: -2px;
|
||||
width: $font-size-small;
|
||||
height: $font-size-small;
|
||||
margin-right: $spacer / 8;
|
||||
margin-bottom: -0.15rem;
|
||||
display: inline-block;
|
||||
stroke: $text-color-light;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.btc {
|
||||
// stylelint-disable-next-line
|
||||
svg {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.6rem;
|
||||
background: none;
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
import React, { useState } from 'react'
|
||||
import Container from '../atoms/Container'
|
||||
import Icon from '../atoms/Icon'
|
||||
import Vcard from '../molecules/Vcard'
|
||||
import ThemeSwitch from '../molecules/ThemeSwitch'
|
||||
import ModalThanks from './ModalThanks'
|
||||
|
||||
import { ReactComponent as Github } from '../../images/github.svg'
|
||||
import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
|
||||
|
||||
import styles from './Footer.module.scss'
|
||||
import { useSiteMetadata } from '../../hooks/use-site-metadata'
|
||||
|
||||
@ -29,11 +27,11 @@ function Copyright({
|
||||
{name}
|
||||
</a>
|
||||
<a href={`${github}/blog`}>
|
||||
<Github />
|
||||
<Icon name="GitHub" />
|
||||
View source
|
||||
</a>
|
||||
<button className={styles.btc} onClick={toggleModal}>
|
||||
<Bitcoin />
|
||||
<Icon name="Bitcoin" />
|
||||
<code>{bitcoin}</code>
|
||||
</button>
|
||||
</p>
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Arrow_circled_down" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
|
||||
<path d="M10,0.4c-5.303,0-9.601,4.298-9.601,9.6c0,5.303,4.298,9.601,9.601,9.601c5.301,0,9.6-4.298,9.6-9.601
|
||||
C19.6,4.698,15.301,0.4,10,0.4z M9.999,17.6c-4.197,0-7.6-3.402-7.6-7.6s3.402-7.6,7.6-7.6S17.6,5.803,17.6,10
|
||||
S14.196,17.6,9.999,17.6z M12,6H8v4H5.5l4.5,4.5l4.5-4.5H12V6z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 745 B |
@ -1,4 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="20" viewBox="0 0 10 20">
|
||||
<title>bitcoin</title>
|
||||
<path d="M8.16,10A3.67,3.67,0,0,0,10,6.76c0-1-.37-3.19-3.42-3.84V0.81A0.82,0.82,0,0,0,5.79,0,0.82,0.82,0,0,0,5,.81V2.7H3.95V0.81A0.82,0.82,0,0,0,3.16,0a0.82,0.82,0,0,0-.79.81V2.7H0.79a0.81,0.81,0,0,0,0,1.62H1.05V15.68H0.79a0.81,0.81,0,0,0,0,1.62H2.37v1.89a0.82,0.82,0,0,0,.79.81,0.82,0.82,0,0,0,.79-0.81V17.3H5v1.89a0.82,0.82,0,0,0,.79.81,0.82,0.82,0,0,0,.79-0.81V17.08C9.63,16.43,10,14.27,10,13.24A3.67,3.67,0,0,0,8.16,10ZM4.53,4.32c2.58,0,3.89.81,3.89,2.43S7.11,9.19,4.53,9.19H2.63V4.32H4.53Zm0,11.35H2.63V10.81H4.53c2.58,0,3.89.81,3.89,2.43S7.11,15.68,4.53,15.68Z"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M8.69943729,12.5 C10.6866373,12.5 12.2994373,14.068 12.2994373,16 C12.2994373,17.9343333 10.6866373,19.5 8.69943729,19.5 L0.299437295,19.5 L0.299437295,12.5 L8.69943729,12.5 Z M8.69943729,5.5 C10.6866373,5.5 12.2994373,7.068 12.2994373,9 C12.2994373,10.9343333 10.6866373,12.5 8.69943729,12.5 L0.299437295,12.5 L0.299437295,5.5 L8.69943729,5.5 Z M2.29943729,1.00830078 L2.29943729,5.5 M7.29943729,1.00830078 L7.29943729,5.5 M2.29943729,19.5 L2.29943729,24.067627 M7.29943729,19.5 L7.29943729,24.067627" transform="translate(5.7 -.5)"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 688 B After Width: | Height: | Size: 719 B |
@ -1,9 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Chevron_left" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
|
||||
<path d="M12.452,4.516c0.446,0.436,0.481,1.043,0,1.576L8.705,10l3.747,3.908c0.481,0.533,0.446,1.141,0,1.574
|
||||
c-0.445,0.436-1.197,0.408-1.615,0c-0.418-0.406-4.502-4.695-4.502-4.695C6.112,10.57,6,10.285,6,10s0.112-0.57,0.335-0.789
|
||||
c0,0,4.084-4.287,4.502-4.695C11.255,4.107,12.007,4.08,12.452,4.516z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 759 B |
@ -1,9 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Chevron_right" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
|
||||
<path d="M9.163,4.516c0.418,0.408,4.502,4.695,4.502,4.695C13.888,9.43,14,9.715,14,10s-0.112,0.57-0.335,0.787
|
||||
c0,0-4.084,4.289-4.502,4.695c-0.418,0.408-1.17,0.436-1.615,0c-0.446-0.434-0.481-1.041,0-1.574L11.295,10L7.548,6.092
|
||||
c-0.481-0.533-0.446-1.141,0-1.576C7.993,4.08,8.745,4.107,9.163,4.516z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 759 B |
@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
|
||||
<path d="M16 8v8H8v4h12V8h-4zm0-2h6v16H6v-6H0V0h16v6zM2 2v12h12V2H2z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 173 B |
@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21">
|
||||
<path d="M1001,1344.5 C1001,1347.53669 998.535313,1350 995.5,1350 C992.459875,1350 990,1347.53669 990,1344.5 C990,1341.46331 992.459875,1339 995.5,1339 C998.535313,1339 1001,1341.46331 1001,1344.5 Z M995.5,1336.484 C994.633125,1336.484 993.81625,1336.69175 993.035,1337 L993,1337 L995.5,1334 L998,1337 L997.96125,1337 C997.181875,1336.691 996.365,1336.484 995.5,1336.484 Z M995.5,1352.516 C996.365,1352.516 997.181875,1352.30825 997.96125,1352 L998,1352 L995.5,1355 L993,1352 L993.035,1352 C993.81625,1352.309 994.633125,1352.516 995.5,1352.516 Z M1003.516,1344.5 C1003.516,1343.63562 1003.3045,1342.81562 1003,1342.03625 L1003,1342 L1006,1344.5 L1003,1347 L1003,1346.96375 C1003.30525,1346.18438 1003.516,1345.36438 1003.516,1344.5 Z M987.484,1344.5 C987.484,1345.36438 987.69025,1346.18438 988,1346.96375 L988,1347 L985,1344.5 L988,1342 L988,1342.03625 C987.6895,1342.81562 987.484,1343.63562 987.484,1344.5 Z M1001.34229,1350.34229 C1002.03819,1349.65134 1002.55304,1348.85785 1002.96959,1348.0297 L1003,1348 L1003,1352 L999,1352 L999.028289,1351.97242 C999.856436,1351.55233 1000.65205,1351.03819 1001.34229,1350.34229 Z M989.657001,1338.65771 C988.961103,1339.34866 988.447666,1340.14215 988.028289,1340.9703 L988,1341 L988,1337 L992,1337 L991.966761,1337.02758 C991.137907,1337.44767 990.348656,1337.96181 989.657001,1338.65771 Z M989.657709,1350.343 C990.349364,1351.0389 991.138614,1351.55304 991.966761,1351.97242 L992,1352 L988,1352 L988,1348 L988.028289,1348.0297 C988.448373,1348.85856 988.96181,1349.65205 989.657709,1350.343 Z M1001.34229,1338.657 C1000.65205,1337.9611 999.856436,1337.44696 999.028289,1337.02758 L999,1337 L1003,1337 L1003,1341 L1002.96959,1340.9703 C1002.55304,1340.14144 1002.03819,1339.34795 1001.34229,1338.657 Z" transform="translate(-985 -1334)"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
@ -1,10 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Eye" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
|
||||
<path d="M10,4.4C3.439,4.4,0,9.232,0,10c0,0.766,3.439,5.6,10,5.6c6.56,0,10-4.834,10-5.6C20,9.232,16.56,4.4,10,4.4z M10,14.307
|
||||
c-2.455,0-4.445-1.928-4.445-4.307c0-2.379,1.99-4.309,4.445-4.309c2.455,0,4.444,1.93,4.444,4.309
|
||||
C14.444,12.379,12.455,14.307,10,14.307z M10,10c-0.407-0.447,0.663-2.154,0-2.154c-1.228,0-2.223,0.965-2.223,2.154
|
||||
c0,1.189,0.995,2.154,2.223,2.154c1.227,0,2.223-0.965,2.223-2.154C12.223,9.453,10.346,10.379,10,10z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 890 B |
@ -1,8 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Facebook" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
|
||||
<path d="M17,1H3C1.9,1,1,1.9,1,3v14c0,1.101,0.9,2,2,2h7v-7H8V9.525h2V7.475c0-2.164,1.212-3.684,3.766-3.684l1.803,0.002v2.605
|
||||
h-1.197C13.378,6.398,13,7.144,13,7.836v1.69h2.568L15,12h-2v7h4c1.1,0,2-0.899,2-2V3C19,1.9,18.1,1,17,1z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 685 B |
@ -1,7 +0,0 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Forward" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
|
||||
<path d="M12,11.874v4.357l7-6.69l-7-6.572v3.983c-8.775,0-11,9.732-11,9.732C3.484,12.296,7.237,11.874,12,11.874z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 578 B |
@ -1,15 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Github" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
|
||||
<path d="M13.18,11.309c-0.718,0-1.3,0.807-1.3,1.799c0,0.994,0.582,1.801,1.3,1.801s1.3-0.807,1.3-1.801
|
||||
C14.479,12.116,13.898,11.309,13.18,11.309z M17.706,6.626c0.149-0.365,0.155-2.439-0.635-4.426c0,0-1.811,0.199-4.551,2.08
|
||||
c-0.575-0.16-1.548-0.238-2.519-0.238c-0.973,0-1.945,0.078-2.52,0.238C4.74,2.399,2.929,2.2,2.929,2.2
|
||||
C2.14,4.187,2.148,6.261,2.295,6.626C1.367,7.634,0.8,8.845,0.8,10.497c0,7.186,5.963,7.301,7.467,7.301
|
||||
c0.342,0,1.018,0.002,1.734,0.002c0.715,0,1.392-0.002,1.732-0.002c1.506,0,7.467-0.115,7.467-7.301
|
||||
C19.2,8.845,18.634,7.634,17.706,6.626z M10.028,16.915H9.972c-3.771,0-6.709-0.449-6.709-4.115c0-0.879,0.31-1.693,1.047-2.369
|
||||
c1.227-1.127,3.305-0.531,5.662-0.531c0.01,0,0.02,0,0.029,0c0.01,0,0.018,0,0.027,0c2.357,0,4.436-0.596,5.664,0.531
|
||||
c0.735,0.676,1.045,1.49,1.045,2.369C16.737,16.466,13.8,16.915,10.028,16.915z M6.821,11.309c-0.718,0-1.3,0.807-1.3,1.799
|
||||
c0,0.994,0.582,1.801,1.3,1.801c0.719,0,1.301-0.807,1.301-1.801C8.122,12.116,7.54,11.309,6.821,11.309z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@ -1,17 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Google_x2B_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
|
||||
<path d="M1.989,5.589c0,1.494,0.499,2.572,1.482,3.205c0.806,0.52,1.74,0.598,2.226,0.598c0.118,0,0.213-0.006,0.279-0.01
|
||||
c0,0-0.154,1.004,0.59,1.996H6.532c-1.289,0-5.493,0.269-5.493,3.727c0,3.516,3.861,3.695,4.636,3.695
|
||||
c0.061,0,0.097-0.002,0.097-0.002c0.008,0,0.063,0.002,0.158,0.002c0.497,0,1.782-0.062,2.975-0.643
|
||||
c1.548-0.75,2.333-2.059,2.333-3.885c0-1.764-1.196-2.814-2.069-3.582c-0.533-0.469-0.994-0.873-0.994-1.266
|
||||
c0-0.4,0.337-0.701,0.762-1.082c0.689-0.615,1.339-1.492,1.339-3.15c0-1.457-0.189-2.436-1.354-3.057
|
||||
c0.121-0.062,0.551-0.107,0.763-0.137c0.631-0.086,1.554-0.184,1.554-0.699V1.2H6.64C6.594,1.202,1.989,1.372,1.989,5.589z
|
||||
M9.413,14.602c0.088,1.406-1.115,2.443-2.922,2.574c-1.835,0.135-3.345-0.691-3.433-2.096c-0.043-0.676,0.254-1.336,0.835-1.863
|
||||
c0.589-0.533,1.398-0.863,2.278-0.928c0.104-0.006,0.207-0.012,0.31-0.012C8.18,12.278,9.33,13.276,9.413,14.602z M8.212,4.626
|
||||
c0.451,1.588-0.23,3.246-1.316,3.553C6.771,8.214,6.643,8.231,6.512,8.231c-0.994,0-1.979-1.006-2.345-2.393
|
||||
C3.963,5.062,3.98,4.38,4.214,3.726c0.229-0.645,0.643-1.078,1.163-1.225c0.125-0.035,0.254-0.053,0.385-0.053
|
||||
C6.962,2.448,7.734,2.946,8.212,4.626z M16,8V5h-2v3h-3v2h3v3h2v-3h3V8H16z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@ -1,8 +0,0 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Heart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
|
||||
<path d="M17.19,4.155c-1.672-1.534-4.383-1.534-6.055,0L10,5.197L8.864,4.155c-1.672-1.534-4.382-1.534-6.054,0
|
||||
c-1.881,1.727-1.881,4.52,0,6.246L10,17l7.19-6.599C19.07,8.675,19.07,5.881,17.19,4.155z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 662 B |
@ -1,12 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Infinity" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
|
||||
<path d="M15.902,5.6c-2.079,0-4.358,1.158-5.902,2.916C8.455,6.758,6.175,5.6,4.096,5.6C2.116,5.6,0,6.756,0,10
|
||||
c0,3.244,2.116,4.398,4.096,4.4l0,0c2.079,0,4.358-1.158,5.903-2.916c1.544,1.758,3.823,2.916,5.902,2.916
|
||||
C17.882,14.4,20,13.244,20,10C20,6.756,17.882,5.6,15.902,5.6z M4.096,12.641C2.584,12.641,1.8,11.752,1.8,10
|
||||
c0-1.752,0.784-2.641,2.296-2.641c1.673,0,3.614,1.086,4.807,2.641C7.71,11.555,5.769,12.641,4.096,12.641z M15.902,12.641
|
||||
c-1.673,0-3.614-1.086-4.807-2.641c1.192-1.555,3.135-2.641,4.807-2.641c1.512,0,2.298,0.889,2.298,2.641
|
||||
C18.2,11.752,17.414,12.641,15.902,12.641z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@ -1,12 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Info_circled" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
|
||||
<path d="M10,0.4c-5.303,0-9.601,4.298-9.601,9.6c0,5.303,4.298,9.601,9.601,9.601c5.301,0,9.6-4.298,9.6-9.601
|
||||
C19.6,4.698,15.301,0.4,10,0.4z M10.896,3.866c0.936,0,1.211,0.543,1.211,1.164c0,0.775-0.62,1.492-1.679,1.492
|
||||
c-0.886,0-1.308-0.445-1.282-1.182C9.146,4.719,9.665,3.866,10.896,3.866z M8.498,15.75c-0.64,0-1.107-0.389-0.66-2.094l0.733-3.025
|
||||
c0.127-0.484,0.148-0.678,0-0.678c-0.191,0-1.022,0.334-1.512,0.664L6.74,10.094c1.555-1.299,3.343-2.061,4.108-2.061
|
||||
c0.64,0,0.746,0.756,0.427,1.92l-0.84,3.18c-0.149,0.562-0.085,0.756,0.064,0.756c0.192,0,0.82-0.232,1.438-0.719l0.362,0.486
|
||||
C10.786,15.168,9.137,15.75,8.498,15.75z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@ -1,3 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="18" viewBox="0 0 19 18">
|
||||
<path d="M1.30841121,11.0316983 C0.577754036,10.9880199 -9.23705556e-14,10.4359251 -9.23705556e-14,9.76127321 C-9.23705556e-14,9.08662131 0.577754036,8.53452653 1.30841121,8.49084813 L1.30841121,8.48060345 C2.83896758,8.48060345 3.34915304,7.90948276 3.34915304,6.21767241 L3.34915304,3.90086207 C3.34915304,1.18534483 4.84411507,0 8.27303592,0 L9.31713639,0 L9.31713639,2.00431034 L8.78322138,2.00431034 C6.825533,2.00431034 6.16110543,2.59698276 6.16110543,4.31034483 L6.16110543,7.12284483 C6.16110543,8.68534483 5.41362442,9.49353448 3.81187938,9.63362069 L3.81187938,9.93534483 C5.3661653,10.0646552 6.16110543,10.9482759 6.16110543,12.5646552 L6.16110543,15.700431 C6.16110543,17.3814655 6.84926256,17.9849138 8.78322138,17.9849138 L9.31713639,17.9849138 L9.31713639,20 L8.27303592,20 C4.85597985,20 3.34915304,18.7715517 3.34915304,15.9913793 L3.34915304,13.3189655 C3.34915304,11.6271552 2.85083236,11.0668103 1.30841121,11.0668103 L1.30841121,11.0316983 Z M9.25233645,11.0344828 C8.47810549,11.0344828 7.85046729,10.4644474 7.85046729,9.76127321 C7.85046729,9.05809899 8.47810549,8.48806366 9.25233645,8.48806366 C10.0265674,8.48806366 10.6542056,9.05809899 10.6542056,9.76127321 C10.6542056,10.4644474 10.0265674,11.0344828 9.25233645,11.0344828 Z M13.9252336,11.0344828 C13.1510027,11.0344828 12.5233645,10.4644474 12.5233645,9.76127321 C12.5233645,9.05809899 13.1510027,8.48806366 13.9252336,8.48806366 C14.6994646,8.48806366 15.3271028,9.05809899 15.3271028,9.76127321 C15.3271028,10.4644474 14.6994646,11.0344828 13.9252336,11.0344828 Z M18.5981308,11.0344828 C17.8238999,11.0344828 17.1962617,10.4644474 17.1962617,9.76127321 C17.1962617,9.05809899 17.8238999,8.48806366 18.5981308,8.48806366 C19.3723618,8.48806366 20,9.05809899 20,9.76127321 C20,10.4644474 19.3723618,11.0344828 18.5981308,11.0344828 Z" transform="rotate(-45 7.747 7.452)"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
||||
<path d="M1.14430801,4.55326218 C1.52525217,3.57480664 2.78659622,2.911321 3.58725953,3.00889111 C7.18789107,3.44766984 10.492951,4.84389299 13.2401445,6.93526585 C13.9590764,7.48257152 17.1879712,5.69919309 17.8257909,6.33701282 C18.5315745,7.0427964 16.6366519,10.1794093 17.2309906,10.9838987 C19.2389093,13.7017921 20.5744827,16.9466324 20.9921029,20.4728117 C21.0843733,21.2518966 20.3529939,22.1790671 19.5868679,22.8486188" transform="rotate(-180 11.072 12.924)"/>
|
||||
<path d="M11,12 C11.5522847,12 12,12.4477153 12,13 C12,13.5522847 11.5522847,14 11,14 C10.4477153,14 10,13.5522847 10,13 C10,12.4477153 10.4477153,12 11,12 Z M15,8 C15.5522847,8 16,8.44771525 16,9 C16,9.55228475 15.5522847,10 15,10 C14.4477153,10 14,9.55228475 14,9 C14,8.44771525 14.4477153,8 15,8 Z M19,4 C19.5522847,4 20,4.44771525 20,5 C20,5.55228475 19.5522847,6 19,6 C18.4477153,6 18,5.55228475 18,5 C18,4.44771525 18.4477153,4 19,4 Z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.1 KiB |
@ -1,16 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Link" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
|
||||
<path d="M7.859,14.691l-0.81,0.805c-0.701,0.695-1.843,0.695-2.545,0c-0.336-0.334-0.521-0.779-0.521-1.252
|
||||
c0-0.473,0.186-0.916,0.521-1.252l2.98-2.955c0.617-0.613,1.779-1.515,2.626-0.675c0.389,0.386,1.016,0.384,1.403-0.005
|
||||
c0.385-0.389,0.383-1.017-0.006-1.402C10.069,6.527,7.941,6.791,6.088,8.63l-2.98,2.956C2.393,12.295,2,13.24,2,14.244
|
||||
c0,1.006,0.394,1.949,1.108,2.658c0.736,0.73,1.702,1.096,2.669,1.096c0.967,0,1.934-0.365,2.669-1.096l0.811-0.805
|
||||
c0.389-0.385,0.391-1.012,0.005-1.4C8.875,14.309,8.248,14.307,7.859,14.691z M16.891,3.207c-1.547-1.534-3.709-1.617-5.139-0.197
|
||||
l-1.009,1.002c-0.389,0.386-0.392,1.013-0.006,1.401c0.386,0.389,1.013,0.391,1.402,0.005l1.01-1.001
|
||||
c0.74-0.736,1.711-0.431,2.346,0.197c0.336,0.335,0.522,0.779,0.522,1.252s-0.186,0.917-0.522,1.251l-3.18,3.154
|
||||
c-1.454,1.441-2.136,0.766-2.427,0.477c-0.389-0.386-1.016-0.383-1.401,0.005c-0.386,0.389-0.384,1.017,0.005,1.401
|
||||
c0.668,0.662,1.43,0.99,2.228,0.99c0.977,0,2.01-0.492,2.993-1.467l3.18-3.153C17.605,7.814,18,6.87,18,5.866
|
||||
C18,4.861,17.605,3.917,16.891,3.207z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -1,11 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Magnifying_glass" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
|
||||
<path d="M17.545,15.467l-3.779-3.779c0.57-0.935,0.898-2.035,0.898-3.21c0-3.417-2.961-6.377-6.378-6.377
|
||||
C4.869,2.1,2.1,4.87,2.1,8.287c0,3.416,2.961,6.377,6.377,6.377c1.137,0,2.2-0.309,3.115-0.844l3.799,3.801
|
||||
c0.372,0.371,0.975,0.371,1.346,0l0.943-0.943C18.051,16.307,17.916,15.838,17.545,15.467z M4.004,8.287
|
||||
c0-2.366,1.917-4.283,4.282-4.283c2.366,0,4.474,2.107,4.474,4.474c0,2.365-1.918,4.283-4.283,4.283
|
||||
C6.111,12.76,4.004,10.652,4.004,8.287z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 915 B |
@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17" viewBox="0 0 18 17">
|
||||
<path d="M1057.35991,1345.6935 C1052.91908,1345.6935 1049.32216,1342.19489 1049.32216,1337.88132 C1049.32216,1336.46068 1049.74141,1335.14652 1050.42369,1334 C1046.72047,1335.03741 1044,1338.31568 1044,1342.24655 C1044,1347.00713 1047.97006,1350.86789 1052.86864,1350.86789 C1056.91247,1350.86789 1060.28811,1348.22007 1061.35547,1344.62446 C1060.17313,1345.28549 1058.82157,1345.6935 1057.35991,1345.6935 Z" transform="translate(-1044 -1334)"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 539 B |
@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M12,24 C18.617,24 24,18.617 24,12 C24,5.384 18.617,0 12,0 C5.383,0 0,5.384 0,12 C0,18.617 5.383,24 12,24 Z M7,7.5 C7,7.224 7.224,7 7.5,7 L10.5,7 C10.776,7 11,7.224 11,7.5 L11,16.5 C11,16.776 10.776,17 10.5,17 L7.5,17 C7.224,17 7,16.776 7,16.5 L7,7.5 Z M13,16.5 L13,7.5 C13,7.224 13.224,7 13.5,7 L16.5,7 C16.776,7 17,7.224 17,7.5 L17,16.5 C17,16.776 16.776,17 16.5,17 L13.5,17 C13.224,17 13,16.776 13,16.5 Z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 512 B |
@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M44,0 C50.627,0 56,5.373 56,12 C56,18.627 50.627,24 44,24 C37.373,24 32,18.627 32,12 C32,5.373 37.373,0 44,0 Z M40,18 L52,12 L40,6 L40,18 Z" transform="translate(-32)"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 272 B |
@ -1,9 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="RSS" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
|
||||
<path d="M2.4,2.4v2.367c7.086,0,12.83,5.746,12.83,12.832h2.369C17.599,9.205,10.794,2.4,2.4,2.4z M2.4,7.137v2.369
|
||||
c4.469,0,8.093,3.623,8.093,8.094h2.368C12.861,11.822,8.177,7.137,2.4,7.137z M4.669,13.059c-1.254,0-2.27,1.018-2.27,2.271
|
||||
s1.016,2.27,2.27,2.27s2.269-1.016,2.269-2.27S5.923,13.059,4.669,13.059z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 760 B |
@ -1,13 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Twitter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
|
||||
<path d="M17.316,6.246c0.008,0.162,0.011,0.326,0.011,0.488c0,4.99-3.797,10.742-10.74,10.742c-2.133,0-4.116-0.625-5.787-1.697
|
||||
c0.296,0.035,0.596,0.053,0.9,0.053c1.77,0,3.397-0.604,4.688-1.615c-1.651-0.031-3.046-1.121-3.526-2.621
|
||||
c0.23,0.043,0.467,0.066,0.71,0.066c0.345,0,0.679-0.045,0.995-0.131c-1.727-0.348-3.028-1.873-3.028-3.703c0-0.016,0-0.031,0-0.047
|
||||
c0.509,0.283,1.092,0.453,1.71,0.473c-1.013-0.678-1.68-1.832-1.68-3.143c0-0.691,0.186-1.34,0.512-1.898
|
||||
C3.942,5.498,6.725,7,9.862,7.158C9.798,6.881,9.765,6.594,9.765,6.297c0-2.084,1.689-3.773,3.774-3.773
|
||||
c1.086,0,2.067,0.457,2.756,1.191c0.859-0.17,1.667-0.484,2.397-0.916c-0.282,0.881-0.881,1.621-1.66,2.088
|
||||
c0.764-0.092,1.49-0.293,2.168-0.594C18.694,5.051,18.054,5.715,17.316,6.246z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@ -78,16 +78,6 @@ a.btn {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// grid buttons
|
||||
&.col2,
|
||||
&.col3 {
|
||||
margin-bottom: $spacer / 2;
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: $font-size-mini;
|
||||
color: $text-color-light;
|
||||
@ -161,39 +151,6 @@ a.btn-primary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Close button
|
||||
/////////////////////////////////////
|
||||
|
||||
.close {
|
||||
text-align: center;
|
||||
display: block;
|
||||
color: lighten($brand-grey-light, 50%);
|
||||
line-height: 1;
|
||||
font-size: $font-size-large;
|
||||
padding: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&button {
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: lighten($brand-grey-light, 20%);
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: none;
|
||||
color: $brand-grey-light;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
// some helper classes for old content
|
||||
/////////////////////////////////////
|
||||
|
||||
@ -235,14 +192,15 @@ a.btn-primary {
|
||||
&[class*='icon-'] {
|
||||
&::before {
|
||||
content: '';
|
||||
width: $font-size-large;
|
||||
height: $font-size-large;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
margin-right: 0.3rem;
|
||||
margin-bottom: -0.25rem;
|
||||
margin-bottom: -0.2rem;
|
||||
opacity: 0.75;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
background-position: center center;
|
||||
background-size: 100%;
|
||||
|
||||
.dark &,
|
||||
:global(.dark) & {
|
||||
@ -262,18 +220,22 @@ a.btn-primary {
|
||||
}
|
||||
|
||||
.icon-download::before {
|
||||
background-image: url('../images/arrow-with-circle-down.svg');
|
||||
background-image: url('../../node_modules/feather-icons/dist/icons/arrow-down-circle.svg');
|
||||
}
|
||||
|
||||
.icon-heart::before {
|
||||
background-image: url('../images/heart.svg');
|
||||
background-image: url('../../node_modules/feather-icons/dist/icons/heart.svg');
|
||||
}
|
||||
|
||||
.icon-github::before {
|
||||
background-image: url('../images/github.svg');
|
||||
background-image: url('../../node_modules/feather-icons/dist/icons/github.svg');
|
||||
}
|
||||
|
||||
.icon-eye::before {
|
||||
background-image: url('../images/eye.svg');
|
||||
.icon-compass::before {
|
||||
background-image: url('../../node_modules/feather-icons/dist/icons/compass.svg');
|
||||
}
|
||||
|
||||
.icon-code::before {
|
||||
background-image: url('../../node_modules/feather-icons/dist/icons/code.svg');
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: $font-family-monospace;
|
||||
font-size: $font-size-small;
|
||||
font-size: $font-size-mini * 1.1;
|
||||
}
|
||||
|
||||
code,
|
||||
|
||||
@ -82,6 +82,7 @@ $padding-base-vertical: 0.75rem;
|
||||
$padding-base-horizontal: 1.25rem;
|
||||
|
||||
$border-radius: 0.25rem;
|
||||
$stroke-width: 0.125rem;
|
||||
|
||||
// Code
|
||||
/////////////////////////////////////
|
||||
|
||||
@ -162,6 +162,10 @@ h6 {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
transition: color 0.2s $easing;
|
||||
|
||||
.wf-loading & {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// stylelint-disable no-descending-specificity
|
||||
&,
|
||||
a {
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
padding-top: $spacer;
|
||||
padding-bottom: $spacer;
|
||||
padding-left: $spacer * 2;
|
||||
padding-right: $spacer;
|
||||
padding-right: $spacer / 2;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
border-bottom: 1px dashed rgba($brand-grey-light, 0.3);
|
||||
@ -86,9 +86,11 @@
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: $spacer;
|
||||
top: $spacer;
|
||||
fill: $brand-grey-light;
|
||||
top: $spacer / 1.05;
|
||||
stroke: $brand-grey-light;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
import React, { useState } from 'react'
|
||||
import ModalThanks from '../../components/organisms/ModalThanks'
|
||||
import styles from './PostActions.module.scss'
|
||||
|
||||
import { ReactComponent as Twitter } from '../../images/twitter.svg'
|
||||
import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
|
||||
import { ReactComponent as GitHub } from '../../images/github.svg'
|
||||
import { useSiteMetadata } from '../../hooks/use-site-metadata'
|
||||
import styles from './PostActions.module.scss'
|
||||
import Icon from '../../components/atoms/Icon'
|
||||
|
||||
interface ActionProps {
|
||||
title: string
|
||||
@ -14,19 +11,19 @@ interface ActionProps {
|
||||
onClick?(): void
|
||||
}
|
||||
|
||||
const Icon = ({ text }: { text: string }) =>
|
||||
const IconComp = ({ text }: { text: string }) =>
|
||||
text.includes('GitHub') ? (
|
||||
<GitHub />
|
||||
<Icon name="GitHub" />
|
||||
) : text.includes('Bitcoin') ? (
|
||||
<Bitcoin />
|
||||
<Icon name="Bitcoin" />
|
||||
) : (
|
||||
<Twitter />
|
||||
<Icon name="Twitter" />
|
||||
)
|
||||
|
||||
const Action = ({ title, text, url, onClick }: ActionProps) => {
|
||||
return (
|
||||
<a className={styles.action} href={url} onClick={onClick}>
|
||||
<Icon text={text} />
|
||||
<IconComp text={text} />
|
||||
<h1 className={styles.actionTitle}>{title}</h1>
|
||||
<p className={styles.actionText}>{text}</p>
|
||||
</a>
|
||||
@ -57,7 +54,7 @@ export default function PostActions({
|
||||
/>
|
||||
<Action
|
||||
title="Found something useful?"
|
||||
text="Say thanks with Bitcoins or Ether"
|
||||
text="Say thanks with Bitcoin or Ether"
|
||||
onClick={toggleModal}
|
||||
/>
|
||||
<Action
|
||||
|
||||
@ -6,18 +6,23 @@
|
||||
margin-top: $spacer * 2;
|
||||
|
||||
a {
|
||||
margin: 0;
|
||||
|
||||
svg {
|
||||
width: $font-size-small;
|
||||
height: $font-size-small;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
fill: $text-color-light;
|
||||
stroke: $text-color-light;
|
||||
margin-left: $spacer / 8;
|
||||
position: relative;
|
||||
top: 0.1rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
svg {
|
||||
width: $font-size-base;
|
||||
height: $font-size-base;
|
||||
fill: $brand-cyan;
|
||||
stroke: $brand-cyan;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'gatsby'
|
||||
import { ReactComponent as Forward } from '../../images/forward.svg'
|
||||
import { ReactComponent as Infinity } from '../../images/infinity.svg'
|
||||
import stylesPostMore from './PostMore.module.scss'
|
||||
import styles from './PostLinkActions.module.scss'
|
||||
import Icon from '../../components/atoms/Icon'
|
||||
|
||||
const PostLinkActions = ({
|
||||
linkurl,
|
||||
@ -12,14 +11,14 @@ const PostLinkActions = ({
|
||||
linkurl?: string
|
||||
slug: string
|
||||
}) => (
|
||||
<div className={styles.postLinkActions}>
|
||||
<aside className={styles.postLinkActions}>
|
||||
<a className={stylesPostMore.postMore} href={linkurl}>
|
||||
Go to source <Forward />
|
||||
Go to source <Icon name="ExternalLink" />
|
||||
</a>
|
||||
<Link to={slug} rel="tooltip" title="Permalink">
|
||||
<Infinity />
|
||||
<Icon name="Link" />
|
||||
</Link>
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
|
||||
export default PostLinkActions
|
||||
|
||||
@ -12,12 +12,12 @@
|
||||
svg {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
top: 0.2rem;
|
||||
top: 0.25rem;
|
||||
position: relative;
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
fill: $text-color-light;
|
||||
stroke: $text-color-light;
|
||||
transition: 0.2s ease-out;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'gatsby'
|
||||
import Icon from '../../components/atoms/Icon'
|
||||
import styles from './PostMore.module.scss'
|
||||
import { ReactComponent as Caret } from '../../images/chevron-right.svg'
|
||||
|
||||
const PostMore = ({ to, children }: { to: string; children: string }) => (
|
||||
<Link className={styles.postMore} to={to}>
|
||||
{children}
|
||||
<Caret />
|
||||
<Icon name="ChevronRight" />
|
||||
</Link>
|
||||
)
|
||||
|
||||
|
||||
@ -16,8 +16,8 @@
|
||||
width: $font-size-base;
|
||||
height: $font-size-base;
|
||||
display: inline-block;
|
||||
fill: $text-color-light;
|
||||
vertical-align: baseline;
|
||||
stroke: $text-color-light;
|
||||
margin-bottom: -0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'gatsby'
|
||||
import { ReactComponent as Forward } from '../../images/forward.svg'
|
||||
import styles from './PostTitle.module.scss'
|
||||
import Icon from '../../components/atoms/Icon'
|
||||
|
||||
export default function PostTitle({
|
||||
type,
|
||||
@ -22,7 +22,7 @@ export default function PostTitle({
|
||||
className={[styles.hentry__title, styles.hentry__title__link].join(' ')}
|
||||
>
|
||||
<a href={linkurl} title={`Go to source: ${linkurl}`}>
|
||||
{title} <Forward />
|
||||
{title} <Icon name="ExternalLink" />
|
||||
</a>
|
||||
</h1>
|
||||
<div className={styles.linkurl}>{linkHostname}</div>
|
||||
|
||||
@ -12,8 +12,8 @@
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
svg {
|
||||
fill: $brand-grey-light;
|
||||
margin-bottom: -0.1rem;
|
||||
stroke: $brand-grey-light;
|
||||
margin-top: -0.05rem;
|
||||
position: absolute;
|
||||
left: 0.1rem;
|
||||
top: $spacer * 1.1;
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'gatsby'
|
||||
import Icon from '../../components/atoms/Icon'
|
||||
import styles from './PrevNext.module.scss'
|
||||
import { ReactComponent as Right } from '../../images/chevron-right.svg'
|
||||
import { ReactComponent as Left } from '../../images/chevron-left.svg'
|
||||
|
||||
interface Node {
|
||||
title: string
|
||||
@ -19,8 +18,8 @@ const PrevNext = ({ prev, next }: PrevNextProps) => (
|
||||
<div>
|
||||
{prev && (
|
||||
<Link to={prev.slug}>
|
||||
<Left />
|
||||
<p className={styles.label}>Older</p>
|
||||
<Icon name="ChevronLeft" />
|
||||
<p className={styles.label}>Newer</p>
|
||||
<h3 className={styles.title}>{prev.title}</h3>
|
||||
</Link>
|
||||
)}
|
||||
@ -28,9 +27,9 @@ const PrevNext = ({ prev, next }: PrevNextProps) => (
|
||||
<div>
|
||||
{next && (
|
||||
<Link to={next.slug}>
|
||||
<p className={styles.label}>Newer</p>
|
||||
<p className={styles.label}>Older</p>
|
||||
<h3 className={styles.title}>{next.title}</h3>
|
||||
<Right />
|
||||
<Icon name="ChevronRight" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -66,9 +66,7 @@ export default function Post({
|
||||
<PostMeta post={post} />
|
||||
</article>
|
||||
|
||||
{(type === 'post' || type === 'photo') && (
|
||||
<RelatedPosts photos={type === 'photo'} tags={tags} />
|
||||
)}
|
||||
<RelatedPosts photos={type === 'photo'} tags={tags} />
|
||||
|
||||
<PrevNext prev={prev} next={next} />
|
||||
</Layout>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user