Created
June 6, 2022 09:16
-
-
Save vineeth-pappu/709356179faef4e94c08669299d8b96d to your computer and use it in GitHub Desktop.
augmented-ui social media picture-of-code thing
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
<code class="code-container" content="// Jane 💜"> | |
<div class="glow-container"> | |
<div class="augs" data-augmented-ui></div> | |
</div> | |
<section class="augs bg" data-augmented-ui> | |
<button class="dots" onclick="changeMode()" title="change mode"></button> | |
<input value="propjockey.io"> | |
<div class="code highcontrast-dark"> | |
<textarea id="code"> | |
@keyframes cast-bit-to-space-toggle { | |
to { --cbtst-space-toggle: ; } | |
} | |
@property --cbtst-space-toggle { | |
syntax: "*"; | |
initial-value: initial; | |
inherits: false; | |
} | |
:where(.cbtst) { | |
--cbtst-animation: cast-bit-to-space-toggle | |
1ms linear both var(--cbtst-bit, 0); | |
animation: var(--cbtst-animation); | |
} | |
/* usage */ | |
.my-el.cbtst { | |
--cbtst-bit: 1; /* provide input value of 0 or 1 */ | |
/* var(--cbtst-space-toggle) is the output */ | |
} | |
</textarea> | |
</div> | |
</section> | |
</div> |
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
let mode = "css" | |
const editor = CodeMirror.fromTextArea(code, { | |
lineNumbers: true, | |
styleActiveLine: true, | |
matchBrackets: true, | |
scrollbarStyle: "overlay", | |
Tab: "indentMore", | |
defaultTab: function(cm) { | |
if (cm.somethingSelected()) cm.indentSelection("add"); | |
else cm.replaceSelection(" ", "end"); | |
}, | |
mode | |
}) | |
editor.setOption("theme", "highcontrast-dark") | |
const x = document.querySelector(".code") | |
const ro = new ResizeObserver(entries => { | |
editor.setSize(x.offsetWidth, x.offsetHeight) | |
}) | |
ro.observe(document.querySelector(".code-container")) | |
const changeMode = () => { | |
mode = mode === "css" ? "javascript" : "css" | |
editor.setOption("mode", mode) | |
} |
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
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/codemirror.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/javascript/javascript.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/css/css.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/addon/scroll/simplescrollbars.min.js"></script> |
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
.code-container { | |
resize: both; | |
overflow: hidden; | |
margin: auto; | |
width: 80vw; | |
height: 80vh; | |
min-width: 420px; | |
min-height: 255px; | |
position: relative; | |
--glow-margin: 70px; | |
filter: drop-shadow(0 0 75px rgb(128 0 255 / 0.25)); | |
} | |
.code-container::before { | |
content: attr(content); | |
position: absolute; | |
bottom: 90px; | |
right: 90px; | |
z-index: 999; | |
color: rgb(255 200 255 / 0.5); | |
text-shadow: 0 0 12px rebeccapurple; | |
letter-spacing: 0.1em; | |
} | |
.code-container::after { | |
content: ""; | |
background: linear-gradient( | |
to right, | |
transparent, | |
black 25px, black 110px, | |
transparent 110px 175px, | |
black 175px, black calc(100% - 25px), | |
transparent | |
); | |
position: absolute; | |
top: 125px; | |
left: var(--glow-margin); | |
right: var(--glow-margin); | |
height: 4px; | |
display: block; | |
z-index: 90; | |
opacity: 0.5; | |
} | |
.glow-container { | |
position: absolute; | |
inset: 0; | |
display: grid; | |
z-index: 2; | |
pointer-events: none; | |
--glow: drop-shadow(0 0 1px violet); | |
filter: var(--glow) brightness(1.5) drop-shadow(0 0 10px violet); | |
} | |
.augs { | |
--aug-rect-l1: initial; | |
--aug-l1-width: 110px; | |
--aug-l1-height: 4px; | |
--aug-l-center: 57px; | |
--aug-rect-r1: initial; | |
--aug-r1-width: (100% - 125px - 50px); | |
--aug-r1-height: 4px; | |
--aug-r-center: 57px; | |
--aug-clip-tr1: initial; | |
--aug-tr1-alt-join-out: initial; | |
--aug-tr1: 17px; | |
--aug-clip-tr2: initial; | |
--aug-tr2: 17px; | |
--aug-tr-extend1: 50px; | |
--aug-round-tl1: initial; | |
--aug-tl1: 8px; | |
--aug-round-br1: initial; | |
--aug-br1: 8px; | |
margin: auto; | |
width: calc(100% - var(--glow-margin) * 2); | |
height: calc(100% - var(--glow-margin) * 2); | |
} | |
.glow-container .augs { | |
--aug-border: initial; | |
--aug-border-all: 2px; | |
--aug-border-bg: linear-gradient(to bottom left, rebeccapurple, orange); | |
} | |
section.augs { | |
position: absolute; | |
inset: 0; | |
margin: auto; | |
--aug-inlay: initial; | |
--aug-inlay-all: 2px; | |
--aug-inlay-bg: url(http://augmented-ui.com/img/propjockey.png) | |
center 70% / auto 70% no-repeat; | |
--aug-inlay-opacity: 0.25; | |
} | |
section.augs::before { | |
filter: brightness(0.2) blur(10px); | |
} | |
.dots { | |
position: absolute; | |
top: 2px; | |
left: 2px; | |
width: 110px; | |
height: 50px; | |
--red: #fc199a; | |
--yellow: #ffcc00; | |
--green: #61e2ff; | |
--close: radial-gradient(circle, var(--red), var(--red) 7px, transparent 8px); | |
--min: radial-gradient(circle, var(--yellow), var(--yellow) 7px, transparent 8px); | |
--max: radial-gradient(circle, var(--green), var(--green) 7px, transparent 8px); | |
background: var(--close) -28px no-repeat, | |
var(--min) -2px no-repeat, | |
var(--max) 24px no-repeat; | |
filter: brightness(0.5); | |
opacity: 0.75; | |
cursor: pointer; | |
border: none; | |
} | |
input { | |
position: absolute; | |
top: 17px; | |
left: 120px; | |
width: calc(100% - 240px); | |
background: transparent; | |
color: rgb(255 200 255 / 0.5); | |
text-shadow: 0 0 12px rebeccapurple; | |
border: none; | |
text-align: center; | |
letter-spacing: 0.1em; | |
} | |
.code { | |
position: absolute; | |
inset: 80px 10px 10px 10px; | |
font-size: 20px; | |
color: white; | |
filter: brightness(1.2); | |
} | |
.code * { | |
font-size: 18px; | |
font-weight: normal; | |
color: #b5b4b6; | |
font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; | |
} | |
body { | |
display: grid; | |
min-height: 100vh; | |
width: 100vw; | |
--c: rgb(0 0 0 / 0.95); | |
--bgb: linear-gradient(var(--c), var(--c)); | |
--bg: repeating-conic-gradient( | |
from 7.5deg at center center, | |
hsl(200, 100%, 0%) 0deg 15deg, | |
hsl(200, 100%, 60%) 10deg 30deg | |
); | |
background: var(--bgb), var(--bg), black; | |
} | |
* { | |
font: normal 1em sans-serif; | |
box-sizing: border-box; | |
padding: 0; | |
margin: 0; | |
} | |
/* https://marketplace.visualstudio.com/items?itemName=webrender.synthwave-x-fluoromachine */ | |
.bg { | |
background: repeating-linear-gradient( | |
to top, | |
rgba(255, 255, 255, 0.03) 0px 2px, | |
transparent 2px 4px | |
), | |
linear-gradient(to bottom, #200933 75%, #3d0b43); | |
} | |
.bg::after{ | |
content:''; | |
height:50%; | |
width:100%; | |
display:block; | |
background-image:linear-gradient(90deg, rgba(252,25,154,.1) 1px, rgba(0,0,0,0) 1px), linear-gradient(0deg, rgba(252,25,154,.1) 1px, rgba(0,0,0,0) 1px); | |
background-position:bottom; | |
background-repeat:repeat; | |
background-size:20px 20px; | |
left: -25px; | |
position: absolute; | |
pointer-events: none; | |
bottom: 0; | |
transform: perspective(100px) rotateX(60deg); | |
z-index: 0; | |
} | |
.CodeMirror-gutters { | |
background: transparent; | |
border: none; | |
margin-right: 15px; | |
} | |
.CodeMirror { | |
height: 100%; | |
background: transparent; | |
} | |
.CodeMirror-linenumber { | |
padding-right: 1em; | |
} | |
.CodeMirror-overlayscroll-horizontal div, | |
.CodeMirror-overlayscroll-vertical div { | |
background: rgba(153, 99, 255, 0.5); | |
} | |
.CodeMirror-scrollbar-filler { display: none!important; } | |
/* codepen's highcontrast-dark theme */ | |
.cm-header{font-weight:700}.cm-strong{font-weight:700}.cm-em{font-style:italic}:root{--editor-top-bar-background: black;--tab-bg: #131417;--tab-border-color: #2a2c33;--resizer-background: var(--editor-top-bar-background);--resizer-border: #242424}.sidebar-false .main-header,.sidebar-false .main-header .header-wrap,.editor-footer{background:var(--editor-top-bar-background)}.CodeMirror-cursor{border-left-color:#fff!important}.CodeMirror-selected{background:rgba(255,255,255,.05)}.CodeMirror-focused .CodeMirror-selected{background:rgba(255,255,255,.1)}.CodeMirror-matchingbracket{border-bottom:1px solid rgba(255,255,255,.5)}.CodeMirror-matchingtag{border-bottom:1px solid rgba(255,255,255,.3)}.cm-searching{background:#000;outline:2px solid rgba(255,255,255,.25)}.CodeMirror-hints,.emmet-abbreviation-preview{border:1px solid #5a5f73;background:#1e1f26}.CodeMirror-hint{color:#fff}li.CodeMirror-hint-active{background:#c7c9d3;color:#000}.project-editor-warning{background:rgba(255,255,255,.1)}.editor-footer{border-top-color:var(--resizer-border,var(--cp-color-6))}.cm-keyword{color:#ffdd40}.cm-atom{color:#a3d65a}.box-html .cm-atom{color:#ff3c41}.cm-def{color:#0ebeff}.cm-variable{color:#c7c9d3}.cm-variable-2{color:#47cf73}.cm-variable-3{color:#fff}.cm-header{color:#ff3c41}.cm-number{color:#2bc7b9}.cm-property{color:#5e91f2}.cm-attribute{color:#e3e4e8}.cm-builtin{color:#ae63e4}.cm-qualifier{color:#ffdd40}.cm-operator{color:#47cf73}.cm-meta{color:#0ebeff}.cm-string{color:#2bc7b9}.cm-string-2{color:#d75093}.cm-tag{color:#ffdd40}.box-css .cm-tag{color:#ff8d41}.cm-tag.cm-bracket{color:#9b9dad}.cm-comment{color:#88afbf}body.editor{background:#131417}.box.box.box,.editor .top-boxes,.CodeMirror-gutter-wrapper,body.project .editor-pane,body.project .editor{background:#131417}.box.box.box pre,.editor .top-boxes pre,.CodeMirror-gutter-wrapper pre,body.project .editor-pane pre,body.project .editor pre{color:#d5d7de}.CodeMirror-guttermarker-subtle,.CodeMirror-linenumber{color:rgba(113,119,144,.6)}#output pre::-webkit-scrollbar,#output iframe::-webkit-scrollbar{width:.5em;height:.5em}#output pre::-webkit-scrollbar-thumb,#output iframe::-webkit-scrollbar-thumb{background:#373c49}#output pre::-webkit-scrollbar-track,#output iframe::-webkit-scrollbar-track{background:0 0}.CodeMirror-simplescroll-horizontal div,.CodeMirror-simplescroll-vertical div{background:#373c49}.powers .mini-button{background:#444857}.powers .mini-button:hover,.powers .mini-button:focus{background:#c7c9d3}.powers .mini-button:hover svg,.powers .mini-button:focus svg{fill:#000} | |
/* theme overrides original source */ | |
/* https://marketplace.visualstudio.com/items?itemName=webrender.synthwave-x-fluoromachine */ | |
/* I just ported it to codemirror */ | |
.highcontrast-dark .cm-header { | |
font-weight: bold | |
} | |
.highcontrast-dark .cm-strong { | |
font-weight: bold | |
} | |
.highcontrast-dark .cm-em { | |
font-style: italic | |
} | |
.highcontrast-dark .CodeMirror-cursor { | |
border-left-color: white !important | |
} | |
.highcontrast-dark .CodeMirror-selected { | |
background: rgba(255,255,255,0.05) | |
} | |
.highcontrast-dark .CodeMirror-focused .CodeMirror-selected { | |
background: rgba(255,255,255,0.1) | |
} | |
.highcontrast-dark .CodeMirror-matchingbracket { | |
border-bottom: 1px solid rgba(255,255,255,0.5) | |
} | |
.highcontrast-dark .CodeMirror-matchingtag { | |
border-bottom: 1px solid rgba(255,255,255,0.3) | |
} | |
.highcontrast-dark .powers { | |
border-bottom: 1px solid rgba(255,255,255,0.05) | |
} | |
.highcontrast-dark .cm-searching { | |
background: black; | |
outline: 2px solid rgba(255,255,255,0.25) | |
} | |
.highcontrast-dark .CodeMirror-hints, | |
.highcontrast-dark .emmet-abbreviation-preview { | |
border: 1px solid #5a5f73; | |
background: #1e1f26 | |
} | |
.highcontrast-dark .CodeMirror-hint { | |
color: white | |
} | |
.highcontrast-dark li.CodeMirror-hint-active { | |
background: #c7c9d3; | |
color: black | |
} | |
.highcontrast-dark .project-editor-warning { | |
background: rgba(255,255,255,0.1) | |
} | |
.highcontrast-dark .cm-atom { | |
color: #9963ff; | |
} | |
.highcontrast-dark .box-html .cm-atom { | |
color: #ff3c41 | |
} | |
.highcontrast-dark .cm-def, | |
.highcontrast-dark .cm-variable-2, | |
.highcontrast-dark .cm-variable, | |
.highcontrast-dark .box-js .cm-variable + .cm-property { | |
color: #61e2ff; | |
text-shadow: 0 0 2px #001716, 0 0 5px #03edf933, 0 0 10px #ffff6633; | |
} | |
.highcontrast-dark .cm-header { | |
color: #ff3c41 | |
} | |
.highcontrast-dark .cm-builtin { | |
color: #ae63e4 | |
} | |
.highcontrast-dark .cm-number { | |
color: #9963ff; | |
} | |
.highcontrast-dark .cm-operator, | |
.highcontrast-dark .cm-variable-3, | |
.highcontrast-dark .cm-attribute, | |
.highcontrast-dark .cm-property, | |
.highcontrast-dark .cm-keyword, | |
.highcontrast-dark .presentation > .cm-def, | |
.highcontrast-dark .cm-qualifier { | |
color: #fc199a; | |
text-shadow: 0 0 2px #393a33, 0 0 35px #ffffff44, 0 0 10px #fc199a, 0 0 2px #fc199a; | |
} | |
.highcontrast-dark .cm-operator, | |
.highcontrast-dark .cm-variable-3, | |
.highcontrast-dark .cm-attribute, | |
.highcontrast-dark .cm-property { | |
font-style: italic; | |
} | |
.highcontrast-dark .cm-meta, | |
.highcontrast-dark .cm-meta + .cm-property, | |
.highcontrast-dark .cm-string, | |
.highcontrast-dark .cm-string-2 { | |
color: #9963ff; | |
text-shadow: none; | |
} | |
.highcontrast-dark .cm-tag, | |
.highcontrast-dark .cm-callee, | |
.highcontrast-dark .box-css .cm-tag, | |
.highcontrast-dark .cm-tag.cm-bracket, | |
.highcontrast-dark .box-js .cm-property { | |
color: #ffcc00; | |
text-shadow: 0 0 2px #100c0f, 0 0 3px #ffaa0099, 0 0 5px #ffaa0099, 0 0 10px #ffaa0099; | |
font-style: italic; | |
} | |
.highcontrast-dark .cm-comment { | |
font-style: italic; | |
color: #9963ff99; | |
text-shadow: 0 0 2px #001716, 0 0 5px #03edf933, 0 0 10px #ffff6633; | |
} | |
body.editor.highcontrast-dark { | |
background: #241b2f; | |
} | |
.highcontrast-dark .box.box.box, | |
.editor.highcontrast-dark .top-boxes, | |
.highcontrast-dark .CodeMirror-gutter-wrapper, | |
body.project.highcontrast-dark .editor-pane, | |
body.project.highcontrast-dark .editor { | |
background: none; | |
} | |
.editor.highcontrast-dark .top-boxes { | |
--swxfm__c: rgba(153, 99, 255); | |
background: repeating-linear-gradient( | |
to top, | |
rgba(255, 255, 255, 0.03) 0px 2px, | |
transparent 2px 4px | |
), | |
linear-gradient(to bottom, #200933 75%, #3d0b43); | |
} | |
.editor.highcontrast-dark .top-boxes:after{ | |
content:''; | |
height:300px; | |
width:100%; | |
display:block; | |
background-image:linear-gradient(90deg, rgba(252,25,154,.1) 1px, rgba(0,0,0,0) 1px), linear-gradient(0deg, rgba(252,25,154,.1) 1px, rgba(0,0,0,0) 1px); | |
background-position:bottom; | |
background-repeat:repeat; | |
background-size:20px 20px; | |
left: -25px; | |
position: absolute; | |
pointer-events: none; | |
bottom: 0; | |
transform: perspective(100px) rotateX(60deg); | |
z-index: 0; | |
} | |
.highcontrast-dark .box.box.box pre, | |
.editor.highcontrast-dark .top-boxes pre, | |
.highcontrast-dark .CodeMirror-gutter-wrapper pre, | |
body.project.highcontrast-dark .editor-pane pre, | |
body.project.highcontrast-dark .editor pre { | |
color: #b5b4b6; | |
} | |
.highcontrast-dark .CodeMirror-guttermarker-subtle, | |
.highcontrast-dark .CodeMirror-linenumber { | |
color: #8a2dc066; | |
text-shadow: 0 0 2px #393a33, 0 0 35px #ffffff44, 0 0 10px #8a2dc066, 0 0 2px #8a2dc066; | |
} |
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
<link href="https://unpkg.com/augmented-ui@2.0.0/augmented-ui.min.css" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/addon/scroll/simplescrollbars.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment