Browse Source

Fixed <a> coloring with mixin

Set nav-bar link color. Added var names for base colors.
resume-pdf
Kevin Mok 6 years ago
parent
commit
d2a2ac9e2a
Signed by: Kevin-Mok GPG Key ID: AEA75288DC135CF5
  1. 49
      assets/sass/main.scss
  2. 1
      ideas.md
  3. 4
      layouts/partials/hero.html

49
assets/sass/main.scss

@ -2,7 +2,15 @@
$max-page-width: 52em; $max-page-width: 52em;
// rewrite with map?
$base-red: #f2777a;
$base-orange: #f99157;
$base-yellow: #ffcc66;
$base-green: #99cc99;
$base-sky-blue: #66cccc;
$base-blue: #6699cc;
$base-violet: #cc99cc;
$base-dark-orange: #d27b53;
.base00 { color: #2d2d2d; } .base00 { color: #2d2d2d; }
.base01 { color: #393939; } .base01 { color: #393939; }
.base02 { color: #515151; } .base02 { color: #515151; }
@ -11,17 +19,29 @@ $max-page-width: 52em;
.base05 { color: #d3d0c8; } .base05 { color: #d3d0c8; }
.base06 { color: #e8e6df; } .base06 { color: #e8e6df; }
.base07 { color: #f2f0ec; } .base07 { color: #f2f0ec; }
.base08 { color: #f2777a; }
.base09 { color: #f99157; }
.base0a { color: #ffcc66; }
.base0b { color: #99cc99; }
.base0c { color: #66cccc; }
.base0d { color: #6699cc; }
.base0e { color: #cc99cc; }
.base0f { color: #d27b53; }
.base08 { color: $base-red; }
.base09 { color: $base-orange; }
.base0a { color: $base-yellow; }
.base0b { color: $base-green; }
.base0c { color: $base-sky-blue; }
.base0d { color: $base-blue; }
.base0e { color: $base-violet; }
.base0f { color: $base-dark-orange; }
/* General Page Layout */ /* General Page Layout */
@mixin a-color($color) {
a {
color: $color;
&:visited {
color: $color;
}
&:active {
color: $color;
}
}
}
body { body {
margin: 0; margin: 0;
background-color: #2d2d2d; background-color: #2d2d2d;
@ -38,9 +58,7 @@ body {
margin-right: auto; margin-right: auto;
.copyright { .copyright {
#{a-tags} {
color: #747369;
}
@include a-color(#747369);
} }
@media (max-width: $max-page-width) { @media (max-width: $max-page-width) {
@ -180,12 +198,8 @@ header {
/* Footer Layout */ /* Footer Layout */
$a-tags: 'a, a:active, a:visited';
footer { footer {
#{$a-tags} {
color: #747369;
}
@include a-color(#747369);
} }
/* 404 Page Layout */ /* 404 Page Layout */
@ -275,6 +289,7 @@ h1.site-title {
.nav-bar { .nav-bar {
margin-left: .5em; margin-left: .5em;
margin-bottom: 1em; margin-bottom: 1em;
@include a-color($base-sky-blue);
} }
.hero-tagline{ .hero-tagline{

1
ideas.md

@ -8,7 +8,6 @@
- credits - credits
# Medium # Medium
- use local Docker image
# Tiny # Tiny
- click on name for base URL - click on name for base URL

4
layouts/partials/hero.html

@ -14,8 +14,8 @@
</h1> </h1>
<div class="container clearfix nav-bar"> <div class="container clearfix nav-bar">
[ <a class="path" href="{{ .Site.BaseURL }}">~</a> /
<a class="path" href="{{ .Page.Permalink }}">{{ .Page.Dir }}</a>
[ <a href="{{ .Site.BaseURL }}">~</a> /
<a href="{{ .Page.Permalink }}">{{ .Page.Dir }}</a>
] ]
<span class="caret"># _</span> <span class="caret"># _</span>

Loading…
Cancel
Save