diff --git a/_src/_assets/fonts/Google Android License.txt b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/Google Android License.txt similarity index 100% rename from _src/_assets/fonts/Google Android License.txt rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/Google Android License.txt diff --git a/_src/_assets/fonts/Roboto-Regular-webfont.eot b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.eot similarity index 100% rename from _src/_assets/fonts/Roboto-Regular-webfont.eot rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.eot diff --git a/_src/_assets/fonts/Roboto-Regular-webfont.svg b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.svg similarity index 100% rename from _src/_assets/fonts/Roboto-Regular-webfont.svg rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.svg diff --git a/_src/_assets/fonts/Roboto-Regular-webfont.ttf b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.ttf similarity index 100% rename from _src/_assets/fonts/Roboto-Regular-webfont.ttf rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.ttf diff --git a/_src/_assets/fonts/Roboto-Regular-webfont.woff b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.woff similarity index 100% rename from _src/_assets/fonts/Roboto-Regular-webfont.woff rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.woff diff --git a/content/posts/2012-07-16-using-kbd-for-fun-and-profit.md b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md similarity index 96% rename from content/posts/2012-07-16-using-kbd-for-fun-and-profit.md rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md index 0cbfcae7..3fabc79b 100644 --- a/content/posts/2012-07-16-using-kbd-for-fun-and-profit.md +++ b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md @@ -2,8 +2,8 @@ layout: post title: Using for fun and profit -image: ../media/kremalicious-kbdfun-teaser.png -style: post-kbd.min.css +image: ./kremalicious-kbdfun-teaser.png +style: ./post-kbd.css author: Matthias Kretschmann featured: true @@ -17,6 +17,10 @@ tags: coinhive: true --- + + There's this HTML element meant for marking up keyboard keys named ``. Obviously it can be styled with CSS so why not use it to make those elements look a bit more like hardware or the iOS and Android software keys. The above picture might be blurry depending on the device you're using so here's a live rendered demo: diff --git a/content/media/kremalicious-kbdfun-teaser.png b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/kremalicious-kbdfun-teaser.png similarity index 100% rename from content/media/kremalicious-kbdfun-teaser.png rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/kremalicious-kbdfun-teaser.png diff --git a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css new file mode 100644 index 00000000..206fdd43 --- /dev/null +++ b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css @@ -0,0 +1,73 @@ +kbd { + font-size: 18px; + color: #444444; + font-family: "Lucida Grande", Lucida, Verdana, sans-serif; + font-weight: normal; + font-style: normal; + text-align: center; + line-height: 1em; + text-shadow: 0 1px 0 #fff; + display: inline; + padding: .3em .55em; + border-radius: 6px; + background-clip: padding-box; + border: 1px solid #bbb; + background-color: #f7f7f7; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); + background-repeat: repeat-x; + box-shadow: 0px 2px 0 #bbbbbb, 0 3px 1px #999999, 0 3px 0 #bbbbbb, inset 0 1px 1px #ffffff, inset 0 -1px 3px #cccccc; +} + +kbd.dark { + color: #eeeeee; + text-shadow: 0 -1px 0 #000000; + border-color: #000; + background-color: #4d4c4c; + background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0)); + background-repeat: no-repeat; + box-shadow: 0px 2px 0 #000000, 0 3px 1px #999999, inset 0 1px 1px #aaaaaa, inset 0 -1px 3px #272727; +} + + +kbd.ios { + font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; + color: #000; + border-color: rgba(0, 0, 0, 0.6); + border-top-color: rgba(0, 0, 0, 0.4); + background-color: #b7b7bc; + background-image: linear-gradient(to bottom, #efeff0, #b7b7bc); + background-repeat: repeat-x; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 #ffffff; +} + + +kbd.android { + font-family: 'RobotoRegular', "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #ffffff; + text-shadow: none; + padding: .3em; + border: 1px solid rgba(0, 0, 0, 0.05); + border-radius: 3px; + background-clip: padding-box; + background: #5e5e5e; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #444444, inset 0 1px 0 #868686; +} + + +kbd.android.dark { + background: #222222; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #505050; +} + +kbd.android.color { + background: #083c5b; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #36647b; +} + +@font-face { + font-family: 'RobotoRegular'; + src: url('./Roboto-Regular-webfont.eot'); + src: url('./Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('./Roboto-Regular-webfont.woff') format('woff'), url('./Roboto-Regular-webfont.ttf') format('truetype'), url('./Roboto-Regular-webfont.svg#RobotoRegular') format('svg'); + font-weight: normal; + font-style: normal; +} diff --git a/gatsby-node.js b/gatsby-node.js index 45fb8ea3..b6c1ec72 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,17 +1,23 @@ const path = require('path') const { createFilePath } = require('gatsby-source-filesystem') -// Create slug & date for posts from file path +// Create slug & date for posts from file path values exports.onCreateNode = ({ node, actions, getNode }) => { const { createNodeField } = actions if (node.internal.type === 'MarkdownRemark') { const fileNode = getNode(node.parent) const parsedFilePath = path.parse(fileNode.relativePath) + const slugOriginal = createFilePath({ node, getNode }) // slug - const slugOriginal = createFilePath({ node, getNode }) - const slug = `/${slugOriginal.substring(12)}` // remove date from file path + let slug + + if (parsedFilePath.name === 'index') { + slug = `/${parsedFilePath.dir.substring(11)}` // remove date from file dir + } else { + slug = `/${slugOriginal.substring(12)}` // remove first slash & date from file path + } createNodeField({ node, @@ -25,7 +31,7 @@ exports.onCreateNode = ({ node, actions, getNode }) => { if (node.frontmatter.date) { date = `${node.frontmatter.date}` } else { - date = `${parsedFilePath.name.substring(0, 10)}` + date = `${slugOriginal.substring(1, 10)}` // grab date from file path } createNodeField({ @@ -42,18 +48,22 @@ exports.createPages = ({ graphql, actions }) => { return new Promise((resolve, reject) => { const postTemplate = path.resolve('src/templates/Post.jsx') // const indexTemplate = path.resolve('src/templates/index.jsx') - // const tagPage = path.resolve('src/templates/tag.jsx') - // const categoryPage = path.resolve('src/templates/category.jsx') + // const tagTemplate = path.resolve('src/templates/tag.jsx') + // const categoryTemplate = path.resolve('src/templates/category.jsx') resolve( graphql( ` { - allMarkdownRemark { + allMarkdownRemark( + sort: { fields: [fields___date], order: DESC } + limit: 1000 + ) { edges { node { fields { slug + date } } } @@ -67,20 +77,21 @@ exports.createPages = ({ graphql, actions }) => { reject(result.errors) } - // Creates Index page - // createPaginatedPages({ - // edges: result.data.allMarkdownRemark.edges, - // createPage: createPage, - // pageTemplate: indexTemplate - // }) - // Create Posts - result.data.allMarkdownRemark.edges.forEach(edge => { + const posts = result.data.allMarkdownRemark.edges + + posts.forEach((post, index) => { + const previous = + index === posts.length - 1 ? null : posts[index + 1].node + const next = index === 0 ? null : posts[index - 1].node + createPage({ - path: `${edge.node.fields.slug}`, + path: `${post.node.fields.slug}`, component: postTemplate, context: { - slug: edge.node.fields.slug + slug: post.node.fields.slug, + previous, + next } }) }) @@ -89,47 +100,40 @@ exports.createPages = ({ graphql, actions }) => { // const tagMap = new Map() // const categorySet = new Set() - // result.data.allMarkdownRemark.edges.forEach(edge => { - // if (edge.node.frontmatter.tags) { - // edge.node.frontmatter.tags.forEach(tag => { + // posts.forEach(post => { + // if (post.node.frontmatter.tags) { + // post.node.frontmatter.tags.forEach(tag => { // tagSet.add(tag) // const array = tagMap.has(tag) ? tagMap.get(tag) : [] - // array.push(edge) + // array.push(post) // tagMap.set(tag, array) // }) // } - // if (edge.node.frontmatter.category) { - // categorySet.add(edge.node.frontmatter.category) + // if (post.node.frontmatter.category) { + // categorySet.add(post.node.frontmatter.category) // } // }) - // const tagFormatter = tag => route => - // `/tags/${_.kebabCase(tag)}/${route !== 1 ? route : ''}` // const tagList = Array.from(tagSet) + // tagList.forEach(tag => { // // Creates tag pages - // createPaginationPages({ - // createPage, - // edges: tagMap.get(tag), - // component: tagPage, - // pathFormatter: tagFormatter(tag), - // limit: siteConfig.sitePaginationLimit, - // context: { - // tag - // } + // createPage({ + // path: `/tags/${tag}/`, + // component: tagTemplate, + // context: { tag } // }) // }) // const categoryList = Array.from(categorySet) + // categoryList.forEach(category => { // createPage({ - // path: `/categories/${_.kebabCase(category)}/`, - // component: categoryPage, - // context: { - // category - // } + // path: `/categories/${category}/`, + // component: categoryTemplate, + // context: { category } // }) // }) diff --git a/package.json b/package.json index f355d504..6eca2731 100644 --- a/package.json +++ b/package.json @@ -21,10 +21,10 @@ "last 3 versions" ], "dependencies": { - "@webcomponents/webcomponentsjs": "^2.0.2", + "@webcomponents/webcomponentsjs": "^2.0.3", "clipboard": "^2.0.1", "exif-js": "^2.3.0", - "gatsby": "^2.0.0-beta.46", + "gatsby": "^2.0.0-beta.47", "gatsby-image": "^2.0.0-beta.6", "gatsby-plugin-matomo": "^0.4.1", "gatsby-plugin-react-helmet": "^3.0.0-beta.3", diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index c70f9a1c..5d3e7b90 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -205,3 +205,19 @@ color: $color; } } + +// Image frame style +///////////////////////////////////// + +@mixin media-frame() { + @include transition(); + + border-top: 2px solid transparent; + border-bottom: 2px solid transparent; + border-radius: $border-radius; + box-shadow: 0 1px 3px rgba($brand-grey, .2); + + @media (min-width: $screen-sm) { + border: 2px solid transparent; + } +} diff --git a/src/styles/base.scss b/src/styles/base.scss index 02ad4915..489f29d7 100644 --- a/src/styles/base.scss +++ b/src/styles/base.scss @@ -167,16 +167,26 @@ a { } } -// Media +// Responsive Media ///////////////////////////////////// +figure, img, -video, svg, -figure { +video, +audio, +embed, +canvas, +picture { max-width: 100%; height: auto; - margin: 0; + margin: 0 auto; + display: block; + border-radius: $border-radius; +} + +img { + vertical-align: middle; } // Lists diff --git a/src/templates/Post.module.scss b/src/templates/Post.module.scss index cda2f891..d02cf58a 100644 --- a/src/templates/Post.module.scss +++ b/src/templates/Post.module.scss @@ -34,13 +34,19 @@ margin-top: $spacer * 1.5; margin-bottom: $spacer * 1.5; - img { + > div { + @include media-frame(); + border-radius: 0; @media (min-width: $screen-sm) { border-radius: $border-radius; } } + + img { + border-radius: 0; + } } // Post Content