1<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/styles.45adf691eed291e7e5f4.css">body,h1,h2,h3,h4,h5,h6{margin:0;padding:0}a{text-decoration:none}a,a:visited{color:var(--text-color-primary)}ul{list-style:none;padding:0;margin:0}button{color:var(--text-color-primary)}button,input{background:none;border:none}input{outline:none}.centered{display:flex;align-items:center;justify-content:center}.primary{color:var(--primary)}.secondary{color:var(--secondary)}.tertiary{color:var(--tertiary)}.background-primary{background:var(--primary);color:var(--text-color-primary)}.background-secondary{background:var(--secondary);color:var(--text-color-primary)}.background-tertiary{background:var(--tertiary);color:var(--text-color-primary)}.float-right{float:right}.float-left{float:left}:root{--background:#16161a;--background-variant:#242629;--text-color-primary:#fffffe;--text-color-secondary:#94a1b2;--primary:#7f5af0;--secondary:#72757e;--tertiary:#2cb67d;--progress-bar-background:rgba(44,182,125,0.5);--base-font-family:"Nunito",sans-serif;--base-font-size:18px;--header-height:40px;--container-top-margin:40px;--container-size-percent:90%;--container-size-relative:72rem;--container-padding:2%;--container-centered-padding:10%;--content-main-size:80%;--content-aside-size:20%;--footer-height:100px;--footer-margin:200px}.light-theme,:root{--progress-bar-status:var(--tertiary)}.light-theme{--background:#d8eefe;--background-variant:#fffffe;--text-color-primary:#094067;--text-color-secondary:#5f6c7b;--primary:#3da9fc;--secondary:#90b4ce;--tertiary:#ef4565;--progress-bar-background:#fac7d1}.light-theme .btn--clear-primary:hover,.light-theme .btn--clear-secondary:hover,.light-theme .btn--clear-tertiary:hover,.light-theme .btn--solid-primary,.light-theme .btn--solid-secondary,.light-theme .btn--solid-tertiary{color:#232946}.light-theme .footer,.light-theme .navbar{background:var(--background)}.navbar{background:var(--background-variant);padding:1%;height:var(--header-height);gap:8%;justify-content:space-between}.navbar,.navbar .navbar__app{display:flex;align-items:center}.navbar .navbar__app{gap:5px}.navbar .navbar__app .navbar__app__name{font-size:2rem;color:var(--text-color-primary)}.navbar .navbar__app img.navbar__logo{height:calc(var(--header-height) - 5px)}.navbar .navbar__links{display:flex}.navbar .navbar__links .navbar__link{font-size:1.3rem;padding-left:20px}.navbar.navbar-r-t-l{flex-direction:row-reverse}.navbar.navbar--content-centered{justify-content:space-around}.navbar.navbar--fixed{position:fixed;top:0;width:98%}.navbar.navbar--fixed+*{margin-top:calc(var(--header-height) + 65px)}.container{margin-top:var(--container-top-margin);padding:0 var(--container-padding) 0 var(--container-padding);margin-inline:auto;width:min(var(--container-size-percent),var(--container-size-relative))}.container.container--centered{padding:0 var(--container-centered-padding) 0 var(--container-centered-padding)}.content{display:flex;gap:10px}.content--inverse{flex-direction:row-reverse}.content .content__main{flex-basis:var(--content-main-size)}.content .content__aside{flex-basis:var(--content-aside-size)}P{line-height:1.6}h1,h2,h3,h4,h5,h6{color:var(--text-color-primary)}h1{font-size:3rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.75rem}h5{font-size:1.5rem}h6{font-size:1.25rem}.btn{display:flex;align-items:center;gap:5px;color:var(--text-color-primary);font-size:1.2rem;cursor:pointer;padding:10px;border-radius:5px;outline:none}.btn>i{font-size:inherit}.btn--primary{color:var(--primary)}.btn--secondary{color:var(--secondary)}.btn--tertiary{color:var(--tertiary)}.btn--solid-primary{background:var(--primary)}.btn--solid-secondary{background:var(--secondary)}.btn--solid-tertiary{background:var(--tertiary)}.btn--clear-primary{border:1px solid var(--primary)}.btn--clear-secondary{border:1px solid var(--secondary)}.btn--clear-tertiary{border:1px solid var(--tertiary)}.btn--clear-primary:hover{background:var(--primary)}.btn--clear-secondary:hover{background:var(--secondary)}.btn--clear-tertiary:hover{background:var(--tertiary)}.btn--circle{padding:10px;border-radius:50%}.btn--rounded{border-radius:50px}.btn--large{font-size:1.5rem;padding:15px}.btn:hover{transition:.2s;transform:scale(1.1)}.btn--disabled{pointer-events:none;opacity:.6}.btn--disabled:hover{transform:none}.link{color:var(--text-color-primary);cursor:pointer}.link.link--active,.link:hover{transition:.2s;opacity:1;color:var(--primary)}.link.link--active.link--secondary,.link.link--secondary:hover{color:var(--secondary)}.link.link--active.link--tertiary,.link.link--tertiary:hover{color:var(--tertiary)}.link:not(.link--active):hover{transition:.2s;opacity:.9}.link--underline{border-bottom:1px solid var(--primary)}.link.link--secondary.link--underline{border-bottom:1px solid var(--secondary)}.link.link--tertiary.link--underline{border-bottom:1px solid var(--tertiary)}.link.link--animated{position:relative}.link.link--animated:after{content:"";position:absolute;
1left:0;bottom:0;width:100%;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .2s ease-in}.link.link--animated:hover:after{transform:scaleX(1);transform-origin:left}.link.link--animated.link--animated--centerd:after,.link.link--animated.link--animated--centerd:hover:after{transform-origin:center}.link.link--animated.link--animated--right:after{transform-origin:left}.link.link--animated.link--animated--right:hover:after{transform-origin:right}.link.link--animated.link--primary{color:var(--primary)}.link.link--animated.link--secondary{color:var(--secondary)}.link.link--animated.link--tertiary{color:var(--tertiary)}.card{background:var(--background-variant);padding:20px;display:flex;flex-direction:column;border-radius:5px}.card .card__header{font-size:1.5rem;color:var(--text-color-primary)}.card .card__body{margin-top:10px}.card .card__footer{margin-top:20px;display:flex;gap:5px}.list{margin-top:5px}.list.list--solid{background:var(--background-variant);padding:10px}.list .list__header{font-size:1.2rem;color:var(--text-color-primary)}.list .list__item{padding:5px;border-radius:5px;display:flex;flex-direction:column;font-size:1rem;margin-left:5px}.list .list__item.list__item--solid{margin-top:10px;padding:10px;background:var(--background-variant)}.list.list--links .list__item .link{opacity:.8}.list.list--links .list__item .link:hover{opacity:.9}.list.list--links .list__item .link.link--active{opacity:1}.form .form__input{display:flex;flex-direction:column-reverse}.form .form__input input,.form .form__input label{margin:5px;color:var(--text-color-primary)}.form .form__input input{padding:10px;font-size:1rem;background:var(--background-variant);border-radius:5px}.form .form__input input:focus{transition:.2s;box-shadow:0 1px 1px var(--primary)}.form .form__input input:focus+label{color:var(--primary)}::-webkit-input-placeholder{color:var(--text-color-secondary);opacity:1}:-ms-input-placeholder{opacity:1}::-ms-input-placeholder{opacity:1}::placeholder{color:var(--text-color-secondary);opacity:1}:-ms-input-placeholder{color:var(--text-color-secondary)}::-ms-input-placeholder{color:var(--text-color-secondary)}.form .form__input.form__input--inline{align-items:center;flex-direction:row-reverse}.select-input{position:relative}.select-input select{font-size:1.2rem;padding:.5rem 2rem .5rem 1rem;background:var(--background-variant);color:var(--text-color-primary);border:0}.select-input:before{top:0;background:var(--background-variant);height:100%;width:2.5rem}.select-input:after,.select-input:before{content:"";position:absolute;right:0;display:block;pointer-events:none}.select-input:after{--size:0.5rem;top:50%;background:var(--background);width:0;height:0;transform:translate(-50%,-50%);border-left:var(--size) solid var(--background-variant);border-right:var(--size) solid var(--background-variant);border-top:var(--size) solid var(--text-color-primary)}.disguised-toast{position:fixed;font-size:1.4rem;top:calc(var(--header-height) + var(--container-top-margin));right:20px;background:var(--background-variant);border-radius:5px;padding:10px;display:flex;flex-direction:column;gap:10px;z-index:var(--toast-level);animation:toastFromRight 1s}.disguised-toast .disguised-toast__actions{font-size:1rem;display:flex;align-self:flex-end}@keyframes toastFromRight{0%{right:-100px}to{right:20px}}.progress-bar{height:2px;background:var(--progress-bar-background);overflow:hidden}.progress-bar .progress-bar__status{height:2px;background:var(--progress-bar-status)}.progress-bar--infinite .progress-bar__status{animation:moveProgressBar 3s linear infinite}@keyframes moveProgressBar{0%{width:40%;margin-left:-10%}to{width:30%;margin-left:100%}}.pulse-dot{border-radius:50%;background:var(--primary);width:1rem;height:1rem;animation:pulse .8s linear infinite}.pulse-dot.pulse-dot--medium{width:3rem;height:3rem}.pulse-dot.pulse-dot--large{width:5rem;height:5rem}@keyframes pulse{0%{opacity:0}to{opacity:.8;transform:scale(1.5)}}.pulse-dot.pulse-dot--secondary{background:var(--secondary)}.pulse-dot.pulse-dot--tertiary{background:var(--tertiary)}.loader{border-radius:50%;width:2rem;height:2rem;border-left:5px solid var(--background);border-right:5px solid var(--background);border-top:5px solid var(--background);border:5px solid var(--primary);border-bottom-color:var(--background);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loader.loader--secondary{border-top:5px solid var(--secondary);border-left:5px solid var(--secondary);border-right:5px solid var(--secondary)}.loader.loader--tertiary{border-top:5px solid var(--tertiary);border-left:5px solid var(--tertiary);border-right:5px solid var(--tertiary)}.loader.loader--medium{width:4rem;height:4rem}.loader.loader--large{width:6rem;height:6rem}.footer{margin-top:var(--footer-margin);background:var(--background-variant);height:var(--footer-height);color:var(--text-color-primary);padding:10px}
1.footer.footer--fixed{position:fixed;bottom:0;width:100%}body{background:var(--background);color:var(--text-color-secondary);font-size:var(--base-font-size);font-family:var(--base-font-family);overflow-x:hidden;outline:none;display:flex;flex-direction:column;flex:1 1;margin:0;height:100vh}main{flex:1 0 auto}.sub-text{margin-left:15%;margin-right:15%}html{scroll-behavior:smooth}:not(pre)>code[class*=language-],pre[class*=language-]{background:var(--background-variant)!important}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.sub-text{margin-left:25%;margin-right:25%}.landing-page-actions{display:flex;align-items:center;justify-content:center;gap:20px}.display-components{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.doc-content .doc-section{margin-top:4rem}.doc-content .doc-section>*{margin-top:20px}.page-navigation,.sidebar-navigation{position:fixed}.wrapper{padding:0 2%}hr{position:fixed;left:0;right:0;top:50%}.display-components .content,.display-components .footer,.display-components .navbar,.display-components .progress-bar{width:100%}.display-components .footer{margin-top:10px}.display-components .container{margin-top:20px}.footer{flex-direction:column;gap:5px}#gatsby-focus-wrapper{display:flex;flex-direction:column;margin:0;height:100vh;flex:1 1}.tailwind-link{border-bottom:1px solid #06b6d4}.tailwind-link:hover{color:#06b6d4}.materialize-link{border-bottom:1px solid #ee6e73}.materialize-link:hover{color:#ee6e73}.bootstrap-link{border-bottom:1px solid #7952b3}.bootstrap-link:hover{color:#7952b3}.googlefonts-link{border-bottom:1px solid #94a1b2}.googlefonts-link:hover{color:#94a1b2}.googleicons-link{border-bottom:1px solid #03a9f4}.googleicons-link:hover{color:#03a9f4}.prism-link{border-bottom:1px solid #fff}.prism-link:hover{color:#fff}.npm-link{border-bottom:1px solid #cb3837}.npm-link:hover{color:#cb3837}.width-80{width:80%}.width-80 .doc-section{margin-top:1rem}.pulse-centered{width:100%}.copy-btn{margin-top:-1.2rem;margin-right:-1rem}</style><meta name="generator" content="Gatsby 2.26.1"/><title data-react-helmet="true">My Style</title><link href="https://fonts.googleapis.com/css?family=Material+Icons|Nunito:300,400,500,700" rel="stylesheet"/><link as="script" rel="preload" href="/webpack-runtime-4ffed6b03da2d4f70c43.js"/><link as="script" rel="preload" href="/styles-623b54c806281b1a6a66.js"/><link as="script" rel="preload" href="/framework-866e04d363c94c7b4f62.js"/><link as="script" rel="preload" href="/app-66744104c2cff31d86db.js"/><link as="script" rel="preload" href="/commons-3bab66265ed852b3a14e.js"/><link as="script" rel="preload" href="/component---src-pages-changelog-js-81e8cdc834d4cb02bde2.js"/><link as="fetch" rel="preload" href="/page-data/changelog/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><header class="navbar"><div class="navbar__app"><img class="navbar__logo" src="/logo.png"/><h2 class="navbar__app__name"><a href="/">MyStyle</a></h2></div><section class="navbar__links"><a class="link link--tertiary"><i class="material-icons">dark_mode</i></a><a class="navbar__link link" href="/docs/getting-started/introduction">Documentation</a><a class="navbar__link link" href="/changelog">Changelog</a></section></header><main>
1<section class="container"><h2> Changelog </h2><ul class="list"><li class="list__item"><div class="card"><div class="card__header"><span style="display:flex;justify-content:space-between"><span class="release-version">v<!-- -->1.0.3</span><span class="release-date" style="font-size:1rem">17th January 2021</span></span></div><div class="card__body"><p>Animated links, responsive style to container, select input styling, bug fixes.</p><ul class="list"><li class="list__item">Container class width is configurable and doesn't cover the whole width on larger screens</li><li class="list__item">Float helpers</li><li class="list__item">Documentation fixes</li><li class="list__item">Copy to clipboard button</li><ul class="list"><li class="list__header">New Components</li><li class="list__item">Links: Animated links</li><li class="list__item">Form: Select input </li></ul></ul></div></div></li><li class="list__item"><div class="card"><div class="card__header"><span style="display:flex;justify-content:space-between"><span class="release-version">v<!-- -->1.0.1 - 1.0.2</span><span class="release-date" style="font-size:1rem">4th January 2021</span></span></div><div class="card__body"><p>Some bug fixes, document fixes</p><ul class="list"><li class="list__item">Adding proper documentation link in the readme file.</li><li class="list__item">Link class having extra underline in older browser versions.</li></ul></div></div></li><li class="list__item"><div class="card"><div class="card__header"><span style="display:flex;justify-content:space-between"><span class="release-version">v<!-- -->1.0.0</span><span class="release-date" style="font-size:1rem">3rd January 2021</span></span></div><div class="card__body"><p>This is the first release of the framework. The framework currently supports themes, basic components, helper classes.</p><ul class="list"><li class="list__header">Available components</li><li class="list__item">Headings</li><li class="list__item">Buttons</li><li class="list__item">Links</li><li class="list__item">Card</li><li class="list__item">List</li><li class="list__item">Form</li><li class="list__item">Navbar</li><li class="list__item">Footer</li><li class="list__item">Progress bars</li><li class="list__item">Toast</li></ul></div></div></li></ul></section></main><footer class="footer centered"><span>Designed by  <a class="link link--tertiary link--underline" href="https://github.com/kartik2406" rel="noreferrer" target="_blank">Kartik Malik</a></span><span> Current version: 1.0.3</span><span>License: MIT</span></footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div>
1<script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/changelog/";/*]]>*/</script>
1<script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a61ec3c0c477f2cb1183.js"],"app":["/app-66744104c2cff31d86db.js"],"component---src-pages-changelog-js":["/component---src-pages-changelog-js-81e8cdc834d4cb02bde2.js"],"component---src-pages-docs-components-buttons-js":["/component---src-pages-docs-components-buttons-js-841f1df707a3edad2b10.js"],"component---src-pages-docs-components-card-js":["/component---src-pages-docs-components-card-js-5c04e91cd7102c80f06c.js"],"component---src-pages-docs-components-footer-js":["/component---src-pages-docs-components-footer-js-321c9c49a997b6087e36.js"],"component---src-pages-docs-components-form-js":["/component---src-pages-docs-components-form-js-0c8444eae91a375f58d1.js"],"component---src-pages-docs-components-headings-js":["/component---src-pages-docs-components-headings-js-007254f1a21a86685d24.js"],"component---src-pages-docs-components-links-js":["/component---src-pages-docs-components-links-js-618e87ddece027dd67cf.js"],"component---src-pages-docs-components-list-js":["/component---src-pages-docs-components-list-js-4f962739b3c9f6931cf5.js"],"component---src-pages-docs-components-navbar-js":["/component---src-pages-docs-components-navbar-js-6557089154ae9bd9df99.js"],"component---src-pages-docs-components-progress-bars-js":["/component---src-pages-docs-components-progress-bars-js-bf385a1e8c2e0bdb3b64.js"],"component---src-pages-docs-components-toast-js":["/component---src-pages-docs-components-toast-js-533ff9930d9621e31ea1.js"],"component---src-pages-docs-getting-started-concepts-js":["/component---src-pages-docs-getting-started-concepts-js-b57cf40ec6724e023839.js"],"component---src-pages-docs-getting-started-fonts-js":["/component---src-pages-docs-getting-started-fonts-js-eea7349faa50c52c34dd.js"],"component---src-pages-docs-getting-started-introduction-js":["/component---src-pages-docs-getting-started-introduction-js-ca86c9c54c4092df082a.js"],"component---src-pages-docs-getting-started-setup-js":["/component---src-pages-docs-getting-started-setup-js-8d0f170515e993fec39b.js"],"component---src-pages-docs-getting-started-themes-js":["/component---src-pages-docs-getting-started-themes-js-56582af48009c7d6a6c7.js"],"component---src-pages-docs-layout-content-js":["/component---src-pages-docs-layout-content-js-8b159dd5156e7fb1c75c.js"],"component---src-pages-docs-layout-helpers-js":["/component---src-pages-docs-layout-helpers-js-376cc4a3276cd61f118e.js"],"component---src-pages-index-js":["/component---src-pages-index-js-2a4172994aa2cf3fb388.js"]};/*]]>*/</script>
1<script src="/polyfill-a61ec3c0c477f2cb1183.js" nomodule=""></script>
1<script src="/component---src-pages-changelog-js-81e8cdc834d4cb02bde2.js" async=""></script>
1<script src="/commons-3bab66265ed852b3a14e.js" async=""></script>
1<script src="/app-66744104c2cff31d86db.js" async=""></script>
1<script src="/framework-866e04d363c94c7b4f62.js" async=""></script>
1<script src="/styles-623b54c806281b1a6a66.js" async=""></script>
1<script src="/webpack-runtime-4ffed6b03da2d4f70c43.js" async=""></script>
1</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.