diff --git a/README.md b/README.md index 6be913b..9d7dc27 100755 --- a/README.md +++ b/README.md @@ -1,9 +1,7 @@ -
- + ![https://savandev.github.io/cleanify-design](https://img.shields.io/github/v/release/savandev/cleanify-design?label=Cleanify%20Design&style=for-the-badge) ![](https://img.shields.io/github/package-json/v/savandev/cleanify-design?color=red&label=master&style=flat-square) -
## HTML, CSS & JS personal framework. diff --git a/dist/css/cleanify.css b/dist/css/cleanify.css new file mode 100755 index 0000000..f214d84 --- /dev/null +++ b/dist/css/cleanify.css @@ -0,0 +1 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--color-background:#f1f2f6;--color-text:#222020;--color-backText:#D6D6D6;--color-button:#D6D6D6;--color-backAlpha:rgba(241,242,246,0.95);--color-container:#fff;--color-listP:#f2f2f2;--color-listI:#ededed}@media (prefers-color-scheme: dark){:root{--color-background:#222020;--color-text:#f1f2f6;--color-backText:#555;--color-button:#555;--color-backAlpha:rgba(34,32,32,0.95);--color-container:#555;--color-listP:#484848;--color-listI:#434343}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Roboto", "Open Sans", Helvetica, sans-serif;background-color:var(--color-background);color:var(--color-text)}article{padding:1rem;margin:auto;max-width:100vw}@media screen and (min-width: 1000px){article{max-width:85vw}}@media screen and (min-width: 1500px){article{max-width:70vw}}article.fluid{max-width:100vw}@media screen and (min-width: 1000px){article.grid{display:flex;flex-wrap:wrap}article.grid>section,article.grid fieldset,article.grid article{flex-basis:0;flex-grow:1}article.grid>section:not(:last-child),article.grid fieldset:not(:last-child),article.grid article:not(:last-child){margin-right:1rem}}section{background-color:var(--color-container);border-radius:1rem;box-shadow:3px 3px #D6D6D6;border:1px solid #ddd;margin-bottom:1.5rem;padding:1.5rem}section.transparent{background-color:transparent;box-shadow:none;border-radius:0;border:0;padding:0;margin:2rem auto}footer{text-align:center;font-weight:bold;margin:auto 1rem}footer ol>li>a:hover{background-color:#0062ff}@media screen and (min-width: 1000px){footer{padding:1rem;margin:auto;max-width:100vw;display:flex;flex-wrap:wrap;align-items:center}}@media screen and (min-width: 1000px) and (min-width: 1000px){footer{max-width:85vw}}@media screen and (min-width: 1000px) and (min-width: 1500px){footer{max-width:70vw}}@media screen and (min-width: 1000px){footer.fluid{max-width:100vw}footer>*{flex-basis:0;flex-grow:1}}a{color:var(--color-text);text-decoration:none;outline:none}a:hover{color:#0062ff}hr{width:95%;color:#f1f2f6;margin:1rem auto}h1,h2,h3,h4,h5,h6{margin:0.75rem 0.5rem;font-weight:bold}h1{font-size:calc(1.475rem + 2.7vw)}@media (min-width: 1200px){h1{font-size:3.5rem}}h2{font-size:calc(1.425rem + 2.1vw)}@media (min-width: 1200px){h2{font-size:3rem}}h3{font-size:calc(1.375rem + 1.5vw)}@media (min-width: 1200px){h3{font-size:2.5rem}}h4{font-size:calc(1.325rem + .9vw)}@media (min-width: 1200px){h4{font-size:2rem}}h5{font-size:calc(1.275rem + .3vw)}@media (min-width: 1200px){h5{font-size:1.5rem}}h6{font-size:1rem}p{font-size:1.2rem;margin:0.5rem}pre{white-space:pre-wrap;word-wrap:break-word}nav{background-color:var(--color-backAlpha);font-size:.9rem;text-transform:uppercase;position:sticky;top:0;z-index:10}nav .navbar-title{display:inline-block;background-color:#0062ff;color:#f1f2f6 !important;border-radius:0 0 1rem 0;padding:1rem}nav .navbar-title:hover{background-color:#ba0000}nav .navbar-menu{display:inline-block;padding:1rem}nav .navbar-menu>li{display:inline-block}nav .navbar-menu>li:not(:last-child){padding-right:1rem}nav .navbar-menu>li{color:var(--color-text)}nav .navbar-right-menu{float:right;background-color:#ba0000;border-radius:0 0 0 1rem;padding:1rem}nav .navbar-right-menu>li{display:inline-block;color:white}nav .navbar-right-menu>li:not(:last-child){padding-right:1rem}nav svg{margin-right:.25rem}@media screen and (max-width: 1000px){nav{position:initial;text-align:center}nav .navbar-title,nav .navbar-menu{display:block;border-radius:0}nav .navbar-title{position:sticky;top:0}nav .navbar-menu{padding:0}nav .navbar-menu *:hover{background-color:#555;color:white !important}nav .navbar-menu>li{display:block;padding:1rem;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#D6D6D6}nav .navbar-menu>li a{display:block;margin:-1rem;padding:1rem}nav .navbar-right-menu{padding:0;float:none;background-color:var(--color-backAlpha)}nav .navbar-right-menu *:hover{background-color:#555;color:white !important}nav .navbar-right-menu>li{display:block;padding:1rem;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#D6D6D6}nav .navbar-right-menu>li a{display:block;margin:-1rem;padding:1rem}nav .navbar-right-menu>li,nav .navbar-right-menu a{color:var(--color-text)}}header{padding:1rem;margin:auto;max-width:100vw}@media screen and (min-width: 1000px){header{max-width:85vw}}@media screen and (min-width: 1500px){header{max-width:70vw}}header.fluid{max-width:100vw}header.withImage{grid-template:'logo text' 'logo subText'}header.withImage img{width:100%;max-width:256px;max-height:256px;grid-area:logo}header>*{display:block;text-align:center;margin:1rem auto}header h1{font-size:calc(1.525rem + 3.3vw);text-transform:uppercase}@media (min-width: 1200px){header h1{font-size:4rem}}header h2{background-color:var(--color-backText);padding:0.75rem;border-radius:1rem;font-weight:normal;font-size:calc(1.325rem + .9vw)}@media (min-width: 1200px){header h2{font-size:2rem}}@media screen and (min-width: 1000px){header{display:grid;grid-template:'text' 'subText';padding:3rem}header>*{display:inline-block;margin:auto}header h1{grid-area:text;display:flex;align-items:center}header h2{grid-area:subText}}header.gradient-1{background-image:linear-gradient(to bottom right, #0062ff, #003180);border-radius:1rem}header.gradient-1 h1{display:table;background-color:var(--color-backAlpha);padding:0.75rem;border-radius:1rem}header.gradient-2{background-image:linear-gradient(to bottom right, #ba0000, #3b0000);border-radius:1rem}header.gradient-2 h1{display:table;background-color:var(--color-backAlpha);padding:0.75rem;border-radius:1rem}header.gradient-3{background-image:linear-gradient(to bottom right, #222020, #000);border-radius:1rem}header.gradient-3 h1{display:table;background-color:var(--color-backAlpha);padding:0.75rem;border-radius:1rem}header.gradient-4{background-image:linear-gradient(to bottom right, #f1f2f6, #a3aac4);border-radius:1rem}header.gradient-4 h1{display:table;background-color:var(--color-backAlpha);padding:0.75rem;border-radius:1rem}header.gradient-5{background-image:linear-gradient(to bottom right, #555, #151515);border-radius:1rem}header.gradient-5 h1{display:table;background-color:var(--color-backAlpha);padding:0.75rem;border-radius:1rem}#headerTitle{text-align:center;font-size:calc(1.475rem + 2.7vw);padding:.5rem;margin:3rem auto}@media (min-width: 1200px){#headerTitle{font-size:3.5rem}}form input[type="text"],form input[type="url"],form input[type="email"],form input[type="password"],form input[type="number"],form input[type="date"]{box-sizing:border-box;width:100%;border-radius:1rem;border:1px solid #ddd;background-color:var(--color-background);color:var(--color-text);margin-bottom:0.5rem;padding:.5rem 1rem}form input[type="text"]:focus,form input[type="url"]:focus,form input[type="email"]:focus,form input[type="password"]:focus,form input[type="number"]:focus,form input[type="date"]:focus{border-color:#0062ff}form textarea{box-sizing:border-box;width:100%;border-radius:1rem;border:1px solid #ddd;background-color:var(--color-background);color:var(--color-text);margin-bottom:0.5rem;padding:1rem;resize:none;overflow:hidden}form textarea:focus{border-color:#0062ff}form select{-moz-appearance:none;-webkit-appearance:none;appearance:none;box-sizing:border-box;width:100%;border-radius:1rem;border:1px solid #ddd;background-color:var(--color-background);color:var(--color-text);margin-bottom:0.5rem;outline:none;background:url("data:image/svg+xml;utf8,") no-repeat right var(--color-background);padding:0.5rem 1rem}form select:focus{border-color:#0062ff}@media (prefers-color-scheme: dark){form select{background-image:url("data:image/svg+xml;utf8,")}}form select[multiple]{-moz-appearance:none;-webkit-appearance:none;appearance:none;box-sizing:border-box;width:100%;border-radius:1rem;border:1px solid #ddd;background-color:var(--color-background);color:var(--color-text);margin-bottom:0.5rem;outline:none;background:url("data:image/svg+xml;utf8,") no-repeat right var(--color-background);padding:0.5rem 1rem;background-image:none;border-radius:1rem}form select[multiple]:focus{border-color:#0062ff}@media (prefers-color-scheme: dark){form select[multiple]{background-image:url("data:image/svg+xml;utf8,")}}@media screen and (min-width: 750px){form select[multiple]{border-radius:1rem 0 0 1rem}}@media (prefers-color-scheme: dark){form select[multiple]{background-image:none}}form input[type="radio"],form input[type="checkbox"]{display:none}form input[type="radio"]+label,form input[type="checkbox"]+label{display:inline-block;border-radius:1rem;background-color:var(--color-background);padding:1rem;margin:0.5rem;cursor:pointer}form input[type="radio"]:hover+label,form input[type="checkbox"]:hover+label{background-color:#D6D6D6}form input[type="radio"]:checked+label,form input[type="checkbox"]:checked+label{background-color:#0062ff;color:white}form input[type="submit"]{box-sizing:border-box;width:100%;border-radius:1rem;border:1px solid #ddd;background-color:var(--color-background);color:var(--color-text);margin-bottom:0.5rem;padding:0.5rem;cursor:pointer;outline:none;background-color:#0062ff;color:white}form input[type="submit"]:focus{border-color:#0062ff}form input[type="submit"]:hover{background-color:#D6D6D6;color:#222020}form input[type="submit"]:hover{background-color:#ba0000;color:#f1f2f6}form input[type="button"],form input[type="reset"],form button{box-sizing:border-box;width:100%;border-radius:1rem;border:1px solid #ddd;background-color:var(--color-background);color:var(--color-text);margin-bottom:0.5rem;padding:0.5rem;cursor:pointer;outline:none}form input[type="button"]:focus,form input[type="reset"]:focus,form button:focus{border-color:#0062ff}form input[type="button"]:hover,form input[type="reset"]:hover,form button:hover{background-color:#D6D6D6;color:#222020}@media screen and (min-width: 1000px){form .group{display:flex;flex-wrap:wrap}form .group>section,form .group fieldset,form .group article{flex-basis:0;flex-grow:1}form .group>section:not(:last-child),form .group fieldset:not(:last-child),form .group article:not(:last-child){margin-right:1rem}}form fieldset{border:none}ol{background-color:#D6D6D6;border-radius:1rem;color:#222020;list-style:none;margin:1rem auto;overflow:hidden}ol>li{width:100%;text-align:center;padding:1rem}ol>li>a{display:block;color:#222020;padding:1rem;margin:-1rem}ol>li>a:hover{background-color:#0062ff;color:#f1f2f6}@media screen and (min-width: 500px){ol{display:flex;flex-wrap:wrap;width:70%}ol>li{flex-basis:0;flex-grow:1}}section>ul,article>ul{background-color:var(--color-listP);border-radius:1rem;overflow:hidden}section>ul>li,article>ul>li{padding:1.5rem}section>ul>li:nth-child(odd),article>ul>li:nth-child(odd){background-color:var(--color-listI)}section>ul>li>a,article>ul>li>a{display:block;padding:1.5rem;margin:-1.5rem}section>ul>li>a:hover,article>ul>li>a:hover{background-color:#0062ff;color:#f1f2f6}section.transparent>ul{border:1px solid #D6D6D6}img.rounded{border:1px solid #D6D6D6;border-radius:1rem}article.center,section.center{text-align:center}p.alert-primary{background:linear-gradient(to right, #0062ff, #004ecc);border-radius:1rem;color:white;padding:.5rem 1rem}p.alert-secondary{background:linear-gradient(to right, #ba0000, #870000);border-radius:1rem;color:white;padding:.5rem 1rem}progress{-moz-appearance:none;-webkit-appearance:none;appearance:none;border-radius:1rem;border:1px solid #D6D6D6;width:100%;overflow:hidden;background-color:var(--color-background)}progress[value]::-moz-progress-bar{background-image:linear-gradient(to right, #0062ff, #ba0000);border-radius:1rem}progress:not([value])::-moz-progress-bar{background-color:#ba0000}progress[value]::-webkit-progress-bar{background-color:var(--color-background)}progress[value]::-webkit-progress-value{background-image:linear-gradient(to right, #0062ff, #ba0000);border-radius:1rem}progress:not([value])::-webkit-progress-bar{background-color:#ba0000}progress[value]::-ms-fill{background-image:linear-gradient(to right, #0062ff, #ba0000);border-radius:1rem}progress:not([value])::-ms-fill{background-color:#ba0000}.hljs{display:block;overflow-x:auto;padding:1.5rem;border:1px solid #555;border-radius:1rem;background:#2f2c2c;margin:1rem auto}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-section,.hljs-link{color:white}.hljs,.hljs-subst{color:#D6D6D6}.hljs-string,.hljs-title,.hljs-name,.hljs-type,.hljs-attribute,.hljs-symbol,.hljs-bullet,.hljs-built_in,.hljs-addition,.hljs-variable,.hljs-template-tag,.hljs-template-variable{color:#66a1ff}.hljs-comment,.hljs-quote,.hljs-deletion,.hljs-meta{color:#626262}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-title,.hljs-section,.hljs-doctag,.hljs-type,.hljs-name,.hljs-strong{font-weight:bold}.hljs-emphasis{font-style:italic}.material-icons{display:inline-flex;vertical-align:middle;margin:0 .5rem}img{max-width:100%} diff --git a/dist/js/cleanify.js b/dist/js/cleanify.js new file mode 100644 index 0000000..b50ec75 --- /dev/null +++ b/dist/js/cleanify.js @@ -0,0 +1 @@ +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);let r=new class{handleHeaderTitle(e){let t=document.getElementById("headerTitle");if(null!=t){let n=document.documentElement.scrollTop;t.style.opacity=n{r.handleHeaderTitle(100)},new MutationObserver(()=>{r.handleHeaderTitle(100),console.log("Cleanify: Changes detected in DOM")}).observe(document.documentElement,{childList:!0,subtree:!0})}]); \ No newline at end of file diff --git a/package.json b/package.json index 2580698..e8c1c44 100755 --- a/package.json +++ b/package.json @@ -14,6 +14,9 @@ "start": "gulp watch" }, "dependencies": { + "rfs": "^9.0.3" + }, + "devDependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.28", "@fortawesome/free-brands-svg-icons": "^5.13.0", "@fortawesome/free-solid-svg-icons": "^5.13.0", @@ -24,18 +27,12 @@ "@types/react-dom": "16.9.7", "@types/react-highlight": "^0.12.2", "@types/react-router-dom": "^5.1.5", - "angled-edges": "^2.0.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-highlight": "^0.12.0", "react-markdown": "^4.3.1", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", - "rfs": "^9.0.3", - "sass": "^1.26.5", - "typescript": "3.8.3" - }, - "devDependencies": { "@babel/core": "^7.9.6", "@babel/preset-env": "^7.9.6", "gh-pages": "2.2.0", @@ -44,7 +41,9 @@ "gulp-sass": "^4.1.0", "normalize.css": "^8.0.1", "webpack-cli": "^3.3.11", - "webpack-stream": "^5.2.1" + "webpack-stream": "^5.2.1", + "sass": "^1.26.5", + "typescript": "3.8.3" }, "eslintConfig": { "extends": "react-app" @@ -66,4 +65,4 @@ "scss/**/*.scss", "js/**/*.js" ] -} +} \ No newline at end of file