From ddda5eef234170f72bf5f26226586cf7f9a453fd Mon Sep 17 00:00:00 2001 From: Ayo Date: Sun, 21 Jan 2018 13:13:42 +0800 Subject: [PATCH] make website lighter --- _config.yml | 1 + _drafts/2018-01-09-you-feel-like-a-fraud.md | 7 - _drafts/hello-world.md | 18 ++ _drafts/you-feel-like-a-fraud.md | 8 + _includes/footer.html | 2 +- _layouts/post.html | 9 +- assets/main.scss | 198 +++++------------- hacker/_includes.hacker/disqus_comments.html | 20 ++ hacker/_includes.hacker/footer.html | 48 +++++ hacker/_includes.hacker/google-analytics.html | 11 + hacker/_includes.hacker/head.html | 16 ++ hacker/_includes.hacker/header.html | 49 +++++ hacker/_includes.hacker/icon-github.html | 1 + hacker/_includes.hacker/icon-github.svg | 1 + hacker/_includes.hacker/icon-twitter.html | 1 + hacker/_includes.hacker/icon-twitter.svg | 1 + hacker/_layouts.hacker/default.html | 26 +++ hacker/_layouts.hacker/home.html | 28 +++ hacker/_layouts.hacker/page.html | 14 ++ hacker/_layouts.hacker/post.html | 28 +++ hacker/assets.hacker/main.scss | 173 +++++++++++++++ {assets => hacker/assets.hacker}/type-js.css | 0 {assets => hacker/assets.hacker}/type-js.js | 0 {assets => hacker/assets.hacker}/vim.css | 0 24 files changed, 503 insertions(+), 157 deletions(-) delete mode 100644 _drafts/2018-01-09-you-feel-like-a-fraud.md create mode 100644 _drafts/hello-world.md create mode 100644 _drafts/you-feel-like-a-fraud.md create mode 100644 hacker/_includes.hacker/disqus_comments.html create mode 100644 hacker/_includes.hacker/footer.html create mode 100644 hacker/_includes.hacker/google-analytics.html create mode 100644 hacker/_includes.hacker/head.html create mode 100644 hacker/_includes.hacker/header.html create mode 100644 hacker/_includes.hacker/icon-github.html create mode 100644 hacker/_includes.hacker/icon-github.svg create mode 100644 hacker/_includes.hacker/icon-twitter.html create mode 100644 hacker/_includes.hacker/icon-twitter.svg create mode 100644 hacker/_layouts.hacker/default.html create mode 100644 hacker/_layouts.hacker/home.html create mode 100644 hacker/_layouts.hacker/page.html create mode 100644 hacker/_layouts.hacker/post.html create mode 100644 hacker/assets.hacker/main.scss rename {assets => hacker/assets.hacker}/type-js.css (100%) rename {assets => hacker/assets.hacker}/type-js.js (100%) rename {assets => hacker/assets.hacker}/vim.css (100%) diff --git a/_config.yml b/_config.yml index 00820ab..ac6393e 100644 --- a/_config.yml +++ b/_config.yml @@ -16,6 +16,7 @@ title: ./full.hacker author: Ayo attribution: "2018 © by Full Hacker" +bugreport_url: "https://github.com/fullhacker/fullhacker.github.io/issues/new" website: fullhacker.github.io email: fullhackerblog@gmail.com description: >- # this means to ignore newlines until "baseurl:" diff --git a/_drafts/2018-01-09-you-feel-like-a-fraud.md b/_drafts/2018-01-09-you-feel-like-a-fraud.md deleted file mode 100644 index dde45af..0000000 --- a/_drafts/2018-01-09-you-feel-like-a-fraud.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: "You feel like a fraud, I know" ---- - -Let me gues... - -You feel like you've fooled everyone at least once. diff --git a/_drafts/hello-world.md b/_drafts/hello-world.md new file mode 100644 index 0000000..78aa995 --- /dev/null +++ b/_drafts/hello-world.md @@ -0,0 +1,18 @@ +--- +title: "(draft) Hello, World! A New Site for Dev Life Hacks!" +permalink: '/hello-world-draft' +notes: 'the goal of this post is to define the target audience of the whole blog, which are Mid-Level Web Developers' +--- + +It's kind of getting old, I know. + +A new blog... *again?* What's this all about? + +Well, to put it simply, **Full Hacker** is like [Life Hacker](https://lifehacker.com), but for developers (and other IT professionals). This will be a place to share "Life Hacks" that we want to share to one another... like automation, new tech, tools, setups, and all sorts of time-saving tips and tricks. + +Who are these developers I'm talking about, you ask? Let's get into that in another post. ;) + +Though, let me clear this one thing upfront: This is not a place to ask coding questions. We got [Stack Overflow](https://stackoverflow.com) for that already. Instead, here, we just share secrets that make our work and life easier as developers. + +Contributing is simple. Just hit us up with an email here: [FullHackerBlog@gmail.com](mailto:fullhackerblog@gmail.com) or head over to our place at [Github](https://github.com/fullhacker/fullhacker.github.io) and check the [Issues Page](https://github.com/fullhacker/fullhacker.github.io/issues). There are still lots of work to do in building this site and everyone is welcome to join. :) + diff --git a/_drafts/you-feel-like-a-fraud.md b/_drafts/you-feel-like-a-fraud.md new file mode 100644 index 0000000..1145b75 --- /dev/null +++ b/_drafts/you-feel-like-a-fraud.md @@ -0,0 +1,8 @@ +--- +title: "(draft) You feel like a fraud, I know" +permalink: "/fraud" +--- + +Let me guess... + +You feel like you've fooled everyone at least once. diff --git a/_includes/footer.html b/_includes/footer.html index 885c189..896e18b 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -38,7 +38,7 @@
diff --git a/_layouts/post.html b/_layouts/post.html index e546380..c6fb420 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -6,14 +6,15 @@ layout: default

- {% if page.author %} - • - {% endif %}

+

-

{{ page.title | escape }}

+

{{ page.title | escape }}

diff --git a/assets/main.scss b/assets/main.scss index 98d645a..2137f7b 100644 --- a/assets/main.scss +++ b/assets/main.scss @@ -3,171 +3,79 @@ --- @import "minima"; -@import url(type-js.css); -@import url(vim.css); html, body { - font: 300 21px Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; - color: #ddd; - background-color: #333; -webkit-box-shadow: inset 0 3px 30px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 3px 30px rgba(0,0,0,0.3); box-shadow: inset 0 3px 30px rgba(0,0,0,0.3); - text-shadow: 0 1px 3px rgba(0,0,0,0.5); + /* text-shadow: 0 1px 1px rgba(0,0,0,0.3); */ -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; margin: 0; + color: rgba(0,0,0,.84); + font-size: 20px; + line-height: 1.4; + font-family: medium-content-sans-serif-font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; + letter-spacing: 0; + font-weight: 400; + font-style: normal; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; } -.site-title { - font-size: 50px; - color: white !important; - text-shadow: 0px 4px 3px rgba(0,0,0,0.4), - 0px 8px 13px rgba(0,0,0,0.1), - 0px 18px 23px rgba(0,0,0,0.1); +header.site-header { + position: fixed !important; + top: 0; + width: 100%; } -.page-content { - background-color: white; - width: 60%; - margin: 30px auto !important; - background-color: #444 !important; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; - padding: 30px; - -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1); - -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1); - box-shadow: 0 3px 10px rgba(0,0,0,0.1); +header.site-header, +footer.site-footer { + background: rgba(255,255,255,.97)!important; +} + +div.site-body { + padding-top: 60px; +} + +article .post-content p { + --x-height-multiplier: 0.375; + --baseline-multiplier: 0.17; + font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif; + letter-spacing: .01rem; + font-weight: 400; + font-style: normal; + font-size: 21px; + line-height: 1.58; + letter-spacing: -.003em; + margin-top: 29px; } .page-content .wrapper { - padding: 0px; - margin: 0px auto; + padding: 0 20px; + margin: 0 auto; +} + +.post-title { + --x-height-multiplier: 0.342; + --baseline-multiplier: 0.22; + font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif; + letter-spacing: -.02em; + font-weight: 700; + font-style: normal; + letter-spacing: 0; + font-size: 34px; + margin-left: -2.63px; + line-height: 1.04; + letter-spacing: -.015em; + padding-top: 5px!important; } -.page-content p { - font-size: 16.96px; - line-height: 26px; -} - -.site-nav .page-link.current { - background-color: #fc0; - color: #222; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 5px rgba(0,0,0,0.5); - -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5),0 1px 5px rgba(0,0,0,0.5); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 5px rgba(0,0,0,0.5); - text-shadow: 0 1px 0 rgba(255,255,255,0.3); -} - -a, a:visited, .site-nav .page-link { - color: #fc0; - text-decoration: none; - -webkit-transition: all 0.25s; - -moz-transition: all 0.25s; - -o-transition: all 0.25s; - transition: all 0.25s; -} - -@media screen and (max-width: 600px) { - .site-nav { - background-color: transparent !important; - border: 0px !important; - } -} - -.site-nav .page-link:hover { - color: #fc0; - background-color: #252525; - -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.1); - -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5),0 1px 0 rgba(255,255,255,0.1); - box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.1); - text-shadow: 0 1px 3px rgba(0,0,0,0.5); -} - -.site-nav .page-link { - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - font-weight: 900; - font-size: 0.75em; - padding: 0.5em 1em; - text-shadow: none; - text-transform: uppercase; - -webkit-transition: all 0.25s; - -moz-transition: all 0.25s; - -o-transition: all 0.25s; - transition: all 0.25s; -} - -a.post-link:hover { - color: white; -} -a.post-link, h1.post-title { - color: #ddd; - font-weight: bold; - display: block; - font-size: 2em; - -webkit-margin-after: 0.67em; - -webkit-margin-start: 0px; - -webkit-margin-end: 0px; -} - -h1.post-title { - color: #fff; - font-size: 32px; -} - -a:hover { - color: #f90; - text-decoration: none; -} - -.desc-list, .contact-list, .social-media-list { +.desc-list { list-style: none; - margin-left: 0; + margin: 0; } - -.page-content { -} - -.footer-col-wrapper { - color: #ddd -} - -.site-header, .site-footer { - background: #2b2b2b; - border: 0px; - padding: 15px; -} - -.site-desc { - top: 0px; - color: #efefef; - text-shadow: 0px 4px 3px rgba(0,0,0,0.4), - 0px 8px 13px rgba(0,0,0,0.1), - 0px 18px 23px rgba(0,0,0,0.1); -} - -.site-desc-wrapper { - float:left; - position: relative; - top: 0; - left: 90px; -} - -.site-title-wrapper { - float: left; -} - -.site-title-desc-wrapper { - float: left; - width: 200px; -} - -/**/ - diff --git a/hacker/_includes.hacker/disqus_comments.html b/hacker/_includes.hacker/disqus_comments.html new file mode 100644 index 0000000..87fa309 --- /dev/null +++ b/hacker/_includes.hacker/disqus_comments.html @@ -0,0 +1,20 @@ +{% if page.comments != false and jekyll.environment == "production" %} + +
+ + +{% endif %} diff --git a/hacker/_includes.hacker/footer.html b/hacker/_includes.hacker/footer.html new file mode 100644 index 0000000..885c189 --- /dev/null +++ b/hacker/_includes.hacker/footer.html @@ -0,0 +1,48 @@ +
+ + +
+ +
+
+
    +
  • + {% if site.attribution %} + {{ site.attribution }} + {% else %} + {{ site.title | escape }} + {% endif %} +
    • + {% if site.email %} +
  • {{ site.email }}
    • + {% endif %} +
+
+ +
+ +
+ +
+ +
+
+ +
+ +
diff --git a/hacker/_includes.hacker/google-analytics.html b/hacker/_includes.hacker/google-analytics.html new file mode 100644 index 0000000..eb2a692 --- /dev/null +++ b/hacker/_includes.hacker/google-analytics.html @@ -0,0 +1,11 @@ + + diff --git a/hacker/_includes.hacker/head.html b/hacker/_includes.hacker/head.html new file mode 100644 index 0000000..b8e571b --- /dev/null +++ b/hacker/_includes.hacker/head.html @@ -0,0 +1,16 @@ + + + + + + + + {% if jekyll.environment == 'production' and site.google_analytics %} + {% include google-analytics.html %} + {% endif %} + + + diff --git a/hacker/_includes.hacker/header.html b/hacker/_includes.hacker/header.html new file mode 100644 index 0000000..8345c74 --- /dev/null +++ b/hacker/_includes.hacker/header.html @@ -0,0 +1,49 @@ + + diff --git a/hacker/_includes.hacker/icon-github.html b/hacker/_includes.hacker/icon-github.html new file mode 100644 index 0000000..cb01a35 --- /dev/null +++ b/hacker/_includes.hacker/icon-github.html @@ -0,0 +1 @@ +{% include icon-github.svg %}{{ include.username }} diff --git a/hacker/_includes.hacker/icon-github.svg b/hacker/_includes.hacker/icon-github.svg new file mode 100644 index 0000000..e6c5f6d --- /dev/null +++ b/hacker/_includes.hacker/icon-github.svg @@ -0,0 +1 @@ + diff --git a/hacker/_includes.hacker/icon-twitter.html b/hacker/_includes.hacker/icon-twitter.html new file mode 100644 index 0000000..8684b6a --- /dev/null +++ b/hacker/_includes.hacker/icon-twitter.html @@ -0,0 +1 @@ +{{ include.username }} diff --git a/hacker/_includes.hacker/icon-twitter.svg b/hacker/_includes.hacker/icon-twitter.svg new file mode 100644 index 0000000..efc0ecf --- /dev/null +++ b/hacker/_includes.hacker/icon-twitter.svg @@ -0,0 +1 @@ + diff --git a/hacker/_layouts.hacker/default.html b/hacker/_layouts.hacker/default.html new file mode 100644 index 0000000..2588093 --- /dev/null +++ b/hacker/_layouts.hacker/default.html @@ -0,0 +1,26 @@ + + + + {% include head.html %} + + + +
+ + {% include header.html %} + +
+
+
+ {{ content }} +
+
+
+ + {% include footer.html %} + +
+ + + + diff --git a/hacker/_layouts.hacker/home.html b/hacker/_layouts.hacker/home.html new file mode 100644 index 0000000..2531362 --- /dev/null +++ b/hacker/_layouts.hacker/home.html @@ -0,0 +1,28 @@ +--- +layout: default +--- + +
+ {% if page.title %} +

{{ page.title }}

+ {% endif %} + + {{ content }} + + {% if site.posts.size > 0 %} +

{{ page.list_title }}

+
    + {% for post in site.posts %} +
  • + {% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %} + {{ post.date | date: date_format }} +

    + {{ post.title | escape }} +

    +
    • + {% endfor %} +
+ + {% endif %} + +
diff --git a/hacker/_layouts.hacker/page.html b/hacker/_layouts.hacker/page.html new file mode 100644 index 0000000..01e4b2a --- /dev/null +++ b/hacker/_layouts.hacker/page.html @@ -0,0 +1,14 @@ +--- +layout: default +--- +
+ +
+

{{ page.title | escape }}

+
+ +
+ {{ content }} +
+ +
diff --git a/hacker/_layouts.hacker/post.html b/hacker/_layouts.hacker/post.html new file mode 100644 index 0000000..e546380 --- /dev/null +++ b/hacker/_layouts.hacker/post.html @@ -0,0 +1,28 @@ +--- +layout: default +--- +
+ +
+

+ + {% if page.author %} + • + {% endif %}

+ +

{{ page.title | escape }}

+
+ +
+ {{ content }} +
+ + {% if site.disqus.shortname %} + {% include disqus_comments.html %} + {% endif %} + + +
diff --git a/hacker/assets.hacker/main.scss b/hacker/assets.hacker/main.scss new file mode 100644 index 0000000..98d645a --- /dev/null +++ b/hacker/assets.hacker/main.scss @@ -0,0 +1,173 @@ +--- +# Only the main Sass file needs front matter (the dashes are enough) +--- + +@import "minima"; +@import url(type-js.css); +@import url(vim.css); + +html, +body { + font: 300 21px Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; + color: #ddd; + background-color: #333; + -webkit-box-shadow: inset 0 3px 30px rgba(0,0,0,0.3); + -moz-box-shadow: inset 0 3px 30px rgba(0,0,0,0.3); + box-shadow: inset 0 3px 30px rgba(0,0,0,0.3); + text-shadow: 0 1px 3px rgba(0,0,0,0.5); + -webkit-font-feature-settings: "kern" 1; + -moz-font-feature-settings: "kern" 1; + -o-font-feature-settings: "kern" 1; + font-feature-settings: "kern" 1; + font-kerning: normal; + margin: 0; +} + +.site-title { + font-size: 50px; + color: white !important; + text-shadow: 0px 4px 3px rgba(0,0,0,0.4), + 0px 8px 13px rgba(0,0,0,0.1), + 0px 18px 23px rgba(0,0,0,0.1); +} + +.page-content { + background-color: white; + width: 60%; + margin: 30px auto !important; + background-color: #444 !important; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + padding: 30px; + -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1); + -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1); + box-shadow: 0 3px 10px rgba(0,0,0,0.1); +} + +.page-content .wrapper { + padding: 0px; + margin: 0px auto; +} + +.page-content p { + font-size: 16.96px; + line-height: 26px; +} + +.site-nav .page-link.current { + background-color: #fc0; + color: #222; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 5px rgba(0,0,0,0.5); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5),0 1px 5px rgba(0,0,0,0.5); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 5px rgba(0,0,0,0.5); + text-shadow: 0 1px 0 rgba(255,255,255,0.3); +} + +a, a:visited, .site-nav .page-link { + color: #fc0; + text-decoration: none; + -webkit-transition: all 0.25s; + -moz-transition: all 0.25s; + -o-transition: all 0.25s; + transition: all 0.25s; +} + +@media screen and (max-width: 600px) { + .site-nav { + background-color: transparent !important; + border: 0px !important; + } +} + +.site-nav .page-link:hover { + color: #fc0; + background-color: #252525; + -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.1); + -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5),0 1px 0 rgba(255,255,255,0.1); + box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.1); + text-shadow: 0 1px 3px rgba(0,0,0,0.5); +} + +.site-nav .page-link { + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + font-weight: 900; + font-size: 0.75em; + padding: 0.5em 1em; + text-shadow: none; + text-transform: uppercase; + -webkit-transition: all 0.25s; + -moz-transition: all 0.25s; + -o-transition: all 0.25s; + transition: all 0.25s; +} + +a.post-link:hover { + color: white; +} +a.post-link, h1.post-title { + color: #ddd; + font-weight: bold; + display: block; + font-size: 2em; + -webkit-margin-after: 0.67em; + -webkit-margin-start: 0px; + -webkit-margin-end: 0px; +} + +h1.post-title { + color: #fff; + font-size: 32px; +} + +a:hover { + color: #f90; + text-decoration: none; +} + +.desc-list, .contact-list, .social-media-list { + list-style: none; + margin-left: 0; +} + +.page-content { +} + +.footer-col-wrapper { + color: #ddd +} + +.site-header, .site-footer { + background: #2b2b2b; + border: 0px; + padding: 15px; +} + +.site-desc { + top: 0px; + color: #efefef; + text-shadow: 0px 4px 3px rgba(0,0,0,0.4), + 0px 8px 13px rgba(0,0,0,0.1), + 0px 18px 23px rgba(0,0,0,0.1); +} + +.site-desc-wrapper { + float:left; + position: relative; + top: 0; + left: 90px; +} + +.site-title-wrapper { + float: left; +} + +.site-title-desc-wrapper { + float: left; + width: 200px; +} + +/**/ + diff --git a/assets/type-js.css b/hacker/assets.hacker/type-js.css similarity index 100% rename from assets/type-js.css rename to hacker/assets.hacker/type-js.css diff --git a/assets/type-js.js b/hacker/assets.hacker/type-js.js similarity index 100% rename from assets/type-js.js rename to hacker/assets.hacker/type-js.js diff --git a/assets/vim.css b/hacker/assets.hacker/vim.css similarity index 100% rename from assets/vim.css rename to hacker/assets.hacker/vim.css