Steev/steevcss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Steev:main
Branches Tags
Steev:main
Steev:Release
Steev:gh-pages
Steev:add-license-1
Steev:v10
Steev:1.0
..
compare: Steev:add-license-1
Branches Tags
Steev:Release
Steev:main
Steev:gh-pages
Steev:add-license-1
Steev:v10
Steev:1.0

No commits in common. "main" and "add-license-1" have entirely different histories.
main ... add-licens

24 changed files with 14379 additions and 8932 deletions
Show Stats Expand all files Collapse all files

36
.gitea/workflows/deploy.yaml
View File

@ -1,36 +0,0 @@
name: Gitea Actions Demo
run-name: ${{ gitea.actor }} is testing out Gitea Actions 🚀
on:
push:
branches:
- Release
jobs:
create_release:
steps:
- name: Check out den Quellcode
uses: actions/checkout@v2
- name: Install build environment
uses: actions/setup-node@v2
with:
node-version: 18
- name: Install dependencies
run: npm install
- name: Build source
run: npm run build
- name: create release
id: create_release
run: |
git config user.name "gitea"
git config user.email "gitea@git.slpnetwork.de"
git tag v${{ gitea.run_number }} -m "Automatisches Release erstellt"
git push origin v${{ gitea.run_number }}
- name: Print Release URL
run: echo "Created release"

4
.gitignore vendored
View File

@ -1,4 +1,2 @@
node_modules
.cache
.vscode
dist
.cache

39
README.md
View File

@ -1,21 +1,26 @@
# steevcss
my own collection of html, css and javascript code combined to a webframework
## Documentation
You can find the Documentation [Here](https://steevlp.github.io/steevcss/)
## Feature List
1. GridSystem 12 Elemente [Implemented]
2. Code Preview
3. SlideShow
4. Navigations [Implemented]
5. Vordefinierter container [Implemented]
6. Footer
7. Styled Lists
8. Slider
9. Styled Buttons
10. Styled Form Elements / Groups
11. Image Cards (styled image containers with text)
12. general styled images (rounded borders)
13. Dropdowns
14. colored sections (a full length area with defined background-color)
15. Alert Sections [Implemented]
## Todo
1. [X] GridSystem with 12 Elements [Implemented]
2. [ ] Code Preview
3. [ ] SlideShow
4. [X] Navigations [Implemented]
5. [X] Vordefinierter container [Implemented]
6. [ ] Footer
7. [ ] Styled Lists
8. [X] Slider [Implemented]
9. [X] Styled Buttons [Implemented]
10. [ ] Styled Form Elements / Groups
11. [ ] Image Cards (styled image containers with text)
12. [ ] general styled images (rounded borders)
13. [ ] Dropdowns
14. [X]Alert Sections [Implemented]
## Stuff i already found
1. responsiveness is a bit messy
2. images in navbar are completely messed up
3. the colors may need a tweak
4. mobile toggle button needs to be bigger
5. revert back to standard font collection with verdana in it

216
dist/2d47c8cd43d85995abf14afd917c8434.js vendored Normal file
View File

@ -0,0 +1,216 @@
// modules are defined as an array
// [ module function, map of requires ]
//
// map of requires is short require name -> numeric require
//
// anything defined in a previous bundle is accessed via the
// orig method which is the require for previous bundles
require = (function (modules, cache, entry) {
// Save the require from previous bundle to this closure if any
var previousRequire = typeof require === "function" && require;
function newRequire(name, jumped) {
if (!cache[name]) {
if (!modules[name]) {
// if we cannot find the module within our internal map or
// cache jump to the current global require ie. the last bundle
// that was added to the page.
var currentRequire = typeof require === "function" && require;
if (!jumped && currentRequire) {
return currentRequire(name, true);
}
// If there are other bundles on this page the require from the
// previous one is saved to 'previousRequire'. Repeat this as
// many times as there are bundles until the module is found or
// we exhaust the require chain.
if (previousRequire) {
return previousRequire(name, true);
}
var err = new Error('Cannot find module \'' + name + '\'');
err.code = 'MODULE_NOT_FOUND';
throw err;
}
localRequire.resolve = resolve;
var module = cache[name] = new newRequire.Module;
modules[name][0].call(module.exports, localRequire, module, module.exports);
}
return cache[name].exports;
function localRequire(x){
return newRequire(localRequire.resolve(x));
}
function resolve(x){
return modules[name][1][x] || x;
}
}
function Module() {
this.bundle = newRequire;
this.exports = {};
}
newRequire.Module = Module;
newRequire.modules = modules;
newRequire.cache = cache;
newRequire.parent = previousRequire;
for (var i = 0; i < entry.length; i++) {
newRequire(entry[i]);
}
// Override the current require with this new one
return newRequire;
})({6:[function(require,module,exports) {
var code = document.querySelectorAll("code");
// code embed
code.forEach(c => {
let code = c.innerHTML.toString();
var output = "";
for(let i = 0; i < code.length; i++){
switch(code.charAt(i)){
default: output += code.charAt(i); break;
case ">": output += "&gt;"; break;
case "<": output += "&lt;"; break;
case "&": output += "&amp;"; break;
case "\"": output += "&quot;"; break;
}
}
c.innerHTML = output;
});
// TODO JavaScript Input value return
// Current way..
// -------------------------------------
// get input by getting the input object
// catch oninput event inside a function
// Handle it inside the function
// -------------------------------------
},{}],0:[function(require,module,exports) {
var global = (1, eval)('this');
var OldModule = module.bundle.Module;
function Module() {
OldModule.call(this);
this.hot = {
accept: function (fn) {
this._acceptCallback = fn || function () {};
},
dispose: function (fn) {
this._disposeCallback = fn;
}
};
}
module.bundle.Module = Module;
if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
var ws = new WebSocket('ws://localhost:50746/');
ws.onmessage = function(event) {
var data = JSON.parse(event.data);
if (data.type === 'update') {
data.assets.forEach(function (asset) {
hmrApply(global.require, asset);
});
data.assets.forEach(function (asset) {
if (!asset.isNew) {
hmrAccept(global.require, asset.id);
}
});
}
if (data.type === 'reload') {
ws.close();
ws.onclose = function () {
window.location.reload();
}
}
if (data.type === 'error-resolved') {
console.log('[parcel] ✨ Error resolved');
}
if (data.type === 'error') {
console.error('[parcel] 🚨 ' + data.error.message + '\n' + 'data.error.stack');
}
};
}
function getParents(bundle, id) {
var modules = bundle.modules;
if (!modules) {
return [];
}
var parents = [];
var k, d, dep;
for (k in modules) {
for (d in modules[k][1]) {
dep = modules[k][1][d];
if (dep === id || (Array.isArray(dep) && dep[dep.length - 1] === id)) {
parents.push(+k);
}
}
}
if (bundle.parent) {
parents = parents.concat(getParents(bundle.parent, id));
}
return parents;
}
function hmrApply(bundle, asset) {
var modules = bundle.modules;
if (!modules) {
return;
}
if (modules[asset.id] || !bundle.parent) {
var fn = new Function('require', 'module', 'exports', asset.generated.js);
asset.isNew = !modules[asset.id];
modules[asset.id] = [fn, asset.deps];
} else if (bundle.parent) {
hmrApply(bundle.parent, asset);
}
}
function hmrAccept(bundle, id) {
var modules = bundle.modules;
if (!modules) {
return;
}
if (!modules[id] && bundle.parent) {
return hmrAccept(bundle.parent, id);
}
var cached = bundle.cache[id];
if (cached && cached.hot._disposeCallback) {
cached.hot._disposeCallback();
}
delete bundle.cache[id];
bundle(id);
cached = bundle.cache[id];
if (cached && cached.hot && cached.hot._acceptCallback) {
cached.hot._acceptCallback();
return true;
}
return getParents(global.require, id).some(function (id) {
return hmrAccept(global.require, id)
});
}
},{}]},{},[0,6])

