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

Updates

Browse Source 
- new grid 📐
- header sizes
This commit is contained in:
Jenil Gogari
2017-04-01 22:02:55 -04:00
parent 7ad75c917a
commit bf44a8b34a
6 changed files with 399 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/_base.css
View File

@ -2,7 +2,7 @@
--primary-color: #1a9f60;
--lightGrey-color: #ddd;
--grid-maxWidth: 120rem;
--grid-gutter: 1.5rem;
--grid-gutter: 2rem;
--font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
@ -11,7 +11,6 @@
}
html {
box-sizing: border-box;
font-size: 62.5%;
line-height: 1.15;
-ms-text-size-adjust: 100%;
@ -34,12 +33,32 @@ h3,
h4,
h5,
h6 {
font-weight: 600;
font-weight: 500;
margin: 0.35em 0 0.7em 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.75em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.25em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 0.85em;
}
a {
@ -51,7 +70,7 @@ a:hover:not(.button) {
}
p {
margin-top: 0;
margin-top: 0;
}
blockquote {
@ -119,7 +138,7 @@ pre {
}
pre code {
background: none;
background: none;
}
abbr[title] {

46
src/_grid.css
View File

@ -1,19 +1,16 @@
.container {
max-width: var(--grid-maxWidth);
margin: 0 auto;
width: 90%;
width: 96%;
padding: 0 calc(var(--grid-gutter) / 2);
}
.row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
margin-top: var(--grid-gutter);
margin-bottom: var(--grid-gutter);
}
.row > :first-child {
margin-left: 0;
margin-left: calc(var(--grid-gutter) / -2);
margin-right: calc(var(--grid-gutter) / -2);
}
.col {
@ -23,62 +20,67 @@
.col,
[class*=" col-"],
[class^='col-'] {
margin-left: var(--grid-gutter);
margin-bottom: var(--grid-gutter);
margin-left: calc(var(--grid-gutter) / 2);
margin-right: calc(var(--grid-gutter) / 2);
}
.col-1 {
width: calc((100% - var(--grid-gutter)*((12/1) - 1))/(12/1));
width: calc((100% / (12/1)) - var(--grid-gutter));
}
.col-2 {
width: calc((100% - var(--grid-gutter)*((12/2) - 1))/(12/2));
width: calc((100% / (12/2)) - var(--grid-gutter));
}
.col-3 {
width: calc((100% - var(--grid-gutter)*((12/3) - 1))/(12/3));
width: calc((100% / (12/3)) - var(--grid-gutter));
}
.col-4 {
width: calc((100% - var(--grid-gutter)*((12/4) - 1))/(12/4));
width: calc((100% / (12/4)) - var(--grid-gutter));
}
.col-5 {
width: calc((100% - var(--grid-gutter)*((12/5) - 1))/(12/5));
width: calc((100% / (12/5)) - var(--grid-gutter));
}
.col-6 {
width: calc((100% - var(--grid-gutter)*((12/6) - 1))/(12/6));
width: calc((100% / (12/6)) - var(--grid-gutter));
}
.col-7 {
width: calc((100% - var(--grid-gutter)*((12/7) - 1))/(12/7));
width: calc((100% / (12/7)) - var(--grid-gutter));
}
.col-8 {
width: calc((100% - var(--grid-gutter)*((12/8) - 1))/(12/8));
width: calc((100% / (12/8)) - var(--grid-gutter));
}
.col-9 {
width: calc((100% - var(--grid-gutter)*((12/9) - 1))/(12/9));
width: calc((100% / (12/9)) - var(--grid-gutter));
}
.col-10 {
width: calc((100% - var(--grid-gutter)*((12/10) - 1))/(12/10));
width: calc((100% / (12/10)) - var(--grid-gutter));
}
.col-11 {
width: calc((100% - var(--grid-gutter)*((12/11) - 1))/(12/11));
width: calc((100% / (12/11)) - var(--grid-gutter));
}
.col-12 {
width: calc((100% - var(--grid-gutter)*((12/12) - 1))/(12/12));
width: calc((100% / (12/12)) - var(--grid-gutter));
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
.col,
[class*=" col-"],
[class^='col-'] {
margin: var(--grid-gutter) 0;
width: 100%;
flex-basis: 100%;
}
}

6
src/_nav.css
View File

@ -8,11 +8,6 @@
display: flex;
}
.container > .nav {
padding-left: var(--grid-gutter);
padding-right: var(--grid-gutter);
}
.nav-center,
.nav-left,
.nav-right {
@ -53,7 +48,6 @@
display: flex;
align-items: center;
margin: 0;
font-weight: 300;
}
.nav a {