Skip to content

Instantly share code, notes, and snippets.

@shinigamicorei7

shinigamicorei7/blogger.css

Last active August 29, 2015 14:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shinigamicorei7/0036b6713ff228008a72 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shinigamicorei7/0036b6713ff228008a72 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
blogger.css
code[class*="language-"],
pre[class*="language-"] {
color: black;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
line-height: 1.5;
font-size: 11.5px;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none; }
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc; }
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc; }
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none; }
}
/* Code blocks */
pre[class*="language-"] {
margin: 10px 0 20px;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: rgba(238, 238, 238, 0.35);
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125); }
/* Inline code */
:not(pre) > code[class*="language-"] {
background: #f0f2f1;
color: #f4645f;
padding: 1px 5px;
border-radius: 3px; }
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #999999; }
.token.punctuation {
color: #999999; }
.namespace {
opacity: .7; }
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #da564a; }
.token.scope, .token.attr-name {
color: #da564a; }
.token.selector,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #2e7d32; }
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #555555; }
.token.atrule,
.token.attr-value,
.token.keyword {
color: #0077aa; }
.token.function {
color: #555555; }
.token.regex,
.token.important,
.token.variable {
color: #4ea1df; }
.token.important,
.token.bold {
font-weight: bold; }
.token.italic {
font-style: italic; }
.token.entity {
cursor: help; }
pre.line-numbers {
position: relative;
padding-left: 3.8em;
padding-top: 0px;
margin-top: -1px;
border-radius: 0;
counter-reset: linenumber; }
pre.line-numbers > code {
position: relative; }
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: -2px;
padding-top: 2px;
font-size: 100%;
left: -3.8em;
width: 3em;
/* works for line-numbers below 1000 lines */
letter-spacing: -1px;
background: #f0f2f1;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.line-numbers-rows > span {
pointer-events: none;
display: block;
counter-increment: linenumber; }
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999999;
display: block;
padding-right: 0.8em;
text-align: right; }
.dark-code {
/* Code blocks */
/* Inline code */ }
.dark-code code[class*="language-"],
.dark-code pre[class*="language-"] {
color: #f8f8f2;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none; }
.dark-code pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em; }
.dark-code :not(pre) > code[class*="language-"],
.dark-code pre[class*="language-"] {
background: #272822; }
.dark-code :not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em; }
.dark-code .token.comment,
.dark-code .token.prolog,
.dark-code .token.doctype,
.dark-code .token.cdata {
color: slategray; }
.dark-code .token.punctuation {
color: #f8f8f2; }
.dark-code .namespace {
opacity: .7; }
.dark-code .token.property,
.dark-code .token.tag,
.dark-code .token.constant,
.dark-code .token.symbol,
.dark-code .token.deleted {
color: #f92672; }
.dark-code .token.boolean,
.dark-code .token.number {
color: #ae81ff; }
.dark-code .token.selector,
.dark-code .token.attr-name,
.dark-code .token.string,
.dark-code .token.char,
.dark-code .token.builtin,
.dark-code .token.inserted {
color: #a6e22e; }
.dark-code .token.operator,
.dark-code .token.entity,
.dark-code .token.url,
.dark-code .language-css .token.string,
.dark-code .style .token.string,
.dark-code .token.variable {
color: #f8f8f2; }
.dark-code .token.atrule,
.dark-code .token.attr-value {
color: #e6db74; }
.dark-code .token.keyword {
color: #66d9ef; }
.dark-code .token.regex,
.dark-code .token.important {
color: #fd971f; }
.dark-code .token.important,
.dark-code .token.bold {
font-weight: bold; }
.dark-code .token.italic {
font-style: italic; }
.dark-code .token.entity {
cursor: help; }
.panel.statement .browser-window {
display: block;
margin: 8vh auto 15px; }
.panel.statement .next-up {
bottom: 150px; }
.panel.features {
padding: 125px 0; }
.panel.features > h1,
.panel.features > p {
margin: 0 0 20px 0;
text-align: center; }
.panel.features .blocks {
max-width: 900px;
background: #ffffff;
margin: 50px auto;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
.panel.features .blocks .block {
border-bottom: 1px solid #dbdcdb;
height: 225px;
overflow: hidden; }
.panel.features .blocks .block:after {
content: "";
display: table;
clear: both; }
.panel.features .blocks .block .text {
padding: 50px;
width: 60%;
float: left; }
.panel.features .blocks .block .text h2 {
font-size: 24px;
font-weight: 400;
color: #f4645f; }
.panel.features .blocks .block .media {
float: right;
padding-top: 20px;
width: 40%;
overflow: hidden; }
.panel.features .blocks .block .media .browser-window {
width: 400px; }
.panel.features .blocks .block.even .text {
float: right; }
.panel.features .blocks .block.even .media {
float: left; }
.panel.features .blocks .block.even .media .terminal-window {
float: left;
margin-left: -5px;
width: 360px; }
.panel.features .blocks .block.even .media .terminal-window pre[class*="language-"] {
border-radius: 0;
margin-top: 0; }
.panel.features .blocks .block p {
font-size: 14px;
color: #80878c; }
.panel.ecosystem {
padding: 150px 0 75px;
background: url("/assets/img/laravel-tucked.png") center top no-repeat; }
.panel.ecosystem > h1,
.panel.ecosystem > p {
margin: 0 0 20px 0;
text-align: center; }
.panel.ecosystem .forge {
margin: 100px auto; }
.panel.ecosystem .forge:after {
content: "";
display: table;
clear: both; }
.panel.ecosystem .forge .screenshot {
float: left;
max-width: 50%; }
.panel.ecosystem .forge .content {
padding: 25px 5px;
max-width: 45%;
float: left; }
.panel.ecosystem .forge .content img {
margin-bottom: 15px; }
.panel.ecosystem .forge p {
color: #525252;
font-size: 16px; }
.panel.ecosystem .tiles {
max-width: 1080px;
margin: 0 auto;
padding: 0 25px; }
.panel.ecosystem .tiles:after {
content: "";
display: table;
clear: both; }
.panel.ecosystem .tiles .tile {
border: 1px solid #dee0df;
padding: 25px 15px;
border-radius: 4px;
width: 30%;
margin-right: 5%;
float: left;
text-align: center; }
.panel.ecosystem .tiles .tile:last-child {
margin-right: 0; }
.panel.ecosystem .tiles .tile h2 {
color: #f4645f;
font-size: 24px;
font-weight: 400; }
.panel.ecosystem .tiles .tile p {
font-size: 16px;
color: #525252; }
.panel .next-up {
position: absolute;
bottom: 50px;
text-align: right;
right: 50px;
width: 300px;
text-transform: uppercase;
font-size: 15px;
color: #aaaaaa; }
.panel .next-up:hover {
color: #777777; }
.panel .next-up img {
position: relative;
top: 14px;
margin-left: 10px; }
.panel .browser-window,
.panel .terminal-window {
overflow: hidden; }
.panel .browser-window pre[class*="language-"],
.panel .browser-window .window-content,
.panel .terminal-window pre[class*="language-"], .panel .terminal-window .window-content {
overflow: hidden; }
@media (max-width: 980px) {
.panel .next-up {
right: auto;
left: 50%;
margin-left: -150px; }
.panel.features {
padding: 75px 0; }
}
@media (max-width: 760px) {
.panel.statement h1 {
font-size: 42px;
line-height: 1.2; }
.panel.statement h1 + p {
font-size: 21px; }
.panel.ecosystem .forge {
text-align: center;
padding: 0 50px;
margin: 50px 0; }
.panel.ecosystem .forge .screenshot {
float: none;
margin-bottom: 25px;
max-width: 100%; }
.panel.ecosystem .forge .screenshot:after {
content: "";
display: table;
clear: both; }
.panel.ecosystem .forge .content {
max-width: 100%; }
.panel.ecosystem .forge .content:after {
content: "";
display: table;
clear: both; }
.panel.ecosystem .tiles .tile {
width: 100%;
margin-bottom: 20px; }
.panel.ecosystem .tiles .tile:after {
content: "";
display: table;
clear: both; }
.panel.features .blocks .block .text {
padding: 15px; }
.panel.features .blocks .block .text p {
margin-bottom: 0; }
}
@media (max-width: 620px) {
.panel.statement .browser-window {
width: 100%; }
}
@media (max-width: 580px) {
.panel.features .blocks .block {
height: 410px; }
.panel.features .blocks .block .text {
width: 100%;
float: none !important;
display: block;
padding: 5%; }
.panel.features .blocks .block .media {
float: none !important;
display: block;
width: 100%;
}
.panel.features .blocks .block .media .terminal-window,
.panel.features .blocks .block .media .browser-window {
width: 90% !important;
margin: 0 5% !important;
float: none !important;
}
}
.browser-window, .terminal-window {
text-align: left;
width: 100%;
display: inline-block;
border-radius: 4px;
background-color: #ffffff;
border: 1px solid #dddddd;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
overflow: auto;
word-wrap: normal;
}
.browser-window .top-bar, .terminal-window .top-bar {
height: 22px;
border-radius: 4px 4px 0 0;
border-top: thin solid #eaeae9;
border-bottom: thin solid #dfdfde;
background: #ebebeb; }
.browser-window .circle, .terminal-window .circle {
height: 8px;
width: 8px;
display: inline-block;
border-radius: 50%;
background-color: white; }
.browser-window .circles, .terminal-window .circles {
margin: 1px 10px; }
.browser-window .window-content, .terminal-window .window-content {
margin: 0;
width: 100%;
min-height: 90%;
display: inline-block;
border-radius: 0 0 4px 4px; }
.browser-window .window-content pre[class*="language-"] {
background: #ffffff;
margin: 0;
margin-bottom: -6px;
}
code[class*="language-"], pre[class*="language-"] {
word-wrap:normal;
border:none!important;
padding-bottom: 0px;
}
pre[data-line]
{
position: relative;
padding: 1em 0 1em 3em;
}
.line-highlight
{
position: absolute;
left: 0;
right: 0;
padding: inherit 0;
margin-top: 16px;
/* Same as .prism’s padding-top */
background: hsla(24, 20%, 50%,.08);
background: -moz-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
background: -webkit-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
background: -o-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
background: linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
pointer-events: none;
line-height: inherit;
white-space: pre;
}
.line-highlight:before,
.line-highlight[data-end]:after
{
content: attr(data-start);
position: absolute;
top: .4em;
left: .6em;
min-width: 1em;
padding: 0 .5em;
background-color: hsla(24, 20%, 50%,.4);
color: hsl(24, 20%, 95%);
font: bold 65%/1.5 sans-serif;
text-align: center;
vertical-align: .3em;
border-radius: 999px;
text-shadow: none;
box-shadow: 0 1px white;
}
.line-highlight[data-end]:after
{
content: attr(data-end);
top: auto;
bottom: .4em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment