Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	KA-SASS - ft. Quinn Hardbrook
ID	5549764049420288
Created	3 years ago, 1635346001392
Updated	2 years ago, 1646885106175
Code	<!DOCTYPE html> <html> <!-- A collaboration project between Quinn Hardbrook(@stranothus) and Leaf(@leafkn). KA-SASS is a CSS extension that can be used on Khan Academy's webpage environment and this will help you write CSS in new, exciting and awesome ways! All the information is in this site. Wanna be notified when we both will release some stuff here , subscribe to our respective subpages :) Quinn's - https://www.khanacademy.org/computer-programming/subpage-21/5059654232932352 Leaf's - https://www.khanacademy.org/computer-programming/leafs-subscription-page/5965098333454336 --> <head> <meta charset="utf-8"> <title>KA-SASS - ft. Quinn Hardbrook</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400&family=Montserrat&family=Poppins:wght@500&display=swap" rel="stylesheet"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/dark.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script> <!-- our Sass styling :D --> <sass-style> $c1 : white; $c2 : blue; $c3 : green; $bg-dark: #202020; $bg-main: #303030; $bg-light: #404040; $accent-1: #FFA030; $accent-2: #FA5020; $accent-3: #EAA000; $txt-main: #EFEFEF; $font-title: 'Montserrat', sans-serif; $font-accent: 'Poppins', sans-serif; $font-main: 'Lato', sans-serif; ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: $bg-dark; } ::-webkit-scrollbar-thumb { background: $bg-light; } ::-webkit-scrollbar-thumb:hover { background: $bg-main; } ::-webkit-scrollbar-thumb:active { background: $bg-main; } @mixin warning($bar. $gr) { color: $bar; padding: $gr; float: right; } %after { content: ""; position: absolute; } %font { font-family: $font-accent; font-weight: bold; } .output { white-space: pre; color: $accent-2; display: none; } body { width: 100vw; min-height: 100vh; height: auto; overflow-x: hidden; background: $bg-main; margin: 0; padding: 0; nav { display: flex; flex-direction: row; justify-content: space-between; position: sticky; top: 0; z-index: 1000; align-items: center; width: 94vw - 10px; height: 50px; padding: 0 3vw; background: linear-gradient(0.2turn, $accent-1, $accent-3); box-shadow: 0 2px 5px #000000; h1 { padding: 0 5vw 0 1vw; margin: 0 11.2vw 0 0; font-family: $font-title; font-size: 1.75rem; line-height: 1; cursor: pointer; } ul { display: flex; flex-direction: row; justify-content: space-between; list-style: none; width: 100%; li { position: relative; font-family: $font-accent; font-weight: bold; font-size: 1.1rem; line-height: 0; cursor: pointer; padding: 25px 10px; color: $bg-dark; transition: 0.3s all; :after { @extend %after; bottom: 0; left: 50%; width: 0; height: 3px; background-color: $bg-dark; transition: 0.3s all; } } li:not(.focus):hover { transition: 0.3s all; :after { left: 5px; width: 100% - 10px; transition: 0.3s all; } } .focus { color: $bg-dark; } .focus:after { @extend %after; bottom: 0; left: 5px; width: 100% - 10px; height: 5px; background-color: $bg-dark; transition: 0.3s all; } } } } button.focus { background-color: $bg-light; color: $accent-1; font-family: $font-accent-1; font-weight: bold; padding: 15px; border: none; font-size: 1rem; box-shadow: 2px 3px 5px #000000; transition: 0.3s all; cursor: pointer; :hover { background-color: $bg-main; box-shadow: 4px 6px 10px #000000; transition: 0.3s all; } } .p { @include warning($bg-dark. $accent-1. 20px); } .page { outline: none; margin: 25px 20px 0 25px; .lander { background-color: black; background-image: url("https://upload.wikimedia.org/wikipedia/commons/f/fc/Composition5r.jpg"); // https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Cascading_Style_Sheets.jpg/1024px-Cascading_Style_Sheets.jpg // https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/ComputerProgrammer.jpg/1024px-ComputerProgrammer.jpg color: $accent-1; text-shadow: 1px 2px 5px $bg-dark; text-align: center; margin-left: 10px; margin-right: 25px; padding: 10px; height: 76vh; font-family: $font-title; border-radius: 15px; box-shadow: 0 0 50px inset #000000; } .citings { color: $accent-1; margin: 0 5vw; padding: 5px 0; border-bottom: 2px solid $accent-1; font-size: 1.2rem; @extend %font; } p:not(#in), ol { padding-left: 20px; padding-right: 20px; @extend %font; font-family: $font-main !important; font-size: 1.15rem; line-height: 1.5; letter-spacing: 0.1px; color: $txt-main; } ol { margin: 0 5vw; } pre { margin: 0 5vw; border-left: 5px solid $accent-2; } a { text-decoration: none; padding: 5px; color: $accent-1; } a:hover { text-decoration: underline; } h1 { font-family: $font-title; color: $accent-1; margin: 0 5vw; padding: 5px 0; border-bottom: 2px solid $accent-1; font-size: 1.4rem; } } .cr { color:#d88; } .center { display: grid; align-items: center; justify-content: center; } .tooltip { position: relative; display: inline-block; .tooltiptext { visibility: hidden; width: 140px; background-color: $accent-2; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -75px; opacity: 0; transition: opacity 0.3s; ::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: $accent-2 transparent transparent transparent; } } :hover .tooltiptext { visibility: visible; opacity: 1; } } %outline { outline: none; border-top: none; border-right: none; border-bottom: none; } #inp { white-space : pre-wrap; width : 90%; font-family: monospace; background-color: #444; color: #fff; border-left: 4px solid #e64a19; @extend %outline; display : block; padding : 8px; font-size : 15px; margin-left: 24px; } #btn-inp { background-color: $accent-1; @extend %outline; border-left: none; padding: 10px; margin: 7px; font-family: 'Montserrat'; cursor: pointer; :hover { background-color: $accent-3; } } </sass-style> </head> <body> <nav> <h1 onclick="page('home');" id ="home">KASASS</h1> <ul> <li onclick="page('about');" id = "about">About</li> <li onclick="page('learn');" id = "learn">Learn</li> <li class="focus" onclick="page('examples');" id = "examples">Examples</li> </ul> </nav> <div class="page home"><br> <div class="lander parallax" data-image = "https://upload.wikimedia.org/wikipedia/commons/f/fc/Composition5r.jpg"> <br> <h1>CSS With Powers</h1> <br> <p id="in">Write CSS that is no less than magic!</p> <br><br> <button class="focus"> <a href = "#here">Learn More</a> </button> </div> <br><br> <div class="citings" id="here">What is KASASS ?</div> <br> <p>KASASS is a CSS extension that has been developed by Quinn Hardbrook and Leaf because Khan Academy's limiting editor doesn't allow coders to use CSS extensions. Like SASS, KASASS allows you to do a lot of fun and exciting things like nesting, inheritance etc. This extension just has two scripts that have to be copied and pasted in your webpage editor. Then you are ready to type some SASS code into your webpage.</p> <br> <div class="center"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Cascading_Style_Sheets.jpg/1024px-Cascading_Style_Sheets.jpg" alt="img1" width="300"> </div> <br><br> <div class="citings">Why is this made ?</div> <br> <p>This has been made to allow programmers creating webpages on Khan Academy to use some awesome features of CSS extensions on KA editor. There seemed to be a need to create something like this on KA and therefore it is here. The script has been developed with Javascript Regular Expressions and iterators of ES6 Javascript.</p> <br> <div class="center"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/ComputerProgrammer.jpg/1024px-ComputerProgrammer.jpg" alt="img1" width="300"> </div> <br><br> <div class="citings">How to use KASASS ?</div> <br> <p>Using KASASS is very simple. Copy the following piece of code in your webpage and <i>voila</i>!</p> <input type="text" value='<script src = "https://cdn.jsdelivr.net/gh/stranothus/KASASS@latest/importless.js"></script>' id="inp"> <div class="center"> <div class="tooltip"> <button onclick="copy()" onmouseout="show()" id="btn-inp"> <span class="tooltiptext" id="tt">Copy to clipboard</span> Copy text </button> </div> </div> <p> You are ready to write some KASASS using the following piece of code in your head tag.</p><pre><code class="language-html"><sass-style> //KASASS code here </sass-style></code></pre> <br> <br><br> <footer> <hr> <br> <div class="citings">KASASS<br>Collab between stranothus & leafkn</div> <br><br> </footer> </div> <div class="page about"> <h1>About KASASS</h1> <p>KASASS was a project by Leaf and Quinn Hardbrook. Quinn was slightly more active on Khan Academy for a little while and asked his subcribers for ideas. Leaf suggested a collab, and Quinn suggested we collaborate together. Bringing SASS, a CSS extension, to Khan Academy was among the first ideas and excited both. We quickly got to work, implementing nearly all SASS features through RegEx. Most of the work was done on Khan Academy with some done on Replit. </p> <p>A tool is not sure to work until it's used for it's purpose, so Leaf and Quinn created this webpage as the first practical use of KASASS and a get started guide to using it. We hope you find KASASS useful! :D</p> </div> <div class="page learn"> <h1>Documentation</h1> <br> <pre> <code class="language-css">KASASS is a CSS extension based on <br>SASS (Syntactically Awesome Style Sheets)<br> This is a widely used syntax in web development and<br>worth learning! This page includes only those syntaxes that are available<br>with KASASS. </code> </pre> <p>Contents -</p> <ol> <li> <a href="#sgc">Single Line comments</a> </li> <li> <a href="#v">Variables</a> </li> <li> <a href="#i">Inheritance</a> </li> <li> <a href="#nnc">No need of <code>calc()</code></a> </li> <li> <a href="#m">Mixin</a> </li> <li> <a href="#n">Nesting</a> </li> </ol> <br> <div> <h1 id="sgc">Single line comments :</h1> <p>In standard CSS, commenting code is a bit lengthy process and KASASS has made it easier!</p><br> <pre><code class="language-css"> /* Comment in CSS / p { color: red; } </code></pre><br> <p>KASASS</p><br> <pre><code class="language-javascript"> //Comment in KASASS <b>p</b> { <span class="cr">color</span>: red; } </code></pre><br> </div><br> <div> <h1 id="v">Variables :</h1> <p>In standard CSS, declaring variables is also a lengthy process.</p><br> <pre><code class="language-css"> / Variables declaration / :root { --variable: #000000; } / using variables / h1 { color: var(--variable); } </code></pre><br> <p>KASASS</p><br> <pre><code class="language-javascript">//Variables declaration $<span class="cr">variable</span>: #000000; //using variables <b>h1</b> { <b>color</b>: $<span class="cr">variable</span>; } </code></pre><br> </div><br> <div> <h1 id="i">Inheritance :</h1> <p>In standard CSS, there's no way to re-use a piece of css-code in various selectors but KASASS has @extend.</p> <p>The @extend directive lets you share a set of CSS properties from one container to many selectors.</p><br> <pre><code class="language-css"> %<b>button</b> { <b>padding</b>: 10px; <b>outline</b>: none; <b>cursor</b>: pointer; <b>font-size</b>: 1.1em; } .<b>basic-btn</b> { @<b>extend</b> %button; <b>background-color</b>: #000000; } .<b>color-btn</b> { @<b>extend</b> %button; <b>background-color</b>: #FF0000; } </code></pre><br> </div><br> <div> <h1 id="nnc">No need of <code>calc()</code> :</h1> <p>In standard CSS, we have to wrap calculations inside the calc() function but in KASASS we don't need to!</p> <pre><code class="language-css"> .container { width: calc(100vw - 2em); } </code></pre><br> <p>KASASS</p> <pre><code class="language-css"> .container { width: 100vw - 2em; } </code></pre><br> </div><br> <div> <h1 id="m">Mixin :</h1> <p>In standard CSS, we have no way to create reusable functions but KASASS has a way to do this.<br>The @mixin directive lets you create CSS code that is to be reused throughout the website. The @include directive is created to let you use (include) the mixin.</p> <p>KASASS</p> <pre><code class="language-css"> @mixin border($color. $width) { border-color: $color; border-style: solid; border-width: $width; } div { @include <span class="cr">border</span>(red, thin); } section { @include <span class="cr">border</span>(black, thick); } </code></pre><br> </div><br> <div> <h1 id="n">Nesting :</h1> <p>KASASS lets you nest CSS selectors in the same way as HTML.</p> <p>KASASS</p> <pre><code class="language-css"> nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } </code></pre><br> </div><br> </div> <div class="page examples"> <h1>Examples</h1> <p>See what some people have made with KASASS! Make a spin-off of this program and fill it with your own code using KASASS for a chance of having your project listed up here! </div> <!-- KA SASS --> <script src = "https://cdn.jsdelivr.net/gh/stranothus/KASASS@latest/importless.js"></script> <!-- $create function --> <script type = "application/javascript"> function $create(node) { node = node.trim(); let startingTag = node.match(/<(?:[^>\s]+)/)[0]; startingTag = startingTag.slice(1, startingTag.length); let attributes = node.slice(startingTag.length + 1, startingTag.length + 2) !== ">" ? (node.slice(startingTag.length + 1).match(/([^>]+)/)[0]).replace(/\s/g, "").replace(/$[\"\']/g, "(#$#").replace(/[\"\']$/g, "#$#)").replace(/\\[\"\']/g, "#$#").split(/[\"\'](?!url\()\|=[\"\']/g) : ""; let HTML = node.match(/>([^])</)[0]; HTML = HTML.slice(1, HTML.length - 1); let element = document.createElement(startingTag); for(let i = 0; i < attributes.length - 1; i+=2) { element.setAttribute(attributes[i], attributes[i + 1].replace(/#\$#/g, "\'").replace(/%20/g, " ")); } element.innerHTML = HTML; return element; } </script> <!-- page("className") --> <script type = "application/javascript"> function page(className) { document.querySelectorAll(".page").forEach((e, i) => { if(e.classList.contains(className)) { e.style.display = "block"; e.animate([ { "opacity" : 0 }, { "opacity" : 1 } ], { "duration" : 1000, "ease" : "ease-in-out", "fill" : "forwards" }); } else { e.style.display = "none"; } }); document.querySelector("nav .focus").classList.remove("focus"); document.querySelector("nav #" + className).classList.add("focus"); window.scroll(0, 0); imagesScroll(); } </script> <!-- parallax images --> <script type = "application/javascript"> var images = document.querySelectorAll(".parallax"); images.forEach(e => { e.style.backgroundImage = `url("${e.dataset.image}")`; }); function imagesScroll() { images.forEach(e => { e.style.backgroundPositionY = (-e.getBoundingClientRect().top / 2) + "px"; }); } window.addEventListener("scroll", imagesScroll); setTimeout(imagesScroll); </script> <!-- relative links become smooth --> <script type = "application/javascript"> var anchors = document.querySelectorAll("a"); anchors.forEach(anchor => { if(/#/.test(anchor.getAttribute("href"))) { anchor.onclick = function(e) { e.preventDefault(); document.querySelector(anchor.getAttribute("href")).scrollIntoView(); } } }) </script> <!-- initializing highlight.js --> <script> hljs.initHighlightingOnLoad(); </script> <!-- set the starting page --> <script> page('home'); </script> <!-- copy to clipboard --> <script> function copy() { var copyText = document.getElementById("inp"); copyText.select(); copyText.setSelectionRange(0, 99999); navigator.clipboard.writeText(copyText.value); var tooltip = document.getElementById("tt"); tooltip.innerHTML = "Copied!"; } function show() { var tooltip = document.getElementById("tt"); tooltip.innerHTML = "Copy to clipboard"; } </script> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.3/dist/html2canvas.min.js"></script> <!-- CREDIT TO BlueBird@BirdWatcher03 FOR THE AMAZING SAVE FUNCTION --> <script> var save = function(){ html2canvas(document.body,{ allowTaint : false, useCORS: true, width:579, height:566, }) .then(function(canvas){ b64Img = canvas.toDataURL(); window.top.postMessage(b64Img, "https://www.khanacademy.org/"); }); }; var handleSave = function(e) { if (JSON.parse(e.data).screenshot) { setTimeout(function() { console.log("Saving..."); save(); }, 1000) } }; window.parent.savers = window.parent.savers \|\| 0; window.parent.addEventListener('message', handleSave); window.parent.savers += 1; for (window.parent.savers; window.parent.savers > 1; window.parent.savers -= 1) { window.parent.removeEventListener('message', handleSave) } </script> <script type="application/javascript"> document.body.addEventListener("keydown", function(e) { if (e.code === "Escape") { document.body.innerHTML = ` <div style="margin: 0; padding: 0; background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Cascading_Style_Sheets.jpg/1024px-Cascading_Style_Sheets.jpg); background-position: -384px 600px; width: 100vw; height:100vh;"> <div style="display: grid; align-items: center; justify-content: center;"> <h1 style="font-size: 100px; color: #fff; font-family: 'Montserrat';">KA-SASS</h1> </div> <div style="display: grid; align-items: center; justify-content: center;"> <h2 style="color: #fff; font-family: 'Montserrat'; font-size: 35px; position:relative; top: -73px; text-align: center; ">Write CSS that is no less than magic!</h2> </div> <h1 style="font-size: 155px; color: #fff; font-family: 'Montserrat'; text-align: center; position: relative; color: rgb(247, 159, 104); top: -174px;">( ^-^ ) </h1> </div> `; } if (e.code === "Enter") { e.preventDefault(); } }); </script> </body> </html>
Folds	27,330,334,342,345,400,402,406,408,578,580,583,592,621,625,649,653,669,673,685,689,691,695,697,701,716,720,747,748,792
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIOWsu_tCQw
Votes	126
Spin-Offs	11
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	Leaf
Author Name	leafkn
Author ID	kaid_481697903688181525808339
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1709835008068
Updated	10 months ago, 1709835008068
Source Deleted	unknown