Skip to content

Instantly share code, notes, and snippets.

@officialmmt

officialmmt/index.html

Forked from CodeMyUI/index.html
Last active July 20, 2020 14:11
Show Gist options
  • Save officialmmt/d7aeb4b29ddb6f21e50edc192a98f657 to your computer and use it in GitHub Desktop.
Save officialmmt/d7aeb4b29ddb6f21e50edc192a98f657 to your computer and use it in GitHub Desktop.
Download ZIP
Atom Settings Backup by https://atom.io/packages/sync-settings
Raw
index.html
<a href="#0" class="c-link c-link--facebook c-tooltip" aria-label="Facebook">
<svg class="c-icon"><use xlink:href="#icon--facebook"></use></svg>
</a>
<a href="#0" class="c-link c-link--twitter c-tooltip" aria-label="Twitter">
<svg class="c-icon"><use xlink:href="#icon--twitter"></use></svg>
</a>
<a href="#0" class="c-link c-link--google c-tooltip" aria-label="Google+">
<svg class="c-icon"><use xlink:href="#icon--google"></use></svg>
</a>
<a href="#0" class="c-link c-link--pinterest c-tooltip" aria-label="Pinterest">
<svg class="c-icon"><use xlink:href="#icon--pinterest"></use></svg>
</a>
<a href="#0" class="c-link c-link--instagram c-tooltip" aria-label="Instagram">
<svg class="c-icon"><use xlink:href="#icon--instagram"></use></svg>
</a>
<a href="#0" class="c-link c-link--snapchat c-tooltip" aria-label="Snapchat">
<svg class="c-icon"><use xlink:href="#icon--snapchat"></use></svg>
</a>
<svg style="display: none">
<symbol id="icon--facebook" viewBox="0 0 24 24">
<path d="M19,4V7H17A1,1 0 0,0 16,8V10H19V13H16V20H13V13H11V10H13V7.5C13,5.56 14.57,4 16.5,4M20,2H4A2,2 0 0,0 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z" />
</symbol>
<symbol id="icon--twitter" viewBox="0 0 24 24">
<path d="M17.71,9.33C17.64,13.95 14.69,17.11 10.28,17.31C8.46,17.39 7.15,16.81 6,16.08C7.34,16.29 9,15.76 9.9,15C8.58,14.86 7.81,14.19 7.44,13.12C7.82,13.18 8.22,13.16 8.58,13.09C7.39,12.69 6.54,11.95 6.5,10.41C6.83,10.57 7.18,10.71 7.64,10.74C6.75,10.23 6.1,8.38 6.85,7.16C8.17,8.61 9.76,9.79 12.37,9.95C11.71,7.15 15.42,5.63 16.97,7.5C17.63,7.38 18.16,7.14 18.68,6.86C18.47,7.5 18.06,7.97 17.56,8.33C18.1,8.26 18.59,8.13 19,7.92C18.75,8.45 18.19,8.93 17.71,9.33M20,2H4A2,2 0 0,0 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z" />
</symbol>
<symbol id="icon--google" viewBox="0 0 24 24">
<path d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z" />
</symbol>
<symbol id="icon--pinterest" viewBox="0 0 24 24">
<path d="M13,16.2C12.2,16.2 11.43,15.86 10.88,15.28L9.93,18.5L9.86,18.69L9.83,18.67C9.64,19 9.29,19.2 8.9,19.2C8.29,19.2 7.8,18.71 7.8,18.1C7.8,18.05 7.81,18 7.81,17.95H7.8L7.85,17.77L9.7,12.21C9.7,12.21 9.5,11.59 9.5,10.73C9.5,9 10.42,8.5 11.16,8.5C11.91,8.5 12.58,8.76 12.58,9.81C12.58,11.15 11.69,11.84 11.69,12.81C11.69,13.55 12.29,14.16 13.03,14.16C15.37,14.16 16.2,12.4 16.2,10.75C16.2,8.57 14.32,6.8 12,6.8C9.68,6.8 7.8,8.57 7.8,10.75C7.8,11.42 8,12.09 8.34,12.68C8.43,12.84 8.5,13 8.5,13.2A1,1 0 0,1 7.5,14.2C7.13,14.2 6.79,14 6.62,13.7C6.08,12.81 5.8,11.79 5.8,10.75C5.8,7.47 8.58,4.8 12,4.8C15.42,4.8 18.2,7.47 18.2,10.75C18.2,13.37 16.57,16.2 13,16.2M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z" />
</symbol>
<symbol id="icon--instagram" viewBox="0 0 24 24">
<path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" />
</symbol>
<symbol id="icon--snapchat" viewBox="0 0 24 24">
<path d="M12,20.45C10.81,20.45 10.1,19.94 9.47,19.5C9,19.18 8.58,18.87 8.08,18.79C6.93,18.73 6.59,18.79 5.97,18.9C5.86,18.9 5.73,18.87 5.68,18.69C5.5,17.94 5.45,17.73 5.32,17.71C4,17.5 3.19,17.2 3.03,16.83C3,16.6 3.07,16.5 3.18,16.5C4.25,16.31 5.2,15.75 6,14.81C6.63,14.09 6.93,13.39 6.96,13.32C7.12,13 7.15,12.72 7.06,12.5C6.89,12.09 6.31,11.91 5.68,11.7C5.34,11.57 4.79,11.29 4.86,10.9C4.92,10.62 5.29,10.42 5.81,10.46C6.16,10.62 6.46,10.7 6.73,10.7C7.06,10.7 7.21,10.58 7.25,10.54C7.14,8.78 7.05,7.25 7.44,6.38C8.61,3.76 11.08,3.55 12,3.55C12.92,3.55 15.39,3.76 16.56,6.38C16.95,7.25 16.86,8.78 16.75,10.54C16.79,10.58 16.94,10.7 17.27,10.7C17.54,10.7 17.84,10.62 18.19,10.46C18.71,10.42 19.08,10.62 19.14,10.9C19.21,11.29 18.66,11.57 18.32,11.7C17.69,11.91 17.11,12.09 16.94,12.5C16.85,12.72 16.88,13 17.04,13.32C17.07,13.39 17.37,14.09 18,14.81C18.8,15.75 19.75,16.31 20.82,16.5C20.93,16.5 21,16.6 20.97,16.83C20.81,17.2 20,17.5 18.68,17.71C18.55,17.73 18.5,17.94 18.32,18.69C18.27,18.87 18.14,18.9 18.03,18.9C17.41,18.79 17.07,18.73 15.92,18.79C15.42,18.87 15,19.18 14.53,19.5C13.9,19.94 13.19,20.45 12,20.45Z" />
</symbol>
</svg>
<div class="pens-link-container">
[[[http://codepen.io/devy_pl/pen/pbVxVA]]]
</div>
Raw
init.coffee
# Your init script
#
# Atom will evaluate this file each time a new window is opened. It is run
# after packages are loaded/activated and after the previous editor state
# has been restored.
#
# An example hack to log to the console when each text editor is saved.
#
# atom.workspace.observeTextEditors (editor) ->
# editor.onDidSave ->
# console.log "Saved! #{editor.getPath()}"
Raw
keymap.cson
# Your keymap
#
# Atom keymaps work similarly to style sheets. Just as style sheets use
# selectors to apply styles to elements, Atom keymaps use selectors to associate
# keystrokes with events in specific contexts. Unlike style sheets however,
# each selector can only be declared once.
#
# You can create a new keybinding in this file by typing "key" and then hitting
# tab.
#
# Here's an example taken from Atom's built-in keymap:
#
# 'atom-text-editor':
# 'enter': 'editor:newline'
#
# 'atom-workspace':
# 'ctrl-shift-p': 'core:move-up'
# 'ctrl-p': 'core:move-down'
#
# You can find more information about keymaps in these guides:
# * http://flight-manual.atom.io/using-atom/sections/basic-customization/#customizing-keybindings
# * http://flight-manual.atom.io/behind-atom/sections/keymaps-in-depth/
#
# If you're having trouble with your keybindings not working, try the
# Keybinding Resolver: `Cmd+.` on macOS and `Ctrl+.` on other platforms. See the
# Debugging Guide for more information:
# * http://flight-manual.atom.io/hacking-atom/sections/debugging/#check-the-keybindings
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# http://flight-manual.atom.io/using-atom/sections/basic-customization/#configuring-with-cson
Raw
packages.json
{
"about": {
"version": "1.9.1"
},
"archive-view": {
"version": "0.65.2"
},
"atom-beautify": {
"version": "0.33.4"
},
"atom-css-comb": {
"version": "3.5.1"
},
"atom-dark-syntax": {
"version": "0.29.1",
"theme": "syntax"
},
"atom-dark-ui": {
"version": "0.53.3",
"theme": "ui"
},
"atom-light-syntax": {
"version": "0.29.1",
"theme": "syntax"
},
"atom-light-ui": {
"version": "0.46.3",
"theme": "ui"
},
"atom-live-server": {
"version": "2.3.0"
},
"atom-material-syntax": {
"version": "1.0.8",
"theme": "syntax"
},
"atom-password-generator": {
"version": "0.5.0"
},
"autoclose-html": {
"version": "0.23.0"
},
"autocomplete-atom-api": {
"version": "0.10.7"
},
"autocomplete-css": {
"version": "0.17.5"
},
"autocomplete-html": {
"version": "0.8.8"
},
"autocomplete-paths": {
"version": "2.12.2"
},
"autocomplete-plus": {
"version": "2.42.3"
},
"autocomplete-snippets": {
"version": "1.12.1"
},
"autoflow": {
"version": "0.29.4"
},
"autosave": {
"version": "0.24.6"
},
"background-tips": {
"version": "0.28.0"
},
"base16-tomorrow-dark-theme": {
"version": "1.6.0",
"theme": "syntax"
},
"base16-tomorrow-light-theme": {
"version": "1.6.0",
"theme": "syntax"
},
"blade-snippets": {
"version": "0.2.0"
},
"blade-spacer": {
"version": "0.4.2"
},
"bookmarks": {
"version": "0.46.0"
},
"bootstrap3-snips": {
"version": "0.1.1"
},
"bracket-matcher": {
"version": "0.91.2"
},
"busy-signal": {
"version": "2.0.1"
},
"city-lights-syntax": {
"version": "1.1.8",
"theme": "syntax"
},
"city-lights-ui": {
"version": "1.5.3",
"theme": "ui"
},
"color-picker": {
"version": "2.3.0"
},
"command-palette": {
"version": "0.43.5"
},
"css-snippets": {
"version": "1.1.0"
},
"dalek": {
"version": "0.2.2"
},
"deprecation-cop": {
"version": "0.56.9"
},
"dev-live-reload": {
"version": "0.48.1"
},
"docblockr": {
"version": "0.13.7"
},
"emmet": {
"version": "2.4.3"
},
"encoding-selector": {
"version": "0.23.9"
},
"exception-reporting": {
"version": "0.43.1"
},
"expose": {
"version": "0.15.0"
},
"file-icons": {
"version": "2.1.41"
},
"find-and-replace": {
"version": "0.219.3"
},
"fix-indent-on-paste": {
"version": "0.1.1"
},
"ftp-remote-edit": {
"version": "0.18.0"
},
"fuzzy-finder": {
"version": "1.14.2"
},
"git-diff": {
"version": "1.3.9"
},
"github": {
"version": "0.34.2"
},
"go-to-line": {
"version": "0.33.0"
},
"grammar-selector": {
"version": "0.50.1"
},
"highlight-selected": {
"version": "0.17.0"
},
"image-view": {
"version": "0.64.0"
},
"incompatible-packages": {
"version": "0.27.3"
},
"intentions": {
"version": "1.1.5"
},
"javascript-snippets": {
"version": "1.2.1"
},
"jquery-snippets": {
"version": "11.0.0"
},
"keybinding-resolver": {
"version": "0.39.0"
},
"language-blade": {
"version": "0.46.0"
},
"language-c": {
"version": "0.60.19"
},
"language-clojure": {
"version": "0.22.8"
},
"language-coffee-script": {
"version": "0.50.0"
},
"language-csharp": {
"version": "1.1.0"
},
"language-css": {
"version": "0.44.4"
},
"language-gfm": {
"version": "0.90.7"
},
"language-git": {
"version": "0.19.1"
},
"language-go": {
"version": "0.47.2"
},
"language-html": {
"version": "0.53.1"
},
"language-hyperlink": {
"version": "0.17.1"
},
"language-java": {
"version": "0.31.5"
},
"language-javascript": {
"version": "0.134.1"
},
"language-json": {
"version": "1.0.5"
},
"language-less": {
"version": "0.34.3"
},
"language-make": {
"version": "0.23.0"
},
"language-mustache": {
"version": "0.14.5"
},
"language-objective-c": {
"version": "0.16.0"
},
"language-perl": {
"version": "0.38.1"
},
"language-php": {
"version": "0.44.4"
},
"language-property-list": {
"version": "0.9.1"
},
"language-python": {
"version": "0.53.4"
},
"language-ruby": {
"version": "0.72.23"
},
"language-ruby-on-rails": {
"version": "0.25.3"
},
"language-rust-bundled": {
"version": "0.1.0"
},
"language-sass": {
"version": "0.62.1"
},
"language-shellscript": {
"version": "0.28.2"
},
"language-source": {
"version": "0.9.0"
},
"language-sql": {
"version": "0.25.10"
},
"language-text": {
"version": "0.7.4"
},
"language-todo": {
"version": "0.29.4"
},
"language-toml": {
"version": "0.20.0"
},
"language-typescript": {
"version": "0.6.2"
},
"language-xml": {
"version": "0.35.3"
},
"language-yaml": {
"version": "0.32.0"
},
"laravel": {
"version": "0.7.1"
},
"laravel-eloquent-snippets": {
"version": "2.0.0"
},
"laravel-forms-bootstrap-snippets": {
"version": "1.2.0"
},
"laravel-helper": {
"version": "0.3.0"
},
"laravel-snippets": {
"version": "2.1.0"
},
"line-ending-selector": {
"version": "0.7.7"
},
"link": {
"version": "0.31.6"
},
"linter": {
"version": "2.3.1"
},
"linter-ui-default": {
"version": "1.8.1"
},
"lipsum": {
"version": "0.1.0"
},
"markdown-preview": {
"version": "0.160.2"
},
"metrics": {
"version": "1.8.1"
},
"minimap": {
"version": "4.29.9"
},
"notifications": {
"version": "0.71.0"
},
"one-dark-syntax": {
"version": "1.8.4",
"theme": "syntax"
},
"one-dark-ui": {
"version": "1.12.5",
"theme": "ui"
},
"one-light-syntax": {
"version": "1.8.4",
"theme": "syntax"
},
"one-light-ui": {
"version": "1.12.5",
"theme": "ui"
},
"open-on-github": {
"version": "1.3.2"
},
"open-recent": {
"version": "5.0.0"
},
"package-generator": {
"version": "1.3.0"
},
"pigments": {
"version": "0.40.2"
},
"platformio-ide-terminal": {
"version": "2.10.0"
},
"remote-ftp": {
"version": "2.2.4"
},
"settings-view": {
"version": "0.261.4"
},
"snippets": {
"version": "1.5.1"
},
"solarized-dark-syntax": {
"version": "1.3.0",
"theme": "syntax"
},
"solarized-light-syntax": {
"version": "1.3.0",
"theme": "syntax"
},
"spell-check": {
"version": "0.76.1"
},
"status-bar": {
"version": "1.8.17"
},
"styleguide": {
"version": "0.49.12"
},
"symbols-view": {
"version": "0.118.4"
},
"sync-settings": {
"version": "4.3.6"
},
"tabs": {
"version": "0.110.0"
},
"timecop": {
"version": "0.36.2"
},
"tree-view": {
"version": "0.228.0"
},
"update-package-dependencies": {
"version": "0.13.1"
},
"welcome": {
"version": "0.36.9"
},
"whitespace": {
"version": "0.37.7"
},
"wrap-guide": {
"version": "0.41.0"
}
}
Raw
settings.json
{
"*": {
"atom-beautify": {
"executables": {
"php-cs-fixer": {
"path": "C:/cmder/php-cs-fixer.phar"
}
}
},
"autocomplete-paths": {},
"color-picker": {
"abbreviateValues": true,
"alphaChannelAlways": true,
"automaticReplace": true,
"triggerKey": "E"
},
"core": {
"telemetryConsent": "no",
"uriHandlerRegistration": "always"
},
"editor": {
"fontSize": 11
},
"exception-reporting": {
"userId": "870c06d4-bd62-4bc8-b9c4-bf296d871439"
},
"ftp-remote-edit": {
"config": "688ad7dfb924a9dbb69f2aa942bf1882607b214089ad92af18ae6bbc0576177b0782a93cc29f892f9f82efc7ba881aa8b8dca1c354be2029253b2ce5cba5b20fd25251efa348aee0f43a8c669a022a8757be4b316e36e87bd45f70af788a7757f8d43803e42f512ce5a4b157dfb273f59f4fc87b1b1639a7d03a8ca4b9505ee39b1abf61aac269634a682340fc7586a0d9edcf316f4f2e6f35a1f18e063cef74c684c26f21daecb075aacaab279349e1ab44705ee5120398130ad1a849fcf28729aba1773e64147a218fe12e",
"password": "6594a3e09d2ef4b7c5ef73ae"
},
"linter-ui-default": {
"panelHeight": 158,
"showPanel": true
},
"platformio-ide-terminal": {
"core": {
"shell": "cmd.exe",
"shellArguments": "/K C:\\cmder\\vendor\\init.bat"
}
},
"sync-settings": {},
"welcome": {
"showOnStartup": false
}
},
".blade.html.php.text": {
"editor": {
"commentEnd": " --}}",
"commentStart": "{{-- "
}
}
}
Raw
snippets.cson
# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#
# '.source.coffee':
# 'Console log':
# 'prefix': 'log'
# 'body': 'console.log $1'
#
# Each scope (e.g. '.source.coffee' above) can only be declared once.
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# http://flight-manual.atom.io/using-atom/sections/basic-customization/#_cson
Raw
style.css
body {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
height: 100vh;
font: 16px Roboto, sans-serif;
background: #f9f9f9;
}
a {
text-decoration: none;
color: inherit;
}
.c-icon {
width: 36px;
height: 36px;
fill: currentColor;
transition: .2s;
}
.c-link--facebook:hover { color: #3b5998 }
.c-link--twitter:hover { color: #55acee }
.c-link--google:hover { color: #dd4b39 }
.c-link--pinterest:hover { color: #bd081c }
.c-link--instagram:hover { color: #833ab4 }
.c-link--snapchat:hover { color: #fbe00f }
.c-link--facebook:hover::after { background: #3b5998 }
.c-link--twitter:hover::after { background: #55acee }
.c-link--google:hover::after { background: #dd4b39 }
.c-link--pinterest:hover::after { background: #bd081c }
.c-link--instagram:hover::after { background: #833ab4 }
.c-link--snapchat:hover::after { background: #fbe00f }
.c-link {
position: relative;
color: #bbb;
}
.c-link:not(:last-of-type) {
margin-right: 15px;
}
.c-tooltip::before,
.c-tooltip::after {
display: block;
position: absolute;
left: 50%;
transform: translate(-50%, -10px);
opacity: 0;
transition: .2s;
}
.c-tooltip::before {
content: '';
bottom: calc(100% + 2px);
border: solid 5px transparent;
border-top-color: currentColor;
}
.c-tooltip::after {
content: attr(aria-label);
bottom: calc(100% + 12px);
padding: .61em .93em;
font-size: .875rem;
color: white;
border-radius: 3px;
}
.c-tooltip:hover::before,
.c-tooltip:hover::after {
opacity: 1;
transform: translate(-50%);
}
.pens-link-container {
flex-basis: 100%;
font-size: .9rem;
text-align: center;
}
.pens-link {
margin-bottom: 0;
background: white;
box-shadow: 0 4px 18px rgba(0, 0, 0, .1);
border: none;
}
Raw
styles
<link href="http://codepen.io/devy_pl/pen/pbVxVA" rel="stylesheet" />
Raw
styles.less
/*
* Your Stylesheet
*
* This stylesheet is loaded when Atom starts up and is reloaded automatically
* when it is changed and saved.
*
* Add your own CSS or Less to fully customize Atom.
* If you are unfamiliar with Less, you can read more about it here:
* http://lesscss.org
*/
/*
* Examples
* (To see them, uncomment and save)
*/
// style the background color of the tree view
.tree-view {
// background-color: whitesmoke;
}
// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
// color: white;
// background-color: hsl(180, 24%, 12%);
}
// style UI elements inside atom-text-editor
atom-text-editor .cursor {
// border-color: red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment