swapped to SASS base
removed vanilla css code and changed to SASS Base and tweaked Code to be way more responsive
This commit is contained in:
parent
d5cb0a849e
commit
2285a21721
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
node_modules
|
||||||
|
.cache
|
||||||
16
README.md
16
README.md
@ -1,16 +0,0 @@
|
|||||||
# what is steevcss
|
|
||||||
SteevCSS is like the name says a CSS Framework!
|
|
||||||
This Framework is optimized and maintained for my usecases and my usecases only please keep that in mind when reporting anything..
|
|
||||||
|
|
||||||
# what steevcss not is
|
|
||||||
this librarie is not and wont ever be perfect for your use.. i excpect you to at leaste be able to override css on yourend when using my framework.
|
|
||||||
It is not maintained by a big team like bootstrap is if you want a professional librarie you won't need to debug as much as mine. then dont use it
|
|
||||||
|
|
||||||
# disclaymer
|
|
||||||
it can happen that things from one second to another change entirely it will be documented somwhere
|
|
||||||
i am not offering much support and only documentation i can fully understand.
|
|
||||||
|
|
||||||
# My GitHub todolist
|
|
||||||
creating documentation
|
|
||||||
|
|
||||||
i am updating this Readme on the fly so it may change as the librarie does
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
197
css/steev.css
197
css/steev.css
@ -1,197 +0,0 @@
|
|||||||
* {
|
|
||||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
|
||||||
font-size: 12pt;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
Container CSS
|
|
||||||
*/
|
|
||||||
.container {
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
@media (min-width: 770px) {
|
|
||||||
.container {
|
|
||||||
width: 750px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
.container {
|
|
||||||
width: 970px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
.container {
|
|
||||||
width: 1170px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
Grid
|
|
||||||
*/
|
|
||||||
.row { width: 100%; }
|
|
||||||
.col-1 { width: 100.0%; float: left; }
|
|
||||||
.col-2 { width: 50.00%; float: left; }
|
|
||||||
.col-3 { width: 33.33%; float: left; }
|
|
||||||
.col-4 { width: 25.00%; float: left; }
|
|
||||||
.col-5 { width: 20.00%; float: left; }
|
|
||||||
.col-6 { width: 16.66%; float: left; }
|
|
||||||
.col-7 { width: 14.28%; float: left; }
|
|
||||||
.col-8 { width: 12.50%; float: left; }
|
|
||||||
.col-9 { width: 11.11%; float: left; }
|
|
||||||
.col-10 { width: 10.00%; float: left; }
|
|
||||||
.col-11 { width: 09.09%; float: left; }
|
|
||||||
.col-12 { width: 08.33%; float: left; }
|
|
||||||
/*
|
|
||||||
NavBar CSS
|
|
||||||
*/
|
|
||||||
.nav {
|
|
||||||
position: relative;
|
|
||||||
background-color: aliceblue;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
ul.nav-list {
|
|
||||||
display: flex;
|
|
||||||
margin:0;
|
|
||||||
padding: 5px;
|
|
||||||
min-height: 60px;
|
|
||||||
line-height: 60px;
|
|
||||||
}
|
|
||||||
li.nav-item{
|
|
||||||
float:left;
|
|
||||||
list-style: none;
|
|
||||||
color:black;
|
|
||||||
font-size: 10pt;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
li.nav-item:hover{
|
|
||||||
font-size: 12pt;
|
|
||||||
}
|
|
||||||
a.brand {
|
|
||||||
position: inherit;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
Dropdown
|
|
||||||
*/
|
|
||||||
.dropdown {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-content {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
min-width: 160px;
|
|
||||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
||||||
padding: 12px 16px;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.dropdown:hover .dropdown-content {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
SlideShow CSS
|
|
||||||
*/
|
|
||||||
* {box-sizing: border-box}
|
|
||||||
body {font-family: Verdana, sans-serif; margin:0}
|
|
||||||
.mySlides {display: none}
|
|
||||||
img {vertical-align: middle;}
|
|
||||||
|
|
||||||
/* Slideshow container */
|
|
||||||
.slideshow-container {
|
|
||||||
max-width: 1000px;
|
|
||||||
position: relative;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Next & previous buttons */
|
|
||||||
.prev, .next {
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
width: auto;
|
|
||||||
padding: 16px;
|
|
||||||
margin-top: -22px;
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 18px;
|
|
||||||
transition: 0.6s ease;
|
|
||||||
border-radius: 0 3px 3px 0;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Position the "next button" to the right */
|
|
||||||
.next {
|
|
||||||
right: 0;
|
|
||||||
border-radius: 3px 0 0 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* On hover, add a black background color with a little bit see-through */
|
|
||||||
.prev:hover, .next:hover {
|
|
||||||
background-color: rgba(0,0,0,0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Caption text */
|
|
||||||
.text {
|
|
||||||
color: #f2f2f2;
|
|
||||||
font-size: 15px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 8px;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Number text (1/3 etc) */
|
|
||||||
.numbertext {
|
|
||||||
color: #f2f2f2;
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The dots/bullets/indicators */
|
|
||||||
.dot {
|
|
||||||
cursor: pointer;
|
|
||||||
height: 15px;
|
|
||||||
width: 15px;
|
|
||||||
margin: 0 2px;
|
|
||||||
background-color: #bbb;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: inline-block;
|
|
||||||
transition: background-color 0.6s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active, .dot:hover {
|
|
||||||
background-color: #717171;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fading animation */
|
|
||||||
.fade {
|
|
||||||
-webkit-animation-name: fade;
|
|
||||||
-webkit-animation-duration: 1.5s;
|
|
||||||
animation-name: fade;
|
|
||||||
animation-duration: 1.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes fade {
|
|
||||||
from {opacity: .4}
|
|
||||||
to {opacity: 1}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fade {
|
|
||||||
from {opacity: .4}
|
|
||||||
to {opacity: 1}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* On smaller screens, decrease text size */
|
|
||||||
@media only screen and (max-width: 300px) {
|
|
||||||
.prev, .next,.text {font-size: 11px}
|
|
||||||
}
|
|
||||||
1
css/steevcss.min.css
vendored
1
css/steevcss.min.css
vendored
@ -1 +0,0 @@
|
|||||||
*{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:12pt}body{margin:0;padding:0}.container{margin-right:auto;margin-left:auto}@media (min-width:770px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.row{width:100%}.col-1{width:100%;float:left}.col-2{width:50%;float:left}.col-3{width:33.33%;float:left}.col-4{width:25%;float:left}.col-5{width:20%;float:left}.col-6{width:16.66%;float:left}.col-7{width:14.28%;float:left}.col-8{width:12.5%;float:left}.col-9{width:11.11%;float:left}.col-10{width:10%;float:left}.col-11{width:9.09%;float:left}.col-12{width:8.33%;float:left}.nav{position:relative;background-color:#f0f8ff;top:0;left:0;right:0}ul.nav-list{display:flex;margin:0;padding:5px;min-height:60px;line-height:60px}li.nav-item{float:left;list-style:none;color:#000;font-size:10pt;margin-left:10px}li.nav-item:hover{font-size:12pt}a.brand{position:inherit;display:flex}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);padding:12px 16px;z-index:1}.dropdown:hover .dropdown-content{display:block}*{box-sizing:border-box}body{font-family:Verdana,sans-serif;margin:0}.mySlides{display:none}img{vertical-align:middle}.slideshow-container{max-width:1000px;position:relative;margin:auto}.next,.prev{cursor:pointer;position:absolute;top:50%;width:auto;padding:16px;margin-top:-22px;color:#fff;font-weight:700;font-size:18px;transition:.6s ease;border-radius:0 3px 3px 0;user-select:none}.next{right:0;border-radius:3px 0 0 3px}.next:hover,.prev:hover{background-color:rgba(0,0,0,.8)}.text{color:#f2f2f2;font-size:15px;padding:8px 12px;position:absolute;bottom:8px;width:100%;text-align:center}.numbertext{color:#f2f2f2;font-size:12px;padding:8px 12px;position:absolute;top:0}.dot{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color .6s ease}.active,.dot:hover{background-color:#717171}.fade{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}@-webkit-keyframes fade{from{opacity:.4}to{opacity:1}}@keyframes fade{from{opacity:.4}to{opacity:1}}@media only screen and (max-width:300px){.next,.prev,.text{font-size:11px}}
|
|
||||||
96
dist/c5c675bb9c74ae17ec48e80f0197f4bf.css
vendored
Normal file
96
dist/c5c675bb9c74ae17ec48e80f0197f4bf.css
vendored
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: whitesmoke;
|
||||||
|
font-family: sans-serif; }
|
||||||
|
|
||||||
|
.dev {
|
||||||
|
border: 1px solid black; }
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: calc( 100% - 10em);
|
||||||
|
max-width: 60em;
|
||||||
|
margin: 0 auto; }
|
||||||
|
|
||||||
|
div[class^="col-"] {
|
||||||
|
padding: 1rem 0;
|
||||||
|
text-align: center; }
|
||||||
|
|
||||||
|
.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%; }
|
||||||
253
dist/c5c675bb9c74ae17ec48e80f0197f4bf.js
vendored
Normal file
253
dist/c5c675bb9c74ae17ec48e80f0197f4bf.js
vendored
Normal 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;
|
||||||
|
})({4:[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;
|
||||||
|
|
||||||
|
},{}],3:[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":4}],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:58723/');
|
||||||
|
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])
|
||||||
39
dist/index.html
vendored
Normal file
39
dist/index.html
vendored
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de-DE">
|
||||||
|
<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/c5c675bb9c74ae17ec48e80f0197f4bf.css">
|
||||||
|
<style>
|
||||||
|
/* Dev Classes */
|
||||||
|
.display {
|
||||||
|
background-color: lightcoral;
|
||||||
|
border: 1px solid red;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Hello, World!</h1>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1>Grid System</h1>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 display"> 12 </div>
|
||||||
|
<div class="col-11 display"> 11 </div>
|
||||||
|
<div class="col-1 display"> 1 </div>
|
||||||
|
<div class="col-10 display"> 10 </div>
|
||||||
|
<div class="col-2 display"> 2 </div>
|
||||||
|
<div class="col-9 display"> 9 </div>
|
||||||
|
<div class="col-3 display"> 3 </div>
|
||||||
|
<div class="col-8 display"> 8 </div>
|
||||||
|
<div class="col-4 display"> 4 </div>
|
||||||
|
<div class="col-7 display"> 7 </div>
|
||||||
|
<div class="col-5 display"> 5 </div>
|
||||||
|
<div class="col-6 display"> 6 </div>
|
||||||
|
<div class="col-6 display"> 6 </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,129 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>steev CSS</title>
|
|
||||||
<link rel="stylesheet" type="text/css" href="../steevcss.min.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<br>
|
|
||||||
<h1 style="text-align: center;">Grids</h1>
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-1" style="border: 1px solid black;"> col-1 </div>
|
|
||||||
</div>
|
|
||||||
<br><br>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-2" style="border: 1px solid black;"> col-2 </div>
|
|
||||||
<div class="col-2" style="border: 1px solid black;"> col-2 </div>
|
|
||||||
</div>
|
|
||||||
<br><br>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-3" style="border: 1px solid black;"> col-3 </div>
|
|
||||||
<div class="col-3" style="border: 1px solid black;"> col-3 </div>
|
|
||||||
<div class="col-3" style="border: 1px solid black;"> col-3 </div>
|
|
||||||
</div>
|
|
||||||
<br><br>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-4" style="border: 1px solid black;"> col-4 </div>
|
|
||||||
<div class="col-4" style="border: 1px solid black;"> col-4 </div>
|
|
||||||
<div class="col-4" style="border: 1px solid black;"> col-4 </div>
|
|
||||||
<div class="col-4" style="border: 1px solid black;"> col-4 </div>
|
|
||||||
</div>
|
|
||||||
<br><br>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-5" style="border: 1px solid black;"> col-5 </div>
|
|
||||||
<div class="col-5" style="border: 1px solid black;"> col-5 </div>
|
|
||||||
<div class="col-5" style="border: 1px solid black;"> col-5 </div>
|
|
||||||
<div class="col-5" style="border: 1px solid black;"> col-5 </div>
|
|
||||||
<div class="col-5" style="border: 1px solid black;"> col-5 </div>
|
|
||||||
</div>
|
|
||||||
<br><br>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-6" style="border: 1px solid black;"> col-6 </div>
|
|
||||||
<div class="col-6" style="border: 1px solid black;"> col-6 </div>
|
|
||||||
<div class="col-6" style="border: 1px solid black;"> col-6 </div>
|
|
||||||
<div class="col-6" style="border: 1px solid black;"> col-6 </div>
|
|
||||||
<div class="col-6" style="border: 1px solid black;"> col-6 </div>
|
|
||||||
<div class="col-6" style="border: 1px solid black;"> col-6 </div>
|
|
||||||
</div>
|
|
||||||
<br><br>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-7" style="border: 1px solid black;"> col-7 </div>
|
|
||||||
<div class="col-7" style="border: 1px solid black;"> col-7 </div>
|
|
||||||
<div class="col-7" style="border: 1px solid black;"> col-7 </div>
|
|
||||||
<div class="col-7" style="border: 1px solid black;"> col-7 </div>
|
|
||||||
<div class="col-7" style="border: 1px solid black;"> col-7 </div>
|
|
||||||
<div class="col-7" style="border: 1px solid black;"> col-7 </div>
|
|
||||||
<div class="col-7" style="border: 1px solid black;"> col-7 </div>
|
|
||||||
</div>
|
|
||||||
<br><br>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-8" style="border: 1px solid black;"> col-8 </div>
|
|
||||||
<div class="col-8" style="border: 1px solid black;"> col-8 </div>
|
|
||||||
<div class="col-8" style="border: 1px solid black;"> col-8 </div>
|
|
||||||
<div class="col-8" style="border: 1px solid black;"> col-8 </div>
|
|
||||||
<div class="col-8" style="border: 1px solid black;"> col-8 </div>
|
|
||||||
<div class="col-8" style="border: 1px solid black;"> col-8 </div>
|
|
||||||
<div class="col-8" style="border: 1px solid black;"> col-8 </div>
|
|
||||||
<div class="col-8" style="border: 1px solid black;"> col-8 </div>
|
|
||||||
</div>
|
|
||||||
<br><br>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-9" style="border: 1px solid black;"> col-9 </div>
|
|
||||||
<div class="col-9" style="border: 1px solid black;"> col-9 </div>
|
|
||||||
<div class="col-9" style="border: 1px solid black;"> col-9 </div>
|
|
||||||
<div class="col-9" style="border: 1px solid black;"> col-9 </div>
|
|
||||||
<div class="col-9" style="border: 1px solid black;"> col-9 </div>
|
|
||||||
<div class="col-9" style="border: 1px solid black;"> col-9 </div>
|
|
||||||
<div class="col-9" style="border: 1px solid black;"> col-9 </div>
|
|
||||||
<div class="col-9" style="border: 1px solid black;"> col-9 </div>
|
|
||||||
<div class="col-9" style="border: 1px solid black;"> col-9 </div>
|
|
||||||
</div>
|
|
||||||
<br><br>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
|
||||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
|
||||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
|
||||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
|
||||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
|
||||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
|
||||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
|
||||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
|
||||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
|
||||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
|
||||||
</div>
|
|
||||||
<br><br>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
|
||||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
|
||||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
|
||||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
|
||||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
|
||||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
|
||||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
|
||||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
|
||||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
|
||||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
|
||||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
|
||||||
</div>
|
|
||||||
<br><br>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
|
||||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
|
||||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
|
||||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
|
||||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
|
||||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
|
||||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
|
||||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
|
||||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
|
||||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
|
||||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
|
||||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="../steevcss.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>steev CSS</title>
|
|
||||||
<link rel="stylesheet" type="text/css" href="../steev.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="nav">
|
|
||||||
<ul class="nav-list">
|
|
||||||
<a href="/" class="list-item brand"><img height="60" src="https://testcreative.co.uk/wp-content/uploads/2018/08/logo.png" alt="dev-icon"></a>
|
|
||||||
<li class="nav-item">Hello World</li>
|
|
||||||
<li class="nav-item">Hello World</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<script src="../steevcss.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>steev CSS</title>
|
|
||||||
<link rel="stylesheet" type="text/css" href="../steev.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<br>
|
|
||||||
<h1 style="text-align: center;">Grids</h1>
|
|
||||||
<div class="container">
|
|
||||||
<!-- Slideshow Container-->
|
|
||||||
<div class="slideshow-container">
|
|
||||||
|
|
||||||
<!-- a slide -->
|
|
||||||
<div class="mySlides fade">
|
|
||||||
<div class="numbertext">1 / 3</div>
|
|
||||||
<img src="https://www.exclusive-networks.com/de/wp-content/uploads/sites/10/2019/06/test-image.jpg" style="width:100%">
|
|
||||||
<div class="text">Caption Text</div>
|
|
||||||
</div>
|
|
||||||
<!-- slide end -->
|
|
||||||
|
|
||||||
<div class="mySlides fade">
|
|
||||||
<div class="numbertext">2 / 3</div>
|
|
||||||
<img src="https://wow.olympus.eu/webfile/img/1632/oly_testwow_stage.jpg?x=1024" style="width:100%">
|
|
||||||
<div class="text">Caption Two</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mySlides fade">
|
|
||||||
<div class="numbertext">3 / 3</div>
|
|
||||||
<img src="https://knowpathology.com.au/app/uploads/2018/07/Happy-Test-Screen-01.png" style="width:100%">
|
|
||||||
<div class="text">Caption Three</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a class="prev" onclick="plusSlides(-1)">❮</a>
|
|
||||||
<a class="next" onclick="plusSlides(1)">❯</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<div style="text-align:center">
|
|
||||||
<span class="dot" onclick="currentSlide(1)"></span>
|
|
||||||
<span class="dot" onclick="currentSlide(2)"></span>
|
|
||||||
<span class="dot" onclick="currentSlide(3)"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p style="text-align: center;">This yet only works once per html site</p>
|
|
||||||
<script src="../steevcss.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
54
index.html
54
index.html
@ -1,54 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>steev CSS</title>
|
|
||||||
<link rel="stylesheet" type="text/css" href="css/steev.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="nav">
|
|
||||||
<ul class="nav-list">
|
|
||||||
<a href="/" class="list-item brand"><img height="60" src="https://testcreative.co.uk/wp-content/uploads/2018/08/logo.png" alt="dev-icon"></a>
|
|
||||||
<li class="nav-item">Hello World</li>
|
|
||||||
<li class="nav-item">Hello World</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<!-- Slideshow Container-->
|
|
||||||
<div class="slideshow-container">
|
|
||||||
|
|
||||||
<!-- a slide -->
|
|
||||||
<div class="mySlides fade">
|
|
||||||
<div class="numbertext">1 / 3</div>
|
|
||||||
<img src="https://www.exclusive-networks.com/de/wp-content/uploads/sites/10/2019/06/test-image.jpg" style="width:100%">
|
|
||||||
<div class="text">Caption Text</div>
|
|
||||||
</div>
|
|
||||||
<!-- slide end -->
|
|
||||||
|
|
||||||
<div class="mySlides fade">
|
|
||||||
<div class="numbertext">2 / 3</div>
|
|
||||||
<img src="https://wow.olympus.eu/webfile/img/1632/oly_testwow_stage.jpg?x=1024" style="width:100%">
|
|
||||||
<div class="text">Caption Two</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mySlides fade">
|
|
||||||
<div class="numbertext">3 / 3</div>
|
|
||||||
<img src="https://knowpathology.com.au/app/uploads/2018/07/Happy-Test-Screen-01.png" style="width:100%">
|
|
||||||
<div class="text">Caption Three</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a class="prev" onclick="plusSlides(-1)">❮</a>
|
|
||||||
<a class="next" onclick="plusSlides(1)">❯</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<div style="text-align:center">
|
|
||||||
<span class="dot" onclick="currentSlide(1)"></span>
|
|
||||||
<span class="dot" onclick="currentSlide(2)"></span>
|
|
||||||
<span class="dot" onclick="currentSlide(3)"></span>
|
|
||||||
</div>
|
|
||||||
<script src="js/steevcss.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
var slideIndex = 1;
|
|
||||||
showSlides(slideIndex);
|
|
||||||
|
|
||||||
function plusSlides(n) {
|
|
||||||
showSlides(slideIndex += n);
|
|
||||||
}
|
|
||||||
|
|
||||||
function currentSlide(n) {
|
|
||||||
showSlides(slideIndex = n);
|
|
||||||
}
|
|
||||||
|
|
||||||
function showSlides(n) {
|
|
||||||
var i;
|
|
||||||
var slides = document.getElementsByClassName("mySlides");
|
|
||||||
var dots = document.getElementsByClassName("dot");
|
|
||||||
if (n > slides.length) {slideIndex = 1}
|
|
||||||
if (n < 1) {slideIndex = slides.length}
|
|
||||||
for (i = 0; i < slides.length; i++) {
|
|
||||||
slides[i].style.display = "none";
|
|
||||||
}
|
|
||||||
for (i = 0; i < dots.length; i++) {
|
|
||||||
dots[i].className = dots[i].className.replace(" active", "");
|
|
||||||
}
|
|
||||||
slides[slideIndex-1].style.display = "block";
|
|
||||||
dots[slideIndex-1].className += " active";
|
|
||||||
}
|
|
||||||
1
js/steevcss.min.js
vendored
1
js/steevcss.min.js
vendored
@ -1 +0,0 @@
|
|||||||
var slideIndex=1;function plusSlides(e){showSlides(slideIndex+=e)}function currentSlide(e){showSlides(slideIndex=e)}function showSlides(e){var s,l=document.getElementsByClassName("mySlides"),d=document.getElementsByClassName("dot");for(e>l.length&&(slideIndex=1),e<1&&(slideIndex=l.length),s=0;s<l.length;s++)l[s].style.display="none";for(s=0;s<d.length;s++)d[s].className=d[s].className.replace(" active","");l[slideIndex-1].style.display="block",d[slideIndex-1].className+=" active"}showSlides(slideIndex);
|
|
||||||
17115
package-lock.json
generated
Normal file
17115
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
17
package.json
Normal file
17
package.json
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"name": "steevcss",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "parcel src/index.html",
|
||||||
|
"build": "parcel build src/index.html"
|
||||||
|
},
|
||||||
|
"author": "steev",
|
||||||
|
"license": "ISC",
|
||||||
|
"devDependencies": {
|
||||||
|
"node-sass": "^5.0.0",
|
||||||
|
"parcel-bundler": "^1.3.1",
|
||||||
|
"sass": "^1.32.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
39
src/index.html
Normal file
39
src/index.html
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de-DE">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Sass test</title>
|
||||||
|
<link rel="stylesheet" href="scss/main.sass">
|
||||||
|
<style>
|
||||||
|
/* Dev Classes */
|
||||||
|
.display {
|
||||||
|
background-color: lightcoral;
|
||||||
|
border: 1px solid red;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Hello, World!</h1>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1>Grid System</h1>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 display"> 12 </div>
|
||||||
|
<div class="col-11 display"> 11 </div>
|
||||||
|
<div class="col-1 display"> 1 </div>
|
||||||
|
<div class="col-10 display"> 10 </div>
|
||||||
|
<div class="col-2 display"> 2 </div>
|
||||||
|
<div class="col-9 display"> 9 </div>
|
||||||
|
<div class="col-3 display"> 3 </div>
|
||||||
|
<div class="col-8 display"> 8 </div>
|
||||||
|
<div class="col-4 display"> 4 </div>
|
||||||
|
<div class="col-7 display"> 7 </div>
|
||||||
|
<div class="col-5 display"> 5 </div>
|
||||||
|
<div class="col-6 display"> 6 </div>
|
||||||
|
<div class="col-6 display"> 6 </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
26
src/scss/main.sass
Normal file
26
src/scss/main.sass
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
$primBG: rgb(245, 245, 245)
|
||||||
|
$columns: 12
|
||||||
|
*
|
||||||
|
box-sizing: border-box
|
||||||
|
body
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
background: $primBG
|
||||||
|
font-family: sans-serif
|
||||||
|
.dev
|
||||||
|
border: 1px solid black
|
||||||
|
.container
|
||||||
|
width: calc( 100% - 10em )
|
||||||
|
max-width: 60em
|
||||||
|
margin: 0 auto
|
||||||
|
div[class^="col-"]
|
||||||
|
padding: 1rem 0
|
||||||
|
text-align: center
|
||||||
|
.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
|
||||||
Loading…
x
Reference in New Issue
Block a user