ryannhg/elm-spa
1
1
Fork 0
mirror of https://github.com/ryannhg/elm-spa.git synced 2024-11-22 01:32:43 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update style.css

Browse Source
This commit is contained in:
Ryan Haskell 2024-03-12 20:18:29 -05:00 committed by GitHub
parent 33a48adbd6
commit 70ce37e3d3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 102 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
docs/public/style.css
View File

@ -16,6 +16,7 @@
--color--green: #407742; --color--green: #407742;
--color--green-dark: #264727; --color--green-dark: #264727;
--color--green-light: #d7ead8; --color--green-light: #d7ead8;
--color--blue: dodgerblue;
--size--h1: 3em; --size--h1: 3em;
--size--h2: 2em; --size--h2: 2em;
@ -31,6 +32,54 @@
--height--header: 102px; --height--header: 102px;
} }
:root {
--color--bg: var(--color--grey-100);
--color--bg-bold: var(--color--white);
--color--text: var(--color--grey-700);
--color--text-bold: var(--color--grey-700);
--color--text-faint: var(--color--grey-300);
--color--border: var(--color--grey-200);
--color--border-bold: var(--color--grey-300);
--color--outline: var(--color--blue);
--color--pre-text: var(--color--grey-100);
--color--pre-border: var(--color--grey-700);
--color--pre-bg: var(--color--grey-700);
--color--inline-code: var(--color--green);
--color--quote-border: var(--color--green);
--color--quote-bg: var(--color--bg-bold);
--color--quote-text: var(--color--grey-500);
--color--table-bg: var(--color--bg-bold);
--color--table-bg-alt: var(--color--grey-100);
--color--table-border: var(--color--border);
--color--text-100: var(--color--grey-100);
--color--text-500: var(--color--grey-500);
--color--text-700: var(--color--grey-700);
--color--primary: var(--color--green);
--color--primary-light: var(--color--green-light);
--color--bg-100: var(--color--grey-100);
--color--bg-500: var(--color--grey-500);
--color--bg-700: var(--color--grey-700);
--color--npm-hover: indianred;
--color--github-hover: mediumseagreen;
--color--elm-hover: dodgerblue;
--color--gradient-light: var(--color--green);
--color--gradient-dark: var(--color--green-dark);
--color--gradient-text: var(--color--white);
--color--gradient-inline-code: var(--color--white);
--color--shadow-05: rgba(0, 0, 0, 0.05);
--color--shadow-10: rgba(0, 0, 0, 0.10);
--color--shadow-25: rgba(0, 0, 0, 0.25);
--color--shadow-40: rgba(0, 0, 0, 0.40);
--color--shadow-50: rgba(0, 0, 0, 0.50);
--shadow: 0 4px 8px var(--color--shadow-05);
--shadow-dark: 0 0.5em 2em var(--color--shadow-25);
}
/* Resets */ /* Resets */
@ -40,8 +89,8 @@
} }
body { body {
background: var(--color--grey-100); background: var(--color--bg);
color: var(--color--grey-700); color: var(--color--text);
font-family: var(--font--body); font-family: var(--font--body);
font-weight: var(--weight--light); font-weight: var(--weight--light);
overflow-y: scroll; overflow-y: scroll;
@ -49,7 +98,7 @@ body {
} }
* { * {
outline-color: dodgerblue; outline-color: var(--color--outline);
outline-offset: 0.25em; outline-offset: 0.25em;
} }
@ -65,10 +114,10 @@ code {
pre { pre {
line-height: 1.45; line-height: 1.45;
border: solid 1px var(--color--grey-200); border: solid 1px var(--color--pre-border);
border-radius: 0.25rem; border-radius: 0.25rem;
padding: 1rem; padding: 1rem;
background-color: white; background-color: var(--color--pre-bg);
} }
.aside { .aside {
@ -184,7 +233,7 @@ hr { border: 0; }
.markdown p code, .markdown p code,
.markdown li code { .markdown li code {
font-size: 0.92em; font-size: 0.92em;
color: var(--color--green); color: var(--color--inline-code);
} }
.markdown p code::before, .markdown li code::before { content: '`'; opacity: 0.75; pointer-events: none; user-select: none; } .markdown p code::before, .markdown li code::before { content: '`'; opacity: 0.75; pointer-events: none; user-select: none; }
@ -192,11 +241,11 @@ hr { border: 0; }
.markdown blockquote { .markdown blockquote {
padding-left: 1rem; padding-left: 1rem;
border-left: solid 4px var(--color--green); border-left: solid 4px var(--color--quote-border);
background-color: var(--color--white); background-color: var(--color--quote-bg);
padding: 1rem; padding: 1rem;
box-shadow: var(--shadow); box-shadow: 0 4px 8px var(--color--shadow-05);
color: var(--color--grey-500); color: var(--color--quote-text);
} }
.markdown blockquote::before { .markdown blockquote::before {
@ -207,7 +256,7 @@ hr { border: 0; }
padding-bottom: 0.25em; padding-bottom: 0.25em;
font-weight: bold; font-weight: bold;
color: var(--color--grey-700); color: var(--color--text-bold);
font-size: 1.2em; font-size: 1.2em;
} }
@ -221,11 +270,11 @@ hr { border: 0; }
.markdown pre { .markdown pre {
position: relative; position: relative;
border-color: var(--color--grey-700); border-color: var(--color--pre-border);
box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.4); box-shadow: inset 0 0.5em 1.5em var(--color--shadow-40);
text-shadow: 0 0.125em 0.5em rgba(0, 0, 0, 0.5); text-shadow: 0 0.125em 0.5em var(--color--shadow-50);
background-color: var(--color--grey-700); background-color: var(--color--pre-bg);
color: var(--color--grey-100); color: var(--color--pre-text);
padding: 1rem; padding: 1rem;
font-size: 0.9em; font-size: 0.9em;
font-family: var(--font--monospace); font-family: var(--font--monospace);
@ -256,20 +305,20 @@ hr { border: 0; }
.markdown table { .markdown table {
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
background-color: var(--color--white); background-color: var(--color--table-bg);
border-color: var(--color--grey-200); border-color: var(--color--table-border);
font-size: 0.85em; font-size: 0.85em;
} }
.markdown tr { .markdown tr {
border-color: var(--color--grey-200); border-color: var(--color--table-border);
} }
.markdown th, .markdown th,
.markdown td { padding: 0.75em } .markdown td { padding: 0.75em }
.markdown tbody tr:nth-child(2n + 1) { .markdown tbody tr:nth-child(2n + 1) {
background-color: var(--color--grey-100); background-color: var(--color--table-bg-alt);
} }
.markdown__link:hover::after { .markdown__link:hover::after {
@ -294,18 +343,18 @@ hr { border: 0; }
/* Colors */ /* Colors */
.text-100 { color: var(--color--grey-100) } .text-100 { color: var(--color--text-100) }
.text-500 { color: var(--color--grey-500) } .text-500 { color: var(--color--text-500) }
.text-700 { color: var(--color--grey-700) } .text-700 { color: var(--color--text-700) }
.text-blue { color: var(--color--green) } .text-blue { color: var(--color--primary) }
.bg-white { background-color: var(--color--white) } .bg-white { background-color: var(--color--bg-bold) }
.bg-100 { background-color: var(--color--grey-100) } .bg-100 { background-color: var(--color--bg-100) }
.bg-500 { background-color: var(--color--grey-500) } .bg-500 { background-color: var(--color--bg-500) }
.bg-700 { background-color: var(--color--grey-700) } .bg-700 { background-color: var(--color--bg-700) }
.border-left { .border-left {
border-left: solid 3px var(--color--grey-200); border-left: solid 3px var(--color--border);
} }
.border-thin { .border-thin {
@ -314,15 +363,15 @@ hr { border: 0; }
/* Links & Buttons */ /* Links & Buttons */
.link, .underline { .link, .underline {
border-bottom: solid 2px var(--color--grey-200); border-bottom: solid 2px var(--color--border);
transition: border 200ms ease-in-out; transition: border 200ms ease-in-out;
} }
.button { .button {
padding: 0.7em 1.2em; padding: 0.7em 1.2em;
background: var(--color--white); background: var(--color--bg-bold);
border: 1px solid var(--color--grey-300); border: 1px solid var(--color--border-bold);
color: var(--color--green); color: var(--color--primary);
border-radius: 0.25em; border-radius: 0.25em;
transition: transform 200ms ease-in-out, opacity 200ms ease-in-out; transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
transform-origin: center; transform-origin: center;
@ -341,24 +390,24 @@ hr { border: 0; }
.dropdown__link:focus .underline, .dropdown__link:focus .underline,
.dropdown__link:hover .underline { .dropdown__link:hover .underline {
border-color: var(--color--green); border-color: var(--color--primary);
} }
.dropdown__link:hover, .dropdown__link:hover,
.dropdown__link:focus { .dropdown__link:focus {
background-color: var(--color--green-light); background-color: var(--color--primary-light);
} }
.dropdown__link strong { .dropdown__link strong {
color: var(--color--green); color: var(--color--primary);
} }
.markdown__link:hover { .markdown__link:hover {
border-bottom: solid 2px var(--color--grey-200); border-bottom: solid 2px var(--color--border);
} }
.link:hover, .link:focus { .link:hover, .link:focus {
border-color: var(--color--green); border-color: var(--color--primary);
} }
/* STICKY SCROLLING */ /* STICKY SCROLLING */
@ -368,7 +417,7 @@ hr { border: 0; }
left: 0; left: 0;
right: 0; right: 0;
z-index: 2; z-index: 2;
background: var(--color--grey-100); background: var(--color--bg);
} }
.header__logo { .header__logo {
@ -380,7 +429,7 @@ hr { border: 0; }
} }
.page { .page {
background-color: var(--color--grey-100); background-color: var(--color--bg);
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
@ -440,7 +489,7 @@ hr { border: 0; }
padding-right: 3.25em; padding-right: 3.25em;
padding-left: 2.75em; padding-left: 2.75em;
border: 0; border: 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1); box-shadow: 0 2px 4px var(--color--shadow-10);
} }
.search__icon { .search__icon {
@ -459,8 +508,8 @@ hr { border: 0; }
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
padding: 0.5em 0.7em; padding: 0.5em 0.7em;
box-shadow: 0 1px 4px rgba(0,0,0,0.15); box-shadow: 0 1px 4px var(--color--shadow-20);
color: var(--color--grey-300); color: var(--color--text-faint);
border-radius: 3px; border-radius: 3px;
font-family: var(--font--monospace); font-family: var(--font--monospace);
font-size: 0.75em; font-size: 0.75em;
@ -490,19 +539,19 @@ hr { border: 0; }
} }
.link__icon.fa-npm:hover { .link__icon.fa-npm:hover {
color: indianred; color: var(--color--npm-hover);
} }
.link__icon.fa-github:hover { .link__icon.fa-github:hover {
color: mediumseagreen; color: var(--color--github-hover);
} }
.link__icon.fa-elm:hover { .link__icon.fa-elm:hover {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 323.141 322.95"><g><polygon fill="dodgerblue" points="161.649,152.782 231.514,82.916 91.783,82.916"/><polygon fill="dodgerblue" points="8.867,0 79.241,70.375 232.213,70.375 161.838,0"/><rect fill="dodgerblue" x="192.99" y="107.392" transform="matrix(0.7071 0.7071 -0.7071 0.7071 186.4727 -127.2386)" width="107.676" height="108.167"/><polygon fill="dodgerblue" points="323.298,143.724 323.298,0 179.573,0"/><polygon fill="dodgerblue" points="152.781,161.649 0,8.868 0,314.432"/><polygon fill="dodgerblue" points="255.522,246.655 323.298,314.432 323.298,178.879"/><polygon fill="dodgerblue" points="161.649,170.517 8.869,323.298 314.43,323.298"/> </g> </svg>'); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 323.141 322.95"><g><polygon fill="dodgerblue" points="161.649,152.782 231.514,82.916 91.783,82.916"/><polygon fill="dodgerblue" points="8.867,0 79.241,70.375 232.213,70.375 161.838,0"/><rect fill="dodgerblue" x="192.99" y="107.392" transform="matrix(0.7071 0.7071 -0.7071 0.7071 186.4727 -127.2386)" width="107.676" height="108.167"/><polygon fill="dodgerblue" points="323.298,143.724 323.298,0 179.573,0"/><polygon fill="dodgerblue" points="152.781,161.649 0,8.868 0,314.432"/><polygon fill="dodgerblue" points="255.522,246.655 323.298,314.432 323.298,178.879"/><polygon fill="dodgerblue" points="161.649,170.517 8.869,323.298 314.43,323.298"/> </g> </svg>');
} }
.shadow { box-shadow: var(--shadow) } .shadow { box-shadow: 0 0.5em 2em var(--color--shadow-05) }
.shadow-dark { box-shadow: var(--shadow-dark);} .shadow-dark { box-shadow: 0 0.5em 2em var(--color--shadow-25); }
.rounded { border-radius: 5px; } .rounded { border-radius: 5px; }
.faint { opacity: 0.6; } .faint { opacity: 0.6; }
@ -518,16 +567,16 @@ hr { border: 0; }
} }
.home__section:nth-child(2n + 1) { .home__section:nth-child(2n + 1) {
background: linear-gradient(30deg, var(--color--green-dark), var(--color--green)); background: linear-gradient(30deg, var(--color--gradient-dark), var(--color--gradient-light));
color: var(--color--white); color: var(--color--gradient-text);
} }
.home__section:nth-child(2n + 1) code { .home__section:nth-child(2n + 1) code {
color: var(--color--white); color: var(--color--gradient-inline-code);
} }
.home__section:nth-child(2n + 1) .h2 { .home__section:nth-child(2n + 1) .h2 {
text-shadow: 0 0 0.5em rgb(0 0 0 / 25%); text-shadow: 0 0 0.5em var(--color--shadow-25);
} }
.home__section pre { .home__section pre {
@ -551,7 +600,7 @@ hr { border: 0; }
right: calc(50% + 18rem); right: calc(50% + 18rem);
width: 12em; width: 12em;
z-index: 2; z-index: 2;
filter: drop-shadow( 0 0.25rem 0.125rem rgba(0, 0, 0, .3)); filter: drop-shadow( 0 0.25rem 0.125rem var(--color--shadow-25));
} }
.home__section:nth-child(2n + 1) .home__section-icon { .home__section:nth-child(2n + 1) .home__section-icon {
@ -585,4 +634,4 @@ hr { border: 0; }
.footer__zone { .footer__zone {
padding: 8em 0; padding: 8em 0;
} }