From 09d8e7e2e4f9ea20db956ca2dd029c427c1c4344 Mon Sep 17 00:00:00 2001 From: codecalm Date: Fri, 4 Oct 2019 23:42:32 +0200 Subject: [PATCH] replaced icons to svgs, buttons, cards, typography --- _config.yml | 20 +++- pages/_docs/buttons.md | 4 +- pages/_includes/layout/css.html | 1 - pages/_includes/parts/navbar.html | 2 +- pages/_includes/svg/social/android.svg | 3 + pages/_includes/svg/social/apple.svg | 3 + pages/_includes/svg/social/asana.svg | 3 + pages/_includes/svg/social/atlassian.svg | 3 + pages/_includes/svg/social/basecamp.svg | 3 + pages/_includes/svg/social/behance.svg | 3 + pages/_includes/svg/social/bing.svg | 3 + pages/_includes/svg/social/bitbucket.svg | 3 + pages/_includes/svg/social/bitcoin.svg | 3 + pages/_includes/svg/social/blogger.svg | 3 + pages/_includes/svg/social/bootstrap.svg | 3 + pages/_includes/svg/social/buddy.svg | 3 + pages/_includes/svg/social/circleci.svg | 3 + pages/_includes/svg/social/codepen.svg | 3 + pages/_includes/svg/social/codeship.svg | 3 + pages/_includes/svg/social/css3.svg | 3 + pages/_includes/svg/social/digitalocean.svg | 3 + pages/_includes/svg/social/disqus.svg | 3 + pages/_includes/svg/social/docker.svg | 3 + pages/_includes/svg/social/dribbble.svg | 3 + pages/_includes/svg/social/dropbox.svg | 3 + pages/_includes/svg/social/facebook.svg | 3 + pages/_includes/svg/social/figma.svg | 3 + pages/_includes/svg/social/flickr.svg | 3 + pages/_includes/svg/social/foursquare.svg | 3 + pages/_includes/svg/social/git.svg | 3 + pages/_includes/svg/social/github.svg | 3 + pages/_includes/svg/social/gitlab.svg | 3 + pages/_includes/svg/social/google.svg | 3 + pages/_includes/svg/social/googleplus.svg | 3 + pages/_includes/svg/social/gravatar.svg | 3 + pages/_includes/svg/social/hipchat.svg | 3 + pages/_includes/svg/social/html5.svg | 3 + pages/_includes/svg/social/instagram.svg | 3 + pages/_includes/svg/social/invision.svg | 3 + pages/_includes/svg/social/javascript.svg | 3 + pages/_includes/svg/social/kickstarter.svg | 3 + pages/_includes/svg/social/linkedin.svg | 3 + pages/_includes/svg/social/medium.svg | 3 + pages/_includes/svg/social/meetup.svg | 3 + pages/_includes/svg/social/messenger.svg | 3 + pages/_includes/svg/social/netflix.svg | 3 + pages/_includes/svg/social/pagekit.svg | 3 + pages/_includes/svg/social/paypal.svg | 3 + pages/_includes/svg/social/pinterest.svg | 3 + pages/_includes/svg/social/producthunt.svg | 3 + pages/_includes/svg/social/rss.svg | 3 + pages/_includes/svg/social/sass.svg | 3 + pages/_includes/svg/social/sentry.svg | 3 + pages/_includes/svg/social/skype.svg | 3 + pages/_includes/svg/social/slack.svg | 3 + pages/_includes/svg/social/snapchat.svg | 3 + pages/_includes/svg/social/spotify.svg | 3 + pages/_includes/svg/social/strava.svg | 3 + pages/_includes/svg/social/stripe.svg | 3 + pages/_includes/svg/social/tabler.svg | 3 + pages/_includes/svg/social/telegram.svg | 3 + pages/_includes/svg/social/tumblr.svg | 3 + pages/_includes/svg/social/twitter.svg | 3 + pages/_includes/svg/social/typescript.svg | 3 + pages/_includes/svg/social/uber.svg | 3 + pages/_includes/svg/social/uikit.svg | 3 + pages/_includes/svg/social/vimeo.svg | 3 + pages/_includes/svg/social/vk.svg | 3 + pages/_includes/svg/social/wechat.svg | 3 + pages/_includes/svg/social/whatsapp.svg | 3 + pages/_includes/svg/social/wordpress.svg | 3 + pages/_includes/svg/social/ycombinator.svg | 3 + pages/_includes/svg/social/youtube.svg | 3 + pages/_includes/ui/button.html | 13 +- pages/_includes/ui/icon.html | 20 +++- pages/_plugins/jekyll-filters.rb | 5 + pages/buttons.html | 126 ++++++++++++-------- pages/markdown.html | 45 +++++++ scss/_mixins.scss | 3 +- scss/_variables.scss | 75 +++++++----- scss/fonts/_webfonts.scss | 4 +- scss/layout/_core.scss | 7 +- scss/layout/_navbar.scss | 3 +- scss/layout/_page.scss | 1 + scss/mixins/_functions.scss | 22 ++++ scss/mixins/_px2rem.scss | 3 - scss/mixins/_theme-color-lighter.scss | 8 -- scss/ui/_buttons.scss | 33 +++-- scss/ui/_cards.scss | 3 +- scss/ui/_empty.scss | 2 +- scss/ui/_inputs.scss | 4 +- scss/ui/_progress.scss | 6 +- scss/ui/_stamps.scss | 1 + scss/ui/_tables.scss | 7 +- scss/ui/_typo.scss | 30 ----- scss/utils/_text.scss | 13 -- 96 files changed, 493 insertions(+), 175 deletions(-) create mode 100644 pages/_includes/svg/social/android.svg create mode 100644 pages/_includes/svg/social/apple.svg create mode 100644 pages/_includes/svg/social/asana.svg create mode 100644 pages/_includes/svg/social/atlassian.svg create mode 100644 pages/_includes/svg/social/basecamp.svg create mode 100644 pages/_includes/svg/social/behance.svg create mode 100644 pages/_includes/svg/social/bing.svg create mode 100644 pages/_includes/svg/social/bitbucket.svg create mode 100644 pages/_includes/svg/social/bitcoin.svg create mode 100644 pages/_includes/svg/social/blogger.svg create mode 100644 pages/_includes/svg/social/bootstrap.svg create mode 100644 pages/_includes/svg/social/buddy.svg create mode 100644 pages/_includes/svg/social/circleci.svg create mode 100644 pages/_includes/svg/social/codepen.svg create mode 100644 pages/_includes/svg/social/codeship.svg create mode 100644 pages/_includes/svg/social/css3.svg create mode 100644 pages/_includes/svg/social/digitalocean.svg create mode 100644 pages/_includes/svg/social/disqus.svg create mode 100644 pages/_includes/svg/social/docker.svg create mode 100644 pages/_includes/svg/social/dribbble.svg create mode 100644 pages/_includes/svg/social/dropbox.svg create mode 100644 pages/_includes/svg/social/facebook.svg create mode 100644 pages/_includes/svg/social/figma.svg create mode 100644 pages/_includes/svg/social/flickr.svg create mode 100644 pages/_includes/svg/social/foursquare.svg create mode 100644 pages/_includes/svg/social/git.svg create mode 100644 pages/_includes/svg/social/github.svg create mode 100644 pages/_includes/svg/social/gitlab.svg create mode 100644 pages/_includes/svg/social/google.svg create mode 100644 pages/_includes/svg/social/googleplus.svg create mode 100644 pages/_includes/svg/social/gravatar.svg create mode 100644 pages/_includes/svg/social/hipchat.svg create mode 100644 pages/_includes/svg/social/html5.svg create mode 100644 pages/_includes/svg/social/instagram.svg create mode 100644 pages/_includes/svg/social/invision.svg create mode 100644 pages/_includes/svg/social/javascript.svg create mode 100644 pages/_includes/svg/social/kickstarter.svg create mode 100644 pages/_includes/svg/social/linkedin.svg create mode 100644 pages/_includes/svg/social/medium.svg create mode 100644 pages/_includes/svg/social/meetup.svg create mode 100644 pages/_includes/svg/social/messenger.svg create mode 100644 pages/_includes/svg/social/netflix.svg create mode 100644 pages/_includes/svg/social/pagekit.svg create mode 100644 pages/_includes/svg/social/paypal.svg create mode 100644 pages/_includes/svg/social/pinterest.svg create mode 100644 pages/_includes/svg/social/producthunt.svg create mode 100644 pages/_includes/svg/social/rss.svg create mode 100644 pages/_includes/svg/social/sass.svg create mode 100644 pages/_includes/svg/social/sentry.svg create mode 100644 pages/_includes/svg/social/skype.svg create mode 100644 pages/_includes/svg/social/slack.svg create mode 100644 pages/_includes/svg/social/snapchat.svg create mode 100644 pages/_includes/svg/social/spotify.svg create mode 100644 pages/_includes/svg/social/strava.svg create mode 100644 pages/_includes/svg/social/stripe.svg create mode 100644 pages/_includes/svg/social/tabler.svg create mode 100644 pages/_includes/svg/social/telegram.svg create mode 100644 pages/_includes/svg/social/tumblr.svg create mode 100644 pages/_includes/svg/social/twitter.svg create mode 100644 pages/_includes/svg/social/typescript.svg create mode 100644 pages/_includes/svg/social/uber.svg create mode 100644 pages/_includes/svg/social/uikit.svg create mode 100644 pages/_includes/svg/social/vimeo.svg create mode 100644 pages/_includes/svg/social/vk.svg create mode 100644 pages/_includes/svg/social/wechat.svg create mode 100644 pages/_includes/svg/social/whatsapp.svg create mode 100644 pages/_includes/svg/social/wordpress.svg create mode 100644 pages/_includes/svg/social/ycombinator.svg create mode 100644 pages/_includes/svg/social/youtube.svg create mode 100644 pages/markdown.html create mode 100644 scss/mixins/_functions.scss delete mode 100644 scss/mixins/_px2rem.scss delete mode 100644 scss/mixins/_theme-color-lighter.scss diff --git a/_config.yml b/_config.yml index b3e01adb..e6024098 100644 --- a/_config.yml +++ b/_config.yml @@ -133,31 +133,47 @@ button_variants: socials: - name: facebook + icon: social/facebook title: Facebook - name: twitter + icon: social/twitter title: Twitter - name: google + icon: social/google title: Google - name: youtube + icon: social/youtube title: Youtube - name: vimeo + icon: social/vimeo title: Vimeo - name: dribbble + icon: social/dribbble title: Dribbble - name: github + icon: social/github title: Github - name: instagram + icon: social/instagram title: Instagram - name: pinterest + icon: social/pinterest title: Pinterest - name: vk - title: Vk + icon: social/vk + title: VK - name: rss - title: Rss + icon: social/rss + title: RSS - name: flickr + icon: social/flickr title: Flickr - name: bitbucket + icon: social/bitbucket title: Bitbucker + - name: tabler + icon: social/tabler + title: Tabler months_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] months_long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] diff --git a/pages/_docs/buttons.md b/pages/_docs/buttons.md index feab8857..253f9ae9 100644 --- a/pages/_docs/buttons.md +++ b/pages/_docs/buttons.md @@ -127,7 +127,7 @@ A button can be formatted to link to a social website {% example html wrapper=btn-list %} {% for button in site.socials %} -{% include ui/button.html color=button.name icon=button.name text=button.title provider="brand" %} +{% include ui/button.html color=button.name icon=button.icon text=button.title %} {% endfor %} {% endexample %} @@ -135,7 +135,7 @@ You can use only icons. {% example html wrapper=btn-list %} {% for button in site.socials %} -{% include ui/button.html color=button.name icon=button.name provider="brand" %} +{% include ui/button.html color=button.name icon=button.icon %} {% endfor %} {% endexample %} diff --git a/pages/_includes/layout/css.html b/pages/_includes/layout/css.html index b6f7d929..fc8a2e8a 100644 --- a/pages/_includes/layout/css.html +++ b/pages/_includes/layout/css.html @@ -1,4 +1,3 @@ - diff --git a/pages/_includes/parts/navbar.html b/pages/_includes/parts/navbar.html index c3a88228..d68475e6 100644 --- a/pages/_includes/parts/navbar.html +++ b/pages/_includes/parts/navbar.html @@ -98,7 +98,7 @@ {% endif %}
  • - Source code + Source code
    • {% if include.user-menu %} diff --git a/pages/_includes/svg/social/android.svg b/pages/_includes/svg/social/android.svg new file mode 100644 index 00000000..4a5091b9 --- /dev/null +++ b/pages/_includes/svg/social/android.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/apple.svg b/pages/_includes/svg/social/apple.svg new file mode 100644 index 00000000..b0d2d668 --- /dev/null +++ b/pages/_includes/svg/social/apple.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/asana.svg b/pages/_includes/svg/social/asana.svg new file mode 100644 index 00000000..739419f6 --- /dev/null +++ b/pages/_includes/svg/social/asana.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/atlassian.svg b/pages/_includes/svg/social/atlassian.svg new file mode 100644 index 00000000..ed3f1ce4 --- /dev/null +++ b/pages/_includes/svg/social/atlassian.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/basecamp.svg b/pages/_includes/svg/social/basecamp.svg new file mode 100644 index 00000000..396fd42c --- /dev/null +++ b/pages/_includes/svg/social/basecamp.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/behance.svg b/pages/_includes/svg/social/behance.svg new file mode 100644 index 00000000..b025608a --- /dev/null +++ b/pages/_includes/svg/social/behance.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/bing.svg b/pages/_includes/svg/social/bing.svg new file mode 100644 index 00000000..168740ef --- /dev/null +++ b/pages/_includes/svg/social/bing.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/bitbucket.svg b/pages/_includes/svg/social/bitbucket.svg new file mode 100644 index 00000000..f996c8ae --- /dev/null +++ b/pages/_includes/svg/social/bitbucket.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/bitcoin.svg b/pages/_includes/svg/social/bitcoin.svg new file mode 100644 index 00000000..b3c74c8a --- /dev/null +++ b/pages/_includes/svg/social/bitcoin.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/blogger.svg b/pages/_includes/svg/social/blogger.svg new file mode 100644 index 00000000..e7e34d4e --- /dev/null +++ b/pages/_includes/svg/social/blogger.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/bootstrap.svg b/pages/_includes/svg/social/bootstrap.svg new file mode 100644 index 00000000..21b02cde --- /dev/null +++ b/pages/_includes/svg/social/bootstrap.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/buddy.svg b/pages/_includes/svg/social/buddy.svg new file mode 100644 index 00000000..32f8fea6 --- /dev/null +++ b/pages/_includes/svg/social/buddy.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/circleci.svg b/pages/_includes/svg/social/circleci.svg new file mode 100644 index 00000000..76a48fed --- /dev/null +++ b/pages/_includes/svg/social/circleci.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/codepen.svg b/pages/_includes/svg/social/codepen.svg new file mode 100644 index 00000000..abfc9a71 --- /dev/null +++ b/pages/_includes/svg/social/codepen.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/codeship.svg b/pages/_includes/svg/social/codeship.svg new file mode 100644 index 00000000..58a7548d --- /dev/null +++ b/pages/_includes/svg/social/codeship.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/css3.svg b/pages/_includes/svg/social/css3.svg new file mode 100644 index 00000000..a9ec528b --- /dev/null +++ b/pages/_includes/svg/social/css3.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/digitalocean.svg b/pages/_includes/svg/social/digitalocean.svg new file mode 100644 index 00000000..cc37a665 --- /dev/null +++ b/pages/_includes/svg/social/digitalocean.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/disqus.svg b/pages/_includes/svg/social/disqus.svg new file mode 100644 index 00000000..bc8c2a97 --- /dev/null +++ b/pages/_includes/svg/social/disqus.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/docker.svg b/pages/_includes/svg/social/docker.svg new file mode 100644 index 00000000..a54c109b --- /dev/null +++ b/pages/_includes/svg/social/docker.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/dribbble.svg b/pages/_includes/svg/social/dribbble.svg new file mode 100644 index 00000000..17f1c03c --- /dev/null +++ b/pages/_includes/svg/social/dribbble.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/dropbox.svg b/pages/_includes/svg/social/dropbox.svg new file mode 100644 index 00000000..d440d16d --- /dev/null +++ b/pages/_includes/svg/social/dropbox.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/facebook.svg b/pages/_includes/svg/social/facebook.svg new file mode 100644 index 00000000..64f11f77 --- /dev/null +++ b/pages/_includes/svg/social/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/figma.svg b/pages/_includes/svg/social/figma.svg new file mode 100644 index 00000000..6ba000f9 --- /dev/null +++ b/pages/_includes/svg/social/figma.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/flickr.svg b/pages/_includes/svg/social/flickr.svg new file mode 100644 index 00000000..96902d26 --- /dev/null +++ b/pages/_includes/svg/social/flickr.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/foursquare.svg b/pages/_includes/svg/social/foursquare.svg new file mode 100644 index 00000000..784df3e7 --- /dev/null +++ b/pages/_includes/svg/social/foursquare.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/git.svg b/pages/_includes/svg/social/git.svg new file mode 100644 index 00000000..d2e7ea7b --- /dev/null +++ b/pages/_includes/svg/social/git.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/github.svg b/pages/_includes/svg/social/github.svg new file mode 100644 index 00000000..c89c4768 --- /dev/null +++ b/pages/_includes/svg/social/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/gitlab.svg b/pages/_includes/svg/social/gitlab.svg new file mode 100644 index 00000000..8b7827d4 --- /dev/null +++ b/pages/_includes/svg/social/gitlab.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/google.svg b/pages/_includes/svg/social/google.svg new file mode 100644 index 00000000..77d2b8e7 --- /dev/null +++ b/pages/_includes/svg/social/google.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/googleplus.svg b/pages/_includes/svg/social/googleplus.svg new file mode 100644 index 00000000..5fe6441c --- /dev/null +++ b/pages/_includes/svg/social/googleplus.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/gravatar.svg b/pages/_includes/svg/social/gravatar.svg new file mode 100644 index 00000000..95d9718e --- /dev/null +++ b/pages/_includes/svg/social/gravatar.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/hipchat.svg b/pages/_includes/svg/social/hipchat.svg new file mode 100644 index 00000000..f7eb855b --- /dev/null +++ b/pages/_includes/svg/social/hipchat.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/html5.svg b/pages/_includes/svg/social/html5.svg new file mode 100644 index 00000000..b24d684c --- /dev/null +++ b/pages/_includes/svg/social/html5.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/instagram.svg b/pages/_includes/svg/social/instagram.svg new file mode 100644 index 00000000..f75e5340 --- /dev/null +++ b/pages/_includes/svg/social/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/invision.svg b/pages/_includes/svg/social/invision.svg new file mode 100644 index 00000000..04d4c9bc --- /dev/null +++ b/pages/_includes/svg/social/invision.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/javascript.svg b/pages/_includes/svg/social/javascript.svg new file mode 100644 index 00000000..a6744c89 --- /dev/null +++ b/pages/_includes/svg/social/javascript.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/kickstarter.svg b/pages/_includes/svg/social/kickstarter.svg new file mode 100644 index 00000000..1873a73b --- /dev/null +++ b/pages/_includes/svg/social/kickstarter.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/linkedin.svg b/pages/_includes/svg/social/linkedin.svg new file mode 100644 index 00000000..e062d862 --- /dev/null +++ b/pages/_includes/svg/social/linkedin.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/medium.svg b/pages/_includes/svg/social/medium.svg new file mode 100644 index 00000000..5e3d6044 --- /dev/null +++ b/pages/_includes/svg/social/medium.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/meetup.svg b/pages/_includes/svg/social/meetup.svg new file mode 100644 index 00000000..63770c27 --- /dev/null +++ b/pages/_includes/svg/social/meetup.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/messenger.svg b/pages/_includes/svg/social/messenger.svg new file mode 100644 index 00000000..1e960475 --- /dev/null +++ b/pages/_includes/svg/social/messenger.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/netflix.svg b/pages/_includes/svg/social/netflix.svg new file mode 100644 index 00000000..dd719d71 --- /dev/null +++ b/pages/_includes/svg/social/netflix.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/pagekit.svg b/pages/_includes/svg/social/pagekit.svg new file mode 100644 index 00000000..882f5a5e --- /dev/null +++ b/pages/_includes/svg/social/pagekit.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/paypal.svg b/pages/_includes/svg/social/paypal.svg new file mode 100644 index 00000000..977f3d74 --- /dev/null +++ b/pages/_includes/svg/social/paypal.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/pinterest.svg b/pages/_includes/svg/social/pinterest.svg new file mode 100644 index 00000000..340992c2 --- /dev/null +++ b/pages/_includes/svg/social/pinterest.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/producthunt.svg b/pages/_includes/svg/social/producthunt.svg new file mode 100644 index 00000000..9c28feb3 --- /dev/null +++ b/pages/_includes/svg/social/producthunt.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/rss.svg b/pages/_includes/svg/social/rss.svg new file mode 100644 index 00000000..762d114a --- /dev/null +++ b/pages/_includes/svg/social/rss.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/sass.svg b/pages/_includes/svg/social/sass.svg new file mode 100644 index 00000000..72a7eb78 --- /dev/null +++ b/pages/_includes/svg/social/sass.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/sentry.svg b/pages/_includes/svg/social/sentry.svg new file mode 100644 index 00000000..5ac663e1 --- /dev/null +++ b/pages/_includes/svg/social/sentry.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/skype.svg b/pages/_includes/svg/social/skype.svg new file mode 100644 index 00000000..6c0b01a5 --- /dev/null +++ b/pages/_includes/svg/social/skype.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/slack.svg b/pages/_includes/svg/social/slack.svg new file mode 100644 index 00000000..2b51b0d9 --- /dev/null +++ b/pages/_includes/svg/social/slack.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/snapchat.svg b/pages/_includes/svg/social/snapchat.svg new file mode 100644 index 00000000..ed272f04 --- /dev/null +++ b/pages/_includes/svg/social/snapchat.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/spotify.svg b/pages/_includes/svg/social/spotify.svg new file mode 100644 index 00000000..8c351ffb --- /dev/null +++ b/pages/_includes/svg/social/spotify.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/strava.svg b/pages/_includes/svg/social/strava.svg new file mode 100644 index 00000000..00ec4547 --- /dev/null +++ b/pages/_includes/svg/social/strava.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/stripe.svg b/pages/_includes/svg/social/stripe.svg new file mode 100644 index 00000000..ac3ff85f --- /dev/null +++ b/pages/_includes/svg/social/stripe.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/tabler.svg b/pages/_includes/svg/social/tabler.svg new file mode 100644 index 00000000..99dc6bb3 --- /dev/null +++ b/pages/_includes/svg/social/tabler.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/telegram.svg b/pages/_includes/svg/social/telegram.svg new file mode 100644 index 00000000..f1ee1633 --- /dev/null +++ b/pages/_includes/svg/social/telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/tumblr.svg b/pages/_includes/svg/social/tumblr.svg new file mode 100644 index 00000000..e53fa0d0 --- /dev/null +++ b/pages/_includes/svg/social/tumblr.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/twitter.svg b/pages/_includes/svg/social/twitter.svg new file mode 100644 index 00000000..7b3d9b9d --- /dev/null +++ b/pages/_includes/svg/social/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/typescript.svg b/pages/_includes/svg/social/typescript.svg new file mode 100644 index 00000000..aa05c110 --- /dev/null +++ b/pages/_includes/svg/social/typescript.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/uber.svg b/pages/_includes/svg/social/uber.svg new file mode 100644 index 00000000..6dfb1d51 --- /dev/null +++ b/pages/_includes/svg/social/uber.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/uikit.svg b/pages/_includes/svg/social/uikit.svg new file mode 100644 index 00000000..431858f0 --- /dev/null +++ b/pages/_includes/svg/social/uikit.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/vimeo.svg b/pages/_includes/svg/social/vimeo.svg new file mode 100644 index 00000000..b916db42 --- /dev/null +++ b/pages/_includes/svg/social/vimeo.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/vk.svg b/pages/_includes/svg/social/vk.svg new file mode 100644 index 00000000..b7770277 --- /dev/null +++ b/pages/_includes/svg/social/vk.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/wechat.svg b/pages/_includes/svg/social/wechat.svg new file mode 100644 index 00000000..fd0ce915 --- /dev/null +++ b/pages/_includes/svg/social/wechat.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/whatsapp.svg b/pages/_includes/svg/social/whatsapp.svg new file mode 100644 index 00000000..728331cb --- /dev/null +++ b/pages/_includes/svg/social/whatsapp.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/wordpress.svg b/pages/_includes/svg/social/wordpress.svg new file mode 100644 index 00000000..041a5a88 --- /dev/null +++ b/pages/_includes/svg/social/wordpress.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/ycombinator.svg b/pages/_includes/svg/social/ycombinator.svg new file mode 100644 index 00000000..5277070e --- /dev/null +++ b/pages/_includes/svg/social/ycombinator.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/svg/social/youtube.svg b/pages/_includes/svg/social/youtube.svg new file mode 100644 index 00000000..58827d66 --- /dev/null +++ b/pages/_includes/svg/social/youtube.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/_includes/ui/button.html b/pages/_includes/ui/button.html index 25ab5574..6a085678 100644 --- a/pages/_includes/ui/button.html +++ b/pages/_includes/ui/button.html @@ -1,5 +1,14 @@ +{% removeemptylines %} {% assign spinner-class = false %} {% assign provider = include.provider | default: 'fe' %} {% if include.text %}{% assign spinner-class="mr-2" %}{% endif %} -{% assign element = include.element | default: 'button' %}<{{ element }}{% if element == 'a' %} href="{{ include.href | default: '#' }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}">{% if include.spinner %} -{% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}{% if include.icon %}{% include ui/icon.html icon=include.icon provider=provider %}{% endif %}{% if include.label %}{% include ui/icon.html icon=include.label %}{% endif %}{{ include.text }} +{% assign element = include.element | default: 'button' %} +<{{ element }}{% if element == 'a' %} href="{{ include.href | default: '#' }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}"> +{% if include.spinner %} +{% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %} +{% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true %}{% endif %} +{{ include.text }} +{% if include.icon-right %}{% include ui/icon.html icon=include.icon-right use-svg=true right=true %}{% endif %} + + +{% endremoveemptylines %} diff --git a/pages/_includes/ui/icon.html b/pages/_includes/ui/icon.html index dded9c6d..af39817e 100644 --- a/pages/_includes/ui/icon.html +++ b/pages/_includes/ui/icon.html @@ -1 +1,19 @@ -{% assign provider = include.provider | default: "fe" %} +{% removeemptylines %} + {% if include.use-svg %} + {% assign svg-file="svg/" | append: include.icon | append: ".svg" %} + {% capture svg-icon %} + {% include_cached {{ svg-file }} %} + {% endcapture %} + + {% if include.right %} + {% assign replace-to = 'class="icon icon-right"' %} + {% else %} + {% assign replace-to = 'class="icon"' %} + {% endif %} + + {{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }} +{% else %} + {% assign provider = include.provider | default: "fe" %} + +{% endif %} +{% endremoveemptylines %} diff --git a/pages/_plugins/jekyll-filters.rb b/pages/_plugins/jekyll-filters.rb index 4ce71ff0..ae660c3e 100644 --- a/pages/_plugins/jekyll-filters.rb +++ b/pages/_plugins/jekyll-filters.rb @@ -77,7 +77,12 @@ module Jekyll else 'tabler.colors["'+ color[0] + '"]' end + end + + def replace_regex(input, reg_str, repl_str) + re = Regexp.new reg_str + input.gsub re, repl_str end end end diff --git a/pages/buttons.html b/pages/buttons.html index 07297244..9bfd18a7 100644 --- a/pages/buttons.html +++ b/pages/buttons.html @@ -3,54 +3,78 @@ title: Buttons done: true --- -

    - {% include ui/button.html text="Button" %} - {% include ui/button.html text="Button value" %} - {% include ui/button.html text="Button" color="primary" %} - {% include ui/button.html text="Button" color="secondary" %} - {% include ui/button.html text="Button" color="green" %} - {% include ui/button.html text="Button" color="teal" %} - {% include ui/button.html text="Button" color="yellow" %} - {% include ui/button.html text="Button" color="dark" %} - {% include ui/button.html text="Button" color="red" link=true %} - {% include ui/button.html text="Button" color="red" disabled=true %} - {% include ui/button.html text="Button" link=true %} - {% include ui/button.html text="Button" link=true class="text-danger" %} -

    -

    - {% include ui/button.html text="Button" color="red" square=true %} - {% include ui/button.html text="Button" color="red" pill=true %} - {% include ui/button.html text="Button" color="red" pill=true outline=true %} - {% include ui/button.html text="Button" color="red" outline=true %} - {% include ui/button.html text="Button" color="twitter" icon="twitter" %} - {% include ui/button.html color="facebook" icon="facebook" %} - {% include ui/button.html color="github" icon="github" %} -

    -

    - {% include ui/button.html text="Button" color="red" size="lg" %} - {% include ui/button.html text="Button" color="red" size="sm" %} -

    -

    - {% include ui/button.html text="Button" block=true color="primary" %} - {% include ui/button.html text="Button" block=true color="secondary" %} -

    -

    - {% include ui/avatar.html person-id="4" class="btn-avatar" %} Avatar - {% include ui/avatar.html person-id="5" class="btn-avatar" %} Avatar - {% include ui/avatar.html person-id="6" class="btn-avatar" %} Avatar -

    -

    - Loading… - Loading… - Loading… - Loading… -

    - -

    - {% include ui/button.html text="Button" label="star" color="primary" %} - {% include ui/button.html text="Button" label="star" color="green" %} - {% include ui/button.html text="Button" label="star" color="lime" %} - {% include ui/button.html text="Button" label="star" color="pink" %} - {% include ui/button.html text="Button" label="star" color="yellow" %} - {% include ui/button.html text="Button" label="star" color="orange" %} -

    +
    +
    +
    +
    +

    Buttons

    + +
    + {% for color in site.colors %} + {% assign c = color[0] %} + {% include ui/button.html text="Button" color=c %} + {% endfor %} +
    +
    +
    +
    + +
    +
    +
    +

    Outlined buttons

    + +
    + {% for color in site.colors %} + {% assign c = color[0] %} + {% include ui/button.html text="Button" outline=true color=c %} + {% endfor %} +
    +
    +
    +
    + +
    +
    +
    +

    Buttons with icons

    + +
    + {% for color in site.colors %} + {% assign c = color[0] %} + {% include ui/button.html text="Button" color=c icon="star" %} + {% endfor %} +
    +
    +
    +
    + +
    +
    +
    +

    Outlined buttons with icons

    + +
    + {% for color in site.colors %} + {% assign c = color[0] %} + {% include ui/button.html text="Button" outline=true color=c icon-right="star" %} + {% endfor %} +
    +
    +
    +
    + +
    +
    +
    +

    Social buttons

    + +
    + {% for social in site.socials %} + {% include ui/button.html text=social.title color=social.name icon=social.icon %} + {% endfor %} +
    +
    +
    +
    +
    diff --git a/pages/markdown.html b/pages/markdown.html new file mode 100644 index 00000000..7a1fe55d --- /dev/null +++ b/pages/markdown.html @@ -0,0 +1,45 @@ +--- +title: Markdown +--- + +
    +
    +
    + +
    +
    + +

    It's a hug, Michael. I'm hugging you.

    +

    Get me a vodka rocks. And a piece of toast. Say goodbye to these, because it's the last time! Guy's a pro. Michael! Across from where?

    +

    No… but I'd like to be asked! It's called 'taking advantage. ' It's what gets you ahead in life. Not tricks, Michael, illusions. Army had half a day.

    +

    Not tricks, Michael, illusions.

    +

    Well, what do you expect, mother? Say goodbye to these, because it's the last time! I don't understand the question, and I won't respond to it. No, I did not kill Kitty. However, I am going to oblige and answer the nice officer's questions because I am an honest man with no secrets to hide.

    +
      +
    1. I'm afraid I just blue myself.
    2. It's called 'taking advantage.' It's what gets you ahead in life.
    3. I don't understand the question, and I won't respond to it.
      4. +
    + +

    Across from where?

    +

    I don't criticize you! And if you're worried about criticism, sometimes a diet is the best defense. Did you enjoy your meal, Mom? You drank it fast enough. Did you enjoy your meal, Mom? You drank it fast enough.

    +
      +
    • No! I was ashamed to be SEEN with you. I like being with you.
    • What's Spanish for "I know you speak English?"
    • No! I was ashamed to be SEEN with you. I like being with you.
      • +
    + +

    Steve Holt! Guy's a pro. I don't understand the question, and I won't respond to it. There's so many poorly chosen words in that sentence.

    +

    Oh, you're gonna be in a coma, all right. Bad news. Andy Griffith turned us down. He didn't like his trailer. It's called 'taking advantage.' It's what gets you ahead in life. That's why you always leave a note!

    + +

    That's what it said on 'Ask Jeeves.' Guy's a pro.

    +

    There's so many poorly chosen words in that sentence. There's only one man I've ever called a coward, and that's Brian Doyle Murray. No, what I'm calling you is a television actor.

    +

    Whoa, this guy's straight? Say goodbye to these, because it's the last time! That's why you always leave a note! There's only one man I've ever called a coward, and that's Brian Doyle Murray. No, what I'm calling you is a television actor.

    +

    Say goodbye to these, because it's the last time! I'm afraid I just blue myself. Steve Holt! We just call it a sausage. We just call it a sausage. Steve Holt!

    +

    Not tricks, Michael, illusions. Guy's a pro. No! I was ashamed to be SEEN with you. I like being with you. Really? Did nothing cancel? We just call it a sausage.

    +

    Now, when you do this without getting punched in the chest, you'll have more fun. Guy's a pro. That's what it said on 'Ask Jeeves.' I don't understand the question, and I won't respond to it. Whoa, this guy's straight?

    +

    As you may or may not know, Lindsay and I have hit a bit of a rough patch. He'll want to use your yacht, and I don't want this thing smelling like fish. No… but I'd like to be asked! Did you enjoy your meal, Mom? You drank it fast enough.

    +

    We just call it a sausage. I care deeply for nature. It's a hug, Michael. I'm hugging you. Well, what do you expect, mother?

    +

    I don't understand the question, and I won't respond to it. Well, what do you expect, mother? Marry me. No, I did not kill Kitty. However, I am going to oblige and answer the nice officer's questions because I am an honest man with no secrets to hide.

    +

    He'll want to use your yacht, and I don't want this thing smelling like fish. I'm half machine. I'm a monster. But I bought a yearbook ad from you, doesn't that mean anything anymore? That's what it said on 'Ask Jeeves.'

    +
    +
    + +
    +
    +
    diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 618e57dc..c1cb0bb8 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -1,3 +1,2 @@ -@import "mixins/px2rem"; -@import "mixins/theme-color-lighter"; +@import "mixins/functions"; @import "mixins/container-breakpoints"; diff --git a/scss/_variables.scss b/scss/_variables.scss index 44d4cc0e..ad14f916 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1,10 +1,11 @@ // FONTS -$font-family-base: "Nunito", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; +$google-font: 'Source Sans Pro' !default; + +$font-family-sans-serif: $google-font, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default; $font-family-serif: "Georgia", "Times New Roman", times, serif !default; $font-icons: "tabler-webfont" !default; // EXTERNAL FONTS -$google-font-url: "https://fonts.googleapis.com/css?family=Nunito:300,400,600,700&display=swap" !default; $icon-fonts: () !default; // COLORS @@ -12,8 +13,8 @@ $full-black: rgba(0, 0, 0, 1) !default; $full-white: rgba(255, 255, 255, 1) !default; $light-black: rgba(0, 0, 0, .4) !default; $light-white: rgba(255, 255, 255, .4) !default; -$min-black: rgba(135, 150, 165, .064) !default; -$min-white: rgba(255, 255, 255, .064) !default; +$min-black: rgba(135, 150, 165, .032) !default; +$min-white: rgba(255, 255, 255, .032) !default; $gray-100: #f8f9fa !default; $gray-200: #e9ecef !default; @@ -31,8 +32,8 @@ $indigo: #6574cd !default; $purple: #a55eea !default; $pink: #f66d9b !default; $red: #fa4654 !default; -$orange: #fd9644 !default; -$yellow: #f1c40f !default; +$orange: #ff922b !default; +$yellow: #fcc419 !default; $lime: #7bd235 !default; $green: #5eba00 !default; $teal: #2bcbba !default; @@ -64,6 +65,7 @@ $social-colors: ( "rss": #ffa500, "flickr": #0063dc, "bitbucket": #0052cc, + "tabler": #206bc4 ) !default; $status-colors: ( @@ -106,24 +108,28 @@ $avatar-sizes: ( $font-size-base: .9375rem !default; $font-weight-base: 400 !default; $line-height-base: 1.6 !default; +$body-letter-spacing: null !default; $border-radius: 3px !default; //Typography $headings-color: #021f34 !default; -$headings-font-weight: 600 !default; +$headings-font-weight: 500 !default; $small-font-size: 87.5% !default; -$h1-font-size: $font-size-base * 2 !default; -$h2-font-size: $font-size-base * 1.75 !default; -$h3-font-size: $font-size-base * 1.5 !default; -$h4-font-size: $font-size-base * 1.25 !default; -$h5-font-size: $font-size-base * 1 !default; -$h6-font-size: $font-size-base * .875 !default; +$h1-font-size: (23em/15) !default; +$h2-font-size: (21em/15) !default; +$h3-font-size: (19em/15) !default; +$h4-font-size: (17em/15) !default; +$h5-font-size: (15em/15) !default; +$h6-font-size: (13em/15) !default; +$h7-font-size: (11em/15) !default; $blockquote-font-size: $h4-font-size !default; -$lead-font-size: $h3-font-size !default; + +$lead-font-size: $h4-font-size !default; +$lead-font-weight: 400 !default; $hr-opacity: .1 !default; $hr-margin-y: 1rem !default; @@ -212,10 +218,27 @@ $container-max-widths: ( //alerts $alert-link-font-weight: 600 !default; +//breadcrumb +$breadcrumb-variants: ( + dots: '·', + arrows: '›', + bullets: '\02022', +) !default; + +//badges +$badge-font-weight: 500 !default; + +//buttons +$input-btn-font-size: 15px !default; +$btn-padding-x: 1rem !default; + +$btn-font-weight: 500 !default; +$btn-border-radius: 3px !default; + //cards $card-border-color: $border-color !default; $card-border-radius: $border-radius !default; -$card-cap-bg: $body-bg !default; +$card-cap-bg: $min-black !default; $card-active-border-color: $blue !default; $card-status-size: 2px !default; @@ -228,21 +251,6 @@ $card-shadow-hover: rgba($dark, .08) 0 2px 12px 0; $close-font-weight: 400 !default; $close-font-size: 1.5rem !default; -//badges -$badge-font-weight: 600 !default; - -//buttons -$btn-font-weight: 600 !default; -$btn-font-size: 14px !default; -$btn-border-radius: 3px !default; - -//breadcrumb -$breadcrumb-variants: ( - dots: '·', - arrows: '›', - bullets: '\02022', -) !default; - //nav $nav-link-padding-y: .25rem !default; @@ -277,6 +285,9 @@ $spinner-height: 1.5rem !default; $spinner-border-width: 2px !default; $spinner-border-width-sm: 2px !default; +//tables +$table-head-border-color: $border-color !default; + //toasts $toast-border-color: $border-color !default; $toast-header-color: $text-muted !default; @@ -284,6 +295,10 @@ $toast-header-color: $text-muted !default; //other $yiq-contrasted-threshold: 200 !default; +//progress +$progress-bg: $gray-100 !default; +$progress-height: .75rem !default; + $list-group-border-color: $border-color !default; $list-group-action-color: inherit !default; diff --git a/scss/fonts/_webfonts.scss b/scss/fonts/_webfonts.scss index 40525a85..c2a7f9a4 100644 --- a/scss/fonts/_webfonts.scss +++ b/scss/fonts/_webfonts.scss @@ -1,4 +1,6 @@ -@if $google-font-url { +@if $google-font { + $google-font-url: "https://fonts.googleapis.com/css?family=" + str-replace($google-font, ' ', '+') + ":300,400,500,600,700" !default; + @import url($google-font-url); } diff --git a/scss/layout/_core.scss b/scss/layout/_core.scss index ad892e97..d5802694 100644 --- a/scss/layout/_core.scss +++ b/scss/layout/_core.scss @@ -2,20 +2,15 @@ html { height: 100%; font-size: 16px; - - @include media-breakpoint-down(md) { - font-size: 15px; - } } body { height: 100%; overflow-y: scroll; touch-action: manipulation; - -webkit-tap-highlight-color: transparent; - -webkit-text-size-adjust: none; text-rendering: optimizeLegibility; font-feature-settings: "liga" 0; + letter-spacing: $body-letter-spacing; } body *::-webkit-scrollbar { diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss index 927c361e..66a060b9 100644 --- a/scss/layout/_navbar.scss +++ b/scss/layout/_navbar.scss @@ -335,7 +335,6 @@ Folded navbar } .nav-icon { - width: 1.5rem; font-size: px2rem(15px); opacity: 1; justify-content: center; @@ -359,7 +358,7 @@ Folded navbar .nav-icon { display: flex; - width: 1.75rem; + width: 1.5rem; border-radius: 100%; flex-shrink: 0; opacity: .8; diff --git a/scss/layout/_page.scss b/scss/layout/_page.scss index f728767f..4a51ab69 100644 --- a/scss/layout/_page.scss +++ b/scss/layout/_page.scss @@ -10,6 +10,7 @@ font-size: $h3-font-size; font-weight: 400; line-height: 2.5rem; + color: $body-color; } .page-title-options { diff --git a/scss/mixins/_functions.scss b/scss/mixins/_functions.scss new file mode 100644 index 00000000..94004696 --- /dev/null +++ b/scss/mixins/_functions.scss @@ -0,0 +1,22 @@ +@function px2rem($px) { + @return ($px / 16px) * 1rem; +} + +@function theme-color-lighter($color) { + @return rgba($color, .2); +} + +@function theme-color-lightest($color) { + @return mix($color, #fff, 10%); +} + + +@function str-replace($string, $search, $replace: '') { + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; +} diff --git a/scss/mixins/_px2rem.scss b/scss/mixins/_px2rem.scss deleted file mode 100644 index 24f47e1d..00000000 --- a/scss/mixins/_px2rem.scss +++ /dev/null @@ -1,3 +0,0 @@ -@function px2rem($px) { - @return ($px / 16px) * 1rem; -} diff --git a/scss/mixins/_theme-color-lighter.scss b/scss/mixins/_theme-color-lighter.scss deleted file mode 100644 index 951cd6fd..00000000 --- a/scss/mixins/_theme-color-lighter.scss +++ /dev/null @@ -1,8 +0,0 @@ -@function theme-color-lighter($color) { - @return rgba($color, .2); -} - -@function theme-color-lightest($color) { - @return mix($color, #fff, 10%); - //@return rgba($color, .1); -} diff --git a/scss/ui/_buttons.scss b/scss/ui/_buttons.scss index aba584f8..15204c45 100644 --- a/scss/ui/_buttons.scss +++ b/scss/ui/_buttons.scss @@ -1,9 +1,32 @@ .btn { - letter-spacing: .03em; + display: inline-flex; + align-items: center; + justify-content: center; box-shadow: 0 1px 1px rgba(0, 0, 0, .03); - .flag { - vertical-align: -5px; + &:not([class^='btn-outline']):not([class*=' btn-outline']) { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), inset 0 2px 0 -1px rgba(255, 255, 255, .1); + text-shadow: 1px 1px 0 rgba(0, 0, 0, .1); + + svg.icon { + filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .1)); + } + } + + .icon { + font-size: 1.2em; + vertical-align: sub; + margin: 0 .5em 0 -.25em; + } + + .icon-right { + margin: 0 -.25em 0 .5em; + } + + svg.icon { + width: 1em; + height: 1em; + stroke-width: 1.5; } } @@ -41,9 +64,6 @@ } .btn-icon { - min-width: px2rem(35px); //todo: porpawic, wpisalem z palca - padding-right: .5rem; - padding-left: .5rem; } .btn-list { @@ -53,7 +73,6 @@ > .btn, > .dropdown { margin-bottom: .5rem; - display: inline-block; &:not(:last-child) { margin-right: .5rem; diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss index 2e599aaf..7c583a06 100644 --- a/scss/ui/_cards.scss +++ b/scss/ui/_cards.scss @@ -152,13 +152,14 @@ display: block; font-size: $h4-font-size; font-weight: $headings-font-weight; + margin: 0 0 1rem; @at-root a#{&}:hover { color: inherit; } .card-header & { - margin: -.125rem 0; + margin: 0; } } diff --git a/scss/ui/_empty.scss b/scss/ui/_empty.scss index b9715030..293a5fe3 100644 --- a/scss/ui/_empty.scss +++ b/scss/ui/_empty.scss @@ -1,7 +1,7 @@ .empty { text-align: center; color: $text-muted; - padding: 2rem 3rem; + padding: 3rem; height: 100%; display: flex; diff --git a/scss/ui/_inputs.scss b/scss/ui/_inputs.scss index 490d0965..0e31acb9 100644 --- a/scss/ui/_inputs.scss +++ b/scss/ui/_inputs.scss @@ -32,8 +32,8 @@ textarea { } .form-control-light { - background-color: $min-black; - border-color: $min-black; + background-color: $gray-100; + border-color: transparent; } .form-footer { diff --git a/scss/ui/_progress.scss b/scss/ui/_progress.scss index 48fcbe84..f6ba8b2e 100644 --- a/scss/ui/_progress.scss +++ b/scss/ui/_progress.scss @@ -12,14 +12,12 @@ .progress { appearance: none; - background: $min-black; - height: .75rem; - line-height: .75rem; + line-height: $progress-height; position: relative; width: 100%; &::-webkit-progress-bar { - background: $min-black; + background: $gray-100; } &::-webkit-progress-value { diff --git a/scss/ui/_stamps.scss b/scss/ui/_stamps.scss index e09e5d85..7e46d22b 100644 --- a/scss/ui/_stamps.scss +++ b/scss/ui/_stamps.scss @@ -13,5 +13,6 @@ .icon { font-size: 1.25rem; + vertical-align: middle; } } diff --git a/scss/ui/_tables.scss b/scss/ui/_tables.scss index af5142c5..9bc3e06f 100644 --- a/scss/ui/_tables.scss +++ b/scss/ui/_tables.scss @@ -6,17 +6,14 @@ border-width: $table-border-width; background: $min-black; text-transform: uppercase; - font-size: $h6-font-size; font-weight: 600; + font-size: 11px; + letter-spacing: .03em; } } th { - padding-top: .5rem; - padding-bottom: .5rem; - font-weight: 400; color: $text-muted; - white-space: nowrap; } } diff --git a/scss/ui/_typo.scss b/scss/ui/_typo.scss index 5b4ae7cb..3b28d4c8 100644 --- a/scss/ui/_typo.scss +++ b/scss/ui/_typo.scss @@ -20,7 +20,6 @@ h6, .h4, .h5, .h6 { - letter-spacing: -.012em; a { color: inherit; @@ -84,35 +83,6 @@ img { max-width: 100%; } -/** -Divider - */ -.divider { - display: flex; - flex: 0; - align-items: center; - width: 100%; - margin: 1.5rem auto; - font-size: $h6-font-size; - color: $text-muted; - letter-spacing: .5px; - font-weight: 400; - - &::before, - &::after { - flex-grow: 1; - content: ""; - border-top: 1px solid $border-color; - } - - &::before { - margin-right: 1rem; - } - - &::after { - margin-left: 1rem; - } -} /** Selection diff --git a/scss/utils/_text.scss b/scss/utils/_text.scss index 9ed37234..12e31acb 100644 --- a/scss/utils/_text.scss +++ b/scss/utils/_text.scss @@ -47,7 +47,6 @@ Antialiasing Markdown */ .markdown { - line-height: 1.66; > :first-child { margin-top: 0; @@ -57,18 +56,6 @@ Markdown margin-bottom: 0; } - > { - h1, - h2, - h3, - h4, - h5, - h6 { - margin-top: 1.5em; - font-weight: 600; - } - } - table { @extend .table, .table-bordered; } -- GitLab