73
dist/33f23c9be750d12cdb4f825c7658d390.js vendored Normal file
View File

@ -0,0 +1,73 @@
// modules are defined as an array
// [ module function, map of requires ]
//
// map of requires is short require name -> numeric require
//
// anything defined in a previous bundle is accessed via the
// orig method which is the require for previous bundles
require = (function (modules, cache, entry) {
// Save the require from previous bundle to this closure if any
var previousRequire = typeof require === "function" && require;
function newRequire(name, jumped) {
if (!cache[name]) {
if (!modules[name]) {
// if we cannot find the module within our internal map or
// cache jump to the current global require ie. the last bundle
// that was added to the page.
var currentRequire = typeof require === "function" && require;
if (!jumped && currentRequire) {
return currentRequire(name, true);
}
// If there are other bundles on this page the require from the
// previous one is saved to 'previousRequire'. Repeat this as
// many times as there are bundles until the module is found or
// we exhaust the require chain.
if (previousRequire) {
return previousRequire(name, true);
}
var err = new Error('Cannot find module \'' + name + '\'');
err.code = 'MODULE_NOT_FOUND';
throw err;
}
localRequire.resolve = resolve;
var module = cache[name] = new newRequire.Module;
modules[name][0].call(module.exports, localRequire, module, module.exports);
}
return cache[name].exports;
function localRequire(x){
return newRequire(localRequire.resolve(x));
}
function resolve(x){
return modules[name][1][x] || x;
}
}
function Module() {
this.bundle = newRequire;
this.exports = {};
}
newRequire.Module = Module;
newRequire.modules = modules;
newRequire.cache = cache;
newRequire.parent = previousRequire;
for (var i = 0; i < entry.length; i++) {
newRequire(entry[i]);
}
// Override the current require with this new one
return newRequire;
})({6:[function(require,module,exports) {
var e=document.querySelectorAll("code");e.forEach(e=>{let a=e.innerHTML.toString();var r="";for(let e=0;e<a.length;e++)switch(a.charAt(e)){default:r+=a.charAt(e);break;case">":r+="&gt;";break;case"<":r+="&lt;";break;case"&":r+="&amp;";break;case'"':r+="&quot;"}e.innerHTML=r});
},{}]},{},[6])

477
dist/9fe7b1b7e5e98c2e3a4ea4f053439023.css vendored Normal file
View File

@ -0,0 +1,477 @@
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif; }
hr {
background-color: #c0c0c0;
border: 2px solid #c0c0c0;
border-radius: 5px; }
body {
margin: 0;
padding: 0;
background: #f8f8f8; }
main {
z-index: 980;
position: relative;
top: 5.5em;
width: 100%;
word-break: break-word; }
pre {
background-color: #d8d8d8;
border-radius: 5px; }
h1 {
margin: 0; }
h2 {
margin: 0; }
h3 {
margin: 0; }
h4 {
margin: 0; }
h5 {
margin: 0; }
h6 {
margin: 0; }
h7 {
margin: 0; }
h8 {
margin: 0; }
h9 {
margin: 0; }
h10 {
margin: 0; }
h11 {
margin: 0; }
h12 {
margin: 0; }
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px; }
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0; }
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s; }
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s; }
input:checked + .slider {
background-color: #3498db; }
input:focus + .slider {
box-shadow: 0 0 1px #3498db; }
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px); }
/* Rounded sliders */
.slider.round {
border-radius: 34px; }
.slider.round:before {
border-radius: 50%; }
/* Range slider */
.range-slider {
-webkit-appearance: none;
border-radius: 5px;
width: 100%;
height: 25px;
background: #d8d8d8;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s; }
.range-slider:hover {
opacity: 1; }
.range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #5b6568;
cursor: pointer; }
.range-slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #5b6568;
cursor: pointer; }
.range-slider-rounded {
-webkit-appearance: none;
border-radius: 5px;
width: 100%;
height: 15px;
background: #d8d8d8;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s; }
.range-slider-rounded:hover {
opacity: 1; }
.range-slider-rounded::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border-radius: 50%;
width: 25px;
height: 25px;
background: #5b6568;
cursor: pointer; }
.range-slider-rounded::-moz-range-thumb {
width: 25px;
height: 25px;
background: #ecf0f1;
cursor: pointer; }
.embed {
background-color: #d8d8d8;
border-radius: 5px;
padding: 5px; }
.dev {
border: 1px solid black; }
.display {
background-color: lightcoral;
border: 1px solid red;
text-align: center; }
.container {
width: calc( 100% - 10em);
max-width: 90em;
margin: 0 auto;
/* Alert Embeds */ }
.alert-primary {
border-radius: 2px;
background-color: #3498db;
border: 1px solid #2980b9;
padding: 1rem;
color: white; }
.alert-danger {
border-radius: 2px;
background-color: #e74c3c;
border: 1px solid #c0392b;
padding: 1rem;
color: white; }
.alert-warning {
border-radius: 2px;
background-color: #f1c40f;
border: 1px solid #f39c12;
padding: 1rem;
color: white; }
.alert-success {
border-radius: 2px;
background-color: #2ecc71;
border: 1px solid #27ae60;
padding: 1rem;
color: white; }
.notification-primary {
width: 100%;
display: flex;
padding: 5px;
border: 2px solid #3498db;
border-radius: 2px; }
.notification-primary h2 {
border-right: 0.3rem solid #3498db;
padding: 5px;
margin-right: 5px;
min-width: 70px;
height: auto;
display: flex; }
.notification-danger {
width: 100%;
display: flex;
padding: 5px;
border: 2px solid #e74c3c;
border-radius: 2px; }
.notification-danger h2 {
border-right: 0.3rem solid #e74c3c;
padding: 5px;
margin-right: 5px;
min-width: 70px;
height: auto;
display: flex; }
.notification-warning {
width: 100%;
display: flex;
padding: 5px;
border: 2px solid #f1c40f;
border-radius: 2px; }
.notification-warning h2 {
border-right: 0.3rem solid #f1c40f;
padding: 5px;
margin-right: 5px;
min-width: 70px;
height: auto;
display: flex; }
.notification-success {
width: 100%;
display: flex;
padding: 5px;
border: 2px solid #2ecc71;
border-radius: 2px; }
.notification-success h2 {
border-right: 0.3rem solid #2ecc71;
padding: 5px;
margin-right: 5px;
min-width: 70px;
height: auto;
display: flex; }
.notification-body {
line-height: 30pt;
font-size: 15pt;
word-wrap: break-word; }
div[class^="col-"] {
padding: 1rem 0; }
.row {
display: flex;
flex-wrap: wrap; }
.col-1 {
flex: 0 0 8.33333%; }
.col-offset-1 {
margin-left: 8.33333%; }
.col-2 {
flex: 0 0 16.66667%; }
.col-offset-2 {
margin-left: 16.66667%; }
.col-3 {
flex: 0 0 25%; }
.col-offset-3 {
margin-left: 25%; }
.col-4 {
flex: 0 0 33.33333%; }
.col-offset-4 {
margin-left: 33.33333%; }
.col-5 {
flex: 0 0 41.66667%; }
.col-offset-5 {
margin-left: 41.66667%; }
.col-6 {
flex: 0 0 50%; }
.col-offset-6 {
margin-left: 50%; }
.col-7 {
flex: 0 0 58.33333%; }
.col-offset-7 {
margin-left: 58.33333%; }
.col-8 {
flex: 0 0 66.66667%; }
.col-offset-8 {
margin-left: 66.66667%; }
.col-9 {
flex: 0 0 75%; }
.col-offset-9 {
margin-left: 75%; }
.col-10 {
flex: 0 0 83.33333%; }
.col-offset-10 {
margin-left: 83.33333%; }
.col-11 {
flex: 0 0 91.66667%; }
.col-offset-11 {
margin-left: 91.66667%; }
.col-12 {
flex: 0 0 100%; }
.col-offset-12 {
margin-left: 100%; }
header {
background: #f1f1f1;
text-align: center;
position: fixed;
height: 30px;
z-index: 999;
width: 100%;
height: auto;
top: 0;
padding: 10px; }
.nav-toggle {
display: none; }
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center; }
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: white;
height: 2px;
width: 2em;
border-radius: 2px; }
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute; }
.nav-toggle-label span::before {
bottom: 30px; }
.nav-toggle-label span::after {
top: 30px; }
nav {
position: absolute;
text-align: left;
top: 100%;
width: 100%;
left: 0;
background: #f1f1f1;
display: none;
transform: scale(1, 0);
transform-origin: top;
transition: 400ms;
transition: transform 400ms ease-in-out; }
nav ul {
margin: 0;
padding: 0;
list-style-type: none; }
nav li {
margin-bottom: 1em;
margin-left: 1em; }
nav a {
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
color: #2e2e2e;
opacity: 0; }
nav a:hover {
color: #a5a5a5; }
.nav-toggle:checked ~ nav {
display: block;
transform: scale(1, 1);
transition: 400ms; }
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 150ms ease-in-out; }
@media screen and (min-width: 800px) {
.nav-toggle-label {
display: none; }
header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr; }
nav {
all: unset;
display: flex;
align-items: center; }
nav a {
opacity: 1; }
nav ul {
display: flex; }
nav li {
margin-left: 1em;
margin-bottom: 0;
list-style: none; }
.nav-logo-left {
grid-column: 2 / span 1; }
.nav-left {
all: unset;
grid-column: 3 / 4;
display: flex;
justify-content: flex-end;
align-items: center; }
.nav-left ul {
display: flex;
justify-content: flex-end; } }

253
dist/9fe7b1b7e5e98c2e3a4ea4f053439023.js vendored Normal file
View File

@ -0,0 +1,253 @@
// modules are defined as an array
// [ module function, map of requires ]
//
// map of requires is short require name -> numeric require
//
// anything defined in a previous bundle is accessed via the
// orig method which is the require for previous bundles
require = (function (modules, cache, entry) {
// Save the require from previous bundle to this closure if any
var previousRequire = typeof require === "function" && require;
function newRequire(name, jumped) {
if (!cache[name]) {
if (!modules[name]) {
// if we cannot find the module within our internal map or
// cache jump to the current global require ie. the last bundle
// that was added to the page.
var currentRequire = typeof require === "function" && require;
if (!jumped && currentRequire) {
return currentRequire(name, true);
}
// If there are other bundles on this page the require from the
// previous one is saved to 'previousRequire'. Repeat this as
// many times as there are bundles until the module is found or
// we exhaust the require chain.
if (previousRequire) {
return previousRequire(name, true);
}
var err = new Error('Cannot find module \'' + name + '\'');
err.code = 'MODULE_NOT_FOUND';
throw err;
}
localRequire.resolve = resolve;
var module = cache[name] = new newRequire.Module;
modules[name][0].call(module.exports, localRequire, module, module.exports);
}
return cache[name].exports;
function localRequire(x){
return newRequire(localRequire.resolve(x));
}
function resolve(x){
return modules[name][1][x] || x;
}
}
function Module() {
this.bundle = newRequire;
this.exports = {};
}
newRequire.Module = Module;
newRequire.modules = modules;
newRequire.cache = cache;
newRequire.parent = previousRequire;
for (var i = 0; i < entry.length; i++) {
newRequire(entry[i]);
}
// Override the current require with this new one
return newRequire;
})({8:[function(require,module,exports) {
var bundleURL = null;
function getBundleURLCached() {
if (!bundleURL) {
bundleURL = getBundleURL();
}
return bundleURL;
}
function getBundleURL() {
// Attempt to find the URL of the current script and use that as the base URL
try {
throw new Error;
} catch (err) {
var matches = ('' + err.stack).match(/(https?|file|ftp):\/\/[^)\n]+/g);
if (matches) {
return getBaseURL(matches[0]);
}
}
return '/';
}
function getBaseURL(url) {
return ('' + url).replace(/^((?:https?|file|ftp):\/\/.+)\/[^/]+$/, '$1') + '/';
}
exports.getBundleURL = getBundleURLCached;
exports.getBaseURL = getBaseURL;
},{}],7:[function(require,module,exports) {
var bundle = require('./bundle-url');
function updateLink(link) {
var newLink = link.cloneNode();
newLink.onload = function () {
link.remove();
};
newLink.href = link.href.split('?')[0] + '?' + Date.now();
link.parentNode.insertBefore(newLink, link.nextSibling);
}
var cssTimeout = null;
function reloadCSS() {
if (cssTimeout) {
return;
}
cssTimeout = setTimeout(function () {
var links = document.querySelectorAll('link[rel="stylesheet"]');
for (var i = 0; i < links.length; i++) {
if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {
updateLink(links[i]);
}
}
cssTimeout = null;
}, 50);
}
module.exports = reloadCSS;
},{"./bundle-url":8}],0:[function(require,module,exports) {
var global = (1, eval)('this');
var OldModule = module.bundle.Module;
function Module() {
OldModule.call(this);
this.hot = {
accept: function (fn) {
this._acceptCallback = fn || function () {};
},
dispose: function (fn) {
this._disposeCallback = fn;
}
};
}
module.bundle.Module = Module;
if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
var ws = new WebSocket('ws://localhost:50746/');
ws.onmessage = function(event) {
var data = JSON.parse(event.data);
if (data.type === 'update') {
data.assets.forEach(function (asset) {
hmrApply(global.require, asset);
});
data.assets.forEach(function (asset) {
if (!asset.isNew) {
hmrAccept(global.require, asset.id);
}
});
}
if (data.type === 'reload') {
ws.close();
ws.onclose = function () {
window.location.reload();
}
}
if (data.type === 'error-resolved') {
console.log('[parcel] ✨ Error resolved');
}
if (data.type === 'error') {
console.error('[parcel] 🚨 ' + data.error.message + '\n' + 'data.error.stack');
}
};
}
function getParents(bundle, id) {
var modules = bundle.modules;
if (!modules) {
return [];
}
var parents = [];
var k, d, dep;
for (k in modules) {
for (d in modules[k][1]) {
dep = modules[k][1][d];
if (dep === id || (Array.isArray(dep) && dep[dep.length - 1] === id)) {
parents.push(+k);
}
}
}
if (bundle.parent) {
parents = parents.concat(getParents(bundle.parent, id));
}
return parents;
}
function hmrApply(bundle, asset) {
var modules = bundle.modules;
if (!modules) {
return;
}
if (modules[asset.id] || !bundle.parent) {
var fn = new Function('require', 'module', 'exports', asset.generated.js);
asset.isNew = !modules[asset.id];
modules[asset.id] = [fn, asset.deps];
} else if (bundle.parent) {
hmrApply(bundle.parent, asset);
}
}
function hmrAccept(bundle, id) {
var modules = bundle.modules;
if (!modules) {
return;
}
if (!modules[id] && bundle.parent) {
return hmrAccept(bundle.parent, id);
}
var cached = bundle.cache[id];
if (cached && cached.hot._disposeCallback) {
cached.hot._disposeCallback();
}
delete bundle.cache[id];
bundle(id);
cached = bundle.cache[id];
if (cached && cached.hot && cached.hot._acceptCallback) {
cached.hot._acceptCallback();
return true;
}
return getParents(global.require, id).some(function (id) {
return hmrAccept(global.require, id)
});
}
},{}]},{},[0])

1
dist/ef19487056b129c8f3eda17f9543ab70.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

253
dist/ef19487056b129c8f3eda17f9543ab70.js vendored Normal file
View File

@ -0,0 +1,253 @@
// modules are defined as an array
// [ module function, map of requires ]
//
// map of requires is short require name -> numeric require
//
// anything defined in a previous bundle is accessed via the
// orig method which is the require for previous bundles
require = (function (modules, cache, entry) {
// Save the require from previous bundle to this closure if any
var previousRequire = typeof require === "function" && require;
function newRequire(name, jumped) {
if (!cache[name]) {
if (!modules[name]) {
// if we cannot find the module within our internal map or
// cache jump to the current global require ie. the last bundle
// that was added to the page.
var currentRequire = typeof require === "function" && require;
if (!jumped && currentRequire) {
return currentRequire(name, true);
}
// If there are other bundles on this page the require from the
// previous one is saved to 'previousRequire'. Repeat this as
// many times as there are bundles until the module is found or
// we exhaust the require chain.
if (previousRequire) {
return previousRequire(name, true);
}
var err = new Error('Cannot find module \'' + name + '\'');
err.code = 'MODULE_NOT_FOUND';
throw err;
}
localRequire.resolve = resolve;
var module = cache[name] = new newRequire.Module;
modules[name][0].call(module.exports, localRequire, module, module.exports);
}
return cache[name].exports;
function localRequire(x){
return newRequire(localRequire.resolve(x));
}
function resolve(x){
return modules[name][1][x] || x;
}
}
function Module() {
this.bundle = newRequire;
this.exports = {};
}
newRequire.Module = Module;
newRequire.modules = modules;
newRequire.cache = cache;
newRequire.parent = previousRequire;
for (var i = 0; i < entry.length; i++) {
newRequire(entry[i]);
}
// Override the current require with this new one
return newRequire;
})({8:[function(require,module,exports) {
var bundleURL = null;
function getBundleURLCached() {
if (!bundleURL) {
bundleURL = getBundleURL();
}
return bundleURL;
}
function getBundleURL() {
// Attempt to find the URL of the current script and use that as the base URL
try {
throw new Error;
} catch (err) {
var matches = ('' + err.stack).match(/(https?|file|ftp):\/\/[^)\n]+/g);
if (matches) {
return getBaseURL(matches[0]);
}
}
return '/';
}
function getBaseURL(url) {
return ('' + url).replace(/^((?:https?|file|ftp):\/\/.+)\/[^/]+$/, '$1') + '/';
}
exports.getBundleURL = getBundleURLCached;
exports.getBaseURL = getBaseURL;
},{}],7:[function(require,module,exports) {
var bundle = require('./bundle-url');
function updateLink(link) {
var newLink = link.cloneNode();
newLink.onload = function () {
link.remove();
};
newLink.href = link.href.split('?')[0] + '?' + Date.now();
link.parentNode.insertBefore(newLink, link.nextSibling);
}
var cssTimeout = null;
function reloadCSS() {
if (cssTimeout) {
return;
}
cssTimeout = setTimeout(function () {
var links = document.querySelectorAll('link[rel="stylesheet"]');
for (var i = 0; i < links.length; i++) {
if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {
updateLink(links[i]);
}
}
cssTimeout = null;
}, 50);
}
module.exports = reloadCSS;
},{"./bundle-url":8}],0:[function(require,module,exports) {
var global = (1, eval)('this');
var OldModule = module.bundle.Module;
function Module() {
OldModule.call(this);
this.hot = {
accept: function (fn) {
this._acceptCallback = fn || function () {};
},
dispose: function (fn) {
this._disposeCallback = fn;
}
};
}
module.bundle.Module = Module;
if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
var ws = new WebSocket('ws://localhost:51494/');
ws.onmessage = function(event) {
var data = JSON.parse(event.data);
if (data.type === 'update') {
data.assets.forEach(function (asset) {
hmrApply(global.require, asset);
});
data.assets.forEach(function (asset) {
if (!asset.isNew) {
hmrAccept(global.require, asset.id);
}
});
}
if (data.type === 'reload') {
ws.close();
ws.onclose = function () {
window.location.reload();
}
}
if (data.type === 'error-resolved') {
console.log('[parcel] ✨ Error resolved');
}
if (data.type === 'error') {
console.error('[parcel] 🚨 ' + data.error.message + '\n' + 'data.error.stack');
}
};
}
function getParents(bundle, id) {
var modules = bundle.modules;
if (!modules) {
return [];
}
var parents = [];
var k, d, dep;
for (k in modules) {
for (d in modules[k][1]) {
dep = modules[k][1][d];
if (dep === id || (Array.isArray(dep) && dep[dep.length - 1] === id)) {
parents.push(+k);
}
}
}
if (bundle.parent) {
parents = parents.concat(getParents(bundle.parent, id));
}
return parents;
}
function hmrApply(bundle, asset) {
var modules = bundle.modules;
if (!modules) {
return;
}
if (modules[asset.id] || !bundle.parent) {
var fn = new Function('require', 'module', 'exports', asset.generated.js);
asset.isNew = !modules[asset.id];
modules[asset.id] = [fn, asset.deps];
} else if (bundle.parent) {
hmrApply(bundle.parent, asset);
}
}
function hmrAccept(bundle, id) {
var modules = bundle.modules;
if (!modules) {
return;
}
if (!modules[id] && bundle.parent) {
return hmrAccept(bundle.parent, id);
}
var cached = bundle.cache[id];
if (cached && cached.hot._disposeCallback) {
cached.hot._disposeCallback();
}
delete bundle.cache[id];
bundle(id);
cached = bundle.cache[id];
if (cached && cached.hot && cached.hot._acceptCallback) {
cached.hot._acceptCallback();
return true;
}
return getParents(global.require, id).some(function (id) {
return hmrAccept(global.require, id)
});
}
},{}]},{},[0])

119
dist/index.html vendored Normal file
View File

@ -0,0 +1,119 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sass test</title>
<link rel="stylesheet" href="/dist/9fe7b1b7e5e98c2e3a4ea4f053439023.css">
</head>
<body>
<header>
<h1 class="nav-logo">Logo</h1>
<input id="nav-toggle" type="checkbox" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
<nav>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</nav>
</header>
<main>
<div class="container">
<h1>Toggle Slide</h1>
<br>
<!-- Rectangular switch -->
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
<!-- Rounded switch -->
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<br><br>
<h1>Slider</h1>
<br>
<input type="range" min="1" max="100" value="0" class="range-slider-rounded" id="slider">
<span>Span Value: </span><span id="output">0</span>
<script>
var slider = document.getElementById("slider");
var output = document.getElementById("output");
output.innerHTML = slider.value; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
<br><br>
<div class="embed">
<h1>Embed</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer</p>
</div>
<br>
<h1>Code Embed</h1>
<pre>
<code>
<h1>test</h1>
code here, escape it yourself.
<h2>test</h2>
</code>
</pre>
<h1 style="text-align: center;">Alert Elements</h1>
<div class="alert-primary"> test </div><br>
<div class="alert-danger"> test </div><br>
<div class="alert-warning"> test </div><br>
<div class="alert-success"> test </div>
<br>
<h1 style="text-align: center;">Notification Elements</h1>
<div class="notification-primary">
<h2>ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span>
</div>
<br>
<div class="notification-danger">
<h2>ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span>
</div>
<br>
<div class="notification-warning">
<h2>ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span>
</div>
<br>
<div class="notification-success">
<h2>ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span>
</div>
<br>
<h1 style="text-align: center;">CSS Grid</h1>
<div class="row">
<div class="col-12 display"><h1>12</h1></div>
<div class="col-11 display"><h1>11</h1></div>
<div class="col-1 display"><h1>1</h1></div>
<div class="col-10 display"><h1>10</h1></div>
<div class="col-2 display"><h1>2</h1></div>
<div class="col-9 display"><h1>9</h1></div>
<div class="col-3 display"><h1>3</h1></div>
<div class="col-8 display"><h1>8</h1></div>
<div class="col-4 display"><h1>4</h1></div>
<div class="col-7 display"><h1>7</h1></div>
<div class="col-5 display"><h1>5</h1></div>
<div class="col-6 display"><h1>6</h1></div>
<div class="col-6 display"><h1>6</h1></div>
</div>
</div>
</main>
<br><br><br>
<br><br><br>
<script src="/dist/2d47c8cd43d85995abf14afd917c8434.js"></script>
</body>
</html>

20940
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -10,11 +10,8 @@
"author": "steev",
"license": "ISC",
"devDependencies": {
"node-sass": "^9.0.0",
"node-sass": "^5.0.0",
"parcel-bundler": "^1.3.1",
"sass": "^1.32.5"
},
"dependencies": {
"core-js": "^3.33.0"
}
}

68
src/index.html
View File

