aboutsummaryrefslogtreecommitdiffstats
path: root/src/css
diff options
context:
space:
mode:
Diffstat (limited to 'src/css')
-rwxr-xr-xsrc/css/imports/_border-radius.css190
-rwxr-xr-xsrc/css/imports/_border-widths.css24
-rw-r--r--src/css/imports/_buttons.css3
-rw-r--r--src/css/imports/_cms.css93
-rwxr-xr-xsrc/css/imports/_code.css13
-rwxr-xr-xsrc/css/imports/_colors.css4
-rwxr-xr-xsrc/css/imports/_coordinates.css64
-rwxr-xr-xsrc/css/imports/_forms.css22
-rwxr-xr-xsrc/css/imports/_heights.css8
-rwxr-xr-xsrc/css/imports/_images.css16
-rwxr-xr-xsrc/css/imports/_max-widths.css8
-rwxr-xr-xsrc/css/imports/_media-queries.css2
-rwxr-xr-xsrc/css/imports/_outlines.css11
-rwxr-xr-xsrc/css/imports/_reset.css2
-rwxr-xr-xsrc/css/imports/_spacing.css72
-rwxr-xr-xsrc/css/imports/_states.css (renamed from src/css/imports/_hovers.css)45
-rwxr-xr-xsrc/css/imports/_tables.css43
-rwxr-xr-xsrc/css/imports/_type-scale.css64
-rwxr-xr-xsrc/css/imports/_typography.css41
-rw-r--r--src/css/imports/_variables.css11
-rwxr-xr-xsrc/css/imports/_widths.css8
-rw-r--r--src/css/main.css2
22 files changed, 351 insertions, 395 deletions
diff --git a/src/css/imports/_border-radius.css b/src/css/imports/_border-radius.css
index 2422bd2..8cde05d 100755
--- a/src/css/imports/_border-radius.css
+++ b/src/css/imports/_border-radius.css
@@ -1,119 +1,89 @@
-/*
-
- BORDER RADIUS
- Docs: http://tachyons.io/docs/themes/border-radius/
-
- Base:
- br = border-radius
-
- Modifiers:
- 0 = 0/none
- 1 = 1st step in scale
- 2 = 2nd step in scale
- 3 = 3rd step in scale
- 4 = 4th step in scale
-
- Literal values:
- -100 = 100%
- -pill = 9999px
-
- Media Query Extensions:
- -ns = not-small
- -m = medium
- -l = large
-
-*/
-
- :root {
- --border-radius: .25rem;
- }
-
- .br0 { border-radius: 0; }
- .br1 { border-radius: var(--border-radius); }
- .br-100 { border-radius: 100%; }
- .br-pill { border-radius: 9999px; }
- .br--bottom {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
- .br--top {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
- .br--right {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
- .br--left {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
+.br0 { border-radius: 0!important; }
+.br1 { border-radius: var(--border-radius); }
+.br-100 { border-radius: 100%; }
+.br-pill { border-radius: 9999px; }
+.br--bottom {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+.br--top {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}
+.br--right {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.br--left {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
@media (--breakpoint-not-small) {
- .br0-ns { border-radius: 0; }
- .br1-ns { border-radius: var(--border-radius); }
- .br-100-ns { border-radius: 100%; }
- .br-pill-ns { border-radius: 9999px; }
- .br--bottom-ns {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
- .br--top-ns {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
- .br--right-ns {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
- .br--left-ns {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
+.br0-ns { border-radius: 0; }
+.br1-ns { border-radius: var(--border-radius); }
+.br-100-ns { border-radius: 100%; }
+.br-pill-ns { border-radius: 9999px; }
+.br--bottom-ns {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+.br--top-ns {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}
+.br--right-ns {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.br--left-ns {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
}
@media (--breakpoint-medium) {
- .br0-m { border-radius: 0; }
- .br1-m { border-radius: var(--border-radius); }
- .br-100-m { border-radius: 100%; }
- .br-pill-m { border-radius: 9999px; }
- .br--bottom-m {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
- .br--top-m {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
- .br--right-m {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
- .br--left-m {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
+.br0-m { border-radius: 0; }
+.br1-m { border-radius: var(--border-radius); }
+.br-100-m { border-radius: 100%; }
+.br-pill-m { border-radius: 9999px; }
+.br--bottom-m {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+.br--top-m {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}
+.br--right-m {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.br--left-m {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
}
@media (--breakpoint-large) {
- .br0-l { border-radius: 0; }
- .br1-l { border-radius: var(--border-radius); }
- .br-100-l { border-radius: 100%; }
- .br-pill-l { border-radius: 9999px; }
- .br--bottom-l {
- border-radius-top-left: 0;
- border-radius-top-right: 0;
- }
- .br--top-l {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
- .br--right-l {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
- .br--left-l {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
+.br0-l { border-radius: 0; }
+.br1-l { border-radius: var(--border-radius); }
+.br-100-l { border-radius: 100%; }
+.br-pill-l { border-radius: 9999px; }
+.br--bottom-l {
+ border-radius-top-left: 0;
+ border-radius-top-right: 0;
+}
+.br--top-l {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}
+.br--right-l {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.br--left-l {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
}
diff --git a/src/css/imports/_border-widths.css b/src/css/imports/_border-widths.css
index e3b6885..2af7d7e 100755
--- a/src/css/imports/_border-widths.css
+++ b/src/css/imports/_border-widths.css
@@ -23,9 +23,9 @@
.bw0 { border-width: 0; }
.bw1 { border-width: .125rem; }
-.bw2 { border-width: .25rem; }
-.bw3 { border-width: .5rem; }
-.bw4 { border-width: 1rem; }
+.bw2 { border-width: var(--spacing-extra-small); }
+.bw3 { border-width: var(--spacing-small); }
+.bw4 { border-width: var(--spacing-medium); }
.bw5 { border-width: 2rem; }
/* Resets */
@@ -37,9 +37,9 @@
@media (--breakpoint-not-small) {
.bw0-ns { border-width: 0; }
.bw1-ns { border-width: .125rem; }
- .bw2-ns { border-width: .25rem; }
- .bw3-ns { border-width: .5rem; }
- .bw4-ns { border-width: 1rem; }
+ .bw2-ns { border-width: var(--spacing-extra-small); }
+ .bw3-ns { border-width: var(--spacing-small); }
+ .bw4-ns { border-width: var(--spacing-medium); }
.bw5-ns { border-width: 2rem; }
.bt-0-ns { border-top-width: 0; }
.br-0-ns { border-right-width: 0; }
@@ -50,9 +50,9 @@
@media (--breakpoint-medium) {
.bw0-m { border-width: 0; }
.bw1-m { border-width: .125rem; }
- .bw2-m { border-width: .25rem; }
- .bw3-m { border-width: .5rem; }
- .bw4-m { border-width: 1rem; }
+ .bw2-m { border-width: var(--spacing-extra-small); }
+ .bw3-m { border-width: var(--spacing-small); }
+ .bw4-m { border-width: var(--spacing-medium); }
.bw5-m { border-width: 2rem; }
.bt-0-m { border-top-width: 0; }
.br-0-m { border-right-width: 0; }
@@ -63,9 +63,9 @@
@media (--breakpoint-large) {
.bw0-l { border-width: 0; }
.bw1-l { border-width: .125rem; }
- .bw2-l { border-width: .25rem; }
- .bw3-l { border-width: .5rem; }
- .bw4-l { border-width: 1rem; }
+ .bw2-l { border-width: var(--spacing-extra-small); }
+ .bw3-l { border-width: var(--spacing-small); }
+ .bw4-l { border-width: var(--spacing-medium); }
.bw5-l { border-width: 2rem; }
.bt-0-l { border-top-width: 0; }
.br-0-l { border-right-width: 0; }
diff --git a/src/css/imports/_buttons.css b/src/css/imports/_buttons.css
index 57cb4ff..effdd3b 100644
--- a/src/css/imports/_buttons.css
+++ b/src/css/imports/_buttons.css
@@ -1,7 +1,7 @@
.btn {
display: inline-block;
padding: 12px 16px 10px;
- font-size: 1rem;
+ font-size: var(--spacing-medium);
line-height: 1.25;
background-color: var(--white);
border-radius: var(--border-radius);
@@ -10,4 +10,5 @@
color: var(--primary);
text-align: center;
box-shadow: inset 0 0 0 2px var(--primary);
+ transition: var(--hover-transition);
}
diff --git a/src/css/imports/_cms.css b/src/css/imports/_cms.css
index e82565e..a259cd2 100644
--- a/src/css/imports/_cms.css
+++ b/src/css/imports/_cms.css
@@ -1,13 +1,92 @@
.cms {
- & h1, h2, h3, h4, h5, h6 {
- font-weight: bold;
+
+ /* Headings */
+ & h1, & h2, & h3, & h4, & h5, & h6 {
+ font-weight: bold;
+ line-height: 1.25;
+ margin-bottom: var(--spacing-small);
}
- & a {
+
+ & h1 {
+ font-size: 2.25rem;
+ }
+
+ & h2 {
+ font-size: 1.5rem;
+ }
+
+ & h3 {
+ font-size: 1.25rem;
+ }
+
+ & h4 {
+ font-size: 1rem;;
+ }
+
+ & h5 {
+ font-size: .875rem;
+ }
+
+ /* Links */
+ & a {
+ color: var(--primary);
+ transition: var(--hover-transition);
+ &:hover {
+ background-color: var(--highlight);
+ color: var(--black);
+ }
+ }
+
+ /* Lists */
+ & ul, & ol, & li {
+ position: relative;
+ }
+
+ & ul, & ol {
+ margin-bottom: var(--spacing-medium);
+ }
+
+ & ul ul, & ol ol {
+ padding-left: var(--spacing-small);
+ }
+
+ & ul {
+ margin-left: 1.33rem;
+ & >li:before {
+ content: '★';
+ left: -1.33rem;
+ position: absolute;
+ color: var(--primary);
+ }
+ }
+
+ & ol {
+ list-style: none;
+ margin-left: var(--spacing-medium);
+ counter-reset: i 0;
+ & >li:before {
+ font-weight: 800;
+ left: -var(--spacing-medium);
+ position: absolute;
+ height: 100%;
+ content: counter(i);
+ counter-increment: i;
+ color: var(--primary);
+ }
+ }
+
+ /* Blockquotes */
+ & blockquote {
+ background-color: var(--grey-1);
+ display: block;
+ border-radius: var(--border-radius);
+ padding: var(--spacing-medium);
color: var(--primary);
- transition: var(--hover-transition);
- &:hover {
- background-color: var(--highlight);
- color: var(--black);
+ font-weight: 700;
+ font-size: 1.25rem;;
+ margin-bottom: var(--spacing-medium);
+ & p {
+ margin: 0;
}
}
}
diff --git a/src/css/imports/_code.css b/src/css/imports/_code.css
index ac691f3..0c7c820 100755
--- a/src/css/imports/_code.css
+++ b/src/css/imports/_code.css
@@ -1,11 +1,8 @@
-/*
-
- CODE
-
-*/
-
-.pre {
+pre {
overflow-x: auto;
overflow-y: hidden;
- overflow: scroll;
+ overflow: scroll;
+ margin-bottom: var(--spacing-medium);
+ background-color: var(--grey-1);
+ padding: var(--spacing-small);
}
diff --git a/src/css/imports/_colors.css b/src/css/imports/_colors.css
index 9d09e73..7449191 100755
--- a/src/css/imports/_colors.css
+++ b/src/css/imports/_colors.css
@@ -87,8 +87,8 @@
}
.bg-fix-primary {
- padding: 0 .5rem;
+ padding: 0 var(--spacing-small);
& :first-child {
- box-shadow: .5rem 0 0 var(--primary), -.5rem 0 0 var(--primary);
+ box-shadow: var(--spacing-small) 0 0 var(--primary), -var(--spacing-small) 0 0 var(--primary);
}
}
diff --git a/src/css/imports/_coordinates.css b/src/css/imports/_coordinates.css
index bf8e6d7..53e43de 100755
--- a/src/css/imports/_coordinates.css
+++ b/src/css/imports/_coordinates.css
@@ -30,20 +30,20 @@
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
-.top-1 { top: 1rem; }
-.right-1 { right: 1rem; }
-.bottom-1 { bottom: 1rem; }
-.left-1 { left: 1rem; }
+.top-1 { top: var(--spacing-medium); }
+.right-1 { right: var(--spacing-medium); }
+.bottom-1 { bottom: var(--spacing-medium); }
+.left-1 { left: var(--spacing-medium); }
.top-2 { top: 2rem; }
.right-2 { right: 2rem; }
.bottom-2 { bottom: 2rem; }
.left-2 { left: 2rem; }
-.top--1 { top: -1rem; }
-.right--1 { right: -1rem; }
-.bottom--1 { bottom: -1rem; }
-.left--1 { left: -1rem; }
+.top--1 { top: -var(--spacing-medium); }
+.right--1 { right: -var(--spacing-medium); }
+.bottom--1 { bottom: -var(--spacing-medium); }
+.left--1 { left: -var(--spacing-medium); }
.top--2 { top: -2rem; }
.right--2 { right: -2rem; }
@@ -63,18 +63,18 @@
.left-0-ns { left: 0; }
.right-0-ns { right: 0; }
.bottom-0-ns { bottom: 0; }
- .top-1-ns { top: 1rem; }
- .left-1-ns { left: 1rem; }
- .right-1-ns { right: 1rem; }
- .bottom-1-ns { bottom: 1rem; }
+ .top-1-ns { top: var(--spacing-medium); }
+ .left-1-ns { left: var(--spacing-medium); }
+ .right-1-ns { right: var(--spacing-medium); }
+ .bottom-1-ns { bottom: var(--spacing-medium); }
.top-2-ns { top: 2rem; }
.left-2-ns { left: 2rem; }
.right-2-ns { right: 2rem; }
.bottom-2-ns { bottom: 2rem; }
- .top--1-ns { top: -1rem; }
- .right--1-ns { right: -1rem; }
- .bottom--1-ns { bottom: -1rem; }
- .left--1-ns { left: -1rem; }
+ .top--1-ns { top: -var(--spacing-medium); }
+ .right--1-ns { right: -var(--spacing-medium); }
+ .bottom--1-ns { bottom: -var(--spacing-medium); }
+ .left--1-ns { left: -var(--spacing-medium); }
.top--2-ns { top: -2rem; }
.right--2-ns { right: -2rem; }
.bottom--2-ns { bottom: -2rem; }
@@ -92,18 +92,18 @@
.left-0-m { left: 0; }
.right-0-m { right: 0; }
.bottom-0-m { bottom: 0; }
- .top-1-m { top: 1rem; }
- .left-1-m { left: 1rem; }
- .right-1-m { right: 1rem; }
- .bottom-1-m { bottom: 1rem; }
+ .top-1-m { top: var(--spacing-medium); }
+ .left-1-m { left: var(--spacing-medium); }
+ .right-1-m { right: var(--spacing-medium); }
+ .bottom-1-m { bottom: var(--spacing-medium); }
.top-2-m { top: 2rem; }
.left-2-m { left: 2rem; }
.right-2-m { right: 2rem; }
.bottom-2-m { bottom: 2rem; }
- .top--1-m { top: -1rem; }
- .right--1-m { right: -1rem; }
- .bottom--1-m { bottom: -1rem; }
- .left--1-m { left: -1rem; }
+ .top--1-m { top: -var(--spacing-medium); }
+ .right--1-m { right: -var(--spacing-medium); }
+ .bottom--1-m { bottom: -var(--spacing-medium); }
+ .left--1-m { left: -var(--spacing-medium); }
.top--2-m { top: -2rem; }
.right--2-m { right: -2rem; }
.bottom--2-m { bottom: -2rem; }
@@ -121,18 +121,18 @@
.left-0-l { left: 0; }
.right-0-l { right: 0; }
.bottom-0-l { bottom: 0; }
- .top-1-l { top: 1rem; }
- .left-1-l { left: 1rem; }
- .right-1-l { right: 1rem; }
- .bottom-1-l { bottom: 1rem; }
+ .top-1-l { top: var(--spacing-medium); }
+ .left-1-l { left: var(--spacing-medium); }
+ .right-1-l { right: var(--spacing-medium); }
+ .bottom-1-l { bottom: var(--spacing-medium); }
.top-2-l { top: 2rem; }
.left-2-l { left: 2rem; }
.right-2-l { right: 2rem; }
.bottom-2-l { bottom: 2rem; }
- .top--1-l { top: -1rem; }
- .right--1-l { right: -1rem; }
- .bottom--1-l { bottom: -1rem; }
- .left--1-l { left: -1rem; }
+ .top--1-l { top: -var(--spacing-medium); }
+ .right--1-l { right: -var(--spacing-medium); }
+ .bottom--1-l { bottom: -var(--spacing-medium); }
+ .left--1-l { left: -var(--spacing-medium); }
.top--2-l { top: -2rem; }
.right--2-l { right: -2rem; }
.bottom--2-l { bottom: -2rem; }
diff --git a/src/css/imports/_forms.css b/src/css/imports/_forms.css
index 12ee7c6..3d7cab3 100755
--- a/src/css/imports/_forms.css
+++ b/src/css/imports/_forms.css
@@ -1,9 +1,3 @@
-/*
-
- FORMS
-
-*/
-
fieldset
{
position: relative;
@@ -24,9 +18,10 @@ input, textarea {
background-color: var(--grey-2);
border-radius: var(--border-radius);
padding: 12px 16px 10px;
- font-size: 1rem;
+ font-size: var(--spacing-medium);
line-height: 1.25;
position: relative;
+ transition: var(--hover-transition);
z-index: 2;
&:focus {
background-color: var(--white);
@@ -40,25 +35,25 @@ input, textarea {
::-webkit-input-placeholder {
color: var(--black);
- font-size: 1rem;
+ font-size: var(--spacing-medium);
line-height: normal;
}
:-moz-placeholder {
color: var(--black);
- font-size: 1rem;
+ font-size: var(--spacing-medium);
line-height: normal;
}
::-moz-placeholder {
color: var(--black);
- font-size: 1rem;
+ font-size: var(--spacing-medium);
line-height: normal;
}
:-ms-input-placeholder {
color: var(--black);
- font-size: 1rem;
+ font-size: var(--spacing-medium);
line-height: normal;
}
@@ -68,10 +63,11 @@ label
font-weight: 800;
color: var(--primary);
background-color: var(--grey-2);
- border-radius: .25rem;
- padding: .25rem .5rem;
+ border-radius: var(--border-radius);
+ padding: var(--spacing-extra-small) var(--spacing-small);
position: absolute;
left: 0;
+ top: 0;
pointer-events: none;
opacity: 0;
line-height: 1;
diff --git a/src/css/imports/_heights.css b/src/css/imports/_heights.css
index 44108db..6ada204 100755
--- a/src/css/imports/_heights.css
+++ b/src/css/imports/_heights.css
@@ -33,7 +33,7 @@
/* Height Scale */
-.h1 { height: 1rem; }
+.h1 { height: var(--spacing-medium); }
.h2 { height: 2rem; }
.h3 { height: 4rem; }
.h4 { height: 8rem; }
@@ -64,7 +64,7 @@
.h-inherit { height: inherit; }
@media (--breakpoint-not-small) {
- .h1-ns { height: 1rem; }
+ .h1-ns { height: var(--spacing-medium); }
.h2-ns { height: 2rem; }
.h3-ns { height: 4rem; }
.h4-ns { height: 8rem; }
@@ -84,7 +84,7 @@
}
@media (--breakpoint-medium) {
- .h1-m { height: 1rem; }
+ .h1-m { height: var(--spacing-medium); }
.h2-m { height: 2rem; }
.h3-m { height: 4rem; }
.h4-m { height: 8rem; }
@@ -104,7 +104,7 @@
}
@media (--breakpoint-large) {
- .h1-l { height: 1rem; }
+ .h1-l { height: var(--spacing-medium); }
.h2-l { height: 2rem; }
.h3-l { height: 4rem; }
.h4-l { height: 8rem; }
diff --git a/src/css/imports/_images.css b/src/css/imports/_images.css
index 0298cea..4cc50a4 100755
--- a/src/css/imports/_images.css
+++ b/src/css/imports/_images.css
@@ -1,11 +1,7 @@
-/*
-
- IMAGES
- Docs: http://tachyons.io/docs/elements/images/
-
-*/
-
-/* Responsive images! */
-
-img { max-width: 100%; }
+img {
+ max-width: 100%;
+}
+img:not(.w-100) {
+ border-radius: var(--border-radius);
+}
diff --git a/src/css/imports/_max-widths.css b/src/css/imports/_max-widths.css
index e4175fa..516a31a 100755
--- a/src/css/imports/_max-widths.css
+++ b/src/css/imports/_max-widths.css
@@ -35,7 +35,7 @@
/* Max Width Scale */
-.mw1 { max-width: 1rem; }
+.mw1 { max-width: var(--spacing-medium); }
.mw2 { max-width: 2rem; }
.mw3 { max-width: 4rem; }
.mw4 { max-width: 8rem; }
@@ -52,7 +52,7 @@
@media (--breakpoint-not-small) {
.mw-100-ns { max-width: 100%; }
- .mw1-ns { max-width: 1rem; }
+ .mw1-ns { max-width: var(--spacing-medium); }
.mw2-ns { max-width: 2rem; }
.mw3-ns { max-width: 4rem; }
.mw4-ns { max-width: 8rem; }
@@ -68,7 +68,7 @@
@media (--breakpoint-medium) {
.mw-100-m { max-width: 100%; }
- .mw1-m { max-width: 1rem; }
+ .mw1-m { max-width: var(--spacing-medium); }
.mw2-m { max-width: 2rem; }
.mw3-m { max-width: 4rem; }
.mw4-m { max-width: 8rem; }
@@ -84,7 +84,7 @@
@media (--breakpoint-large) {
.mw-100-l { max-width: 100%; }
- .mw1-l { max-width: 1rem; }
+ .mw1-l { max-width: var(--spacing-medium); }
.mw2-l { max-width: 2rem; }
.mw3-l { max-width: 4rem; }
.mw4-l { max-width: 8rem; }
diff --git a/src/css/imports/_media-queries.css b/src/css/imports/_media-queries.css
index d3be559..872aef2 100755
--- a/src/css/imports/_media-queries.css
+++ b/src/css/imports/_media-queries.css
@@ -1,5 +1,5 @@
@custom-media --breakpoint-not-small screen and (min-width: 40em);
-@custom-media --breakpoint-medium screen and (min-width: 40em) and (max-width: 60em);
+@custom-media --breakpoint-medium screen and (min-width: 50em);
@custom-media --breakpoint-large screen and (min-width: 60em);
diff --git a/src/css/imports/_outlines.css b/src/css/imports/_outlines.css
index 9a292fd..2026e99 100755
--- a/src/css/imports/_outlines.css
+++ b/src/css/imports/_outlines.css
@@ -1,14 +1,3 @@
-/*
-
- OUTLINES
-
- Media Query Extensions:
- -ns = not-small
- -m = medium
- -l = large
-
-*/
-
.outline { outline: 1px solid; }
.outline-transparent { outline: 1px solid transparent; }
.outline-0 { outline: 0; }
diff --git a/src/css/imports/_reset.css b/src/css/imports/_reset.css
index d0a1f31..48eeccc 100755
--- a/src/css/imports/_reset.css
+++ b/src/css/imports/_reset.css
@@ -48,7 +48,7 @@ table {
}
input, textarea {
- font-size: 1rem;
+ font-size: var(--spacing-medium);
border: none;
font-family: inherit;
border: 0;
diff --git a/src/css/imports/_spacing.css b/src/css/imports/_spacing.css
index 41d4118..46ffdaa 100755
--- a/src/css/imports/_spacing.css
+++ b/src/css/imports/_spacing.css
@@ -1,51 +1,3 @@
-/* Variables */
-
-:root {
- --spacing-none: 0;
- --spacing-extra-small: .25rem;
- --spacing-small: .5rem;
- --spacing-medium: 1rem;
- --spacing-large: 2rem;
- --spacing-extra-large: 4rem;
- --spacing-extra-extra-large: 8rem;
- --spacing-extra-extra-extra-large: 16rem;
-}
-
-/*
- SPACING
- Docs: http://tachyons.io/docs/layout/spacing/
-
- An eight step powers of two scale ranging from 0 to 16rem.
-
- Base:
- p = padding
- m = margin
-
- Modifiers:
- a = all
- h = horizontal
- v = vertical
- t = top
- r = right
- b = bottom
- l = left
-
- 0 = none
- 1 = 1st step in spacing scale
- 2 = 2nd step in spacing scale
- 3 = 3rd step in spacing scale
- 4 = 4th step in spacing scale
- 5 = 5th step in spacing scale
- 6 = 6th step in spacing scale
- 7 = 7th step in spacing scale
-
- Media Query Extensions:
- -ns = not-small
- -m = medium
- -l = large
-
-*/
-
.pa0 { padding: var(--spacing-none); }
.pa1 { padding: var(--spacing-extra-small); }
.pa2 { padding: var(--spacing-small); }
@@ -276,9 +228,9 @@
margin-right: var(--spacing-extra-extra-extra-large);
}
-.mhn1 { margin-left: -.25rem; margin-right: -.25rem; }
-.mhn2 { margin-left: -.5rem; margin-right: -.5rem; }
-.mhn3 { margin-left: -1rem; margin-right: -1rem; }
+.mhn1 { margin-left: -var(--spacing-extra-small); margin-right: -var(--spacing-extra-small); }
+.mhn2 { margin-left: -var(--spacing-small); margin-right: -var(--spacing-small); }
+.mhn3 { margin-left: -var(--spacing-medium); margin-right: -var(--spacing-medium); }
@media (--breakpoint-not-small) {
.pa0-ns { padding: var(--spacing-none); }
@@ -502,9 +454,9 @@
margin-right: var(--spacing-extra-extra-extra-large);
}
- .mhn1-ns { margin-left: -.25rem; margin-right: -.25rem; }
- .mhn2-ns { margin-left: -.5rem; margin-right: -.5rem; }
- .mhn3-ns { margin-left: -1rem; margin-right: -1rem; }
+ .mhn1-ns { margin-left: -var(--spacing-extra-small); margin-right: -var(--spacing-extra-small); }
+ .mhn2-ns { margin-left: -var(--spacing-small); margin-right: -var(--spacing-small); }
+ .mhn3-ns { margin-left: -var(--spacing-medium); margin-right: -var(--spacing-medium); }
}
@@ -731,9 +683,9 @@
margin-right: var(--spacing-extra-extra-extra-large);
}
- .mhn1-m { margin-left: -.25rem; margin-right: -.25rem; }
- .mhn2-m { margin-left: -.5rem; margin-right: -.5rem; }
- .mhn3-m { margin-left: -1rem; margin-right: -1rem; }
+ .mhn1-m { margin-left: -var(--spacing-extra-small); margin-right: -var(--spacing-extra-small); }
+ .mhn2-m { margin-left: -var(--spacing-small); margin-right: -var(--spacing-small); }
+ .mhn3-m { margin-left: -var(--spacing-medium); margin-right: -var(--spacing-medium); }
}
@@ -960,7 +912,7 @@
margin-right: var(--spacing-extra-extra-extra-large);
}
- .mhn1-l { margin-left: -.25rem; margin-right: -.25rem; }
- .mhn2-l { margin-left: -.5rem; margin-right: -.5rem; }
- .mhn3-l { margin-left: -1rem; margin-right: -1rem; }
+ .mhn1-l { margin-left: -var(--spacing-extra-small); margin-right: -var(--spacing-extra-small); }
+ .mhn2-l { margin-left: -var(--spacing-small); margin-right: -var(--spacing-small); }
+ .mhn3-l { margin-left: -var(--spacing-medium); margin-right: -var(--spacing-medium); }
}
diff --git a/src/css/imports/_hovers.css b/src/css/imports/_states.css
index a10c718..f8f22a7 100755
--- a/src/css/imports/_hovers.css
+++ b/src/css/imports/_states.css
@@ -1,32 +1,29 @@
-@media (--breakpoint-large) {
- .raise {
- transform: none;
- transition: var(--hover-transition);
- }
- .raise:hover,
- .raise:focus {
- transform: translateY(-.1rem);
- transition: var(--hover-transition);
- }
- .raise:active {
- opacity: .5; transition: var(--hover-transition);
- }
+/* Focus states */
+input:focus, textarea:focus a:focus {
+ box-shadow: 0 0 0 2px var(--primary);
+ outline: 0;
}
-/*
+button:focus {
+ box-shadow: 0 0 0 4px var(--primary);
+ outline: 0;
+}
- Hide child & reveal on hover:
+.raise {
+ transition: var(--hover-transition);
+ transform: translateY(0) translateZ(0);
+}
- Put the hide-child class on a parent element and any nested element with the
- child class will be hidden and displayed on hover or focus.
+.raise:hover,
+.raise:focus {
+ transition: var(--hover-transition);
+ transform: translateY(-.12rem) translateZ(0);
+}
- <div class="hide-child">
- <div class="child"> Hidden until hover or focus </div>
- <div class="child"> Hidden until hover or focus </div>
- <div class="child"> Hidden until hover or focus </div>
- <div class="child"> Hidden until hover or focus </div>
- </div>
-*/
+.raise:active {
+ transition: var(--hover-transition);
+ opacity: .5;
+}
.hide-child .child {
opacity: 0;
diff --git a/src/css/imports/_tables.css b/src/css/imports/_tables.css
index d1f145a..ca6ca41 100755
--- a/src/css/imports/_tables.css
+++ b/src/css/imports/_tables.css
@@ -1,35 +1,30 @@
-/*
-
- TABLES
- Docs: http://tachyons.io/docs/elements/tables/
-
-*/
-
-.collapse {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-.striped--light-silver:nth-child(odd) {
- background-color: var(--light-silver);
+table
+{
+ border-radius: var(--border-radius);
+ overflow: hidden;
}
-.striped--moon-gray:nth-child(odd) {
- background-color: var(--moon-gray);
+td, th {
+ padding: $spacing-medium;
}
-.striped--light-gray:nth-child(odd) {
- background-color: var(--light-gray);
+th:not(:first-child), td:not(:first-child) {
+ text-align: right;
}
-.striped--near-white:nth-child(odd) {
- background-color: var(--near-white);
+th {
+ color: var(--grey-3);
+ font-weight: 700;
+ white-space: nowrap;
+ {
+ white-space: wrap;
+ }
}
-.stripe-light:nth-child(odd) {
- background-color: var(--white-10);
+tr th {
+ text-align: center;
}
-.stripe-dark:nth-child(odd) {
- background-color: var(--black-10);
+tbody tr:nth-child(even) {
+ background-color: var(--grey-1);
}
diff --git a/src/css/imports/_type-scale.css b/src/css/imports/_type-scale.css
index dab4aa6..dd320a5 100755
--- a/src/css/imports/_type-scale.css
+++ b/src/css/imports/_type-scale.css
@@ -1,51 +1,3 @@
-/*
-
- TYPE SCALE
- Docs: http://tachyons.io/docs/typography/scale/
-
- Base:
- f = font-size
-
- Modifiers
- 1 = 1st step in size scale
- 2 = 2nd step in size scale
- 3 = 3rd step in size scale
- 4 = 4th step in size scale
- 5 = 5th step in size scale
- 6 = 6th step in size scale
-
- Media Query Extensions:
- -ns = not-small
- -m = medium
- -l = large
-*/
-
-/*
- * For Hero/Marketing Titles
- *
- * These generally are too large for mobile
- * so be careful using them on smaller screens.
- * */
-
-html {
- font-size: 18px;
- @media (--breakpoint-medium) {
- font-size: 20px;
- }
- @media (--breakpoint-large) {
- font-size: 22px;
- }
-}
-
-
-body {
- font-size: 1rem;
- line-height: 1.5;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- background-color: var(--white);
- }
-
.f-6,
.f-headline {
font-size: 6rem;
@@ -61,8 +13,8 @@ body {
.f1 { font-size: 3rem; }
.f2 { font-size: 2.25rem; }
.f3 { font-size: 1.5rem; }
-.f4 { font-size: 1.25rem; }
-.f5 { font-size: 1rem; }
+.f4 { font-size: 1.25rem;; }
+.f5 { font-size: var(--spacing-medium); }
.f6 { font-size: .875rem; }
@media (--breakpoint-not-small) {
@@ -73,8 +25,8 @@ body {
.f1-ns { font-size: 3rem; }
.f2-ns { font-size: 2.25rem; }
.f3-ns { font-size: 1.5rem; }
- .f4-ns { font-size: 1.25rem; }
- .f5-ns { font-size: 1rem; }
+ .f4-ns { font-size: 1.25rem;; }
+ .f5-ns { font-size: var(--spacing-medium); }
.f6-ns { font-size: .875rem; }
}
@@ -86,8 +38,8 @@ body {
.f1-m { font-size: 3rem; }
.f2-m { font-size: 2.25rem; }
.f3-m { font-size: 1.5rem; }
- .f4-m { font-size: 1.25rem; }
- .f5-m { font-size: 1rem; }
+ .f4-m { font-size: 1.25rem;; }
+ .f5-m { font-size: var(--spacing-medium); }
.f6-m { font-size: .875rem; }
}
@@ -103,7 +55,7 @@ body {
.f1-l { font-size: 3rem; }
.f2-l { font-size: 2.25rem; }
.f3-l { font-size: 1.5rem; }
- .f4-l { font-size: 1.25rem; }
- .f5-l { font-size: 1rem; }
+ .f4-l { font-size: 1.25rem;; }
+ .f5-l { font-size: var(--spacing-medium); }
.f6-l { font-size: .875rem; }
}
diff --git a/src/css/imports/_typography.css b/src/css/imports/_typography.css
index 4d6fecc..3aba6ea 100755
--- a/src/css/imports/_typography.css
+++ b/src/css/imports/_typography.css
@@ -1,20 +1,41 @@
-/*
-
- TYPOGRAPHY
- http://tachyons.io/docs/typography/measure/
+html {
+ font-size: 18px;
+ @media (--breakpoint-medium) {
+ font-size: 20px;
+ }
+ @media (--breakpoint-large) {
+ font-size: 22px;
+ }
+}
- Media Query Extensions:
- -ns = not-small
- -m = medium
- -l = large
-*/
+body {
+ font-size: var(--spacing-medium);
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ background-color: var(--white);
+ }
p {
- margin-bottom: 1rem;
+ margin-bottom: var(--spacing-medium);
max-width: 32rem;
}
+strong {
+ font-weight: 800;
+}
+
+em {
+ font-style: italic;
+}
+
+sup {
+ font-size: .6rem;
+ font-weight: 700;
+ vertical-align: super;
+}
+
/* Measure is limited to ~66 characters */
.measure {
max-width: 30em;
diff --git a/src/css/imports/_variables.css b/src/css/imports/_variables.css
index f75395f..177b1c1 100644
--- a/src/css/imports/_variables.css
+++ b/src/css/imports/_variables.css
@@ -1,3 +1,14 @@
:root {
+ --border-radius: .25rem;
--hover-transition: all 150ms ease;
+
+ /* Sizing */
+ --spacing-none: 0;
+ --spacing-extra-small: .25rem;
+ --spacing-small: .5rem;
+ --spacing-medium: 1rem;
+ --spacing-large: 2rem;
+ --spacing-extra-large: 4rem;
+ --spacing-extra-extra-large: 8rem;
+ --spacing-extra-extra-extra-large: 16rem;
}
diff --git a/src/css/imports/_widths.css b/src/css/imports/_widths.css
index 54c0c7c..d02a240 100755
--- a/src/css/imports/_widths.css
+++ b/src/css/imports/_widths.css
@@ -38,7 +38,7 @@
/* Width Scale */
-.w1 { width: 1rem; }
+.w1 { width: var(--spacing-medium); }
.w2 { width: 2rem; }
.w3 { width: 4rem; }
.w4 { width: 8rem; }
@@ -64,7 +64,7 @@
.w-auto { width: auto; }
@media (--breakpoint-not-small) {
- .w1-ns { width: 1rem; }
+ .w1-ns { width: var(--spacing-medium); }
.w2-ns { width: 2rem; }
.w3-ns { width: 4rem; }
.w4-ns { width: 8rem; }
@@ -89,7 +89,7 @@
}
@media (--breakpoint-medium) {
- .w1-m { width: 1rem; }
+ .w1-m { width: var(--spacing-medium); }
.w2-m { width: 2rem; }
.w3-m { width: 4rem; }
.w4-m { width: 8rem; }
@@ -114,7 +114,7 @@
}
@media (--breakpoint-large) {
- .w1-l { width: 1rem; }
+ .w1-l { width: var(--spacing-medium); }
.w2-l { width: 2rem; }
.w3-l { width: 4rem; }
.w4-l { width: 8rem; }
diff --git a/src/css/main.css b/src/css/main.css
index c9a363a..f3709f4 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -69,7 +69,7 @@
@import './imports/_visibility';
@import './imports/_white-space';
@import './imports/_vertical-align';
-@import './imports/_hovers';
+@import './imports/_states';
@import './imports/_z-index';
@import './imports/_styles';
@import './imports/_buttons';

Want to contribute? Host your changes somewhere and send me the link: jan (at) sydanviita.fi. Also, check out my website.


forge.jan.systems — powered by cgit