/*
* main.theme.css
* Ron Newsome, Jr.
* 2023-02-01
*/
@import url('https://fonts.googleapis.com/css?family=Merriweather');
@font-face {
font-family: "Roboto Light";
src: url("/css/fonts/Roboto/Roboto-Light.ttf");
}
@font-face {
font-family: "Roboto Slab";
src: url("/css/fonts/Roboto/RobotoSlab-Thin.ttf");
}
@font-face {
font-family: "Roboto Slab";
font-weight: bold;
src: url("/css/fonts/Roboto/RobotoSlab-Regular.ttf");
}
@font-face {
font-family: "Delicious Web";
/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
src: url("/php_scripts/font/Delicious-Roman");
}
/* Default Color Definitions */
:root {
color-scheme: light dark;
--ronsome-blue: #1bbce0;
--ronsome-teal: #6db2b7;
--smoke: #333;
--tangerine: #ff8a44;
--page-bg: light-dark(#fff, #202020);
--page-color: light-dark(var(--smoke), #eee);
--page-border-color: rgb(27 188 224/10%);
--page-contrast-bg: var(--ronsome-teal);
--link-color: light-dark(var(--ronsome-blue), var(--tangerine));
--link-over-color: light-dark(var(--tangerine), var(--ronsome-blue));
--textarea-bg: light-dark(var(--page-bg), #fff3);
--textarea-color: light-dark(var(--smoke), #aaa);
--text-area-border-color: light-dark(#ccc, #fff0);
--btn-bg: var(--ronsome-teal);
--btn-color: #000
}
/* Font & Text Definitions */
:root {
--sm-font-size: 18px;
--lg-font-size: 22px;
--xl-font-size: 26px;
--textarea-font: font: 16px Junction, sans-serif;
--intro-font: var(--sm-font-size) 'Roboto Slab', serif;
--content-font: var(--sm-font-size) 'Roboto Slab', serif;
--article-font: var(--sm-font-size) 'Roboto Light', sans-serif;
--footer-text: 14px "Roboto", sans-serif;
--max-page-width: 750px;
--pad-width: 4em;
}
html, body {
min-height: 100vh;
}
body {
display: grid;
background: var(--page-bg);
color: var(--page-color);
margin: 0;
padding: 0;
grid-template-rows: 1fr auto;
}
a[href] {
color: var(--link-color);
text-decoration: none;
}
a[href]:hover {
color: var(--link-over-color);
text-decoration: underline;
}
main, footer p {
max-width: var(--max-page-width);
margin: 0 auto;
}
main header {
position: relative;
min-height: 200px;
margin: 50px auto;
}
main header a[title="ronso.me - Home"], header a[title="Home"], header a[href][title="Home"] {
display: block;
width: 216px;
height: 216px;
background: url("/images/icons/ronsome.com256.png") no-repeat center;
color: transparent;
font: 0 sans-serif;
text-decoration: none;
margin: auto;
transition: transform .2s linear;
text-decoration: none;
}
header a[title="ronso.me - Home"]:hover, header a[title="Home"]:hover {
/*opacity: 0.75;*/
color: rgba(255,255,255,0) !important;
transform: scale(1.05);
font: 0 sans-serif;
text-decoration: none;
}
main header p {
color: var(--page-color);
font: var(--intro-font);
}
main .about {
padding: 0 var(--pad-width);
}
p+p {
text-indent: 1em;
}
main .content article {
font: var(--article-font);
}
footer {
grid-row-start: 2;
grid-row-end: 3;
width: 100%;
background: var(--page-contrast-bg);
border-top: 1px solid var(--page-border-color);
}
footer p {
font: var(--footer-text);
text-align: center;
padding: 20px var(--pad-width);
}
.content {
font: var(--content-font);
margin: 20px;
}
.social {
text-align: center;
margin: auto;
}
.social a[href*="twitter"] {
background: rgb(200,200,200) url("/images/icons/social/twitter.svg") no-repeat center;
background-size: 24px !important;
border-radius: 100px;
/*background: url("/images/icons/social/twitter-round.svg") no-repeat center;*/
}
.social a[href*="mastodon"] {
background: #6364FF url("/images/icons/social/mastodon.svg") no-repeat center;
background-size: 24px !important;
border-radius: 100px;
}
.social a[href*="flickr"] {
background: url("/images/icons/social/flickr-round.svg") no-repeat center;
}
.social a[href*="rss"], .social [title^="Really Simple"] {
background: url("/images/icons/social/rss-round.svg") no-repeat center;
}
.social a[title*="GitHub"] {
background: url('data:image/svg+xml;utf8,');
}
@media (prefers-color-scheme: dark) {
.social a[title*="GitHub"] {
background: url('data:image/svg+xml;utf8,');
}
}
.social a, .social a[href] {
display: inline-block;
opacity: 0.6;
width: 32px;
height: 32px;
background-size: cover;
color: transparent;
text-decoration: none;
font: 1px sans-serif;
vertical-align: top;
margin: auto 10px;
border-radius: 20px;
padding: 6px;
transition: opacity .2s linear;
}
.social a[href]:hover, .social a:hover {
opacity: 1.0;
}
@media screen and (min-width: 700px) {
main header p, main .content p { font-size: var(--lg-font-size); }
}
@media screen and (min-width: 900px) {
main header p, main .content p { font-size: var(--xl-font-size); }
}