feat/css-cleanup #2
3 changed files with 134 additions and 15 deletions
|
@ -17,6 +17,7 @@
|
||||||
--buffalo-blue: #0b496a;
|
--buffalo-blue: #0b496a;
|
||||||
--saddle-blue: #104165;
|
--saddle-blue: #104165;
|
||||||
--brown-swiss-gray: #eaddca;
|
--brown-swiss-gray: #eaddca;
|
||||||
|
--lavender-purple: #d9c1f6;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Fonts
|
Fonts
|
||||||
|
@ -37,6 +38,10 @@ html {
|
||||||
font-family: var(--font-family-slab-serif);
|
font-family: var(--font-family-slab-serif);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: light-dark(var(--saddle-blue), var(--lavender-purple));
|
||||||
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
|
@ -52,6 +57,70 @@ nav {
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
color: light-dark(var(--brown-swiss-gray), var(--manhattan-steel-blue));
|
||||||
|
background-color: light-dark(
|
||||||
|
var(--manhattan-steel-blue),
|
||||||
|
var(--brown-swiss-gray)
|
||||||
|
);
|
||||||
|
border-radius: 0.05rem;
|
||||||
|
border-style: outset;
|
||||||
|
border-width: 0.2rem;
|
||||||
|
border-color: light-dark(
|
||||||
|
var(--manhattan-steel-blue),
|
||||||
|
var(--brown-swiss-gray)
|
||||||
|
);
|
||||||
|
min-width: 7.5rem;
|
||||||
|
max-width: 7.5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0.2rem;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0 0.2rem;
|
||||||
|
font-family: var(--font-family-system-ui);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:active {
|
||||||
|
border-style: inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover {
|
||||||
|
background-color: light-dark(
|
||||||
|
var(--buffalo-blue),
|
||||||
|
color-mix(in srgb, var(--prickly-pear-yellow), var(--brown-swiss-gray) 75%)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
border-color: light-dark(var(--eclipse-gray), var(--brown-swiss-gray));
|
||||||
|
border-width: 1.5pt;
|
||||||
|
border-style: inset;
|
||||||
|
padding: 1.25pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
light-dark(lightgray, dimgray),
|
||||||
|
color-mix(
|
||||||
|
in srgb,
|
||||||
|
light-dark(var(--brown-swiss-gray), var(--eclipse-gray)),
|
||||||
|
white 25%
|
||||||
|
)
|
||||||
|
);
|
||||||
|
border-left: 5px solid black;
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote small::before {
|
||||||
|
content: "\2014 \00A0";
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Container-type helper classes
|
Container-type helper classes
|
||||||
*/
|
*/
|
||||||
|
@ -61,6 +130,45 @@ nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Helper classes
|
||||||
|
*/
|
||||||
|
.font-small-caps {
|
||||||
|
font-variant-caps: small-caps;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-fluid {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-left {
|
||||||
|
float: none;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-right {
|
||||||
|
float: none;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Application-state helper classes
|
||||||
|
*/
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
.active {
|
||||||
|
background-color: var(--coeurdalene-purple);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.active {
|
||||||
|
color: color-mix(in srgb, var(--manhattan-steel-blue), white 75%);
|
||||||
|
background-color: color-mix(in srgb, var(--brown-swiss-gray), black 75%);
|
||||||
|
border-color: color-mix(in srgb, var(--brown-swiss-gray), black 50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Desktop screen size adjustments
|
Desktop screen size adjustments
|
||||||
*/
|
*/
|
||||||
|
@ -93,4 +201,17 @@ nav {
|
||||||
.row {
|
.row {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Helper classes
|
||||||
|
*/
|
||||||
|
.float-left {
|
||||||
|
float: left;
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-right {
|
||||||
|
float: right;
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
} /* end @media */
|
} /* end @media */
|
||||||
|
|
|
@ -41,7 +41,7 @@ menu:
|
||||||
|
|
||||||
<h2>Who am I?</h2>
|
<h2>Who am I?</h2>
|
||||||
|
|
||||||
{{% imgproc me-and-lady Resize "768x" "float-md-end w-md-50 p-3" %}}
|
{{% imgproc me-and-lady Resize "768x" "float-right" %}}
|
||||||
Image courtesy [Guy McCutcheon Photography](https://www.guymccutcheon.com/)
|
Image courtesy [Guy McCutcheon Photography](https://www.guymccutcheon.com/)
|
||||||
{{% /imgproc %}}
|
{{% /imgproc %}}
|
||||||
|
|
||||||
|
@ -74,7 +74,7 @@ Image courtesy [Guy McCutcheon Photography](https://www.guymccutcheon.com/)
|
||||||
|
|
||||||
<h2>Where am I?</h2>
|
<h2>Where am I?</h2>
|
||||||
|
|
||||||
{{% imgproc wy-in-ks Resize "768x" "float-md-start w-md-50 p-3" / %}}
|
{{% imgproc wy-in-ks Resize "768x" "float-left" / %}}
|
||||||
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
@ -127,23 +127,21 @@ Around the web you can find me at (in order of subjective importance)
|
||||||
<em>not</em> use it as fodder to try and "follow" me on each of these
|
<em>not</em> use it as fodder to try and "follow" me on each of these
|
||||||
platforms. I stand with RMS:
|
platforms. I stand with RMS:
|
||||||
</p>
|
</p>
|
||||||
<figure>
|
<blockquote>
|
||||||
<blockquote class="blockquote">
|
|
||||||
<p>
|
<p>
|
||||||
Facebook is a bad place for a person to be. When people find us on
|
Facebook is a bad place for a person to be. When people find us on
|
||||||
Facebook, we lead them away from Facebook and then talk with them
|
Facebook, we lead them away from Facebook and then talk with them
|
||||||
elsewhere.
|
elsewhere.
|
||||||
</p>
|
</p>
|
||||||
</blockquote>
|
<small>
|
||||||
<figcaption class="blockquote-footer">
|
|
||||||
Richard Stallman in
|
Richard Stallman in
|
||||||
<cite
|
<cite
|
||||||
><a href="https://stallman.org/facebook-presence.html"
|
><a href="https://stallman.org/facebook-presence.html"
|
||||||
>If you feel your organization needs a 'presence' in Facebook</a
|
>If you feel your organization needs a 'presence' in Facebook</a
|
||||||
></cite
|
></cite
|
||||||
>
|
>
|
||||||
</figcaption>
|
</small>
|
||||||
</figure>
|
</blockquote>
|
||||||
<p class="card-text">
|
<p class="card-text">
|
||||||
I typically don't respond to inqueries made on these platforms. Please use
|
I typically don't respond to inqueries made on these platforms. Please use
|
||||||
<a href="/contact">my contact form</a>, instead.
|
<a href="/contact">my contact form</a>, instead.
|
||||||
|
|
|
@ -14,9 +14,9 @@
|
||||||
{{ else }}
|
{{ else }}
|
||||||
{{ errorf "Invalid image processing command: Must be one of Crop, Fit, Fill or Resize." }}
|
{{ errorf "Invalid image processing command: Must be one of Crop, Fit, Fill or Resize." }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<figure class="figure {{ $figclass }}">
|
<figure class="{{ $figclass }}">
|
||||||
<img
|
<img
|
||||||
class="figure-img img img-fluid"
|
class="img-fluid"
|
||||||
src="{{ $img.RelPermalink }}"
|
src="{{ $img.RelPermalink }}"
|
||||||
width="{{ $img.Width }}"
|
width="{{ $img.Width }}"
|
||||||
height="{{ $img.Height }}"
|
height="{{ $img.Height }}"
|
||||||
|
|
Loading…
Reference in a new issue