+
diff --git a/src/components/Layout/style.scss b/src/components/Layout/style.scss
index 700363c..bf6373b 100644
--- a/src/components/Layout/style.scss
+++ b/src/components/Layout/style.scss
@@ -12,5 +12,21 @@ html {
.content-wrap {
lost-center: $layout-width;
+ padding-top: $topbar-height;
padding-bottom: $footer-padding;
+
+ max-width: $layout-breakpoint-lg;
+ margin: 0 auto;
+}
+
+@include breakpoint-sm {
+ .content-wrap {
+ padding-top: unset;
+ }
+}
+
+@include breakpoint-xlg {
+ .content-wrap {
+ max-width: $layout-breakpoint-xlg;
+ }
}
\ No newline at end of file
diff --git a/src/components/Links/index.jsx b/src/components/Links/index.jsx
index 98709f8..ca93bbe 100644
--- a/src/components/Links/index.jsx
+++ b/src/components/Links/index.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import './style.scss'
-import '../../assets/fonts/fontello-41f8de9d/css/fontello.css'
+import '../../assets/fonts/fontello/css/fontello.css'
class Links extends React.Component {
render() {
diff --git a/src/components/NavMenu/index.jsx b/src/components/NavMenu/index.jsx
new file mode 100644
index 0000000..08c3b35
--- /dev/null
+++ b/src/components/NavMenu/index.jsx
@@ -0,0 +1,163 @@
+import React from 'react'
+import { Link } from 'gatsby'
+
+var lastUnderlineLinkId = {}
+
+class NavMenu extends React.Component {
+ constructor(props) {
+ super(props)
+ this.links = {}
+ }
+
+ render() {
+ const underline = React.createRef()
+ const { linkDescriptions, classNamePrefix, currentLinkId } = this.props
+ const _this = this
+
+ return (
+
+ )
+
+ function createLink(linkDescription) {
+ return (
+ {
+ _this.links[linkDescription.id] = em
+ }}
+ to={linkDescription.path}
+ className={`${classNamePrefix}-list-item-link`}
+ onClick={() => _this.setLastUnderlineLinkId(currentLinkId)}
+ >
+ {(linkDescription.icon) ? : null}
+ {(linkDescription.icon) ? {" "} : null}
+ {linkDescription.label}
+ {(linkDescription.icon) ? {" "} : null}
+ {(linkDescription.icon) ? : null}
+
+ )
+ }
+
+ function updateUnderline(menu) {
+ if (menu) {
+ const currentLink = _this.links[currentLinkId]
+ if (currentLink) {
+ if (_this.getLastUnderlineLinkId() && _this.getLastUnderlineLinkId() != currentLinkId) {
+ const lastLink = _this.links[_this.getLastUnderlineLinkId()]
+ underline.current.shift({from: lastLink, to: currentLink})
+ } else {
+ if (menu.getBoundingClientRect().width > 0) {
+ underline.current.moveTo(currentLink)
+ } else {
+ menu.addEventListener('transitionend', () => {
+ if (underline.current) {
+ underline.current.moveTo(currentLink)
+ }
+ }, {once: true})
+ }
+ }
+ }
+
+ _this.setLastUnderlineLinkId(null)
+ }
+ }
+
+
+ }
+
+ getLastUnderlineLinkId() {
+ return lastUnderlineLinkId[this.props.id]
+ }
+
+ setLastUnderlineLinkId(id) {
+ lastUnderlineLinkId[this.props.id] = id
+ }
+}
+
+export default NavMenu
+
+class Underline extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ style: {},
+ callback: null
+ };
+ this.underline = null
+
+ this.moveTo = this.moveTo.bind(this)
+ this.shift = this.shift.bind(this)
+ this.parentX = this.parentX.bind(this)
+ }
+
+ render() {
+ const _this = this
+ function underlineRendered(underline) {
+ if (underline) {
+ _this.underline = underline
+ if (_this.state.callback) {
+ _this.state.callback()
+ }
+ }
+ }
+
+ return (
+
+ )
+ }
+
+ setStyle(style, callback) {
+ this.setState({
+ style,
+ callback
+ })
+ }
+
+ moveTo(link) {
+ const parentX = this.parentX()
+ const { left: toX, width } = link.getBoundingClientRect()
+
+ this.setStyle({
+ left: toX - parentX,
+ width,
+ transition: "none"
+ })
+ }
+
+ shift({from, to}) {
+ const _this = this
+ const parentX = this.parentX()
+ const { left: fromX, width: fromWidth } = from.getBoundingClientRect()
+ const { left: toX, width: toWidth } = to.getBoundingClientRect()
+
+ const initialStyle = {
+ left: fromX - parentX,
+ width: fromWidth,
+ }
+
+ const transitionedStyle = {
+ left: toX - parentX,
+ width: toWidth,
+ }
+
+ this.setStyle(initialStyle, () => {
+ setTimeout(() => _this.setStyle(transitionedStyle), 0)
+ })
+ }
+
+ parentX() {
+ return this.underline.parentElement.getBoundingClientRect().left
+ }
+}
\ No newline at end of file
diff --git a/src/components/PostList/index.jsx b/src/components/PostList/index.jsx
deleted file mode 100644
index b450260..0000000
--- a/src/components/PostList/index.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import Layout from '../Layout'
-import PostListItem from '../PostListItem'
-import './style.scss'
-
-class PostList extends React.Component {
- render() {
- const items = []
- const { pageTitle, listTitle } = this.props
- const posts = this.props.data.allMarkdownRemark.edges
- posts.forEach(post => {
- items.push(
-
- )
- }
-}
-
-export default PostList
\ No newline at end of file
diff --git a/src/components/PostList/style.scss b/src/components/PostList/style.scss
deleted file mode 100644
index b203cc0..0000000
--- a/src/components/PostList/style.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
-
-.posts {
- padding-right: $page-base-padding-left;
- padding-left: $page-base-padding-right;
-
- &__title {
- @include margin-top(0.5);
- font-size: $typographic-base-font-size * 2.5;
- font-weight: 500;
- @include margin-bottom(0);
- text-align: center;
- }
-}
-
-@include breakpoint-sm {
- .posts {
- padding-left: $page-sm-padding-left;
- padding-right: 5%;
- }
-}
-
-@include breakpoint-md {
- .posts {
- padding-left: $page-md-padding-left;
- padding-top: $page-md-padding-top;
- padding-right: 10%;
- }
-}
\ No newline at end of file
diff --git a/src/components/PostListHeader/index.jsx b/src/components/PostListHeader/index.jsx
new file mode 100644
index 0000000..666294e
--- /dev/null
+++ b/src/components/PostListHeader/index.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import NavMenu from '../NavMenu'
+import { CategoryLinks } from '../../consts/menuLinks'
+import './style.scss'
+
+
+class PostListHeader extends React.Component {
+ render() {
+ return (
+
+
+ )
- tags = [
- ,
- tags
- ]
- }
+ const time = (
+
+
+
+ )
+
+ const detailsHeader = (
+
+
+ )
return (
-
-
-
-
- {title}
-
-
-
-
+ {yearHeader}
+ {time}
+ {details}
)
}
diff --git a/src/components/PostListItem/style.scss b/src/components/PostListItem/style.scss
index 876f54e..96161b7 100644
--- a/src/components/PostListItem/style.scss
+++ b/src/components/PostListItem/style.scss
@@ -1,38 +1,132 @@
@import "../../assets/scss/variables";
@import "../../assets/scss/mixins";
+$border-styling: dashed 1px $color-gray-border;
+
.post-item {
- &:last-child {
- @include margin-bottom(2.5);
+ &:not(:nth-child(2)) {
+ margin-top: 1rem;
}
- & time {
+ &__year {
+ display: none;
+ }
+ &__time {
@include line-height(1.5);
font-size: $typographic-small-font-size;
float: right;
+
+ .nonmobile {
+ display: none;
+ }
+
+ .month {
+ margin-right: 0.1rem;
+ margin-left: 0.3rem;
+ }
}
- & header {
- font-size: $typographic-base-font-size * 1.3;
- margin-top: 1rem;
- max-width: 70%;
- }
- & footer {
- font-size: $typographic-small-font-size;
- max-width: 75%;
- word-break: break-all;
- & .divider {
- margin-right: 0.8125rem;
- margin-left: 0.8125rem;
- border-left: 0.075rem solid $color-gray-border;
+ &__details {
+ &-header {
+ font-size: $typographic-base-font-size * 1.3;
+ max-width: 70%;
}
- & .tagDivider {
- margin-right: 0.3125rem;
- margin-left: 0.3125rem;
+ &-footer {
+ font-size: $typographic-small-font-size;
+ list-style: none;
+ max-width: 75%;
+
+ margin: 0;
+ padding: 0;
+ &>* {
+ display: inline;
+ margin: 0;
+ padding: 0;
+ }
+
+ &-tags-divider {
+ border-left: 1px solid $color-gray-border;
+ height: 1rem;
+ margin-right: 0.8125rem;
+ margin-left: 0.8125rem;
+ align-self: center;
+ }
+
+ &-tags-item:not(:last-child)::after {
+ content: " \00B7";
+ margin-right: 0.3125rem;
+ margin-left: 0.1125rem;
+ }
}
}
+ &:last-child {
+ @include margin-bottom(2.5);
+ }
}
@include breakpoint-sm {
.post-item {
+ display: flex;
+ justify-content: flex-start;
+
+ &__year {
+ display: inline-block;
+ width: 3rem;
+ min-width: 3rem;
+ margin-right: 2rem;
+ margin-top: 0;
+
+ font-size: $typographic-base-font-size * 1.5;
+ color: gray;
+ font-weight: 300;
+ padding-top: 1rem;
+
+ @include enabled {
+ border-top: $border-styling;
+ }
+ }
+
+ &__time {
+ margin-right: 3rem;
+ font-size: $typographic-base-font-size * 1.1;
+ padding-top: 1.1rem;
+ color: gray;
+
+ @include enabled {
+ border-top: $border-styling;
+ }
+
+ .month {
+ margin-right: 0.3rem;
+ margin-left: unset;
+ }
+
+ .nonmobile {
+ display: unset;
+ }
+ .year {
+ display: none;
+ }
+ .mobile {
+ display: none;
+ }
+ }
+
+ &__details {
+ padding-top: 1rem;
+
+ @include enabled {
+ border-top: $border-styling;
+ }
+
+ &-header {
+ margin-bottom: 0.2rem;
+ font-size: $typographic-base-font-size * 1.4;
+ max-width: unset;
+ }
+ &-footer {
+ max-width: unset;
+ }
+ }
+
&:last-child {
@include margin-bottom(3.5);
}
diff --git a/src/components/ProfileImg/index.jsx b/src/components/ProfileImg/index.jsx
index 8616352..28d2deb 100644
--- a/src/components/ProfileImg/index.jsx
+++ b/src/components/ProfileImg/index.jsx
@@ -1,34 +1,194 @@
import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
+import './style.scss'
+
+export const squareImage = graphql`
+ fragment squareImage on File {
+ childImageSharp {
+ fluid(maxWidth: 145, maxHeight: 145, quality: 100) {
+ ...GatsbyImageSharpFluid_noBase64
+ }
+ }
+ }
+`
class ProfileImg extends React.Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ backWidth: 0,
+ isMouseUp: true
+ }
+ this.toggleMouse = this.toggleMouse.bind(this)
+ this.setMouseUp = this.setMouseUp.bind(this)
+ this.setMouseDown = this.setMouseDown.bind(this)
+ }
+
+ setBackWidth(newWidth) {
+ this.setState({
+ backWidth: newWidth
+ })
+ }
+
+ setMouseUp(event) {
+ this.toggleMouse(event, true)
+ }
+
+ setMouseDown(event) {
+ this.toggleMouse(event, false)
+ }
+
+ toggleMouse(event, isMouseUp) {
+ const isLeftClick = event.which == 1
+ if (isLeftClick) {
+ this.setState({isMouseUp})
+ }
+ }
+
+
render() {
- const { id, className, author } = this.props
return (
(
-
-
+
+
+ )
+ }
+
+ componentDidMount() {
+ window.addEventListener('scroll', this.handleScroll);
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('scroll', this.handleScroll);
+ }
+
+ handleScroll(event) {
+ const scrollY = window.scrollY
+
+ const isScrollUp = this.lastScrollY && this.lastScrollY > scrollY
+ this.lastScrollY = scrollY
+ const isFastScrollUp = this.calcScrollUpRate(event.timeStamp, scrollY, isScrollUp)
+
+ const isInTopOfPage = scrollY <= window.innerHeight
+ const isEnabled = isInTopOfPage || isFastScrollUp || (this.state.isEnabled && isScrollUp)
+
+ if (isEnabled != this.state.isEnabled) {
+ this.setState({isEnabled})
+ }
+ }
+
+ calcScrollUpRate(eventTime, scrollY, isScrollUp) {
+
+ const maxEventTimeGap = 100
+
+ if (isScrollUp) {
+ if (this.scrollUpRate.firstScrollY &&
+ maxEventTimeGap > eventTime - this.scrollUpRate.lastEventTime) {
+ this.scrollUpRate.lastEventTime = eventTime
+ } else {
+ this.scrollUpRate = {
+ firstEventTime: eventTime,
+ lastEventTime: eventTime,
+ firstScrollY: scrollY
+ }
+ }
+
+ const pixels = this.scrollUpRate.firstScrollY - scrollY
+ const millis = this.scrollUpRate.lastEventTime - this.scrollUpRate.firstEventTime
+
+ return pixels > 50 && (millis / pixels) < 10
+ } else {
+ this.scrollUpRate = {
+ firstEventTime: null,
+ lastEventTime: null,
+ firstScrollY: null
+ }
+ return false
+ }
+ }
+
+ renderProfileImg(author) {
+ return (
+
+
+
+ )
+ }
+
+ renderAuthorTitle(author, subtitle) {
+ return (
+
+
+ {author.name}
+
+
+ )
+ }
+
+ renderMenu() {
+ return (
+
+
+ )
+ }
+
+ renderContact(author) {
+ return (
+
+
+
+ )
+ }
+
+ renderMenuButton() {
+ let isEnabled = this.valueByMode(false, true, false)
+ let newMode
+ if (isEnabled) {
+ newMode = SidebarMode.Main
+ } else {
+ newMode = SidebarMode.Menu
+ }
+
+ return (
+
+
+
+ )
+ }
+
+ renderContactButton() {
+ let isEnabled = this.valueByMode(false, false, true)
+ let newMode
+ if (isEnabled) {
+ newMode = SidebarMode.Main
+ } else {
+ newMode = SidebarMode.Contact
+ }
+
+ return (
+
+
+
+ )
+ }
+
+ valueByMode(mainMode, menuMode, contactMode) {
+ switch(this.state.mode) {
+ case SidebarMode.Main:
+ return mainMode
+ case SidebarMode.Menu:
+ return menuMode
+ case SidebarMode.Contact:
+ return contactMode
+ }
}
}
-export default Sidebar
+export default Sidebar
\ No newline at end of file
diff --git a/src/components/Sidebar/style.scss b/src/components/Sidebar/style.scss
index 9ce6529..93168c1 100644
--- a/src/components/Sidebar/style.scss
+++ b/src/components/Sidebar/style.scss
@@ -9,9 +9,19 @@ $transition-timing: 0.2s;
.sidebar {
width: 100%;
- position: relative;
border-bottom: 1px solid #E7E7E7;
display: inline-block;
+
+ position: fixed;
+ background-color: $color-white;
+ transition: transform 0.5s ease-out;
+ z-index: 1;
+ height: $topbar-height;
+ top: 0;
+
+ @include disabled {
+ transform: translateY(-$topbar-height - 10);
+ }
&__author {
&-img {
@@ -21,12 +31,12 @@ $transition-timing: 0.2s;
position: absolute;
left: 32%;
transform: translate(0, $top-padding - 2px);
-
- &-enabled {
+
+ @include enabled {
transition: opacity $transition-timing ease-in;
opacity: 1;
}
- &-disabled {
+ @include disabled {
opacity: 0;
}
}
@@ -38,11 +48,11 @@ $transition-timing: 0.2s;
font-size: $typographic-base-font-size * 1;
font-weight: 500;
- &-enabled {
+ @include enabled {
transition: opacity $transition-timing ease-in;
opacity: 1;
}
- &-disabled {
+ @include disabled {
opacity: 0;
}
}
@@ -59,14 +69,14 @@ $transition-timing: 0.2s;
padding-top: $top-padding;
padding-bottom: $bottom-padding;
- &-enabled {
+ @include enabled {
transition:
width $transition-timing ease-out,
opacity $transition-timing cubic-bezier(0,0,1,0);
opacity: 1;
width: 100vw;
}
- &-disabled {
+ @include disabled {
transition:
width $transition-timing ease-out,
opacity $transition-timing / 2 cubic-bezier(0,1,1,1);
@@ -88,7 +98,7 @@ $transition-timing: 0.2s;
border-right: 1px solid #E7E7E7;
outline: none;
- &-enabled {
+ @include enabled {
color: $color-primary;
}
}
@@ -119,7 +129,7 @@ $transition-timing: 0.2s;
bottom: 0;
height: 2px;
z-index: 0;
- transition: transform $transition-timing ease-out;
+ transition: left $transition-timing ease-out;
}
}
@@ -134,14 +144,14 @@ $transition-timing: 0.2s;
font-size: $typographic-base-font-size * 0.9;
transform: translate(0, 1px);
- &-enabled {
+ @include enabled {
transition:
width $transition-timing ease-out,
opacity $transition-timing cubic-bezier(0,0,1,0);
opacity: 1;
width: 80vw;
}
- &-disabled {
+ @include disabled {
transition:
width $transition-timing ease-out,
opacity $transition-timing / 2 cubic-bezier(0,1,1,1);
@@ -163,7 +173,7 @@ $transition-timing: 0.2s;
border-left: 1px solid #E7E7E7;
outline: none;
- &-enabled {
+ @include enabled {
color: $color-primary;
}
}
@@ -180,6 +190,17 @@ $transition-timing: 0.2s;
display: unset;
text-align: center;
+ position: relative;
+ background-color: unset;
+ transition: unset;
+ z-index: unset;
+ height: unset;
+ top: unset;
+
+ @include disabled {
+ transform: unset;
+ }
+
&__author {
&-img {
display: block;
@@ -193,7 +214,7 @@ $transition-timing: 0.2s;
position: unset;
left: unset;
transform: unset;
- &-disabled {
+ @include disabled {
opacity: unset;
}
}
@@ -202,7 +223,7 @@ $transition-timing: 0.2s;
position: unset;
left: unset;
transform: unset;
- &-disabled {
+ @include disabled {
opacity: unset;
}
}
@@ -215,7 +236,7 @@ $transition-timing: 0.2s;
&__menu {
overflow: unset;
- position: unset;
+ position: relative;
z-index: unset;
padding-top: unset;
padding-bottom: unset;
@@ -223,7 +244,7 @@ $transition-timing: 0.2s;
&-button {
display: none;
}
- &-disabled {
+ @include disabled {
opacity: unset;
width: unset;
}
@@ -242,6 +263,7 @@ $transition-timing: 0.2s;
&-underline {
margin-bottom: -4px;
height: 2px;
+ position: absolute;
}
}
@@ -257,7 +279,7 @@ $transition-timing: 0.2s;
&-button {
display: none;
}
- &-disabled {
+ @include disabled {
opacity: unset;
width: unset;
}
@@ -269,7 +291,7 @@ $transition-timing: 0.2s;
position: absolute;
content: "";
width: 1px;
- height: 540px;
+ height: 70vh;
top: 30px;
right: -10px;
bottom: 0;
@@ -297,3 +319,20 @@ $transition-timing: 0.2s;
}
}
}
+@include breakpoint-lg {
+ .sidebar {
+ lost-column: 1/5;
+ &:after {
+ right: -35px;
+ }
+ }
+}
+
+@include breakpoint-xlg {
+ .sidebar {
+ lost-column: 1/6;
+ &:after {
+ right: -70px;
+ }
+ }
+}
diff --git a/src/components/Toggle/index.jsx b/src/components/Toggle/index.jsx
new file mode 100644
index 0000000..d9a5f2a
--- /dev/null
+++ b/src/components/Toggle/index.jsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+class Toggle extends React.Component {
+
+ render() {
+ return (
+
-
- )
- }
-}
-
-export default CategoriesRoute
-
-export const pageQuery = graphql`
- query CategoryesQuery {
- allMarkdownRemark(
- limit: 2000
- filter: { frontmatter: { layout: { eq: "post" }, draft: { ne: true } } }
- ) {
- group(field: frontmatter___category) {
- fieldValue
- totalCount
- }
- }
- }
-`
diff --git a/src/pages/blog/categories/style.scss b/src/pages/blog/categories/style.scss
deleted file mode 100644
index 307f2f7..0000000
--- a/src/pages/blog/categories/style.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
-
-.categories {
- max-width: $max-page-width;
- padding-left: $page-base-padding-left;
- padding-right: $page-base-padding-right;
- @include margin-top($page-base-margin-top);
-
- &__title {
- font-size: $typographic-base-font-size * 1.2;
- font-weight: 550;
- margin: 0;
- @include line-height(1.3);
- @include margin-bottom(0.15);
- }
-
- &__list {
- &-item {
- &-link {
- color: $color-base;
- &:hover,
- &:focus {
- color: $color-primary;
- border-bottom: 1px solid $color-primary;
- }
- }
- }
- }
-}
-
-@include breakpoint-sm {
- .categories {
- padding-left: $page-sm-padding-left;
- &__title {
- font-size: $typographic-base-font-size * 1.4;
- }
- }
-}
-
-@include breakpoint-md {
- .categories {
- padding-left: $page-md-padding-left;
- padding-top: $page-md-padding-top;
- }
-}
\ No newline at end of file
diff --git a/src/pages/blog/index.jsx b/src/pages/blog/index.jsx
deleted file mode 100644
index efc6ec5..0000000
--- a/src/pages/blog/index.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react'
-import { graphql } from 'gatsby'
-import PostList from '../../components/PostList';
-
-class Blog extends React.Component {
- render() {
- return (
-
-
- )
- }
-}
-
-export default TagsRoute
-
-export const pageQuery = graphql`
- query TagsQuery {
- allMarkdownRemark(
- limit: 2000
- filter: { frontmatter: { layout: { eq: "post" }, draft: { ne: true } } }
- ) {
- group(field: frontmatter___tags) {
- fieldValue
- totalCount
- }
- }
- }
-`
diff --git a/src/pages/blog/tags/style.scss b/src/pages/blog/tags/style.scss
deleted file mode 100644
index 414974a..0000000
--- a/src/pages/blog/tags/style.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
-
-.tags {
- max-width: $max-page-width;
- padding-left: $page-base-padding-left;
- padding-right: $page-base-padding-right;
- @include margin-top($page-base-margin-top);
-
- &__title {
- font-size: $typographic-base-font-size * 1.2;
- font-weight: 550;
- margin: 0;
- @include line-height(1.3);
- @include margin-bottom(0.15);
- }
-
- &__list {
- &-item {
- &-link {
- color: $color-base;
- &:hover,
- &:focus {
- color: $color-primary;
- border-bottom: 1px solid $color-primary;
- }
- }
- }
- }
-}
-
-@include breakpoint-sm {
- .tags {
- padding-left: $page-sm-padding-left;
- &__title {
- font-size: $typographic-base-font-size * 1.4;
- }
- }
-}
-
-@include breakpoint-md {
- .tags {
- padding-left: $page-md-padding-left;
- padding-top: $page-md-padding-top;
- }
-}
\ No newline at end of file
diff --git a/src/posts/2016-01-09---Perfecting-the-Art-of-Perfection/index.md b/src/posts/2016-01-09---Perfecting-the-Art-of-Perfection/index.md
index 947c950..fcd6a05 100644
--- a/src/posts/2016-01-09---Perfecting-the-Art-of-Perfection/index.md
+++ b/src/posts/2016-01-09---Perfecting-the-Art-of-Perfection/index.md
@@ -4,7 +4,7 @@ date: "2016-09-01T23:46:37.121Z"
layout: post
draft: false
path: "perfecting-the-art-of-perfection"
-category: "Design Inspiration"
+category: "software"
tags:
- "Handwriting"
- "Learning to write"
diff --git a/src/posts/2016-01-12---The-Origins-of-Social-Stationery-Lettering/index.md b/src/posts/2016-01-12---The-Origins-of-Social-Stationery-Lettering/index.md
index c02a9c1..3e2a18a 100644
--- a/src/posts/2016-01-12---The-Origins-of-Social-Stationery-Lettering/index.md
+++ b/src/posts/2016-01-12---The-Origins-of-Social-Stationery-Lettering/index.md
@@ -4,7 +4,7 @@ date: "2016-12-01T22:40:32.169Z"
layout: post
draft: false
path: "the-origins-of-social-stationery-lettering"
-category: "Design Culture"
+category: "software"
tags:
- "Typefaces"
- "Lettering"
diff --git a/src/posts/2016-02-02---A-Brief-History-of-Typography/index.md b/src/posts/2016-02-02---A-Brief-History-of-Typography/index.md
index 9678e88..0ab3b61 100644
--- a/src/posts/2016-02-02---A-Brief-History-of-Typography/index.md
+++ b/src/posts/2016-02-02---A-Brief-History-of-Typography/index.md
@@ -4,7 +4,7 @@ date: "2016-02-02T22:40:32.169Z"
layout: post
draft: false
path: "a-brief-history-of-typography"
-category: "Design Inspiration"
+category: "software"
tags:
- "Linotype"
- "Monotype"
diff --git a/src/posts/2017-18-08---The-Birth-of-Movable-Type/index.md b/src/posts/2017-18-08---The-Birth-of-Movable-Type/index.md
index d0c034f..ded493e 100644
--- a/src/posts/2017-18-08---The-Birth-of-Movable-Type/index.md
+++ b/src/posts/2017-18-08---The-Birth-of-Movable-Type/index.md
@@ -4,7 +4,7 @@ date: "2017-08-18T22:12:03.284Z"
layout: post
draft: false
path: "the-birth-of-movable-type"
-category: "Typography"
+category: "software"
tags:
- "Open source"
- "Gatsby"
diff --git a/src/posts/2017-19-08---Humane-Typography-in-the-Digital-Age/index.md b/src/posts/2017-19-08---Humane-Typography-in-the-Digital-Age/index.md
index 96c217a..6f43fcd 100644
--- a/src/posts/2017-19-08---Humane-Typography-in-the-Digital-Age/index.md
+++ b/src/posts/2017-19-08---Humane-Typography-in-the-Digital-Age/index.md
@@ -4,7 +4,7 @@ date: "2017-08-19T22:40:32.169Z"
layout: post
draft: false
path: "humane-typography-in-the-digital-age"
-category: "Typography"
+category: "software"
tags:
- "Design"
- "Typography"
diff --git a/src/posts/2018-10-18---Upgraded-to-Gatsby-v2/index.md b/src/posts/2018-10-18---Upgraded-to-Gatsby-v2/index.md
index 83e4604..6473ea4 100644
--- a/src/posts/2018-10-18---Upgraded-to-Gatsby-v2/index.md
+++ b/src/posts/2018-10-18---Upgraded-to-Gatsby-v2/index.md
@@ -4,7 +4,7 @@ date: "2018-10-18T16:51:00.000Z"
layout: post
draft: false
path: "upgraded-to-gatsby-v2"
-category: "Gatsby"
+category: "software"
tags:
- "Gatsby"
- "Web Development"
diff --git a/src/posts/dummy1/index.md b/src/posts/dummy1/index.md
index edbbe37..44d6ec9 100644
--- a/src/posts/dummy1/index.md
+++ b/src/posts/dummy1/index.md
@@ -4,6 +4,7 @@ date: "2000-06-13T16:51:00.000Z"
layout: post
draft: false
path: "dummy1"
+category: "software"
description: "Dummy 1"
---
diff --git a/src/posts/dummy2/index.md b/src/posts/dummy2/index.md
index aebfe26..7f10001 100644
--- a/src/posts/dummy2/index.md
+++ b/src/posts/dummy2/index.md
@@ -4,6 +4,7 @@ date: "2000-06-14T16:51:00.000Z"
layout: post
draft: false
path: "dummy2"
+category: "software"
description: "Dummy 2"
---
diff --git a/src/posts/test-code/index.md b/src/posts/test-code/index.md
index ee1f0b9..fa2aac9 100644
--- a/src/posts/test-code/index.md
+++ b/src/posts/test-code/index.md
@@ -4,6 +4,7 @@ date: "2000-06-12T16:51:00.000Z"
layout: post
draft: false
path: "test-code"
+category: "software"
description: "Test code"
---
diff --git a/src/templates/CategoryTemplate/index.jsx b/src/templates/CategoryTemplate/index.jsx
deleted file mode 100644
index e7f073f..0000000
--- a/src/templates/CategoryTemplate/index.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react'
-import { graphql } from 'gatsby'
-import PostList from '../../components/PostList';
-
-class CategoryTemplate extends React.Component {
- render() {
- const { category } = this.props.pageContext
-
- return (
-
+
-
-
-
- {listTitle}
- {items} -
+
+ )
+ }
+}
+
+export default PostListHeader
\ No newline at end of file
diff --git a/src/components/PostListHeader/style.scss b/src/components/PostListHeader/style.scss
new file mode 100644
index 0000000..518556f
--- /dev/null
+++ b/src/components/PostListHeader/style.scss
@@ -0,0 +1,90 @@
+@import "../../assets/scss/variables";
+@import "../../assets/scss/mixins";
+
+.posts-header {
+ box-shadow: 0px 3px 6px -2px rgba(0,0,0,0.16);
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+ width: 90%;
+ margin: auto;
+ margin-bottom: 1.5rem;
+ margin-top: 2px;
+
+ &__menu {
+ position: relative;
+
+ &-list {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ margin-bottom: 5px;
+
+ &-item {
+ padding-bottom: 5px;
+ text-align: center;
+ margin-bottom: 0;
+ margin-right: 0.2rem;
+ margin-left: 0.2rem;
+ &-link {
+ font-size: $typographic-base-font-size * 0.8;
+ color: $typographic-base-font-color;
+ font-weight: 400;
+ border: 0;
+
+ &>.left {
+ display: none;
+ }
+
+ &:hover,
+ &:focus {
+ color: $typographic-base-font-color;
+ }
+ }
+ }
+ }
+
+ &-underline {
+ background: gray;
+ display: block;
+ position: absolute;
+ width: 0;
+ bottom: 0;
+ height: 2px;
+ z-index: 0;
+ transition:
+ left 0.3s ease-out,
+ width 0.15s ease-out;
+ }
+ }
+}
+
+@include breakpoint-sm {
+ .posts-header {
+ width: 80%;
+ margin-top: 10px;
+
+ &__menu {
+ &-list {
+ &-item {
+ margin-right: 2rem;
+ margin-left: 2rem;
+ padding-bottom: 7px;
+ &-link {
+ font-size: $typographic-base-font-size;
+
+ &>.left {
+ display: unset;
+ }
+ &>.right {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/src/components/PostListItem/index.jsx b/src/components/PostListItem/index.jsx
index 0dc03d4..ab70b51 100644
--- a/src/components/PostListItem/index.jsx
+++ b/src/components/PostListItem/index.jsx
@@ -1,64 +1,78 @@
import React from 'react'
import { Link } from 'gatsby'
import moment from 'moment'
+import Toggle from '../Toggle'
import './style.scss'
class PostListItem extends React.Component {
render() {
- const {
- title,
- date,
- category,
- description,
- } = this.props.data.node.frontmatter
- const { slug, tagSlugs } = this.props.data.node.fields
-
- const readingTime =
- {this.props.data.node.fields.readingTime.text}
-
+ const { showYear } = this.props
+ const { title, date, tags } = this.props.data.node.frontmatter
+ const { slug } = this.props.data.node.fields
- var tags = this.props.data.node.frontmatter.tags
- if (tags != null) {
- let tagToSlug = tags.map(function(e, i) {
- return {
- label: e,
- slug: tagSlugs[i]
- }
- });
+ const itemDate = moment(date)
- tags = tagToSlug.map (tag => (
- [
-
- {tag.label}
-
- ,
- ·]
- ))
-
- tags = [].concat(...tags).slice(0, -1)
+ const yearHeader = (
+ + {(showYear) ? itemDate.format('YYYY') : " "} +
+
+
+ {title}
+
+
+ )
+
+ const detailsFooter = (
+ -
+
- + {this.props.data.node.fields.readingTime.text} + + {tags && } + {tags && tags.map(tag => ( +
- + {tag} + + ))} +
+ {detailsHeader}
+ {detailsFooter}
+
+
- ![{author}]( "{author}")
-
- )}
+ render={data => this.renderWithQueryData(data)}
/>)
}
+
+ renderWithQueryData(data) {
+ const { className, author } = this.props
+ const _this = this
+
+ function setupMove(div, eventType, extractCoordinates) {
+ if (div) {
+ div.addEventListener(eventType, (event) => {
+ const container = div.parentElement
+ const { x } = extractCoordinates(event)
+ const { left } = container.getBoundingClientRect()
+ const newWidth = x - left
+ _this.setBackWidth(Math.max(newWidth, 0))
+ }, {once: true})
+ }
+ }
+
+ function addToggleMouseListener(target, type, listener) {
+ target.removeEventListener(type, listener)
+ target.addEventListener(type, listener)
+ }
+
+ function setupMouseUp(div) {
+ if (div && !_this.state.isMouseUp) {
+ addToggleMouseListener(div, 'mouseup', _this.setMouseUp)
+ }
+ }
+
+ function setupMouseMove(div) {
+ if (div) {
+ const toggleEvent = (_this.state.isMouseUp) ? 'mousedown' : 'mouseup'
+ const toggleAction = (_this.state.isMouseUp) ? _this.setMouseDown : _this.setMouseUp
+ addToggleMouseListener(div, toggleEvent,toggleAction)
+ }
+
+ if (!_this.state.isMouseUp) {
+ setupMove(div, 'mousemove', (event) => {
+ const { clientX: x, clientY: y } = event
+ return {x, y}
+ })
+ }
+ }
+
+ function setupTouchMove(div) {
+ setupMove(div, 'touchmove', (event) => {
+ const { clientX: x, clientY: y } = event.changedTouches[0]
+ return {x, y}
+ })
+ }
+
+ return (
+
+
+ )
+ }
}
export default ProfileImg
\ No newline at end of file
diff --git a/src/components/ProfileImg/style.scss b/src/components/ProfileImg/style.scss
new file mode 100644
index 0000000..7f4e601
--- /dev/null
+++ b/src/components/ProfileImg/style.scss
@@ -0,0 +1,25 @@
+@import "../../assets/scss/variables";
+@import "../../assets/scss/mixins";
+
+.profile-img {
+ &-mousemove {
+ display: none;
+ }
+ &-mouseup {
+ display: none;
+ }
+}
+
+@include breakpoint-sm {
+ .profile-img {
+ &-mousemove {
+ display: unset;
+ }
+ &-mouseup {
+ display: unset;
+ }
+ &-touchmove {
+ display: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx
index 4c41cb6..8f17b20 100644
--- a/src/components/Sidebar/index.jsx
+++ b/src/components/Sidebar/index.jsx
@@ -1,26 +1,44 @@
import React from 'react'
-import { Link, StaticQuery, graphql } from "gatsby"
+import { StaticQuery, graphql } from "gatsby"
import Links from '../Links'
import ProfileImg from '../ProfileImg'
+import NavMenu from '../NavMenu'
+import { GlobalLinks } from '../../consts/menuLinks'
+import Toggle from '../Toggle'
+import globalState from '../GlobalState'
import './style.scss'
-const menuList = [
- {
- label: "Home",
- path: "/"
- },
- {
- label: "Blog",
- path: "/blog"
- },
- {
- label: "About",
- path: "/about"
- },
-]
+const SidebarMode = Object.freeze({
+ Main: "main",
+ Menu: "menu",
+ Contact: "contact"
+})
class Sidebar extends React.Component {
+ constructor(props) {
+ super(props)
+
+ if (!globalState.sidebar.mode) {
+ globalState.sidebar.mode = SidebarMode.Main
+ }
+ this.state = { isEnabled: true, mode: globalState.sidebar.mode }
+ this.lastScrollY = null
+ this.scrollUpRate = {
+ firstEventTime: null,
+ lastEventTime: null,
+ firstScrollY: null
+ }
+
+ this.handleScroll = this.handleScroll.bind(this)
+ this.calcScrollUpRate = this.calcScrollUpRate.bind(this)
+ }
+
+ changeMode(newMode) {
+ this.setState({mode: newMode})
+ globalState.sidebar.mode = newMode
+ }
+
render() {
return (
+
+
+
+ ![{author}]( "{author}")
+ ![{author}]( "{author}")
+
+ -
- {menuList.map(item => (
-
- - - {item.label} - - - ))} -
+ {subtitle} +
+
+ {this.props.children}
+
+ )
+ }
+}
+
+export default Toggle
\ No newline at end of file
diff --git a/src/consts/menuLinks.jsx b/src/consts/menuLinks.jsx
new file mode 100644
index 0000000..eb067a1
--- /dev/null
+++ b/src/consts/menuLinks.jsx
@@ -0,0 +1,20 @@
+class MenuLink {
+ constructor(id, label, path, icon) {
+ this.id = id
+ this.label = label
+ this.path = path
+ this.icon = icon
+ }
+}
+
+module.exports.GlobalLinks = Object.freeze({
+ Home: new MenuLink("home", "Home", "/"),
+ Blog: new MenuLink("blog", "Blog", "/blog"),
+ About: new MenuLink("about", "About", "/about"),
+})
+
+module.exports.CategoryLinks = Object.freeze({
+ Software: new MenuLink("software", "Software", "/blog/software", "icon-cd"),
+ Entertainment: new MenuLink("entertainment", "Entertainment", "/blog/entertainment", "icon-gamepad"),
+ Social: new MenuLink("social", "Social", "/blog/social", "icon-group"),
+})
\ No newline at end of file
diff --git a/src/pages/about/index.md b/src/pages/about/index.md
index e65c035..c28bc0f 100644
--- a/src/pages/about/index.md
+++ b/src/pages/about/index.md
@@ -2,6 +2,7 @@
title: "About me"
layout: page
path: "/about"
+globalLinkId: "about"
---
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
diff --git a/src/pages/blog/categories/index.jsx b/src/pages/blog/categories/index.jsx
deleted file mode 100644
index 452d380..0000000
--- a/src/pages/blog/categories/index.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import kebabCase from 'lodash/kebabCase'
-import React from 'react'
-import { Link, graphql } from 'gatsby'
-import Layout from '../../../components/Layout'
-import './style.scss'
-
-class CategoriesRoute extends React.Component {
- render() {
- const categories = this.props.data.allMarkdownRemark.group
-
- return (
-
-
- Categories
--
- {categories.map(category => (
-
- - - {category.fieldValue} ({category.totalCount}) - - - ))} -
-
- Tags
--
- {tags.map(tag => (
-
- - - {tag.fieldValue} ({tag.totalCount}) - - - ))} -
{title}
{
+ const year = moment(post.node.frontmatter.date).year()
+ const showYear = !years.has(year)
+ years.add(year)
+
+ const item = (
+
+
+ )
+ }
+}
+
+export default PostListTemplate
+
+export const pageQuery = graphql`
+ query PostListTemplateQuery($categoryId: String) {
+ allMarkdownRemark(
+ limit: 1000
+ filter: {
+ frontmatter: {
+ category: { eq: $categoryId }
+ layout: { eq: "post" }
+ draft: { ne: true }
+ }
+ }
+ sort: { order: DESC, fields: [frontmatter___date] }
+ ) {
+ edges {
+ node {
+ fields {
+ slug
+ readingTime {
+ text
+ }
+ }
+ frontmatter {
+ title
+ date
+ tags
+ }
+ }
+ }
+ }
+ }
+`
diff --git a/src/templates/PostListTemplate/style.scss b/src/templates/PostListTemplate/style.scss
new file mode 100644
index 0000000..8af323b
--- /dev/null
+++ b/src/templates/PostListTemplate/style.scss
@@ -0,0 +1,22 @@
+@import "../../assets/scss/variables";
+@import "../../assets/scss/mixins";
+
+.posts {
+ margin-right: $page-base-padding-left;
+ margin-left: $page-base-padding-right;
+}
+
+@include breakpoint-sm {
+ .posts {
+ margin-left: $page-sm-padding-left;
+ margin-right: 5%;
+ }
+
+}
+
+@include breakpoint-md {
+ .posts {
+ margin-left: $page-md-padding-left;
+ margin-right: 10%;
+ }
+}
\ No newline at end of file
diff --git a/src/templates/PostTemplate/index.jsx b/src/templates/PostTemplate/index.jsx
index 5802ab0..42c468b 100644
--- a/src/templates/PostTemplate/index.jsx
+++ b/src/templates/PostTemplate/index.jsx
@@ -3,14 +3,14 @@ import { Link, graphql } from 'gatsby'
import moment from 'moment'
import { Utterences } from '../../components/Utterances'
import Layout from '../../components/Layout'
+import { GlobalLinks } from '../../consts/menuLinks'
import './style.scss'
class PostTemplate extends React.Component {
render() {
const { utterances } = this.props.data.site.siteMetadata
const post = this.props.data.markdownRemark
- const { title } = post.frontmatter
- const tags = post.fields.tagSlugs
+ const { title, tags } = post.frontmatter
const readingTime = post.fields.readingTime.text
const titleBlock = (
@@ -33,11 +33,9 @@ class PostTemplate extends React.Component {
+
+
+ {items}
+
+ -
{tags &&
- tags.map((tag, i) => (
+ tags.map(tag => (
- - - {post.frontmatter.tags[i]} - + {tag} ))}
{header}
{body}
@@ -103,7 +101,6 @@ export const pageQuery = graphql`
html
fields {
slug
- tagSlugs
readingTime {
text
}
diff --git a/src/templates/PostTemplate/style.scss b/src/templates/PostTemplate/style.scss
index babd795..abd1100 100644
--- a/src/templates/PostTemplate/style.scss
+++ b/src/templates/PostTemplate/style.scss
@@ -2,11 +2,12 @@
@import "../../assets/scss/mixins";
.post-single {
- max-width: $max-page-width;
- padding-left: $page-base-padding-left;
- padding-right: $page-base-padding-right;
+ max-width: $max-content-width;
@include margin-top($page-base-margin-top);
+ padding-right: $page-base-padding-left;
+ padding-left: $page-base-padding-right;
+
&__header {
@include line-height(1);
}
@@ -120,4 +121,4 @@
}
}
}
-}
+}
\ No newline at end of file
diff --git a/src/templates/TagTemplate/index.jsx b/src/templates/TagTemplate/index.jsx
deleted file mode 100644
index e77e502..0000000
--- a/src/templates/TagTemplate/index.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react'
-import { graphql } from 'gatsby'
-import PostList from '../../components/PostList';
-
-class TagTemplate extends React.Component {
- render() {
- const { tag } = this.props.pageContext
-
- return (
-