Saving & Sharing my terminal settings.
- TotalTerminal - for cool Quake like terminal
- Solarized theme - Very nice & subtle theme.
Carlos Ballena cballenar
cballenar
/ css-baseline-grid.css
Last active
October 14, 2015 00:08
/* This gist was inspired by DigitPaint [ http://advent2012.digitpaint.nl/13/ ] */ This is a baseline grid created using some (perhaps all) of the new CSS background properties. it simulates a baseline grid based on ems which will allow you to size according to your site's font size. A clear disadvantage is that it is limited to be a background.…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* --------------------------------------------------- | |
| Production Versions ( Minified ) | |
| --------------------------------------------------- */ | |
| /* Background */ | |
| /**/ .baseline{font-size:1em;background:none;background-image:-webkit-linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px);background-image:-moz-linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px);background-image:linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px);background-size:100% 1.5em;background-origin:content-box;background-attachment:local} | |
| /**/ .baseline *{background:none !important;outline:1px dashed rgba(100%,0%,0%,.5)} | |
| /* Overlay + Hover switch */ | |
| /**/ body{position:relative}body:hover:before{width:100%;height:100%;display:block;content:"";position:absolute;z-index:9999;pointer-events:none;background-size:100% .75em;background-origin:content-box;background-attachment:local;background-image:-webkit-linear-gradient(rgba(0,255,255,.75) 1px,transparent 1px);background-image:-moz-linear-gradient(rgba(0,255,255,.75) 1px,transparent 1px);bac |
cballenar
/ typography-test.html
Last active
December 9, 2015 18:28
The following gist was built to help developers test their websites, particularly how type elements line up in relationship to one another. This can be used in combination with a baseline grid for more precision. I can't remember who built this originally, but I think it's safe to assume that it was Jukka Korpela, as his name appeared in the cod…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> | |
| <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> | |
| <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html class="no-js"><!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Typography Test</title> | |
| <meta name="description" content=""> |
cballenar
/ index.html
Last active
December 13, 2015 22:18
Numbers & CSS - Looking for ways to improve how columns and objects work in CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="wrapper body"> |
cballenar
/ wrap-around.css
Last active
December 14, 2015 03:58
Create the illusion an element wrapping around a container.
While this technique has been around for a while. It reamins a very interesting style that can help certain pieces of content pop-up.
Depending on the class you select the code will pull an element off to the left, right or both sides, and add a triangle for the wrap around illusion. Vi…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Wrap Around - http://jsbin.com/agegux/2/ | |
| --------------------------------------------------------------------------------- | |
| The following code allows you to create the illusion an element | |
| wrapping around a container. | |
| While this technique has been around for a while. It reamins a very | |
| interesting style that can help certain pieces of content pop-up. | |
| Depending on the class you select the code will pull an element |
cballenar
/ data-print.css
Last active
December 22, 2015 09:58
Adding the data-print attribute to an element, will print the value after the element. This addresses elements that may contain information you want to see only when printed. This is a variation of the HTML5Boilerplate's solution to links [https://github.com/h5bp/html5-boilerplate/blob/master/doc/css.md#print-styles] . Live example: http://jsbin…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media print { | |
| /* data-print="print-me" | |
| * ================================== | |
| * Adding the data-print attribute to an element, will print the value after the element. | |
| * This addresses elements that may contain information you want to see only when printed. | |
| * | |
| * This is a variation of the HTML5Boilerplate's solution to links | |
| * [https://github.com/h5bp/html5-boilerplate/blob/master/doc/css.md#print-styles]. */ |
cballenar
/ browser-guides.css
Created
October 21, 2013 04:32
In-browser Photoshop-like guides. After designing in browser for a little while there's been a few times that I wished I had guides in the browser so I decided to see how this worked out. Test page: http://jsbin.com/uHujOyo/3/edit
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .guides { | |
| div { | |
| cursor: move; | |
| content: ' '; | |
| display: block; | |
| position: fixed; } | |
| #x { | |
| top: 50%; | |
| width: 100%; height: 1px; | |
| background: cyan; } |
cballenar
/ README.md
Last active
January 2, 2016 04:49
'alpha-me' is a SCSS mixin that calculates a fallback solid color based on a translucent color (rgba or hsla) and a background color (by default, white) and returns both colors (fallback and original) with their properties and attributes. This allows us to use this mixin for multiple properties, such as: borders, shadows, etc. View live example at
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {# Convert hyphenated-string to camelCase #} | |
| {{ string | regex ( '/-([a-z])/e', 'ucfirst("\\1")' ) }} | |
| {# Convert camelCasedString to hyphenated-one #} | |
| {{ string | regex( '/(^|[a-z])([A-Z])/e', 'strtolower( strlen("\\1") ? "\\1-\\2" : "\\2" )', (type.handle) ) }} |
cballenar
/ _setting-up-rpi-web-server.md
Last active
February 18, 2016 22:09
RaspberryPi Web Server
I started this guide as I was building my web server but it was never finished. Nonetheless there's some valuable info for anyone starting a web server from scratch.
- [download offline raspbian][0]
- follow instructions for [no screen install of raspbian][1]
- setup [static ip address][2], reserve in router, and update hosts file on remote computer
- follow [secure web server][7], [secure ssh best practices][3], setup [ssh-copy-id in mac][4]
OlderNewer