mirror of
https://github.com/onkelbeh/cheatsheets.git
synced 2025-06-15 14:47:53 +02:00
Update
This commit is contained in:
Rico Sta. Cruz
parent
8e91d64dba
commit
2c318a2678
@ -52,6 +52,7 @@ category_names:
|
||||
- HTML
|
||||
- JavaScript
|
||||
- JavaScript libraries
|
||||
- Jekyll
|
||||
- Ledger
|
||||
- Markup
|
||||
- Node.js
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
<a class='article item' href="{{base}}{{ include.page.url | remove: '.html' }}">
|
||||
<code class='slug'>{{ include.page.url | remove: '.html' | remove: '/' }}</code>
|
||||
|
||||
{% if include.page.layout == '2017/sheet' %}
|
||||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||||
{% endif %}
|
||||
|
||||
{% if include.page.title | downcase != include.page.url | remove: '.html' | remove: '/' %}
|
||||
<span class='title'>{{ include.page.title }}</span>
|
||||
{% endif %}
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
<div class='top-nav'>
|
||||
<div class='container'>
|
||||
<div class='left'>
|
||||
<a class='home' href='{{base}}'></a>
|
||||
</div>
|
||||
|
||||
<a class='brand' href='{{base}}'>
|
||||
Rico's cheatsheets
|
||||
</a>
|
||||
|
||||
17
_sass/2017/components/attribute-peg.scss
Normal file
17
_sass/2017/components/attribute-peg.scss
Normal file
@ -0,0 +1,17 @@
|
||||
.attribute-peg {
|
||||
& {
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
width: 20px;
|
||||
background: rgba(white, 0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& > span {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: saturate(lighten(#5a8, 16%), 24%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
@ -1,13 +1,29 @@
|
||||
.top-nav {
|
||||
& {
|
||||
border-bottom: solid 1px $dark-line-color;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
>.container {
|
||||
// Horiz line
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
right: 40%;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: $dark-line-color;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .container {
|
||||
@include gutter(padding-left);
|
||||
@include gutter(padding-right);
|
||||
max-width: $area-width;
|
||||
@ -19,6 +35,12 @@
|
||||
& {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
& > .left {
|
||||
flex: 0 0 auto;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
& > .brand {
|
||||
@ -48,8 +70,37 @@
|
||||
}
|
||||
}
|
||||
|
||||
& > .actions > .social {
|
||||
@media (min-width: 481px) {
|
||||
& > .actions {
|
||||
position: absolute;
|
||||
@include gutter(right);
|
||||
top: (64px - 32px) / 2;
|
||||
}
|
||||
|
||||
& > .left {
|
||||
position: absolute;
|
||||
@include gutter(left);
|
||||
top: (64px - 32px) / 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Home link
|
||||
& > .left > .home {
|
||||
text-decoration: none;
|
||||
|
||||
&,
|
||||
&:visited {
|
||||
color: $base-mute;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $base-a;
|
||||
}
|
||||
}
|
||||
|
||||
& > .left > .home::before {
|
||||
@include ion-icon('md-arrow-back');
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// page-actions.scss
|
||||
|
||||
@ -21,3 +21,4 @@
|
||||
@import './components/page-actions';
|
||||
@import './components/pages-list';
|
||||
@import './components/top-nav';
|
||||
@import './components/attribute-peg';
|
||||
|
||||
@ -4,7 +4,19 @@
|
||||
margin-bottom: 16px + 8px;
|
||||
padding-bottom: 16px + 8px;
|
||||
margin-top: 64px;
|
||||
border-bottom: solid 1px $dark-line-color;
|
||||
position: relative;
|
||||
|
||||
// Line
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, $dark-line-color 50%, transparent);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-bottom: 8px;
|
||||
|
||||
@ -43,7 +43,7 @@ $gray-bg: mix($base-body, $base-panel, 50%);
|
||||
$gray-text: $base-mute;
|
||||
|
||||
$line-color: rgba($base-mute, 0.05);
|
||||
$dark-line-color: rgba($base-mute, 0.14);
|
||||
$dark-line-color: rgba($base-mute, 0.2);
|
||||
|
||||
//
|
||||
// Shadows
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Elixir
|
||||
category: Development
|
||||
category: Elixir
|
||||
layout: 2017/sheet
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: GitHub pages
|
||||
category: Git
|
||||
category: Jekyll
|
||||
---
|
||||
|
||||
$ echo "foobar.com" > CNAME
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Homebrew
|
||||
layout: 2017/sheet
|
||||
tags: [Featured]
|
||||
---
|
||||
|
||||
### Commands
|
||||
|
||||
48
html-meta.md
48
html-meta.md
@ -1,33 +1,48 @@
|
||||
---
|
||||
title: Meta tags
|
||||
category: HTML
|
||||
layout: 2017/sheet
|
||||
---
|
||||
|
||||
### Meta tags
|
||||
|
||||
```html
|
||||
<meta charset='utf-8'>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- title -->
|
||||
<title>...</title>
|
||||
<meta property='og:title' content='...'>
|
||||
<meta name='twitter:title' content='...'>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- url -->
|
||||
<meta property='og:url' content='http://...'>
|
||||
<meta name='twitter:url' content='http://...'>
|
||||
<link rel='canonical' href='http://...'>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- desc -->
|
||||
<meta name='description' content='...'>
|
||||
<meta property='og:description' content='...'>
|
||||
<meta name='twitter:description' content='...'>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- image -->
|
||||
<meta property="og:image" content="http://...">
|
||||
<meta name="twitter:image" content="http://...">
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- ua -->
|
||||
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- viewport -->
|
||||
<meta name='viewport' content='width=device-width'>
|
||||
<meta name='viewport' content='width=1024'>
|
||||
@ -38,24 +53,26 @@ category: HTML
|
||||
```html
|
||||
<meta property="og:site_name" content="...">
|
||||
<meta property="og:type" content="website">
|
||||
```
|
||||
|
||||
```html
|
||||
<meta property="fb:app_id" content="...">
|
||||
<meta property="fb:admins" content="UID1,UID2"> <!-- unless there's app_id -->
|
||||
```
|
||||
|
||||
```html
|
||||
<meta property="og:audio" content="http://.../theme.mp3">
|
||||
<meta property="og:video" content="http://.../trailer.swf">
|
||||
```
|
||||
|
||||
### Opengraph for articles
|
||||
|
||||
```html
|
||||
article:published_time
|
||||
article:modified_time
|
||||
article:expiration_time
|
||||
article:author
|
||||
article:section
|
||||
article:tag
|
||||
```
|
||||
- `article:published_time`
|
||||
- `article:modified_time`
|
||||
- `article:expiration_time`
|
||||
- `article:author`
|
||||
- `article:section`
|
||||
- `article:tag`
|
||||
|
||||
### Apple-only
|
||||
|
||||
@ -79,13 +96,15 @@ article:tag
|
||||
<meta name='theme-color' content='#ff00ff'>
|
||||
```
|
||||
|
||||
### [Manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/)
|
||||
### Manifest
|
||||
|
||||
```html
|
||||
<link rel='manifest' href='/manifest.json'>
|
||||
```
|
||||
|
||||
### [Icons](https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/)
|
||||
See: [Manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/)
|
||||
|
||||
### Icons
|
||||
|
||||
```html
|
||||
<!-- Minimal -->
|
||||
@ -93,13 +112,17 @@ article:tag
|
||||
<link rel='icon' sizes='192x192' href='icon@192.png'>
|
||||
<link rel='apple-touch-icon' href='icon@152.png'>
|
||||
<meta name='msapplication-square310x310logo' content='icon@310.png'>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- Apple -->
|
||||
<link rel='apple-touch-icon' href='touch-icon-iphone.png'>
|
||||
<link rel='apple-touch-icon' sizes='76x76' href='touch-icon-ipad.png'>
|
||||
<link rel='apple-touch-icon' sizes='120x120' href='touch-icon-iphone-retina.png'>
|
||||
<link rel='apple-touch-icon' sizes='152x152' href='touch-icon-ipad-retina.png'>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- Microsoft -->
|
||||
<meta name='msapplication-square70x70logo' content='icon_smalltile.png'>
|
||||
<meta name='msapplication-square150x150logo' content='icon_mediumtile.png'>
|
||||
@ -107,8 +130,11 @@ article:tag
|
||||
```
|
||||
|
||||
Chrome on Android recommends [192x192](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android).
|
||||
See: [Icons](https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/)
|
||||
|
||||
### Reference
|
||||
## Reference
|
||||
{: .-one-column}
|
||||
|
||||
* <https://dev.twitter.com/docs/cards>
|
||||
* <https://developers.facebook.com/docs/opengraphprotocol/#types>
|
||||
{: .-also-see}
|
||||
|
||||
5
html.md
5
html.md
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: HTML
|
||||
category: HTML
|
||||
layout: 2017/sheet
|
||||
---
|
||||
|
||||
### Head stuff
|
||||
@ -61,8 +62,6 @@ category: HTML
|
||||
|
||||
### Icons
|
||||
|
||||
Only do this if you're not placing the site in the root!
|
||||
|
||||
<link rel="shortcut icon" type="image/png" href="favicon.png">
|
||||
<link href="apple-touch-icon-precomposed.png" rel="apple-touch-icon">
|
||||
<link href="apple-touch-icon-57x57-precomposed.png" size="57x57" rel="apple-touch-icon">
|
||||
@ -70,6 +69,8 @@ Only do this if you're not placing the site in the root!
|
||||
<link href="apple-touch-icon-114x114-precomposed.png" size="114x114" rel="apple-touch-icon">
|
||||
<link href="apple-touch-icon-144x144-precomposed.png" size="144x144" rel="apple-touch-icon">
|
||||
|
||||
Only do this if you're not placing the site in the root!
|
||||
|
||||
### H5BP HTML tag
|
||||
|
||||
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Jekyll for GitHub pages
|
||||
jekyll_escape: true
|
||||
layout: 2017/sheet
|
||||
category: Jekyll
|
||||
tags: [WIP]
|
||||
---
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@ title: Jekyll
|
||||
jekyll_escape: true
|
||||
layout: 2017/sheet
|
||||
tags: [Featured]
|
||||
category: Jekyll
|
||||
---
|
||||
|
||||
{% raw %}
|
||||
|
||||
11
pass.md
11
pass.md
@ -1,7 +1,12 @@
|
||||
---
|
||||
title: Pass
|
||||
layout: 2017/sheet
|
||||
---
|
||||
|
||||
Reference
|
||||
---------
|
||||
{: .-three-column}
|
||||
|
||||
### Store and retrieve
|
||||
|
||||
$ pass insert twitter.com/rsc
|
||||
@ -19,6 +24,8 @@ title: Pass
|
||||
|
||||
$ pass edit twitter.com/rsc
|
||||
|
||||
### References
|
||||
## References
|
||||
{: .-one-column}
|
||||
|
||||
* http://passwordstore.org
|
||||
* <http://passwordstore.org>
|
||||
{: .-also-see}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user