1
0
mirror of https://github.com/onkelbeh/cheatsheets.git synced 2025-06-16 23:27:46 +02:00

Add link to home

This commit is contained in:
Rico Sta. Cruz 2017-08-30 18:24:20 +08:00
parent 8061026ff6
commit acee539004
No known key found for this signature in database
GPG Key ID: CAAD38AE2962619A
12 changed files with 321 additions and 128 deletions

View File

@ -11,26 +11,52 @@
| where_exp: "page", "page.deprecated != true"
| sort: "weight", "last"
%}
<div class='related-posts'>
<div class='related-posts' id='related'>
<div class='container'>
{% if include.page.category == 'Others' %}
<h3>Other cheatsheets</h3>
{% else %}
<h3>Other {{ include.page.category }} cheatsheets</h3>
{% endif %}
<div class='related-posts-section'>
<div class='callout'>
<a class='related-posts-callout' href='{{ base }}'>
<div class='text'>
<i class='icon'></i>
<ul class='related-post-list'>
{% for page in category_pages limit: 6 %}
{% include 2017/related-posts-item.html page=page class='item related-post-item' %}
{% endfor %}
</ul>
<span class='description'>
Over {{ site.pages | size }} curated cheatsheets, by developers for developers.
</span>
<h3>Top cheatsheets</h3>
<span class='push-button -dark'>
Cheatsheets home
</span>
</div>
</a>
</div>
<ul class='related-post-list'>
{% for page in top_pages limit: 6 %}
{% include 2017/related-posts-item.html page=page class='item related-post-item' %}
{% endfor %}
</ul>
<div class='group'>
<div class='related-posts-group'>
{% if include.page.category == 'Others' %}
<h3>Other cheatsheets</h3>
{% else %}
<h3>Other {{ include.page.category }} cheatsheets</h3>
{% endif %}
<ul class='related-post-list'>
{% for page in category_pages limit: 6 %}
{% include 2017/related-posts-item.html page=page class='item related-post-item' %}
{% endfor %}
</ul>
</div>
</div>
<div class='group'>
<div class='related-posts-group'>
<h3>Top cheatsheets</h3>
<ul class='related-post-list'>
{% for page in top_pages limit: 6 %}
{% include 2017/related-posts-item.html page=page class='item related-post-item' %}
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>

View File

@ -7,10 +7,7 @@
&,
&:visited {
background-color: $base-a;
background: linear-gradient(
to right,
$base-a,
adjust-color($base-a, $lightness: 2%, $hue: 16deg));
background: $base-a-gradient;
color: white;
}
@ -21,3 +18,17 @@
color: white;
}
}
.push-button.-dark {
&,
&:visited {
background: darken($base-a, 16%);
color: white;
}
&:hover,
&:focus {
background: darken($base-a, 24%);
color: white;
}
}

View File

@ -0,0 +1,80 @@
.related-post-item {
& {
display: flex;
text-align: left;
line-height: 1.4;
}
// Layout
& > a {
flex: 1 1 100%;
display: block;
border-radius: 2px;
box-shadow: $shadow2;
padding: 16px;
text-decoration: none;
}
// Color
& > a,
& > a:visited {
background: white;
color: $base-mute;
& > strong {
color: $base-a;
}
&:hover,
&:focus {
color: $base-a;
}
&:hover > strong,
&:focus > strong {
color: darken($base-a, 16%);
}
}
&:first-of-type > a,
&:first-of-type > a:visited {
background: $base-a;
color: rgba(white, 0.5);
& > strong {
color: white;
}
&:hover,
&:focus {
color: white;
}
&:hover > strong,
&:focus > strong {
color: white;
}
&:hover,
&:focus {
background: darken($base-a, 8%);
}
}
// Two lines when bigger
@media (min-width: 481px) {
& > a > strong,
& > a > span {
display: block;
}
}
& > a > strong {
@include font-size(1);
font-weight: normal;
}
& > a > span {
@include font-size(-1);
}
}

View File

@ -0,0 +1,60 @@
/*
* Callout
*/
.related-posts-callout {
& {
display: flex;
text-decoration: none;
background: $base-a-gradient;
padding: 32px;
align-items: center;
justify-content: center;
color: white;
border-radius: 2px;
box-shadow: $shadow2;
text-shadow: 0 1px 1px rgba(black, 0.2);
}
&,
&:visited {
color: white;
}
&:hover,
&:focus {
background: darken($base-a, 8%);
}
& > .text {
margin: auto;
text-align: center;
}
& > .text > .icon {
margin-bottom: 16px;
display: block;
color: adjust-color($base-a, $lightness: 16%, $hue: 20deg);
}
& > .text > .icon::before {
@include ion-icon('ios-arrow-back');
font-size: 48px;
height: 64px;
width: 64px;
line-height: 64px - 4px;
text-align: center;
border: solid 2px adjust-color($base-a, $lightness: 16%, $hue: 20deg);
border-radius: 50%;
text-indent: -2px;
text-shadow: none;
}
& > .text > .description {
@include font-size(1);
line-height: 1.4;
font-weight: 300;
display: block;
margin-bottom: 16px;
}
}

View File

@ -0,0 +1,17 @@
/*
* Group
*/
.related-posts-group {
& > h3 {
@include font-size(1);
color: $base-a;
margin: 0;
padding: 0;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: solid 1px $dark-line-color;
line-height: 1.2;
font-weight: 400;
}
}