@ -4,18 +4,10 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sass test</title>
<link rel="stylesheet" href="sass/variables.sass">
<link rel="stylesheet" href="sass/main.sass">
<link rel="stylesheet" href="sass/navbar.sass">
<link rel="stylesheet" href="sass/button.sass">
<link rel="stylesheet" href="sass/messaging.sass">
<link rel="stylesheet" href="sass/selector.sass">
<link rel="stylesheet" href="sass/forms.sass">
<link rel="stylesheet" href="sass/bundled.sass">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
<link rel="stylesheet" href="scss/main.sass">
</head>
<body>
<header class="locked-top">
<header>
<h1 class="nav-logo">Logo</h1>
<input id="nav-toggle" type="checkbox" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label">
@ -33,12 +25,6 @@
</header>
<main>
<div class="container">
<h1>Button Test</h1>
<button class="btn">test</button>
<button class="btn btn-primary">test</button>
<button class="btn btn-warning">test</button>
<button class="btn btn-danger">test</button>
<button class="btn btn-success">test</button>
<h1>Toggle Slide</h1>
<br>
<!-- Rectangular switch -->
@ -75,48 +61,10 @@
<br>
<h1>Code Embed</h1>
<pre>
<code class="language-html">
<h1>test</h1>
code here, escape it yourself.
<h2>test</h2>
<link rel="stylesheet" href="https://steevlp.github.io/steevcss/dist/steevcss.bundled.min.css">
</code>
</pre>
<header>
<h1 class="nav-logo">Logo</h1>
<input id="nav-toggle" type="checkbox" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
<nav>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</nav>
</header>
<pre>
<code class="language-html">
<header>
<h1 class="nav-logo">Logo</h1>
<input id="nav-toggle" type="checkbox" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
<nav>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</nav>
</header>
<code>
<h1>test</h1>
code here, escape it yourself.
<h2>test</h2>
</code>
</pre>
<h1 style="text-align: center;">Alert Elements</h1>
@ -166,8 +114,6 @@ code here, escape it yourself.
</main>
<br><br><br>
<br><br><br>
<!-- <script src="js/steevcss.js"></script> -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<script src="js/steevcss.js"></script>
</body>
</html>

50
src/js/steevcss.js
View File

@ -1,27 +1,25 @@
var code = document.querySelectorAll("code");
// TODO: Split a html tag by character
// current way taking 1:1 html and changing how it is setup
// problem: this endsup in breaking once the file itself should be inside the display area
code.forEach(c => {
let code = c.innerHTML.toString();
var output = "";
for(let i = 0; i < code.length; i++){
switch(code.charAt(i)){
default: output += code.charAt(i); break;
case ">": output += "&gt;"; break;
case "<": output += "&lt;"; break;
case "&": output += "&amp;"; break;
case "\"": output += "&quot;"; break;
}
}
c.innerHTML = output;
});
// TODO JavaScript Input value return
// Current way..
// -------------------------------------
// get input by getting the input object
// catch oninput event inside a function
// Handle it inside the function
var code = document.querySelectorAll("code");
// code embed
code.forEach(c => {
let code = c.innerHTML.toString();
var output = "";
for(let i = 0; i < code.length; i++){
switch(code.charAt(i)){
default: output += code.charAt(i); break;
case ">": output += "&gt;"; break;
case "<": output += "&lt;"; break;
case "&": output += "&amp;"; break;
case "\"": output += "&quot;"; break;
}
}
c.innerHTML = output;
});
// TODO JavaScript Input value return
// Current way..
// -------------------------------------
// get input by getting the input object
// catch oninput event inside a function
// Handle it inside the function
// -------------------------------------

13
src/sass/bundled.sass
View File

@ -1,13 +0,0 @@
@import variables
@import main
@import navbar
@import button
@import messaging
@import selector
@import forms

39
src/sass/button.sass
View File

@ -1,39 +0,0 @@
@import variables
/* Button Style Classes */
.btn
border-radius: $border_radius
border-width: $border_width
border: $border_width solid #d1d1d1
padding: $padding
font-size: 12pt
min-width: 100px
transition: 50ms
.btn-primary
background-color: $primary
border: $border_width solid $primary_dark
color: white
.btn-danger
background-color: $danger
border: $border_width solid $danger_dark
color: white
.btn-warning
background-color: $warning
border: $border_width solid $warning_dark
color: white
.btn-success
background-color: $success
border: $border_width solid $success_dark
color: white
/* Hover classes */
.btn:hover
background-color: $neutral_dark
.btn-primary:hover
background-color: $primary_dark
.btn-danger:hover
background-color: $danger_dark
.btn-warning:hover
background-color: $warning_dark
.btn-success:hover
background-color: $success_dark

6
src/sass/forms.sass
View File

@ -1,6 +0,0 @@
@import variables
/* flat forms*/
.forms
background-color: $neutral_dark
border:

49
src/sass/main.sass
View File

@ -1,49 +0,0 @@
@import variables
*
box-sizing: border-box
font-family: Verdana, Geneva, Tahoma, sans-serif
hr
background-color: $neutral
border: 2px solid $neutral
border-radius: 5px
body
margin: 0
padding: 0
background: $neutral_gray_light
main
z-index: 980
position: relative
top: 5.5em
width: 100%
word-break: break-word
pre
/*background-color: #d8d8d8*/
border-radius: 5px
@for $i from 1 through 12
h#{$i}
margin: 0
.dev
border: 1px solid black
.display
background-color: lightcoral
border: 1px solid red
text-align: center
.container
width: calc( 100% - 10em )
max-width: 90em
margin: 0 auto
.link
color: #2980b9
text-decoration: none
font-size: 12pt
div[class^="col-"]
padding: 1rem 0
.row
display: flex
flex-wrap: wrap
@for $i from 1 through $columns
.col-#{$i}
flex: 0 0 100% / $columns * $i
.col-offset-#{$i}
margin-left: 100% / $columns * $i

86
src/sass/messaging.sass
View File

@ -1,86 +0,0 @@
@import variables
.embed
background-color: $neutral_gray_light
border-radius: 5px
padding: 5px
.alert-primary
border-radius: 2px
background-color: $primary
border: 1px solid $primary_dark
padding: 1rem
color: white
.alert-danger
border-radius: 2px
background-color: $danger
border: 1px solid $danger_dark
padding: 1rem
color: white
.alert-warning
border-radius: 2px
background-color: $warning
border: 1px solid $warning_dark
padding: 1rem
color: white
.alert-success
border-radius: 2px
background-color: $success
border: 1px solid $success_dark
padding: 1rem
color: white
.notification-primary
width: 100%;
display: flex
padding: 5px
border: 2px solid $primary
border-radius: 2px
.notification-primary h2
border-right: 0.3rem solid $primary
padding: 5px
margin-right: 5px;
min-width: 70px
height: auto
display: flex
.notification-danger
width: 100%;
display: flex
padding: 5px
border: 2px solid $danger
border-radius: 2px
.notification-danger h2
border-right: 0.3rem solid $danger
padding: 5px
margin-right: 5px;
min-width: 70px
height: auto
display: flex
.notification-warning
width: 100%;
display: flex
padding: 5px
border: 2px solid $warning
border-radius: 2px
.notification-warning h2
border-right: 0.3rem solid $warning
padding: 5px
margin-right: 5px;
min-width: 70px
height: auto
display: flex
.notification-success
width: 100%;
display: flex
padding: 5px
border: 2px solid $success
border-radius: 2px
.notification-success h2
border-right: 0.3rem solid $success
padding: 5px
margin-right: 5px;
min-width: 70px
height: auto
display: flex
.notification-body
line-height: 30pt
font-size: 15pt
word-wrap: break-word

