commit c87da36a198172895466d7ada0a52336f38a44a6
parent 29127e15b6fbdfc097840abc2dd2bd59803ee771
Author: Hugo Soucy <hugo@soucy.cc>
Date: Fri, 24 Mar 2017 06:12:27 -0400
Apply cutom properties.
Diffstat:
7 files changed, 67 insertions(+), 71 deletions(-)
diff --git a/static/dev/css/global/base.css b/static/dev/css/global/base.css
@@ -4,21 +4,15 @@ button,
input,
select,
textarea {
- color:#111111;
- font-family:"Domine",Georgia,"Times New Roman",times,serif;
+ color:var(--base-fg-color);
+ font-family:var(--fontfamily-alpha);
}
html {
- font-size:18px;
+ font-size:var(--base-fontsize);
line-height:1.5;
}
-@media screen and (min-width: 62em) {
- html {
- font-size:24px;
- }
-}
-
html,
body {
height:100%;
@@ -27,14 +21,14 @@ body {
}
body {
- background:#f1f1f1 url("http://assets.soucy.cc/images/noise.png") repeat;
+ background:var(--base-bg-color) url("http://assets.soucy.cc/images/noise.png") repeat;
}
hr {
display:block;
height:1px;
border:0;
- border-top:1px solid #111111;
+ border-top:1px solid var(--base-fg-color);
margin:1em 0;
padding:0;
}
@@ -78,22 +72,22 @@ h6,
}
a {
- border-bottom:1px dotted #0000ff;
- color:#0000ff;
+ border-bottom:1px dotted var(--base-link-color);
+ color:var(--base-link-color);
text-decoration:none;
}
a:active,
a:visited {
- border-bottom:1px dotted #111111;
- color:#111111;
+ border-bottom:1px dotted var(--base-fg-color);
+ color:var(--base-fg-color);
}
a:focus,
a:hover {
- background-color:#0000ff;
+ background-color:var(--base-link-color);
border:0;
- color:#f1f1f1;
+ color:var(--base-bg-color);
}
ol,
@@ -186,18 +180,17 @@ img {
}
code {
- background:rgba(255,255,255,0.4);
- color:#444;
+ background:var(--code-bg-color);
+ color:var(--code-fg-color);
font-size:.85rem;
}
pre {
- background:rgba(255,255,255,0.4);
+ background:var(--code-bg-color);
overflow-x:auto;
padding:.5em;
}
pre code {
- background:transparent;
+ background:transparent;
}
-
diff --git a/static/dev/css/global/grid.css b/static/dev/css/global/grid.css
@@ -1,17 +1,20 @@
/* LAYOUT & GRID */
-.layout {
+.layout {
hyphens:auto;
margin-left:auto;
margin-right:auto;
- max-width:992px;
+ max-width:var(--grid-max-width);
padding:0 .889em;
width:auto;
}
+/* 768px / 16px = 48em */
@media screen and (min-width: 48em) {
- padding:0 1.111em;
- text-align:left;
+ .layout {
+ padding:0 1.111em;
+ text-align:left;
+ }
}
.layout__vcenter {
diff --git a/static/dev/css/global/helpers.css b/static/dev/css/global/helpers.css
@@ -5,18 +5,18 @@
*/
.ir {
- background-color: transparent;
- border: 0;
- overflow: hidden;
+ background-color:transparent;
+ border:0;
+ overflow:hidden;
/* IE 6/7 fallback */
- *text-indent: -9999px;
+ *text-indent:-9999px;
}
.ir:before {
- content: "";
- display: block;
- width: 0;
- height: 150%;
+ content:"";
+ display:block;
+ width:0;
+ height:150%;
}
/*
@@ -24,8 +24,8 @@
*/
.hidden {
- display: none !important;
- visibility: hidden;
+ display:none !important;
+ visibility:hidden;
}
/*
@@ -33,29 +33,29 @@
*/
.visuallyhidden {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
+ border:0;
+ clip:rect(0 0 0 0);
+ height:1px;
+ margin:-1px;
+ overflow:hidden;
+ padding:0;
+ position:absolute;
+ width:1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
- * when navigated to via the keyboard: h5bp.com/p
+ * when navigated to via the keyboard:h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
- clip: auto;
- height: auto;
- margin: 0;
- overflow: visible;
- position: static;
- width: auto;
+ clip:auto;
+ height:auto;
+ margin:0;
+ overflow:visible;
+ position:static;
+ width:auto;
}
/*
@@ -63,7 +63,7 @@
*/
.invisible {
- visibility: hidden;
+ visibility:hidden;
}
/*
@@ -80,12 +80,12 @@
.clearfix:before,
.clearfix:after {
- content: " "; /* 1 */
- display: table; /* 2 */
+ content:" "; /* 1 */
+ display:table; /* 2 */
}
.clearfix:after {
- clear: both;
+ clear:both;
}
/*
@@ -94,7 +94,7 @@
*/
.clearfix {
- *zoom: 1;
+ *zoom:1;
}
/*Position */
diff --git a/static/dev/css/modules/cv.css b/static/dev/css/modules/cv.css
@@ -1,7 +1,7 @@
/* CURRICULUM VITAE MODULE */
.cv {
- color:#111;
+ color:var(--base-fg-color);
}
.cv__title {
@@ -19,7 +19,7 @@
.cv__title a[rel="home"] {
border:0;
- color:#111;
+ color:var(--base-fg-color);
}
.cv__banner,
diff --git a/static/dev/css/modules/logo.css b/static/dev/css/modules/logo.css
@@ -1,11 +1,11 @@
/* LOGO */
.logo {
- font:normal 3.33333em/1.1 "Leitura News","Domine",serif;
+ font:normal 3.33333em/1.1 var(--fontfamily-beta);
hyphens:none;
margin:0 0 .333em;
padding-top:.333em;
padding-right:1.08333333333em;
- text-shadow:3px 3px #ccc;
+ text-shadow:3px 3px var(--shadow-color);
}
@@ -16,6 +16,6 @@
}
.logo a[rel="home"] {
- border:0;
- color:#111;
+ border:0;
+ color:var(--base-fg-color);
}
diff --git a/static/dev/css/modules/nav.css b/static/dev/css/modules/nav.css
@@ -22,14 +22,14 @@
.nav-button:visited {
background:transparent;
border-bottom:0;
- color:#111;
+ color:var(--base-fg-color);
}
.nav__close,
.nav__close:visited {
background:transparent;
border-bottom:0;
- color:white;
+ color:var(--base-bg-color);
}
.nav-button__text,
@@ -48,21 +48,21 @@
}
.nav-button__burger {
- background:#111;
+ background:var(--base-fg-color);
}
.nav__x {
- background:#333;
+ background:var(--code-fg-color);
}
.nav-button:hover .nav-button__burger,
.nav-button:focus .nav-button__burger {
- background:#0000ff;
+ background:var(--base-link-color);
}
.nav__panel {
- background:#111;
- color:#f1f1f1;
+ background:var(--base-fg-color);
+ color:var(--base-bg-color);
}
.js .nav__panel {
@@ -119,7 +119,7 @@
.nav__link,
.nav__link:visited {
- color:white;
+ color:var(--base-bg-color);
}
.nav__link {
diff --git a/static/dev/css/modules/note.css b/static/dev/css/modules/note.css
@@ -6,7 +6,7 @@
}
.note__item {
- border-bottom:1px solid #cccccc;
+ border-bottom:1px solid var(--shadow-color);
margin-bottom:1.5em;
padding-bottom:1em;
}
