mirror of
https://github.com/kremalicious/blog.git
synced 2024-12-22 09:13:35 +01:00
make post folders possible
This commit is contained in:
parent
32c7155f93
commit
874df1ea85
GPG Key ID:
606EEEF3C479A91F
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
@ -2,8 +2,8 @@
|
||||
layout: post
|
||||
|
||||
title: Using <kbd> 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
|
||||
---
|
||||
|
||||
<style>
|
||||
@import './post-kbd.css';
|
||||
</style>
|
||||
|
||||
There's this HTML element meant for marking up keyboard keys named `<kbd>`. 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:
|
||||
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.5 KiB |
@ -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;
|
||||
}
|
||||
@ -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 }
|
||||
// })
|
||||
// })
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user