mirror/chota
1
0
Fork 0
mirror of https://github.com/jenil/chota.git synced 2023-08-10 21:13:07 +03:00
Code Issues Projects Releases Wiki Activity

test improvements

Browse Source
This commit is contained in:
Gaurav Panchal 2020-05-16 19:55:33 +05:30
parent 8eae720abc
commit 24497e764e
9 changed files with 69 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
dist/chota.css vendored
View File

@ -1,5 +1,7 @@
/*! chota.css v0.7.2 | MIT License | github.com/jenil/chota */
:root {
--bg-color: #ffffff;
--bg-alt-color: #f3f3f6;
--color-primary: #14854F;
--color-lightGrey: #d2d6dd;
--color-grey: #747681;
@ -9,24 +11,29 @@
--grid-maxWidth: 120rem;
--grid-gutter: 2rem;
--font-size: 1.6rem;
--font-color: #333333;
--font-family-sans: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next",
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
--font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
}
* {
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 62.5%;
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
background-color: var(--bg-color);
line-height: 1.6;
font-size: var(--font-size);
color: var(--font-color);
font-family: "Segoe UI", "Helvetica Neue", sans-serif; /*fallback*/
font-family: var(--font-family-sans);
margin: 0;
@ -73,7 +80,7 @@ p {
margin-top: 0;
}
blockquote {
background-color: #f3f3f6;
background-color: var(--bg-alt-color);
padding: 1.5rem 2rem;
border-left: 3px solid var(--color-lightGrey);
}
@ -94,7 +101,7 @@ table {
text-align: left;
}
table.striped tr:nth-of-type(2n) {
background-color: #f3f3f6;
background-color: var(--bg-alt-color);
}
td,
th {
@ -120,12 +127,11 @@ kbd {
font-size: 90%;
white-space: pre-wrap;
border-radius: 4px;
color: #d43939;
padding: 0.2em 0.4em;
background-color: #f3f3f6;
background-color: var(--bg-alt-color);
}
pre {
background-color: #f3f3f6;
background-color: var(--bg-alt-color);
font-size: 1em;
padding: 1rem;
overflow-x: auto;
@ -727,9 +733,9 @@ button:disabled:hover {
.card {
padding: 1rem 2rem;
border-radius: 4px;
background: white;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
background: var(--bg-color);
-webkit-box-shadow: 0 1px 3px var(--color-grey);
box-shadow: 0 1px 3px var(--color-grey);
}
.card p:last-child {
margin: 0;

2
dist/chota.min.css vendored
View File

File diff suppressed because one or more lines are too long

7
docs/doc-styles.css
View File

@ -1,8 +1,9 @@
body.dark {
--body-bg-color: #000;
--bg-color: #000;
--bg-alt-color: #131316;
--font-color: #f5f5f5;
--color-grey: #ccc;
--color-darkGrey: #aaa;
--color-darkGrey: #777;
}
body>.container {
@ -80,7 +81,7 @@ hr {
margin-left: .5rem;
}
.highlight, code { background-color: #f1f5f5; }
.highlight, code { background-color: var(--bg-alt-color); }
.highlight .c { color: #93a1a1 } /* Comment */
.highlight .err { color: #586e75 } /* Error */
.highlight .g { color: #586e75 } /* Generic */

17
docs/index.html
View File

@ -9,6 +9,7 @@
<title>chota - A micro CSS framework</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/chota">
<!-- for dev -->
<!-- <link rel="stylesheet" href="./dist/chota.css"> -->
<link rel="stylesheet" href="./doc-styles.css">
<link rel="icon" type="image/png" href="favicon.png" />
@ -27,15 +28,7 @@
<a href="#start">start</a>
<a href="#docs">docs</a>
<a href="https://github.com/jenil/chota">GitHub</a>
<a
href="javascript:void(0)"
onclick="
const bodyClass = document.body.classList;
bodyClass.contains('dark')
? (this.innerHTML = '☀️', bodyClass.remove('dark'))
: (this.innerHTML = '🌙', bodyClass.add('dark'));
"
>☀️</a>
<a href="javascript:void(0)" onclick="switchMode(this)">☀️</a>
</nav>
</div>
@ -124,10 +117,11 @@
{% highlight html %}
<style>
body.dark {
--body-bg-color: #000;
--bg-color: #000;
--bg-alt-color: #131316;
--font-color: #f5f5f5;
--color-grey: #ccc;
--color-darkGrey: #aaa;
--color-darkGrey: #777;
}
</style>
<script>
@ -182,6 +176,7 @@
<p>Want icons for your project too? Checkout <a href="https://icongr.am" target="_blank">Icongr.am 🚀</a></p>
<h5>Made by <a href="https://jgog.in" target="_blank">Jenil Gogari</a></h5>
</footer>
<script src="./main.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

6
docs/main.js Normal file
View File

@ -0,0 +1,6 @@
function switchMode(el) {
const bodyClass = document.body.classList;
bodyClass.contains('dark')
? (el.innerHTML = '☀️', bodyClass.remove('dark'))
: (el.innerHTML = '🌙', bodyClass.add('dark'));
}

14
src/_base.css
View File

@ -1,5 +1,6 @@
:root {
--body-bg-color: #ffffff;
--bg-color: #ffffff;
--bg-alt-color: #f3f3f6;
--color-primary: #14854F;
--color-lightGrey: #d2d6dd;
--color-grey: #747681;
@ -29,7 +30,7 @@ html {
}
body {
background-color: var(--body-bg-color);
background-color: var(--bg-color);
line-height: 1.6;
font-size: var(--font-size);
color: var(--font-color);
@ -91,7 +92,7 @@ p {
}
blockquote {
background-color: #f3f3f6;
background-color: var(--bg-alt-color);
padding: 1.5rem 2rem;
border-left: 3px solid var(--color-lightGrey);
}
@ -116,7 +117,7 @@ table {
}
table.striped tr:nth-of-type(2n) {
background-color: #f3f3f6;
background-color: var(--bg-alt-color);
}
td,
@ -147,13 +148,12 @@ kbd {
font-size: 90%;
white-space: pre-wrap;
border-radius: 4px;
color: #d43939;
padding: 0.2em 0.4em;
background-color: #f3f3f6;
background-color: var(--bg-alt-color);
}
pre {
background-color: #f3f3f6;
background-color: var(--bg-alt-color);
font-size: 1em;
padding: 1rem;
overflow-x: auto;

2
src/_card.css
View File

@ -1,7 +1,7 @@
.card {
padding: 1rem 2rem;
border-radius: 4px;
background: var(--body-bg-color);
background: var(--bg-color);
box-shadow: 0 1px 3px var(--color-grey);
}

13
test/components.html
View File

@ -9,14 +9,26 @@
<style>
.nav {
border: 1px solid red;
}
body.dark {
--bg-color: #000;
--bg-alt-color: #131316;
--font-color: #f5f5f5;
--color-grey: #ccc;
--color-darkGrey: #777;
}
</style>
</head>
<body>
<div class="container">
<h1 class="pull-right" style="margin: 0;">
<a href="javascript:void(0)" onclick="switchMode(this)">☀️</a>
</h1>
<h1>Nav</h1>
</div>
<div class="clearfix" ></div>
<nav class="nav">
<div class="container">
<div class="nav-left">
@ -414,6 +426,7 @@
<p>
<br>
</p>
<script src="../docs/main.js"></script>
</body>
</html>

17
test/index.html
View File

@ -6,15 +6,25 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elements</title>
<link rel="stylesheet" href="../dist/chota.css">
<!-- For dev -->
<!-- <link rel="stylesheet" href="../dist/chota.css"> -->
<style>
body.dark {
--bg-color: #000;
--bg-alt-color: #131316;
--font-color: #f5f5f5;
--color-grey: #ccc;
--color-darkGrey: #777;
}
</style>
</head>
<body>
<div id="top" class="container" role="document">
<header role="banner">
<h1 class="pull-right" style="margin: 0;">
<a href="javascript:void(0)" onclick="switchMode(this)">☀️</a>
</h1>
<h1>Chota CSS</h1>
<div class="clearfix"></div>
<p>A small CSS framework.</p>
</header>
<nav role="navigation">
@ -534,6 +544,7 @@
</section>
</main>
</div>
<script src="../docs/main.js"></script>
</body>
</html>