View File

@ -0,0 +1,67 @@
/*
* Section
* has callout and group
*/
.related-posts-section {
& {
display: flex;
margin-left: -16px;
margin-right: -16px;
}
& > .callout,
& > .group {
margin: 0 16px;
}
& > .callout {
flex: 1 1 33%;
}
& > .group {
flex: 1 1 50%;
}
& > .callout {
display: flex;
& > * {
flex: 1 0 100%;
}
}
// Mobile
@media (max-width: 480px) {
& {
flex-wrap: wrap;
}
& > .callout,
& > .group {
margin-top: 16px;
margin-bottom: 16px;
flex: 1 1 100%;
}
}
// Tablet
@media (min-width: 481px) {
@media (max-width: 768px) {
& {
flex-wrap: wrap;
}
& > .callout,
& > .group {
margin-top: 16px;
margin-bottom: 16px;
flex: 1 1 100%;
}
& > .group {
flex: 1 1 40%;
}
}
}
}

View File

@ -1,33 +1,22 @@
.related-posts {
& {
@include gutter(padding-top, $multiplier: 4);
@include gutter(padding-bottom, $multiplier: 4);
@include gutter(margin-top, $multiplier: 4);
padding-top: 16px;
padding-bottom: 16px;
background: $gray-bg;
}
@media (min-width: 481px) {
padding-top: 64px;
padding-bottom: 64px;
}
& > .container {
@include gutter(padding-left);
@include gutter(padding-right);
max-width: $area-width;
margin: 0 auto;
}
& > .container > h3 {
@include font-size(1);
font-weight: normal;
color: $base-head;
margin: 16px 0;
padding: 0;
}
& > .container > :first-child {
margin-top: 0;
}
& > .container > :last-child {
margin-bottom: 0;
}
}
.related-post-list {
@ -41,6 +30,7 @@
& {
display: flex;
margin: -4px;
flex-wrap: wrap;
}
@media (max-width: 768px) {
@ -48,96 +38,12 @@
}
& > .item {
flex: 1 1 (100% / 2);
flex: 1 1 auto;
margin: 4px;
@media (min-width: 481px) {
flex: 1 1 (100% / 4);
}
@media (min-width: 769px) {
flex: 1 1 (100% / 8);
flex: 1 1 40%;
}
}
}
.related-post-item.related-post-item {
& {
display: flex;
text-align: left;
line-height: 1.4;
}
// Layout
& > a {
flex: 1 1 100%;
display: block;
border-radius: 2px;
box-shadow: $shadow2;
padding: 16px;
text-decoration: none;
}
// Color
& > a,
& > a:visited {
background: white;
color: $base-mute;
& > strong {
color: $base-a;
}
&:hover,
&:focus {
color: $base-a;
}
&:hover > strong,
&:focus > strong {
color: darken($base-a, 16%);
}
}
&:first-of-type > a,
&:first-of-type > a:visited {
background: $base-a;
color: rgba(white, 0.5);
& > strong {
color: white;
}
&:hover,
&:focus {
color: white;
}
&:hover > strong,
&:focus > strong {
color: white;
}
&:hover,
&:focus {
background: darken($base-a, 8%);
}
}
@media (min-width: 481px) {
& > a > strong,
& > a > span {
display: block;
}
}
& > a > strong {
@include font-size(1);
font-weight: normal;
}
& > a > span {
@include font-size(-1);
}
}

View File

@ -25,6 +25,10 @@
@import './components/pages-list';
@import './components/push-button';
@import './components/related-posts';
@import './components/related-posts-callout';
@import './components/related-posts-group';
@import './components/related-posts-section';
@import './components/related-post-item';
@import './components/search-box';
@import './components/side-ad';
@import './components/site-header';

View File

@ -45,6 +45,15 @@ $gray-text: $base-mute;
$line-color: rgba($base-mute, 0.05);
$dark-line-color: rgba($base-mute, 0.2);
//
// Variants
//
$base-a-gradient: linear-gradient(
5deg,
$base-a,
adjust-color($base-a, $lightness: 2%, $hue: 16deg));
//
// Shadows
//

View File

@ -82,7 +82,11 @@ $(function () {
*/
function splitwords (str) {
return str.toLowerCase().split(/[ \/\-_]/)
const words = str.toLowerCase()
.split(/[ \/\-_]/)
.filter(k => k && k.length !== 0)
return words
}
/*
@ -96,6 +100,9 @@ const Search = {
show (val) {
const keywords = splitwords(val)
if (!keywords.length) return Search.showAll()
const selectors = keywords
.map(k => `[data-search-index~=${JSON.stringify(k)}]`)
.join('')
@ -123,9 +130,11 @@ function permutate (data) {
function permutateString (str) {
let words = []
let inputs = splitwords(str)
inputs.forEach(word => {
words = words.concat(permutateWord(word))
})
return words
}

View File

@ -37,8 +37,10 @@ gem install bundler
```bash
# Build the Gemfile
echo "source 'https://rubygems.org'" > Gemfile
echo "gem 'github-pages', group: :jekyll_plugins" >> Gemfile
cat > Gemfile <<-END
source 'https://rubygems.org'
gem 'github-pages', group: :jekyll_plugins
END
```
```bash

2
lol Normal file
View File

@ -0,0 +1,2 @@
lol
-EOF