Skip to content

Instantly share code, notes, and snippets.

@pmuellr

pmuellr/styles.less

Last active May 9, 2018
Embed
What would you like to do?
atom personal style sheet in ~/.atom/styles.less
/*
* Your Stylesheet
*
* This stylesheet is loaded when Atom starts up and is reloaded automatically
* when it is changed.
*
* If you are unfamiliar with LESS, you can read more about it here:
* http://www.lesscss.org
*/
.tree-view {
font-size: 120%;
}
/* your personal stylesheet */
atom-text-editor {
/* comments are white on green */
.syntax--definition.syntax--comment,
.syntax--comment.syntax--line,
.syntax--comment.syntax--block {
background-color: #464;
color: #FFF;
//box-shadow: 0px 0px 5px 2px #575;
}
/* also provide a bit more padding, and coolio border-radius */
/* screws up caret location, disabling ...
.syntax--comment.syntax--line,
.syntax--comment.syntax--block {
padding-left: 0.5em;
padding-right: 0.5em;
border-radius: 0.25em;
}
*/
/* double visual width of indentation */
.leading-whitespace, .trailing-whitespace {
/* letter-spacing: 0.5em; */
}
/* make names of defined functions and classes bigger */
.syntax--meta.syntax--function .syntax--entity.syntax--name.syntax--function,
.syntax--meta.syntax--class .syntax--entity.syntax--name.syntax--type.syntax--class {
font-size: 100%;
// offset-x | offset-y | blur-radius | color
// text-shadow: 0px 0px 3px red;
box-shadow: 0px 0px 3px 3px #AA7;
border-radius: 0.25em;
padding-left: 0.25em;
padding-right: 0.25em;
background-color: #500;
}
/* keywords */
.syntax--keyword.syntax--operator,
.syntax--constant.syntax--language,
.syntax--storage,
.syntax--keyword.syntax--control {
// text-decoration: underline;
font-size: 80%;
font-style: italic;
// font-family: Helvetica;
// box-shadow: 0px 0px 5px 3px #575;
border-radius: 0.25em;
background-color: #009;
}
.syntax--storage.syntax--type.syntax--function.syntax--arrow {
text-decoration: none;
font-size: 100%;
}
}
// To style other content in the text editor's shadow DOM, use the ::shadow
// expression
atom-text-editor::shadow .cursor {
}
@pmuellr

This comment has been minimized.

Copy link
Owner Author

@pmuellr pmuellr commented May 12, 2017

Effects from personal style sheet:

  • comments are white on green
  • double indentation - for JS this means seeing 4 space indent when it's actually 2
  • functions and classes are a bit bigger and have a "halo" around them
  • js keywords are a bit smaller and italic

example:

logger_js_ ___projects_peakfun

@thehogfather

This comment has been minimized.

Copy link

@thehogfather thehogfather commented May 25, 2017

👍 for double visual width for indentations

@ajilderda

This comment has been minimized.

Copy link

@ajilderda ajilderda commented Aug 2, 2017

🙌 Double indentation 👏

@lukecfairchild

This comment has been minimized.

Copy link

@lukecfairchild lukecfairchild commented May 9, 2018

You sir are a life saver, seriously

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.