127
src/sass/navbar.sass
View File

@ -1,127 +0,0 @@
@import variables
header
background: $neutral_gray_light
text-align: center
height: 30px
z-index: 999
width: 100%
height: auto
padding: 10px
.locked-top
top: 0
position: fixed
.nav-toggle
display: none
.nav-toggle-label
position: absolute
top: 0
left: 0
margin-left: 1em
height: 100%
display: flex
align-items: center
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after
display: block
background: white
height: 2px
width: 2em
border-radius: 2px
.nav-toggle-label span::before,
.nav-toggle-label span::after
content: ''
position: absolute
.nav-toggle-label span::before
bottom: 30px
.nav-toggle-label span::after
top: 30px
.nav-locked
top: 100%
left: 0
position: absolute
nav
text-align: left
width: 100%
background: $neutral_gray_light
display: none
transform: scale(1, 0)
transform-origin: top
transition: 400ms
transition: transform 400ms ease-in-out
nav ul
margin: 0
padding: 0
list-style-type: none
nav li
margin-bottom: 1em
margin-left: 1em
nav a
text-decoration: none
font-size: 1.2rem
text-transform: uppercase
color: $neutral
opacity: 0
nav a:hover
color: $neutral_dark
.nav-toggle:checked ~ nav
display: block
transform: scale(1,1)
transition: 400ms
.nav-toggle:checked ~ nav a
opacity: 1
transition: opacity 150ms ease-in-out
@media screen and (min-width: 800px)
.nav-toggle-label
display: none
header
display: grid
grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr
nav
all: unset
display: flex
align-items: center
nav a
opacity: 1
nav ul
display: flex
nav li
margin-left: $navgap
margin-bottom: 0
list-style: none
.nav-logo-left
grid-column: 2 / span 1
.nav-left
all: unset
grid-column: 3 / 4
display: flex
justify-content: flex-end
align-items: center
.nav-left ul
display: flex
justify-content: flex-end
/* =========================== */
/* Sidebar code */
/* =========================== */
.sidebar-wrapper
display: flex;
.sidebar-content
width: 100%
.sidebar-left
padding: 0
margin: 0
margin-left: 0
padding-right: 5px
height: 100%
.sidebar-menu ul
width: fit-content
.sidebar-title
width: max-content
font-size: 20pt
padding-right: 5px
.sidebar-item li
width: fit-content
color: $primary
text-decoration: none
font-size: 12pt

98
src/sass/selector.sass
View File

@ -1,98 +0,0 @@
@import variables
/* todo: make the sliders smaller */
/* The switch - the box around the slider */
.switch
position: relative
display: inline-block
width: 60px
height: 34px
/* Hide default HTML checkbox */
.switch input
opacity: 0
width: 0
height: 0
/* The slider */
.slider
position: absolute
cursor: pointer
top: 0
left: 0
right: 0
bottom: 0
background-color: $neutral_gray_light
-webkit-transition: .4s
transition: .4s
.slider:before
position: absolute
content: ""
height: 26px
width: 26px
left: 4px
bottom: 4px
background-color: white
-webkit-transition: .4s
transition: .4s
input:checked + .slider
background-color: $primary
input:focus + .slider
box-shadow: 0 0 1px $primary
input:checked + .slider:before
-webkit-transform: translateX(26px)
-ms-transform: translateX(26px)
transform: translateX(26px)
/* Rounded sliders */
.slider.round
border-radius: 34px
.slider.round:before
border-radius: 50%
/* Range slider */
.range-slider
-webkit-appearance: none
border-radius: 5px
width: 100%
height: 25px
background: $neutral_gray_light
outline: none
opacity: 0.7
-webkit-transition: .2s
transition: opacity .2s
.range-slider:hover
opacity: 1
.range-slider::-webkit-slider-thumb
-webkit-appearance: none
appearance: none
width: 25px
height: 25px
background: $neutral_gray_dark
cursor: pointer
.range-slider::-moz-range-thumb
width: 25px
height: 25px
background: $neutral_gray_dark
cursor: pointer
.range-slider-rounded
-webkit-appearance: none
border-radius: 5px
width: 100%
height: 15px
background: $neutral_gray_light
outline: none
opacity: 0.7
-webkit-transition: .2s
transition: opacity .2s
.range-slider-rounded:hover
opacity: 1
.range-slider-rounded::-webkit-slider-thumb
-webkit-appearance: none
appearance: none
border-radius: 50%
width: 25px
height: 25px
background: $neutral_gray_dark
cursor: pointer
.range-slider-rounded::-moz-range-thumb
width: 25px
height: 25px
background: $neutral_gray_light
cursor: pointer

20
src/sass/variables.sass
View File

@ -1,20 +0,0 @@
/* Sizing Properties */
$border_width: 2px
$border_radius: 5px
$padding: 5px
$columns: 12
$navgap: 1em
/* Colours */
$neutral: #a5a5a5
$neutral_dark: #2e2e2e
$neutral_gray_light: rgb(248, 248, 248)
$neutral_gray_dark: rgb(70, 70, 70)
$primary: #3498db
$primary_dark: #2980b9
$danger: #e74c3c
$danger_dark: #c0392b
$warning: #f1c40f
$warning_dark: #f39c12
$success: #2ecc71
$success_dark: #27ae60

337
src/scss/main.sass Normal file
View File

