harunpehlivan
3/14/2018 - 10:33 PM
Flat Code Editor
Flat Code Editor
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
//Mixins
//-------------------------------
@mixin prefix($name, $argument...) {
-webkit-#{$name}: #{$argument};
-ms-#{$name}: #{$argument};
-moz-#{$name}: #{$argument};
-o-#{$name}: #{$argument};
#{$name}: #{$argument};
}
@mixin flex-like-that($dir: row, $wrap: wrap) {
display: -webkit-box; // iOS 6-, Safari 3.1-6
display: -moz-box; // Firefox 19- (buggy but mostly works)
display: -ms-flexbox; // IE 10
display: -webkit-flex; // Chrome
display: flex; // Opera 12.1, Firefox 20+
-webkit-flex-flow: $dir $wrap;
-moz-flex-flow: $dir $wrap;
-ms-flex-flow: $dir $wrap;
flex-flow: $dir $wrap;
}
@mixin flex-it-up($fg: 1, $fs: null, $fb: null) {
-webkit-box-flex: $fg; // iOS 6-, Safari 3.1-6
-moz-box-flex: $fg; // Firefox 19-
-webkit-flex: $fg $fs $fb; // Chrome
-ms-flex: $fg $fs $fb; // IE 10
flex: $fg $fs $fb; // Opera 12.1, Firefox 20+
}
@mixin font-size($size){
font-size: $size * 1px;
font-size: $size * 0.1rem;
}
@mixin box-model($model: border-box) {
-moz-box-sizing : $model;
-webkit-box-sizing : $model;
box-sizing : $model;
}
@mixin antialiasing( $type:antialiased ) {
-webkit-font-smoothing: $type;
font-smoothing: $type;
font-smooth: always;
}
//Variables
//-------------------------------
$font-stack: open-sans, Arial, sans-serif;
$base-font: 62.5%; //I like my rem's even (1rem = 10px)
$page-bg: #71D4B7;
$code-top: #E8ECEF;
$code-text: #BAC1C9;
$code-bg: #4e606c;
$code-nav: #384a56;
$code-nav-select: #233038;
$code-selector: #FC659A;
$code-property: #71D4B7;
$code-linenumbers: #879BA6;
$code-comment: lighten($code-bg,30%);
$code-variables: #EFB26E;
$code-function: #F5755A;
//Pen Info
//-------------------------------
*,
*:after,
*:before {
@include box-model;
@include antialiasing;
}
body {
font-family: $font-stack;
background-color: $page-bg;
font-size: $base-font;
label {
background-color: rgba(255,255,255,1);
color: #000;
padding: 10px 15px;
font-size: 18px;
font-weight: bold;
display: inline-block;
position: absolute;
top: 10px;
left: 10px;
box-shadow: 4px 3px 0px rgba(0,0,0,0.15);
cursor: pointer;
&:hover {
background-color: rgba(255,255,255,0.75);
~h1{
display: block;
}
}
}
input {
display: none;
&:checked {
~h1 {
display: block;
}
~label {
background-color: rgba(255,255,255,0.75);
}
}
}
h1 {
display: none;
font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
font-size: 18px;
color: #000;
background-color: #fff;
padding: 10px;
position: absolute;
left: 55px;
top: 10px;
box-shadow: 4px 3px 0px rgba(0,0,0,0.15);
z-index: 999;
&:hover {
display: block;
}
a, a:visited, a:hover {
color: #000;
}
}
}
// Code Editor
//-------------------------------
.code-editor {
width: 800px; //debug
margin: 20px auto; //debug
&.fullscreen {
width: calc(100% - 40px);
position: fixed;
height: calc(100% - 120px);
margin: 20px;
}
.controls {
background-color: $code-top;
@include font-size(10);
display: block;
padding: 15px;
text-align: right;
@include prefix(border-top-left-radius, 6px);
@include prefix(border-top-right-radius, 6px);
i {
color: $code-text;
cursor: pointer;
margin-left: 15px;
&:hover {
color: darken($code-text,20%);
}
}
}
.embed-nav {
background-color: $code-nav;
padding: 15px;
ul {
@include flex-like-that;
li {
margin-right: 10px;
a {
@include font-size(8);
color: $code-text;
padding: 5px 10px;
@include prefix(border-radius, 15px);
text-decoration: none;
&.active {
background-color: $code-nav-select;
}
}
}
}
.logo-wrap {
display: none;
}
}
}
//Start Prism Code
code[class*="language-"],
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;
}
/* Code blocks */
pre[class*="language-"] {
padding: 0 15px 15px 15px;
overflow: auto;
@include font-size(10);
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: $code-bg;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: $code-comment;
}
.token.punctuation {
color: #f8f8f2;
}
.namespace {
opacity: .7;
}
.token.function {
color: $code-function;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol {
color: $code-property;
}
.token.boolean,
.token.number {
color: #ae81ff;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin {
color: $code-selector;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: $code-variables;
}
.token.atrule,
.token.attr-value {
color: #e6db74;
}
.token.keyword {
color: #66d9ef;
}
.token.regex,
.token.important {
color: #fd971f;
}
.token.important {
font-weight: bold;
}
.token.entity {
cursor: help;
}
.token.deleted {
color: red;
}
.token.inserted {
color: green;
}
pre.line-numbers {
position: relative;
padding-left: 55px;
counter-reset: linenumber;
}
pre.line-numbers > code {
position: relative;
}
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 22px;
font-size: 100%;
left: -100px;
width: 40px; /* works for line-numbers below 1000 lines */
letter-spacing: -1px;
color: $code-linenumbers;
-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: #999;
display: block;
padding-right: 0.8em;
text-align: right;
}<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
$(document).ready(function(){
// Fullscreen Functionality
// Put this together quickly so needs to be improved
$('.code-editor .fullscreen').on( "click", function() {
var windowHeight = $(window).height() - 132;
if($('.code-editor').hasClass('fullscreen')){
$('.code-editor').removeClass('fullscreen');
$(this).addClass('fa-expand').removeClass('fa-compress');
$('.code-editor pre').css({height: 'auto'});
} else {
$('.code-editor').addClass('fullscreen');
$(this).removeClass('fa-expand').addClass('fa-compress');
$('.code-editor pre').css({height: windowHeight});
}
});
// Accordion functionality
$('.code-editor .accordion').on( "click", function() {
$(this)
.toggleClass('fa-chevron-up')
.toggleClass('fa-chevron-down')
.parent().parent()
.children()
.not('.controls')
.slideToggle();
});
});
// Prism.js Plugin
//
// http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+php+scss+bash&plugins=line-numbers
//
//-------------------------------
self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{};var Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var a={};for(var r in e)e.hasOwnProperty(r)&&(a[r]=t.util.clone(e[r]));return a;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var a=t.util.clone(t.languages[e]);for(var r in n)a[r]=n[r];return a},insertBefore:function(e,n,a,r){r=r||t.languages;var i=r[e],l={};for(var o in i)if(i.hasOwnProperty(o)){if(o==n)for(var s in a)a.hasOwnProperty(s)&&(l[s]=a[s]);l[o]=i[o]}return r[e]=l},DFS:function(e,n){for(var a in e)n.call(e,a,e[a]),"Object"===t.util.type(e)&&t.languages.DFS(e[a],n)}},highlightAll:function(e,n){for(var a,r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),i=0;a=r[i++];)t.highlightElement(a,e===!0,n)},highlightElement:function(a,r,i){for(var l,o,s=a;s&&!e.test(s.className);)s=s.parentNode;if(s&&(l=(s.className.match(e)||[,""])[1],o=t.languages[l]),o){a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,s=a.parentNode,/pre/i.test(s.nodeName)&&(s.className=s.className.replace(e,"").replace(/\s+/g," ")+" language-"+l);var c=a.textContent;if(c){var g={element:a,language:l,grammar:o,code:c};if(t.hooks.run("before-highlight",g),r&&self.Worker){var u=new Worker(t.filename);u.onmessage=function(e){g.highlightedCode=n.stringify(JSON.parse(e.data),l),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(g.element),t.hooks.run("after-highlight",g)},u.postMessage(JSON.stringify({language:g.language,code:g.code}))}else g.highlightedCode=t.highlight(g.code,g.grammar,g.language),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(a),t.hooks.run("after-highlight",g)}}},highlight:function(e,a,r){var i=t.tokenize(e,a);return n.stringify(t.util.encode(i),r)},tokenize:function(e,n){var a=t.Token,r=[e],i=n.rest;if(i){for(var l in i)n[l]=i[l];delete n.rest}e:for(var l in n)if(n.hasOwnProperty(l)&&n[l]){var o=n[l];o="Array"===t.util.type(o)?o:[o];for(var s=0;s<o.length;++s){var c=o[s],g=c.inside,u=!!c.lookbehind,f=0,h=c.alias;c=c.pattern||c;for(var p=0;p<r.length;p++){var d=r[p];if(r.length>e.length)break e;if(!(d instanceof a)){c.lastIndex=0;var m=c.exec(d);if(m){u&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),N=[p,1];b&&N.push(b);var O=new a(l,g?t.tokenize(m,g):m,h);N.push(O),w&&N.push(w),Array.prototype.splice.apply(r,N)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("[object Array]"==Object.prototype.toString.call(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}t.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=s+'="'+(i.attributes[s]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+o+">"+i.content+"</"+i.tag+">"},!self.document)return self.addEventListener?(self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code;self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),self.close()},!1),self.Prism):self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism);;
Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi},Prism.hooks.add("wrap",function(t){"entity"===t.type&&(t.attributes.title=t.content.replace(/&/,"&"))});;
Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/gi,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/gi},Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/<style[\w\W]*?>[\w\W]*?<\/style>/gi,inside:{tag:{pattern:/<style[\w\W]*?>|<\/style>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});;
Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//g,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*?(\r?\n|$)/g,lookbehind:!0}],string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/gi,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/gi,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};;
Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/<script[\w\W]*?>[\w\W]*?<\/script>/gi,inside:{tag:{pattern:/<script[\w\W]*?>|<\/script>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});;
Prism.languages.php=Prism.languages.extend("clike",{keyword:/\b(and|or|xor|array|as|break|case|cfunction|class|const|continue|declare|default|die|do|else|elseif|enddeclare|endfor|endforeach|endif|endswitch|endwhile|extends|for|foreach|function|include|include_once|global|if|new|return|static|switch|use|require|require_once|var|while|abstract|interface|public|implements|private|protected|parent|throw|null|echo|print|trait|namespace|final|yield|goto|instanceof|finally|try|catch)\b/gi,constant:/\b[A-Z0-9_]{2,}\b/g,comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])(\/\/|#).*?(\r?\n|$))/g,lookbehind:!0}}),Prism.languages.insertBefore("php","keyword",{delimiter:/(\?>|<\?php|<\?)/gi,variable:/(\$\w+)\b/gi,"package":{pattern:/(\\|namespace\s+|use\s+)[\w\\]+/g,lookbehind:!0,inside:{punctuation:/\\/}}}),Prism.languages.insertBefore("php","operator",{property:{pattern:/(->)[\w]+/g,lookbehind:!0}}),Prism.languages.markup&&(Prism.hooks.add("before-highlight",function(e){"php"===e.language&&(e.tokenStack=[],e.backupCode=e.code,e.code=e.code.replace(/(?:<\?php|<\?)[\w\W]*?(?:\?>)/gi,function(n){return e.tokenStack.push(n),"{{{PHP"+e.tokenStack.length+"}}}"}))}),Prism.hooks.add("before-insert",function(e){"php"===e.language&&(e.code=e.backupCode,delete e.backupCode)}),Prism.hooks.add("after-highlight",function(e){if("php"===e.language){for(var n,a=0;n=e.tokenStack[a];a++)e.highlightedCode=e.highlightedCode.replace("{{{PHP"+(a+1)+"}}}",Prism.highlight(n,e.grammar,"php"));e.element.innerHTML=e.highlightedCode}}),Prism.hooks.add("wrap",function(e){"php"===e.language&&"markup"===e.type&&(e.content=e.content.replace(/(\{\{\{PHP[0-9]+\}\}\})/g,'<span class="token php">$1</span>'))}),Prism.languages.insertBefore("php","comment",{markup:{pattern:/<[^?]\/?(.*?)>/g,inside:Prism.languages.markup},php:/\{\{\{PHP[0-9]+\}\}\}/g}));;
Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},atrule:/@[\w-]+(?=\s+(\(|\{|;))/gi,url:/([-a-z]+-)*url(?=\()/gi,selector:/([^@;\{\}\(\)]?([^@;\{\}\(\)]|&|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm}),Prism.languages.insertBefore("scss","atrule",{keyword:/@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)|(?=@for\s+\$[-_\w]+\s)+from/i}),Prism.languages.insertBefore("scss","property",{variable:/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i}),Prism.languages.insertBefore("scss","ignore",{placeholder:/%[-_\w]+/i,statement:/\B!(default|optional)\b/gi,"boolean":/\b(true|false)\b/g,"null":/\b(null)\b/g,operator:/\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g});;
Prism.languages.bash=Prism.languages.extend("clike",{comment:{pattern:/(^|[^"{\\])(#.*?(\r?\n|$))/g,lookbehind:!0},string:{pattern:/("|')(\\?[\s\S])*?\1/g,inside:{property:/\$([a-zA-Z0-9_#\?\-\*!@]+|\{[^\}]+\})/g}},keyword:/\b(if|then|else|elif|fi|for|break|continue|while|in|case|function|select|do|done|until|echo|exit|return|set|declare)\b/g}),Prism.languages.insertBefore("bash","keyword",{property:/\$([a-zA-Z0-9_#\?\-\*!@]+|\{[^}]+\})/g}),Prism.languages.insertBefore("bash","comment",{important:/(^#!\s*\/bin\/bash)|(^#!\s*\/bin\/sh)/g});;
Prism.hooks.add("after-highlight",function(e){var n=e.element.parentNode;if(n&&/pre/i.test(n.nodeName)&&-1!==n.className.indexOf("line-numbers")){var t,a=1+e.code.split("\n").length;lines=new Array(a),lines=lines.join("<span></span>"),t=document.createElement("span"),t.className="line-numbers-rows",t.innerHTML=lines,n.hasAttribute("data-start")&&(n.style.counterReset="linenumber "+(parseInt(n.getAttribute("data-start"),10)-1)),e.element.appendChild(t)}});;<head>
<title>
Flat Code Editor
</title>
<script src='//use.edgefonts.net/open-sans:n4,i4,n7.js'></script>
</head>
<body>
<input id="info" name="info" type="checkbox">
<label for="info">i</label>
<h1>Inspired by <a href="https://tr.gravatar.com/tebm" target="blank">HARUN PEHLİVAN's Gravatar shot</a>
<br />
~Callum Silcock 2018 | <a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank">FOUNDER,CEO BLOGGER</a></h1>
<!-- Code Editor -->
<section class='code-editor'>
<div class='controls'>
<i class="fa fa-expand fullscreen"></i>
<i class="fa fa-chevron-up accordion"></i>
</div>
<div class='embed-nav'>
<ul>
<li>
<a href='#html-box' id='html-link'>
HTML
</a>
</li>
<li>
<a class='active' href='#css-box' id='css-link'>
SCSS
</a>
</li>
<li>
<a href='#js-box' id='js-link'>
JS
</a>
</li>
<li>
<a href='#result-box' id='result-link'>
Result
</a>
</li>
</ul>
<div class='logo-wrap'>
<a href='#' target='_blank' title='Edit on CodePen'>
Edit on codepen
</a>
</div>
</div>
<pre class='line-numbers'>
<code class='language-scss'>
//Variables
$font-stack: open-sans, Arial, sans-serif;
$base-font: 62.5%; //I like my rem's even (1rem = 10px)
$page-bg: #71D4B7;
$code-top: #E8ECEF;
$code-text: #BAC1C9;
$code-bg: #4e606c;
$code-nav: #384a56;
$code-nav-select: #233038;
$code-selector: #FC659A;
$code-property: #71D4B7;
$code-linenumbers: #879BA6;
$code-comment: lighten($code-bg,30%);
body {
font-family: $font-stack;
padding: 20px;
background-color: $page-bg;
font-size: 62.5%;
}
</code>
</pre>
</section>
</body>Flat Code Editor
Just (another) flat design code editor that should work with codepen embedding too for my portfolio refresh :)
A Pen by HARUN PEHLİVAN on CodePen.