From 9246bf7ea85b39477ce1eba2a123c8ff82cd0aef Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 18 Jul 2018 23:04:31 +0200 Subject: [PATCH] port over mixins, base post styling --- ...ack-to-normal-on-kremaliciouscom-almost.md | 10 +- .../2008-07-11-enjoy-kremaliciousiphone.md | 16 +- ...s-25-get-rid-of-that-sluggish-dashboard.md | 10 +- ...8-08-22-the-kremalicious-marsedit-style.md | 4 +- ...a-custom-gravatar-image-in-wordpress-27.md | 14 +- ...yling-author-comments-with-wordpress-27.md | 18 +- ...imate-coda-wordpress-share-link-bonanza.md | 46 ++-- .../2009-12-17-wordpress-post-thumbnails.md | 83 ++++--- content/posts/2012-05-15-wp-icons-template.md | 19 +- ...your-web-site-to-the-windows-8-metro-ui.md | 4 +- ...2012-07-16-using-kbd-for-fun-and-profit.md | 38 +++- gatsby-node.js | 2 +- src/components/Layout.module.scss | 1 + src/styles/_mixins.scss | 207 ++++++++++++++++++ src/styles/_variables.scss | 14 +- src/styles/base.scss | 9 +- src/templates/Post.module.scss | 70 ++++++ src/templates/post.jsx | 13 +- 18 files changed, 454 insertions(+), 124 deletions(-) create mode 100644 src/styles/_mixins.scss create mode 100644 src/templates/Post.module.scss diff --git a/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md b/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md index bbcb731e..7ad17669 100644 --- a/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md +++ b/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md @@ -5,7 +5,7 @@ title: Everything Back To Normal On Kremalicious.com (Almost) author: Matthias Kretschmann date: 2008-07-01 16:39:02+00:00 - + categories: - personal tags: @@ -20,14 +20,14 @@ But more problems appeared. The display of the newest and latest posts and the n Now it's clear something with my code must be wrong, I thought. For displaying the latest posts in Wordpress I use a pretty standard way which is [described in the Wordpress Codex](http://codex.wordpress.org/Template_Tags/get_posts): -{% highlight php %} +```php -{% endhighlight %} +``` This would get all recent posts sorted by their post_date entry in the (wp_posts) database table and style it as an unordered list with my preferred format. This code worked since the launch of kremalicious.com and I first used it to display the recent blog entries on my start page. But since i didn't change anything in the code this couldn't be caused by wrong code or something. @@ -39,7 +39,9 @@ This bug affects all versions of MySQL since 5.0.50 and it seems there is no sta Thankfully [a commenter](http://wordpress.org/support/topic/185896#post-793417) in the Wordpress forums reminded me of a nice temporary solution to this mess until my host updates MySQL: using wp_get_archives for displaying the recent posts. But this won't let me display the dates anymore: -{% highlight php %}{% endhighlight %} +```php + +``` Problem temporary solved! diff --git a/content/posts/2008-07-11-enjoy-kremaliciousiphone.md b/content/posts/2008-07-11-enjoy-kremaliciousiphone.md index f54b50ba..2fb6d11b 100644 --- a/content/posts/2008-07-11-enjoy-kremaliciousiphone.md +++ b/content/posts/2008-07-11-enjoy-kremaliciousiphone.md @@ -5,7 +5,7 @@ title: Enjoy Kremalicious{iPhone} author: Matthias Kretschmann date: 2008-07-11 00:20:22+00:00 - + categories: - personal tags: @@ -26,9 +26,9 @@ While Safari on iPhone will display all websites just fine it can happen that th The viewport can be larger or smaller than the visible area but I wanted my content to exactly fit the width of the iPhone and the goal was to make the text legible on first load. So here's what I use for kremalicious{iPhone}: -{% highlight html %} +```html -{% endhighlight %} +``` This code will let the user scale the content up to 1.6 times to the default view and the default width of the content is set to the width of the (iPhone) device. @@ -37,17 +37,17 @@ This code will let the user scale the content up to 1.6 times to the default vie There's neither an active nor a hover state for links on the iPhone which makes sense on a touch interface although it would be much easier to just use a:active for the tap highlighting. Safari on the iPhone uses a special webkit property for that: -{% highlight css %} --webkit-tap-highlight-color: rgba(234,234,234,0.5); -{% endhighlight %} +```css +-webkit-tap-highlight-color: rgba(234,234,234, .5); +``` # Home Screen Icon ![image](../media/kremalicious-iconiphone.png)I've used a 147x147px icon so the icon looks crisp and sharp on the iPhone screen (because it's a 160dpi screen). You really should use a bigger size than [Apple's recommendation in their iPhone HIG](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/chapter_14_section_2.html). You have to provide a png icon without rounded corners and without the highlight shine since the iPhone will render that automatically on the icon. The icon has to be named apple-touch-icon.png and gets automatically detected when put in the root of your website. Additionally you can tell the iPhone the place where the icon is with this link tag in your head section: -{% highlight html %} +```html -{% endhighlight %} +``` And finally many thanks to [cschock](http://www.cschock.de) for continuously testing my code voodoo soup even at late hours. diff --git a/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md b/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md index c76cde38..6a833efb 100644 --- a/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md +++ b/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md @@ -5,7 +5,7 @@ title: 'Wordpress 2.5+: Get Rid of That Sluggish Dashboard' author: Matthias Kretschmann date: 2008-07-15 14:04:46+00:00 - + categories: - design @@ -20,7 +20,7 @@ I've searched for a simple way of disabling those feeds, plugins etc. stuff the So open your `/wp-admin/index-extra.php` file. It should look like this: -{% highlight php %} +```php -{% endhighlight %} +``` Now just uncomment the lines so it looks like this (every line with two leading // is uncommented and therefore inactive): -{% highlight php %} +```php -{% endhighlight %} +``` And that's it. Save the file on your server, log in to your Wordpress backend and you should see your Dashboard with everything intact. It just won't search for incoming links and all those other RSS sources anymore. diff --git a/content/posts/2008-08-22-the-kremalicious-marsedit-style.md b/content/posts/2008-08-22-the-kremalicious-marsedit-style.md index 262577e6..5ba2d233 100644 --- a/content/posts/2008-08-22-the-kremalicious-marsedit-style.md +++ b/content/posts/2008-08-22-the-kremalicious-marsedit-style.md @@ -23,7 +23,7 @@ In MarsEdit main window right-click (or ctrl + click) in the sidebar on the blog Just copy and paste the following HTML and CSS into your Preview Template editor. If something goes wrong with the source formatting, I've also provided [a txt file with the code](../media/marsedit_kremalicious.txt): -{% highlight html %} +```html @@ -70,7 +70,7 @@ Just copy and paste the following HTML and CSS into your Preview Template editor -{% endhighlight %} +``` Now click on Save Changes in the lower right corner of the window and there you have it. diff --git a/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md b/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md index 0dc3120a..083696ed 100644 --- a/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md +++ b/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md @@ -5,7 +5,7 @@ title: 'HowTo: Set A Custom Gravatar Image In Wordpress 2.7+' author: Matthias Kretschmann date: 2008-12-11 22:59:06+00:00 - + categories: - design @@ -24,7 +24,7 @@ Sure enough I've upgraded immediately when [Wordpress 2.7 was released](http://w Before Wordpress 2.7 I achieved a custom gravatar image on kremalicious.com with this code placed in the comments.php template file: -{% highlight php %} +```php -{% endhighlight %} +``` So we were able to set a path to our image we wanted to use as the default gravatar image. But with Wordpress 2.7 we have the new function [``](http://codex.wordpress.org/Template_Tags/wp_list_comments) which pretty much simplifies writing comment template code. Although it has a parameter for the avatar size it doesn't have one for setting a custom image like before. But we can use the functions.php file in your template directory and add some lines to it: (If you don't have a functions.php file just create one.) -{% highlight php %} +```php -{% endhighlight %} +``` @@ -60,9 +60,9 @@ Just set a name for your custom Gravatar image to show up beside the image in th And you can adjust the displayed size of the gravatar image by adding a parameter to `` function in your comments.php file: -{% highlight php %} +```php 70, )); ?> -{% endhighlight %} +``` diff --git a/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md b/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md index 9994cae4..825e54e8 100644 --- a/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md +++ b/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md @@ -5,7 +5,7 @@ title: 'HowTo: Styling Author Comments With Wordpress 2.7+' author: Matthias Kretschmann date: 2008-12-13 16:47:43+00:00 - + categories: - design @@ -21,7 +21,7 @@ Since my update to Wordpress 2.7 I'm pretty much into all the new comments stuff Let's start by looking at the code to achieve styling of author comments prior to Wordpress 2.7. On kremalicious.com I've used this code: -{% highlight php %} +```php
  • other comments code
    • -{% endhighlight %} +``` So with some php stuff we were able to check for the author name or, as I did it, for the URL of the comment author. If one of these were detected Wordpress added a new class 'author' to the `
  • ` tag which we were able to style by adding a li.author to our css file: - {% highlight css %}li.author { css comes in here }{% endhighlight %} +```css +li.author { /* css comes in here */ } +``` But with Wordpress 2.7 these steps are needless because of the [new function ``](http://codex.wordpress.org/Template_Tags/wp_list_comments) which adds a class on author comments for itself! If a comment from the author of an article is posted under this article, **Wordpress automatically adds the class 'bypostauthor' to the surrounding `
  • ` tag.** So all you have to do is adding a css style of `li.bypostauthor` to your css file or just renaming your old `li.author` class or whatever you used for this: - {% highlight css %}li.bypostauthor { css comes in here }{% endhighlight %} +```css +li.bypostauthor { /* css comes in here */ } +``` And that's it for adding a different style to comments from the article author. Just add some css and there you go. Wonderful! @@ -49,6 +53,8 @@ And that's it for adding a different style to comments from the article author. Wordpress also has a special class for registered users of your site so you're able to style their comments as well. For this just use the class 'byuser': -{% highlight css %}li.byuser { css comes in here }{% endhighlight %} +```css +li.byuser { /* css comes in here */ } +``` All the various classes Wordpress adds to comments are listed [in the Codex page for enhanced comments display](http://codex.wordpress.org/Migrating_Plugins_and_Themes_to_2.7/Enhanced_Comment_Display#CSS_Styling). And [here's a very nice grahical overview about everything Wordpress 2.7 adds to comments](http://www.wp-fun.co.uk/2008/12/10/27-comment-classes/). diff --git a/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md b/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md index 71637545..7938ac73 100644 --- a/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md +++ b/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md @@ -6,7 +6,7 @@ download: ../media/share-link-bonanza-coda-clips.zip author: Matthias Kretschmann date: 2009-03-29 23:12:15+00:00 - + categories: - design @@ -54,7 +54,9 @@ If you download the above Coda Clip files this icon is already applied on the cl That's because both collections have their placeholder selection (the ![Coda Clips Placeholder](../media/codaclips-placeholder.png)) located where the link text would be: -{% highlight html %}![Coda Clips Placeholder](../media/codaclips-placeholder.png){% endhighlight %} +```html +![Coda Clips Placeholder](../media/codaclips-placeholder.png) +``` As you can see I've also included the link title value usually with the name of the specific social site. Also I've already encoded all the entities so there shouldn't be any (X)HTML validation errors when using these links in your projects. @@ -91,11 +93,15 @@ Anyway, as I've said above some sites allow more to submit here and you'll find Just include an img element wrapped inside the link tag, like so: -{% highlight html %} Delicious{% endhighlight %} +```html + Delicious +``` And if you want to just use an icon with no text use just an img element without providing any link text: -{% highlight html %}{% endhighlight %} +```html + +``` @@ -105,29 +111,31 @@ And if you want to just use an icon with no text use just an img element without To me a more cleaner solution is to use the css background-image property to include the icon images. Just add a class or an id to every share link like so: -{% highlight html %}Delicious{% endhighlight %} +```html +Delicious +``` And in your CSS select this class and style it with a background image. Assuming you want the site icon to appear left beside the link text you would also have to add some padding so the text won't overlap the icons: -{% highlight css %} - .delicious { - background: url(delicious.png) no-repeat center center; - padding-left: 20px; - } -{% endhighlight %} +```css +.delicious { + background: url(delicious.png) no-repeat center center; + padding-left: 20px; +} +``` If you want to use just icons and no text you should provide a link text anyway but hide it with css. This is a good practice for accessibility and search engine optimization. Also you would have to provide the dimensions of the icon: -{% highlight css %} - .delicious { - width: 16px; - height: 16px; - background: url(delicious.png) no-repeat center center; - text-indent: -999999px; - } -{% endhighlight %} +```css +.delicious { + width: 16px; + height: 16px; + background: url(delicious.png) no-repeat center center; + text-indent: -999999px; +} +``` ## 4. HTML File Download And All The Links Separated diff --git a/content/posts/2009-12-17-wordpress-post-thumbnails.md b/content/posts/2009-12-17-wordpress-post-thumbnails.md index 7da66479..89f32bce 100644 --- a/content/posts/2009-12-17-wordpress-post-thumbnails.md +++ b/content/posts/2009-12-17-wordpress-post-thumbnails.md @@ -5,7 +5,7 @@ title: Using The New Post Thumbnail Feature In WordPress 2.9 author: Matthias Kretschmann date: 2009-12-17 04:00:21+00:00 - + categories: - design @@ -27,20 +27,20 @@ redirect_from: So just open up your theme's _functions.php_ file in your favorite editor or create it if there's no such file in your theme folder. Add this little code snippet to this file: -{% highlight php %} +```php -{% endhighlight %} +``` For backwards compatibility you should wrap this inside a function check for the new `add_theme_support`: -{% highlight php %} +```php -{% endhighlight %} +``` This makes sure WordPress installation prior to 2.9 won't get screwed up when using a theme with this new feature. @@ -62,17 +62,26 @@ You can close the media dialogue now and you will see the image in the Post Thum ![Add to theme](../media/wordpress-thumbnail-5.png)Basically all you have to do is to add this new template tag in your theme files where you want to display the post thumbnail, most certainly in your _index.php_ file: -{% highlight php %}{% endhighlight %} + +```php + +``` + This template tag will display the thumbnail sized post thumbnail by default and is essentially the same as: -{% highlight php %}{% endhighlight %} +```php + +``` But of course you can grab the other sizes WordPress automatically creates when you upload an image: -{% highlight php %}{% endhighlight %} +?> +``` + _(Note: Matt [left a comment on WP Engineer](http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/#comment-3053) stating he wouldn't recommend using these named arguments but provided no explanation for it yet.)_ The code will output a generic `` tag with a class of wp-post-image. Needless to say this is what you can select with css to style just the post thumbnails further: @@ -84,21 +93,27 @@ The code will output a generic `` tag with a class of wp-post-image. Need If you want to adjust the generated output of the tag you can do this by using some array stuff. So let's say you want to have the post thumbnails to be 200x200px big and another class assigned to it, you can extend the template tag like so: -{% highlight php %} 'alignleft' )); ?>{% endhighlight %} +```php + 'alignleft' )); ?> +``` If you want to add more than one class you can do this like so: -{% highlight php %} 'alignleft another_class')); ?>{% endhighlight %} +```php + 'alignleft another_class')); ?> +``` And you can add any attributes to the `` tag like a `title`, `rel` or an `alt` attribute. For accessibility reasons you should always add at least the alt-attribute: -{% highlight php %} 'alignleft', 'alt' => 'alttext')); ?>{% endhighlight %} +```php + 'alignleft', 'alt' => 'alttext')); ?> +``` As for the title attribute this will be grabbed automatically from the entry you've made in your Media Library during the upload process but you even could override this too: -{% highlight php %} +```php 'alignleft', 'alt' => 'alttext', 'title' => 'titletext')); ?> -{% endhighlight %} +``` @@ -107,22 +122,26 @@ As for the title attribute this will be grabbed automatically from the entry you Finally if you want to respect the custom sizes you or your users have set under Settings > Media you can first grab those sizes with [get_option function](http://codex.wordpress.org/Function_Reference/get_option) and then put it in the array: -{% highlight php %} 'alignleft')); -?>{% endhighlight %} +?> +``` You can also detect the Media settings for the other sizes and whether the crop setting is active or not: -{% highlight php %}{% endhighlight %} +?> +``` @@ -133,41 +152,38 @@ With the check in your functions.php at the beginning there's already ensured ol So it's a pretty good idea to make this backwards compatible with some quick if else voodoo, code shamelessly [adapted from WP-Recipes](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility): -{% highlight php %}if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { +```php +if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { the_post_thumbnail(); } else { $postimage = get_post_meta($post->ID, 'post-image', true); if ($postimage) { echo ''; } -}{% endhighlight %} +} +``` This first checks if the feature exists and if a post thumbnail was addd with this new feature. If it was, it simply returns the post thumbnail. If not, it falls back to whatever you've used in your theme before, the usual way is to check for and get the value of a special custom field named e.g. post-image and output it. You can add whatever you've used before inside the else statement. Et voilà, it's nicely backwards compatible now, yay! ## 5. Resources And More Information +* WP Engineer: [About WordPress Post Thumbnail](http://wpengineer.com/about-wordpress-post-thumbnail/) +* WP Engineer: [The Ultimative Guide For the_post_thumbnail In WordPress 2.9](http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/) - - * WP Engineer: [About WordPress Post Thumbnail](http://wpengineer.com/about-wordpress-post-thumbnail/) +* WP Recipes: [WordPress 2.9 : Display post image with backward compatibility](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility) - * WP Engineer: [The Ultimative Guide For the_post_thumbnail In WordPress 2.9](http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/) +* Justin Tadlock: [Everything you need to know about WordPress 2.9’s post image feature](http://justintadlock.com/archives/2009/11/16/everything-you-need-to-know-about-wordpress-2-9s-post-image-feature) - * WP Recipes: [WordPress 2.9 : Display post image with backward compatibility](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility) +* Chris Harrison: [Post Thumbnails in RSS Feeds](http://cdharrison.com/2009/12/the_post_thumbnail-for-rss-feeds/) - * Justin Tadlock: [Everything you need to know about WordPress 2.9’s post image feature](http://justintadlock.com/archives/2009/11/16/everything-you-need-to-know-about-wordpress-2-9s-post-image-feature) - - - * Chris Harrison: [Post Thumbnails in RSS Feeds](http://cdharrison.com/2009/12/the_post_thumbnail-for-rss-feeds/) - - - * Technosailor: [10 Things You Need to Know About WordPress 2.9](http://technosailor.com/2009/11/11/10-things-you-need-to-know-about-wordpress-2-9/) +* Technosailor: [10 Things You Need to Know About WordPress 2.9](http://technosailor.com/2009/11/11/10-things-you-need-to-know-about-wordpress-2-9/) Well and that's it. I would love to link to some smart WordPress Codex pages for these new template tags but at the time of this writing there simply isn't anything in the Codex about this. @@ -178,13 +194,8 @@ Well and that's it. I would love to link to some smart WordPress Codex pages for As always: before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-Feed](http://www.kremalicious.com/feed/), discuss this article or buy me my next coffee. - - - - ## Article Updates - 12/20/2009 Added some resources and a note about the named arguments 12/20/2009 function check for add_theme_support at the beginning 12/20/2009 corrected the size array code under Custom Output diff --git a/content/posts/2012-05-15-wp-icons-template.md b/content/posts/2012-05-15-wp-icons-template.md index 19e01bc9..153c97d2 100644 --- a/content/posts/2012-05-15-wp-icons-template.md +++ b/content/posts/2012-05-15-wp-icons-template.md @@ -6,7 +6,7 @@ image: ../media/kremalicious-Teaser-WP-Icon-Template.png author: Matthias Kretschmann date: 2012-05-15 16:00:44+00:00 - + categories: - design @@ -70,8 +70,8 @@ You can always refer to the inline commented versions of these snippets in the [ WordPress automatically puts an ID around your new menu item which contains the name of your custom post type (the $post_type parameter in `register_post_type()`). Just change this to your own post type name: -{% highlight php %} +```php - -{% endhighlight %} +``` ### Plugin And Theme Options Icons The easiest way is to just use this markup on your option page before the page heading which is the default on all admin pages: -{% highlight html %}
    -

    My cool option page

    {% endhighlight %} +```html +
    +

    My cool option page

    +``` This is the markup being addressed in the snippet block for option page icons. The `icon32` class will make sure everything is aligned consistent to all other pages without redefining everything in css. @@ -136,8 +137,7 @@ Putting your plugin or option page in the top level of the admin menu via `add_m So all this combined leads to this snippet: -{% highlight php %} - +```php - -{% endhighlight %} +``` Just replace the bits in the ID selectors with your stuff. If you have problems finding the correct ID selector just inspect element in the admin area. diff --git a/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md b/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md index 097d57a5..b24e3557 100644 --- a/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md +++ b/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md @@ -28,10 +28,10 @@ While the size is the same as for the iPad 3 homescreen icon, I strongly suggest As an example, I just [pushed](https://github.com/kremalicious/kremalicious2/commit/4c7e215f4abecde4385028767b633be1278f277e) the Metro [tile image](/metro-tile.png) for kremalicious.com with those `meta` tags: -{% highlight html %} +```html -{% endhighlight %} +``` When browsing the site in Windows 8/Internet Explorer 10, users have the choice of pinning it to the start screen: 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.md index 2da6e6b6..0cbfcae7 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.md @@ -1,7 +1,7 @@ --- layout: post -title: Using <kbd> for fun and profit +title: Using for fun and profit image: ../media/kremalicious-kbdfun-teaser.png style: post-kbd.min.css author: Matthias Kretschmann @@ -43,8 +43,10 @@ Just drop in the `kbdftw.css` in your `head`: If you want to use the Android key style, include roboto.css before: -{% highlight html %} -{% endhighlight %} +```html + + +``` You also need to add all the Roboto font files from assets/fonts to your project. @@ -58,21 +60,39 @@ For the Android style, there's `roboto.less` as include at the end. But the font The default styling are light keys with Lucida Grande as font: -{% highlight html %}Q{% endhighlight %} becomes Q +```html +Q +``` +becomes Q Add a dark class to get the dark keys: -{% highlight html %}Q{% endhighlight %} becomes Q +```html +Q +``` +becomes Q Adding an ios or android class gives a replica of those system keys. Android uses three different colors on the default keyboard. -{% highlight html %}Q{% endhighlight %} becomes Q +```html +Q +``` +becomes Q -{% highlight html %}Q{% endhighlight %} becomes Q +```html +Q +``` +becomes Q -{% highlight html %}Q{% endhighlight %} becomes Q +```html +Q +``` +becomes Q -{% highlight html %}Q{% endhighlight %} becomes Q +```html +Q +``` +becomes Q I've let the default `display: inline` intact so all padding on the `kbd` elements won't affect the line-height of the surrounding text. This leads to problems when you want to use them over multiple lines so just make them `display: inline-block` in this scenario. diff --git a/gatsby-node.js b/gatsby-node.js index 46d32db4..45fb8ea3 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -40,7 +40,7 @@ exports.createPages = ({ graphql, actions }) => { const { createPage } = actions return new Promise((resolve, reject) => { - const postTemplate = path.resolve('src/templates/post.jsx') + 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') diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss index 9e207d99..7ef577f5 100644 --- a/src/components/Layout.module.scss +++ b/src/components/Layout.module.scss @@ -1,6 +1,7 @@ @import 'variables'; .screen { + width: 100%; max-width: 38rem; margin-left: auto; margin-right: auto; diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss new file mode 100644 index 00000000..c70f9a1c --- /dev/null +++ b/src/styles/_mixins.scss @@ -0,0 +1,207 @@ +@import 'variables'; + +// Centering Blocks +///////////////////////////////////// + +@mixin aligncenter() { + display: block; + margin-left: auto; + margin-right: auto; +} + +// Toggling content +///////////////////////////////////// + +// Hide from both screenreaders and browsers: h5bp.com/u +@mixin hide() { + display: none !important; + visibility: hidden; +} + +@mixin show() { + display: block; + visibility: visible; +} + +// Hide only visually, but have it available for screenreaders: h5bp.com/v +@mixin visuallyhidden() { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + + // Extends the .visuallyhidden class to allow the + // element to be focusable when navigated to via the keyboard: h5bp.com/p + &.focusable:active, + &.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; + } +} + +// Hide visually and from screenreaders, but maintain layout +@mixin invisible() { + visibility: hidden; +} + +// CSS image replacement +///////////////////////////////////// + +@mixin hide-text() { + font: 0/0 a; // stylelint-disable font-family-no-missing-generic-family-keyword + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + +// Text overflow +///////////////////////////////////// + +@mixin ellipsis($width) { + width: $width; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +// Default transition +///////////////////////////////////// + +@mixin transition() { + transition: all ease-in-out .15s; +} + +// Dashed Dividers +///////////////////////////////////// + +@mixin divider() { + position: relative; + border-bottom: 1px dashed #afc3cb; + margin-top: $spacer; + margin-bottom: $spacer; + + &::before { + content: ''; + position: absolute; + left: 0; + height: 1px; + bottom: -2px; + width: 100%; + border-bottom: 1px dashed #fff; + } +} + +// Heading band +///////////////////////////////////// + +@mixin heading-band() { + display: inline-block; + clear: both; + background: rgba(255, 255, 255, .5); + padding: ($spacer/2) $spacer ($spacer/2) 100%; + margin-left: -100%; +} + +// Lead paragraph +///////////////////////////////////// + +@mixin lead() { + font-size: $font-size-large; + line-height: $spacer * 1.15; +} + +// Layout breakout +///////////////////////////////////// + +@mixin breakoutviewport() { + margin-left: calc(-50vw + 50%); + margin-right: calc(-50vw + 50%); + + @media (min-width: $screen-md) { + @include breakoutviewport--base(); + } +} + +@mixin breakoutviewport--base() { + margin-left: -($spacer * 4); + margin-right: -($spacer * 4); +} + +@mixin breakoutviewport--full() { + margin-left: calc(-50vw + 50%); + margin-right: calc(-50vw + 50%); +} + +// Button sizing +///////////////////////////////////// + +@mixin button-size( + $padding-vertical, + $padding-horizontal, + $font-size, + $line-height, + $border-radius +) { + padding: $padding-vertical $padding-horizontal; + font-size: $font-size; + line-height: $line-height; + border-radius: $border-radius; +} + +// Form control sizing +///////////////////////////////////// + +@mixin input-size( + $padding-vertical, + $padding-horizontal, + $font-size, + $line-height, + $border-radius +) { + padding: $padding-vertical $padding-horizontal; + font-size: $font-size; + line-height: $line-height; + border-radius: $border-radius; + + &input[type='search'] { + background-size: $font-size; + background-position: $padding-vertical center; + padding-left: ($padding-vertical * 4); + } + + &select { + line-height: $input-height; + } + + &textarea, + &select[multiple] { + height: auto; + } +} + +// Placeholder text +///////////////////////////////////// + +@mixin placeholder($color: $input-color-placeholder) { + &::-moz-placeholder { + color: $color; + opacity: 1; // Override Firefox's unusual default opacity; See https//github.com/twbs/bootstrap/pull/11526 + } + + &::-webkit-input-placeholder { + color: $color; + } + + &:-ms-input-placeholder { + color: $color; + } +} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index b7c79d9c..f837a267 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -68,6 +68,13 @@ $line-height-headings: 1.1; $color-headings: $brand-main; $color-headings--dark: $brand-main-light; +// Spacing +///////////////////////////////////// + +$spacer: ($font-size-base * $line-height); + +$border-radius: 3px; + // Code ///////////////////////////////////// @@ -76,13 +83,6 @@ $code-color: $brand-light; $kbd-bg: $code-bg; $kbd-color: $code-color; -// Components spacing -///////////////////////////////////// - -$spacer: ($font-size-base * $line-height); - -$border-radius: 3px; - // Responsive breakpoints ///////////////////////////////////// diff --git a/src/styles/base.scss b/src/styles/base.scss index d0599f5c..02ad4915 100644 --- a/src/styles/base.scss +++ b/src/styles/base.scss @@ -172,7 +172,8 @@ a { img, video, -svg { +svg, +figure { max-width: 100%; height: auto; margin: 0; @@ -340,13 +341,13 @@ blockquote { color: #fff; } +// More basic elements +///////////////////////////////////// + #___gatsby { display: flex; min-height: 100vh; flex-direction: column; } -// More basic elements -///////////////////////////////////// - @import 'code'; diff --git a/src/templates/Post.module.scss b/src/templates/Post.module.scss new file mode 100644 index 00000000..cda2f891 --- /dev/null +++ b/src/templates/Post.module.scss @@ -0,0 +1,70 @@ +@import 'variables'; +@import 'mixins'; + +.hentry { + padding-top: $spacer * 2; + padding-bottom: $spacer * 2; + width: 100%; + + @media (min-width: $screen-sm) { + padding-top: $spacer * 3; + padding-bottom: $spacer * 3; + } +} + +// Post Title +///////////////////////////////////// + +.hentry__title { + font-size: $font-size-h1; + text-align: center; + color: $color-headings; + margin-top: 0; + margin-bottom: $spacer; +} + +// Post/photo teaser +///////////////////////////////////// + +.hentry__teaser { + @include breakoutviewport(); + + max-width: none; + display: block; + margin-top: $spacer * 1.5; + margin-bottom: $spacer * 1.5; + + img { + border-radius: 0; + + @media (min-width: $screen-sm) { + border-radius: $border-radius; + } + } +} + +// Post Content +///////////////////////////////////// + +.hentry__content { + h1, + h2 { + @include heading-band(); + } + + h1 { + font-size: $font-size-h2; + } + + h2 { + font-size: $font-size-h3; + } + + h3 { + font-size: $font-size-h4; + } + + p:last-child { + margin-bottom: 0; + } +} diff --git a/src/templates/post.jsx b/src/templates/post.jsx index 70412671..2c28ac26 100644 --- a/src/templates/post.jsx +++ b/src/templates/post.jsx @@ -4,6 +4,7 @@ import Helmet from 'react-helmet' import { graphql } from 'gatsby' import Layout from '../components/Layout' import Image from '../components/atoms/Image' +import styles from './Post.module.scss' const Post = ({ data }) => { const { markdownRemark: post } = data @@ -13,11 +14,15 @@ const Post = ({ data }) => { -
    -

    {title}

    - {image && {title}} +
    +

    {title}

    + {image && ( +
    + {title} +
    + )}