@ -0,0 +1,337 @@
$primBG: rgb(248, 248, 248)
$columns: 12
$navBG: #f1f1f1
$navgap: 1em
$navdefcolor: #2e2e2e
$navhovcolor: #a5a5a5
$primary: #3498db
$primary_dark: #2980b9
$danger: #e74c3c
$danger_dark: #c0392b
$warning: #f1c40f
$warning_dark: #f39c12
$success: #2ecc71
$success_dark: #27ae60
*
box-sizing: border-box
font-family: Verdana, Geneva, Tahoma, sans-serif
hr
background-color: #c0c0c0
border: 2px solid #c0c0c0
border-radius: 5px
body
margin: 0
padding: 0
background: $primBG
main
z-index: 980
position: relative
top: 5.5em
width: 100%
word-break: break-word
pre
background-color: #d8d8d8
border-radius: 5px
@for $i from 1 through 12
h#{$i}
margin: 0
/* The switch - the box around the slider */
.switch
position: relative
display: inline-block
width: 60px
height: 34px
/* Hide default HTML checkbox */
.switch input
opacity: 0
width: 0
height: 0
/* The slider */
.slider
position: absolute
cursor: pointer
top: 0
left: 0
right: 0
bottom: 0
background-color: #ccc
-webkit-transition: .4s
transition: .4s
.slider:before
position: absolute
content: ""
height: 26px
width: 26px
left: 4px
bottom: 4px
background-color: white
-webkit-transition: .4s
transition: .4s
input:checked + .slider
background-color: $primary
input:focus + .slider
box-shadow: 0 0 1px $primary
input:checked + .slider:before
-webkit-transform: translateX(26px)
-ms-transform: translateX(26px)
transform: translateX(26px)
/* Rounded sliders */
.slider.round
border-radius: 34px
.slider.round:before
border-radius: 50%
/* Range slider */
.range-slider
-webkit-appearance: none
border-radius: 5px
width: 100%
height: 25px
background: #d8d8d8
outline: none
opacity: 0.7
-webkit-transition: .2s
transition: opacity .2s
.range-slider:hover
opacity: 1
.range-slider::-webkit-slider-thumb
-webkit-appearance: none
appearance: none
width: 25px
height: 25px
background: #5b6568
cursor: pointer
.range-slider::-moz-range-thumb
width: 25px
height: 25px
background: #5b6568
cursor: pointer
.range-slider-rounded
-webkit-appearance: none
border-radius: 5px
width: 100%
height: 15px
background: #d8d8d8
outline: none
opacity: 0.7
-webkit-transition: .2s
transition: opacity .2s
.range-slider-rounded:hover
opacity: 1
.range-slider-rounded::-webkit-slider-thumb
-webkit-appearance: none
appearance: none
border-radius: 50%
width: 25px
height: 25px
background: #5b6568
cursor: pointer
.range-slider-rounded::-moz-range-thumb
width: 25px
height: 25px
background: #ecf0f1
cursor: pointer
.embed
background-color: #d8d8d8
border-radius: 5px
padding: 5px
.dev
border: 1px solid black
.display
background-color: lightcoral
border: 1px solid red
text-align: center
.container
width: calc( 100% - 10em )
max-width: 90em
margin: 0 auto
/* Alert Embeds */
.alert-primary
border-radius: 2px
background-color: $primary
border: 1px solid $primary_dark
padding: 1rem
color: white
.alert-danger
border-radius: 2px
background-color: $danger
border: 1px solid $danger_dark
padding: 1rem
color: white
.alert-warning
border-radius: 2px
background-color: $warning
border: 1px solid $warning_dark
padding: 1rem
color: white
.alert-success
border-radius: 2px
background-color: $success
border: 1px solid $success_dark
padding: 1rem
color: white
.notification-primary
width: 100%;
display: flex
padding: 5px
border: 2px solid $primary
border-radius: 2px
.notification-primary h2
border-right: 0.3rem solid $primary
padding: 5px
margin-right: 5px;
min-width: 70px
height: auto
display: flex
.notification-danger
width: 100%;
display: flex
padding: 5px
border: 2px solid $danger
border-radius: 2px
.notification-danger h2
border-right: 0.3rem solid $danger
padding: 5px
margin-right: 5px;
min-width: 70px
height: auto
display: flex
.notification-warning
width: 100%;
display: flex
padding: 5px
border: 2px solid $warning
border-radius: 2px
.notification-warning h2
border-right: 0.3rem solid $warning
padding: 5px
margin-right: 5px;
min-width: 70px
height: auto
display: flex
.notification-success
width: 100%;
display: flex
padding: 5px
border: 2px solid $success
border-radius: 2px
.notification-success h2
border-right: 0.3rem solid $success
padding: 5px
margin-right: 5px;
min-width: 70px
height: auto
display: flex
.notification-body
line-height: 30pt
font-size: 15pt
word-wrap: break-word
div[class^="col-"]
padding: 1rem 0
.row
display: flex
flex-wrap: wrap
@for $i from 1 through $columns
.col-#{$i}
flex: 0 0 100% / $columns * $i
.col-offset-#{$i}
margin-left: 100% / $columns * $i
header
background: $navBG
text-align: center
position: fixed
height: 30px
z-index: 999
width: 100%
height: auto
top: 0
padding: 10px
.nav-toggle
display: none
.nav-toggle-label
position: absolute
top: 0
left: 0
margin-left: 1em
height: 100%
display: flex
align-items: center
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after
display: block
background: white
height: 2px
width: 2em
border-radius: 2px
.nav-toggle-label span::before,
.nav-toggle-label span::after
content: ''
position: absolute
.nav-toggle-label span::before
bottom: 30px
.nav-toggle-label span::after
top: 30px
nav
position: absolute
text-align: left
top: 100%
width: 100%
left: 0
background: $navBG
display: none
transform: scale(1, 0)
transform-origin: top
transition: 400ms
transition: transform 400ms ease-in-out
nav ul
margin: 0
padding: 0
list-style-type: none
nav li
margin-bottom: 1em
margin-left: 1em
nav a
text-decoration: none
font-size: 1.2rem
text-transform: uppercase
color: $navdefcolor
opacity: 0
nav a:hover
color: $navhovcolor
.nav-toggle:checked ~ nav
display: block
transform: scale(1,1)
transition: 400ms
.nav-toggle:checked ~ nav a
opacity: 1
transition: opacity 150ms ease-in-out
@media screen and (min-width: 800px)
.nav-toggle-label
display: none
header
display: grid
grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr
nav
all: unset
display: flex
align-items: center
nav a
opacity: 1
nav ul
display: flex
nav li
margin-left: $navgap
margin-bottom: 0
list-style: none
.nav-logo-left
grid-column: 2 / span 1
.nav-left
all: unset
grid-column: 3 / 4
display: flex
justify-content: flex-end
align-items: center
.nav-left ul
display: flex
justify-content: flex-end

2
test.md
View File

@ -1,2 +0,0 @@
test
test