- Download Chives Wallpaper + Download Chives Wallpaper
diff --git a/content/articles/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md b/content/articles/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md index ecb3785a..59d02bc7 100644 --- a/content/articles/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md +++ b/content/articles/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md @@ -92,7 +92,7 @@ Brief description of Daguerres role in the invention of photography process by T This icon package was exclusively announced first on [MacThemes](http://macthemes2.net) and you can download it from the [Goodies section on this website](/goodies/) or directly via this link: In addition to these icons you can download the [associated wallpapers for your desktop or your iPhone](http://www.kremalicious.com/2008/06/new-goodie-niepces-camera-obscura-wallpaper-pack/). diff --git a/content/articles/2008-06-03-niepces-camera-obscura-wallpaper-pack.md b/content/articles/2008-06-03-niepces-camera-obscura-wallpaper-pack.md index 373148b0..8a63d25c 100644 --- a/content/articles/2008-06-03-niepces-camera-obscura-wallpaper-pack.md +++ b/content/articles/2008-06-03-niepces-camera-obscura-wallpaper-pack.md @@ -19,7 +19,7 @@ In addition to my Niépce's Camera Obscura icons for Aperture and iPhoto I have All Wallpapers are using a custom designed background which imitates the look of a metal plate like it was used in Niépce's experiments although it wasn't golden. To make it more Mac style I have added a stenciled dots pattern (which is a commonly used reference to the front design of the MacPro).- Download Niépce's Camera Obscura Wallpaper + Download Niépce's Camera Obscura Wallpaper
Here are the details: diff --git a/content/articles/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md b/content/articles/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md index 80f75089..9a45d3ba 100644 --- a/content/articles/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md +++ b/content/articles/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md @@ -376,7 +376,7 @@ Here you can see the icons included in the Server Displays icon pack: Because I've just modified Apple's standard icons these icons are just available via this blog post and they will not show up in my Goodies section. Just download the whole package directly via this link:- Download Server Display Icons zip + Download Server Display Icons zip
### How to use the icons diff --git a/content/articles/2008-08-26-icy-box-icons.md b/content/articles/2008-08-26-icy-box-icons.md index 48ba8473..1f900068 100644 --- a/content/articles/2008-08-26-icy-box-icons.md +++ b/content/articles/2008-08-26-icy-box-icons.md @@ -20,7 +20,7 @@ As always these desktop icons are free for you personal and non-commercial use. The whole package includes 7 icons either packed in a nice tagged iContainer for use with Candybar or in Mac + Win + Linux compatible formats. If you have such an Icy Box case grab the icons. Have fun!- Download Icy Box Icons zip + Download Icy Box Icons zip
- Replacement icons for the silver and black Icy Box external aluminium case with USB interface diff --git a/content/articles/2008-09-23-futurama-mars-university-wallpaper.md b/content/articles/2008-09-23-futurama-mars-university-wallpaper.md index 50a98334..56567b22 100644 --- a/content/articles/2008-09-23-futurama-mars-university-wallpaper.md +++ b/content/articles/2008-09-23-futurama-mars-university-wallpaper.md @@ -18,6 +18,6 @@ Show your geeky love for extraterrestrial universities! This is a simple Futuram As usual you can [grab the whole zip package from my Goodies page](http://www.kremalicious.com/goodies/#wall) and have fun. -- Download Futurama Mars U Wallpaper zip +
+ Download Futurama Mars U Wallpaper zip
diff --git a/content/articles/2008-10-23-coffee-cup-icon.md b/content/articles/2008-10-23-coffee-cup-icon.md index b0626966..19934fa5 100644 --- a/content/articles/2008-10-23-coffee-cup-icon.md +++ b/content/articles/2008-10-23-coffee-cup-icon.md @@ -22,5 +22,5 @@ I’ve just released my own coffee cup icon, enjoy: ## Download- Download Coffee Cup Icons + Download Coffee Cup Icons
diff --git a/content/articles/2009-02-17-out-of-whale-oil.md b/content/articles/2009-02-17-out-of-whale-oil.md index f294bee4..46c82e34 100644 --- a/content/articles/2009-02-17-out-of-whale-oil.md +++ b/content/articles/2009-02-17-out-of-whale-oil.md @@ -29,5 +29,5 @@ Simple, high-resolution Futurama tribute wallpaper pack inspired by the latest F Seriously, the pink versions are burning my eyes but the pink is a good reference to the events in the recent movie. diff --git a/content/articles/2009-06-04-twitter-crisp.md b/content/articles/2009-06-04-twitter-crisp.md index 37dac6d1..0ebd7882 100644 --- a/content/articles/2009-06-04-twitter-crisp.md +++ b/content/articles/2009-06-04-twitter-crisp.md @@ -16,7 +16,7 @@ Here's a quick twitter icon for use on your websites which is kind of a by-produ This icon comes in various formats (PNG, ICNS, iContainer) and in 4 different sizes (128px, 48px, 32px, 16px) with each icon size redrawn (of course). Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab these icons while they're hot. Use them on any web project you like and/or [convert them into a send to twitter link](http://kremalicious.com/ultimate-coda-wordpress-share-link-bonanza/). Have fun! diff --git a/content/articles/2009-06-24-adiumeetie.md b/content/articles/2009-06-24-adiumeetie.md index fbe7fb80..5a1cd129 100644 --- a/content/articles/2009-06-24-adiumeetie.md +++ b/content/articles/2009-06-24-adiumeetie.md @@ -26,7 +26,7 @@ The icon comes in various formats (iContainer, icns, png) in sizes from 512px-16 Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab this icon while it's hot. ## Adium Icon Usage diff --git a/content/articles/2009-09-05-delibar.md b/content/articles/2009-09-05-delibar.md index 7e45bd26..177777b7 100644 --- a/content/articles/2009-09-05-delibar.md +++ b/content/articles/2009-09-05-delibar.md @@ -20,7 +20,7 @@ tags: Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab these replacement icons. ## Icon Usage diff --git a/content/articles/2010-02-04-ipixelpad.md b/content/articles/2010-02-04-ipixelpad.md index fbbca899..84654391 100644 --- a/content/articles/2010-02-04-ipixelpad.md +++ b/content/articles/2010-02-04-ipixelpad.md @@ -27,7 +27,7 @@ The homescreen icons pixels in the 16px version needed all more vivid colors to The icons come in various formats: iContainer, ICNS, ICO and PNG files for each size. Just click the following download button to grab the whole pack: ## License diff --git a/content/articles/2010-07-03-momcorp.md b/content/articles/2010-07-03-momcorp.md index 65a7b02e..6ab4c325 100644 --- a/content/articles/2010-07-03-momcorp.md +++ b/content/articles/2010-07-03-momcorp.md @@ -23,6 +23,6 @@ The wallpaper comes in four versions with two color variations and two text vari You can grab the full zip-package with versions for Desktop, iPad, iPhone & Android included: diff --git a/content/articles/2011-12-15-badged.md b/content/articles/2011-12-15-badged.md index 4925f300..47d946c6 100644 --- a/content/articles/2011-12-15-badged.md +++ b/content/articles/2011-12-15-badged.md @@ -24,7 +24,7 @@ The plugin is localized in english, german & spanish (thanks to Andrew Kurtis fr You can just install the plugin via the automatic backend installer under _Plugins > Add New_, activate and enjoy the red badges.-Plugin Page GitHub Donate +Plugin Page GitHub Donate
The plugin is hosted on GitHub and will always be mirrored in the WordPress plugins directory. But in case you want to install the plugin manually: diff --git a/content/articles/2012-05-15-wp-icons-template.md b/content/articles/2012-05-15-wp-icons-template.md index 2a87871f..a8767114 100644 --- a/content/articles/2012-05-15-wp-icons-template.md +++ b/content/articles/2012-05-15-wp-icons-template.md @@ -33,7 +33,7 @@ So if you value quality and want pixel perfect icons in your admin area you need I’ve put the template along with the implementation examples from the next section on [github](https://github.com/kremalicious/wp-icons-template). You can just download the whole package right away:- Download GitHub Donate + Download GitHub Donate
### Usage diff --git a/content/articles/2012-07-16-using-kbd-for-fun-and-profit/index.md b/content/articles/2012-07-16-using-kbd-for-fun-and-profit/index.md index 8020eda9..a74b9b0b 100644 --- a/content/articles/2012-07-16-using-kbd-for-fun-and-profit/index.md +++ b/content/articles/2012-07-16-using-kbd-for-fun-and-profit/index.md @@ -21,8 +21,8 @@ The above picture might be blurry depending on the device you're using so here's They are completely styled with CSS3 so they're sharp on all screens no matter how high the dpi. Have a look at the [full demo](http://lab.kremalicious.com/kbdfun/) or grab the project folder with the CSS & LESS files from GitHub. The code is under the MIT license so you're free to use it in any personal or commercial project.- Demo - Github + Demo + Github
## Usage diff --git a/content/articles/2012-08-07-projectpurple.md b/content/articles/2012-08-07-projectpurple.md index 66b0d6e2..e6fea59a 100644 --- a/content/articles/2012-08-07-projectpurple.md +++ b/content/articles/2012-08-07-projectpurple.md @@ -30,7 +30,7 @@ The full size I designed the wallpaper in is 3200x2048px. I don't know why Apple Download the whole package with all the sizes included or grab the individual ones from the list, all linked to the image files: - [Desktop/rMBP/iPad 3 (3200x2048)](../media/project-purple-kremalicious.png) diff --git a/content/articles/2015-09-13-css-app-store-badges.md b/content/articles/2015-09-13-css-app-store-badges.md index e4239aea..dfb87e32 100644 --- a/content/articles/2015-09-13-css-app-store-badges.md +++ b/content/articles/2015-09-13-css-app-store-badges.md @@ -15,9 +15,9 @@ tags: The badges provided by all app store providers just don't play well together with their varying typography and different sizing. So let's make them all visually unified, infinitely scalable, with pure text for easier localization and some web interaction styles. And while we’re at it: different sizes with the same markup by using some modifier classes. ## Styling diff --git a/content/articles/2017-05-16-hyper-mac-pro/index.md b/content/articles/2017-05-16-hyper-mac-pro/index.md index d1c9cbf7..979b6852 100644 --- a/content/articles/2017-05-16-hyper-mac-pro/index.md +++ b/content/articles/2017-05-16-hyper-mac-pro/index.md @@ -41,5 +41,5 @@ hpm install hyper-mac-pro Head over to GitHub to take a peek into the code or report some issues. diff --git a/content/articles/2018-11-01-gatsby-plugin-matomo/index.md b/content/articles/2018-11-01-gatsby-plugin-matomo/index.md index 0c093ee0..616d2633 100644 --- a/content/articles/2018-11-01-gatsby-plugin-matomo/index.md +++ b/content/articles/2018-11-01-gatsby-plugin-matomo/index.md @@ -59,5 +59,5 @@ plugins: [ Head over to GitHub for more documentation, take a peek into the code, or to report some bugs. diff --git a/content/articles/2020-05-22-gatsby-redirect-from/index.md b/content/articles/2020-05-22-gatsby-redirect-from/index.md index af7990ef..fde13337 100644 --- a/content/articles/2020-05-22-gatsby-redirect-from/index.md +++ b/content/articles/2020-05-22-gatsby-redirect-from/index.md @@ -110,5 +110,5 @@ plugins: [ Head over to GitHub for more documentation, take a peek into the code, or to report some bugs. diff --git a/src/global/_buttons.css b/src/global/_buttons.css new file mode 100644 index 00000000..97c4a145 --- /dev/null +++ b/src/global/_buttons.css @@ -0,0 +1,170 @@ +.btn, +a.btn { + text-align: center; + display: block; + margin: 0; + touch-action: manipulation; + cursor: pointer; + background-image: none; + white-space: nowrap; + user-select: none; + transition: 0.2s ease-in-out; + padding: var(--padding-base-vertical) var(--padding-base-horizontal); + font-size: var(--font-size-small); + border-radius: var(--border-radius); + background-color: rgba(255, 255, 255, 0.1); + border: 1px solid var(--border-color); + font-family: var(--font-family-headings); + font-weight: var(--font-weight-headings); + color: var(--text-color); + text-transform: uppercase; + box-shadow: var(--box-shadow); +} + +.btn:hover, +.btn:focus { + text-decoration: none; + outline: 0; + background-color: rgba(255, 255, 255, 0.15); +} + +.btn:active { + transition: none; +} + +/* // Disabled State */ +.btn.disabled, +.btn[disabled] { + cursor: not-allowed; + pointer-events: none; + opacity: 0.6; + box-shadow: none; +} + +.btn span { + font-size: var(--font-size-mini); + color: var(--text-color-light); + margin-left: 0.3em; +} + +@media (min-width: 30rem) { + .btn, + a.btn { + max-width: 20rem; + } +} + +button.link { + color: var(--link-color); +} + +button.link:hover, +button.link:focus { + outline: 0; +} + +/* // Primary Button */ +.btn-primary, +a.btn-primary { + /* dark variant of `--body-background-color` */ + color: #161a1b; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); + background: var(--link-color); + border-color: var(--link-color); +} + +.btn-primary:hover, +.btn-primary:focus { + background: var(--link-color-hover); + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); +} + +.btn-primary:active { + background: var(--link-color); +} + +.btn-block { + display: block; +} + +.btn[class*='icon-']::before { + content: ''; + width: 20px; + height: 20px; + display: inline-block; + margin-right: 0.3rem; + margin-bottom: -0.2rem; + opacity: 0.75; + background-repeat: no-repeat; + background-position: center center; + background-size: 100%; +} + +.dark .btn[class*='icon-']::before { + filter: invert(0.75); +} +.dark .btn.btn-primary[class*='icon-']::before { + filter: invert(0); +} + +/* // some helper classes for old content +///////////////////////////////////// */ + +.content-download { + text-align: center; + display: block; + margin-top: calc(var(--spacer) * 2); + margin-bottom: calc(var(--spacer) * 2); +} + +@media (min-width: 30rem) { + .content-download { + display: flex; + } +} + +.content-download .btn { + margin-bottom: calc(var(--spacer) / 2); +} + +.content-download .btn:first-child { + margin-left: 0; +} + +.content-download .btn:only-child { + margin-left: auto; + margin-right: auto; +} + +.content-download .btn span { + font-size: var(--font-size-mini); + color: var(--brand-grey); +} + +@media (min-width: 30rem) { + .content-download .btn { + flex: 1; + margin-left: calc(var(--spacer) / 2); + margin-bottom: 0; + } +} + +.icon-download::before { + background-image: url('../../node_modules/feather-icons/dist/icons/arrow-down-circle.svg'); +} + +.icon-heart::before { + background-image: url('../../node_modules/feather-icons/dist/icons/heart.svg'); +} + +.icon-github::before { + background-image: url('../../node_modules/feather-icons/dist/icons/github.svg'); +} + +.icon-compass::before { + background-image: url('../../node_modules/feather-icons/dist/icons/compass.svg'); +} + +.icon-code::before { + background-image: url('../../node_modules/feather-icons/dist/icons/code.svg'); +} diff --git a/src/global/_buttons.scss b/src/global/_buttons.scss deleted file mode 100644 index 52a99673..00000000 --- a/src/global/_buttons.scss +++ /dev/null @@ -1,241 +0,0 @@ -@import 'variables'; -@import 'mixins'; - -.btn, -a.btn { - text-align: center; - display: block; - margin-bottom: 0; - touch-action: manipulation; - cursor: pointer; - background-image: none; // Reset unusual Firefox-on-Android default style - white-space: nowrap; - user-select: none; - transition: 0.2s ease-in-out; - - // Default Button - @include button-size( - $padding-base-vertical, - $padding-base-horizontal, - $font-size-small, - $line-height, - $border-radius - ); - - background-color: rgba(#fff, 0.1); - border: 1px solid rgba($brand-grey-light, 0.3); - border-bottom-color: rgba($brand-grey-light, 0.4); - font-family: $font-family-headings; - font-weight: $font-weight-headings; - color: $brand-grey; - text-transform: uppercase; - box-shadow: 0 1px 3px rgba($brand-grey-light, 0.15), - inset 0 1px 0 rgba(#fff, 0.7); - - @media (min-width: $screen-sm) { - max-width: 20rem; - } - - &:hover, - &:focus { - outline: 0; - background-color: rgba(#fff, 0.5); - } - - &:active { - color: $brand-grey; - border-color: rgba($brand-grey-light, 0.3); - background-color: transparent; - box-shadow: 0 1px 0 #fff; - transition: none; - outline: 0; - } - - :global(.dark) &:not(.btn-primary) { - color: $brand-grey-light; - background-color: darken($body-background-color--dark, 3%); - border: 1px solid darken($body-background-color--dark, 10%); - box-shadow: 0 1px 3px rgba(darken($body-background-color--dark, 10%), 0.5), - inset 0 1px 0 rgba(#fff, 0.1); - - &:hover, - &:focus { - background-color: darken($body-background-color--dark, 1%); - } - - &:active { - background-color: darken($body-background-color--dark, 5%); - box-shadow: 0 1px 0 rgba(#fff, 0.1); - } - } - - // Disabled State - &.disabled, - &[disabled] { - cursor: not-allowed; - pointer-events: none; - opacity: 0.6; - box-shadow: none; - } - - span { - font-size: $font-size-mini; - color: $text-color-light; - margin-left: 0.3em; - } -} - -button.link { - color: $link-color; - - &:hover, - &:focus { - outline: 0; - color: lighten($link-color, 10%); - } - - &:active { - transition: none; - color: darken($link-color, 10%); - } -} - -// Primary Button -.btn-primary, -a.btn-primary { - @extend .btn; - - color: darken($link-color, 50%); - text-shadow: 0 1px 0 rgba(#fff, 0.3); - background: lighten($link-color, 15%); - border-color: $link-color; - box-shadow: 0 1px 3px rgba($brand-grey-light, 0.4), - inset 0 1px 0 rgba(#fff, 0.4); - - &:hover, - &:focus { - color: darken($link-color, 50%); - background-color: lighten($link-color, 25%); - text-shadow: 0 1px 0 rgba(#fff, 0.3); - } - - &:active { - color: darken($link-color, 50%); - border-color: darken($link-color, 10%); - background-color: lighten($link-color, 15%); - } - - .dark &, - &:global(.dark) & { - border-color: darken($body-background-color--dark, 10%); - background: $link-color; - box-shadow: 0 1px 3px darken($body-background-color--dark, 10%), - inset 0 1px 0 rgba(#fff, 0.4); - - // stylelint-disable no-descending-specificity - &:hover, - &:focus { - background-color: lighten($link-color, 10%); - text-shadow: 0 1px 0 rgba(#fff, 0.3); - } - - &:active { - background-color: darken($link-color, 5%); - box-shadow: 0 1px 0 rgba(#fff, 0.2); - } - // stylelint-enable no-descending-specificity - } -} - -.btn-block { - display: block; -} - -// some helper classes for old content -///////////////////////////////////// - -.content-download { - text-align: center; - display: block; - margin-top: $spacer * 2; - margin-bottom: $spacer * 2; - - @media (min-width: $screen-xs) { - display: flex; - } - - a { - @extend .btn; - - margin-bottom: $spacer / 2; - - @media (min-width: $screen-xs) { - flex: 1; - margin-left: $spacer / 2; - margin-bottom: 0; - } - - &:first-child { - margin-left: 0; - } - - &:only-child { - margin-left: auto; - margin-right: auto; - } - - span { - font-size: $font-size-mini; - color: $text-color-light; - } - - &[class*='icon-'] { - &::before { - content: ''; - width: 20px; - height: 20px; - display: inline-block; - margin-right: 0.3rem; - margin-bottom: -0.2rem; - opacity: 0.75; - background-repeat: no-repeat; - background-position: center center; - background-size: 100%; - - .dark &, - :global(.dark) & { - filter: invert(0.75); - } - } - } - - &[class*='btn-primary'] { - &::before { - .dark &, - :global(.dark) & { - filter: invert(0); - } - } - } - } - - .icon-download::before { - background-image: url('../../node_modules/feather-icons/dist/icons/arrow-down-circle.svg'); - } - - .icon-heart::before { - background-image: url('../../node_modules/feather-icons/dist/icons/heart.svg'); - } - - .icon-github::before { - background-image: url('../../node_modules/feather-icons/dist/icons/github.svg'); - } - - .icon-compass::before { - background-image: url('../../node_modules/feather-icons/dist/icons/compass.svg'); - } - - .icon-code::before { - background-image: url('../../node_modules/feather-icons/dist/icons/code.svg'); - } -} diff --git a/src/global/_variables.css b/src/global/_variables.css index b5a9cb42..43dd5635 100644 --- a/src/global/_variables.css +++ b/src/global/_variables.css @@ -35,6 +35,7 @@ --text-color-dimmed: var(--brand-grey-dimmed); --color-headings: var(--brand-main); --link-color: var(--brand-cyan); + --link-color-hover: #4ab8a9; --border-color: var(--brand-grey-dimmed); /* Base Typography diff --git a/src/global/global.css b/src/global/global.css index d725f556..b6328b43 100644 --- a/src/global/global.css +++ b/src/global/global.css @@ -338,11 +338,11 @@ td { /* More basic elements ///////////////////////////////////// */ +@import '_buttons'; @import '_code.css'; @import '_toast.css'; -/* @import '_buttons'; -@import '_alerts'; */ +/* @import '_alerts'; */ .medium-zoom-overlay { background-color: var(--body-background-color) !important;