From 004798ef3961a7b52f320faf805558adc8bd01f7 Mon Sep 17 00:00:00 2001 From: Jacob Haddon Date: Mon, 21 Dec 2020 19:18:55 -0500 Subject: [PATCH] renmaed css files for clarity --- style-alpenglow.css | 301 ++++++++++++++++++++++++++++++++++++++++++++ style-blue.css | 38 +++--- style.css | 2 +- 3 files changed, 326 insertions(+), 15 deletions(-) create mode 100644 style-alpenglow.css diff --git a/style-alpenglow.css b/style-alpenglow.css new file mode 100644 index 0000000..b197ebb --- /dev/null +++ b/style-alpenglow.css @@ -0,0 +1,301 @@ +/* Dark Mode Theme */ + +@media screen and (prefers-color-scheme: dark) +{ + /* Text Colors */ + + /* + Primary Colors: + 1 #e1e1e1 Primary Text Color + 2 #21133C Darkest Main Body Area Color + 3 #271C4D Dark + 4 #381D71 Med Dark + + Accent Colors: + 1 #FC4CA0 + 2 #52FFBD + + Binary: + Either white (#FFF) or black (#000) + + Accent color 1 and 2 are used as inverse of each other thoughout the theme + */ + + /* Primary Color 1 : Text Color */ + body, + button, + input, + select, + textarea, + blockquote cite, + .wp-block-quote cite, + blockquote small, + input[type="date"]:focus, + input[type="time"]:focus, + input[type="datetime-local"]:focus, + input[type="week"]:focus, + input[type="month"]:focus, + input[type="text"]:focus, + input[type="email"]:focus, + input[type="url"]:focus, + input[type="password"]:focus, + input[type="search"]:focus, + input[type="tel"]:focus, + input[type="number"]:focus, + textarea:focus, + .main-navigation a, + .dropdown-toggle, + .social-navigation a, + .post-navigation a, + .widget-title a, + .site-branding .site-title a, + .menu-toggle, + .entry-title a, + .page-links > .page-links-title, + .pagination a:hover, + .pagination a:focus, + .comment-reply-title small a:hover, + .comment-reply-title small a:focus, + .wp-block-code { color: #e1e1e1; } + + /* Accent Color 1 */ + blockquote, + input[type="date"], + input[type="time"], + input[type="datetime-local"], + input[type="week"], + input[type="month"], + input[type="text"], + input[type="email"], + input[type="url"], + input[type="password"], + input[type="search"], + input[type="tel"], + input[type="number"], + textarea, + .post-password-form label, + a:hover, + a:focus, + a:active, + .post-navigation .meta-nav, + .image-navigation, + .comment-navigation, + .widget_recent_entries .post-date, + .widget_rss .rss-date, + .widget_rss cite, + .site-description, + .author-bio, + .entry-footer, + .entry-footer a, + .sticky-post, + .taxonomy-description, + .entry-caption, + .comment-author, + .comment-metadata, + .pingback .edit-link, + .comment-metadata a, + .pingback .comment-edit-link, + .comment-form label, + .comment-notes, + .comment-awaiting-moderation, + .logged-in-as, + .form-allowed-tags, + .site-info, + .site-info a, + .wp-caption .wp-caption-text, + .gallery-caption, + .widecolumn label, + .widecolumn .mu_register label, + a.page-numbers:hover { color: #FC4CA0; } + + /* Accent Color 2 */ + a, + .main-navigation a:hover, + .main-navigation a:focus, + .dropdown-toggle:hover, + .dropdown-toggle:focus, + .social-navigation a:hover:before, + .social-navigation a:focus:before, + .post-navigation a:hover .post-title, + .post-navigation a:focus .post-title, + .tagcloud a:hover, + .tagcloud a:focus, + .site-branding .site-title a:hover, + .site-branding .site-title a:focus, + .menu-toggle:hover, + .menu-toggle:focus, + .entry-title a:hover, + .entry-title a:focus, + .entry-footer a:hover, + .entry-footer a:focus, + .comment-metadata a:hover, + .comment-metadata a:focus, + .pingback .comment-edit-link:hover, + .pingback .comment-edit-link:focus, + .comment-reply-link, + .required, + .site-info a:hover, + .site-info a:focus, + .main-navigation li:hover > a, + .main-navigation li.focus > a { color: #52FFBD; } + + /* Binary, White or Black: color: #fff; */ + mark, + ins, + button, + button[disabled]:hover, + button[disabled]:focus, + input[type="button"], + input[type="button"][disabled]:hover, + input[type="button"][disabled]:focus, + input[type="reset"], + input[type="reset"][disabled]:hover, + input[type="reset"][disabled]:focus, + input[type="submit"], + input[type="submit"][disabled]:hover, + input[type="submit"][disabled]:focus, + .pagination .nav-links:before, + .pagination .nav-links:after, + .pagination .prev, + .pagination .next, + .pagination .prev:hover, + .pagination .prev:focus, + .pagination .next:hover, + .pagination .next:focus, + .widget_calendar tbody a, + .widget_calendar tbody a:hover, + .widget_calendar tbody a:focus, + .menu-toggle.toggled-on, + .menu-toggle.toggled-on:hover, + .menu-toggle.toggled-on:focus, + .page-links a, + .page-links a:hover, + .page-links a:focus + { + /* color: #000; */ + color: #fff; + } + + /* Back Ground Colors */ + /* Primary Color 2: Darkest */ + .main-navigation ul ul li, + input[type="date"]:focus, + input[type="time"]:focus, + input[type="datetime-local"]:focus, + input[type="week"]:focus, + input[type="month"]:focus, + input[type="text"]:focus, + input[type="email"]:focus, + input[type="url"]:focus, + input[type="password"]:focus, + input[type="search"]:focus, + input[type="tel"]:focus, + input[type="number"]:focus, + textarea:focus, + .site { background-color: #21133C; } + + /* Primary Color 3 Dark */ + body, + button, + button[disabled]:hover, + button[disabled]:focus, + input[type="button"], + input[type="button"][disabled]:hover, + input[type="button"][disabled]:focus, + input[type="reset"], + input[type="reset"][disabled]:hover, + input[type="reset"][disabled]:focus, + input[type="submit"], + input[type="submit"][disabled]:hover, + input[type="submit"][disabled]:focus, + .pagination:before, + .pagination:after, + .pagination .prev, + .pagination .next, + .menu-toggle.toggled-on, + .menu-toggle.toggled-on:hover, + .menu-toggle.toggled-on:focus, + .page-links a { background: #271C4D; } + + /* Primary color 4 Medium Dark */ + code, + hr { background: #381D71; } + + /* Primary Color 4: Inactive */ + input[type="date"], + input[type="time"], + input[type="datetime-local"], + input[type="week"], + input[type="month"], + input[type="text"], + input[type="email"], + input[type="url"], + input[type="password"], + input[type="search"], + input[type="tel"], + input[type="number"], + textarea { background: #271C4D; } + + /* Accent Color 1; */ + .widget_calendar tbody a:hover, + .widget_calendar tbody a:focus { background-color: #FC4CA0; } + + /* Accent Color 2 */ + mark, + ins, + .pagination .prev:hover, + .pagination .prev:focus, + .pagination .next:hover, + .pagination .next:focus, + button:hover, + button:focus, + input[type="button"]:hover, + input[type="button"]:focus, + input[type="reset"]:hover, + input[type="reset"]:focus, + input[type="submit"]:hover, + input[type="submit"]:focus, + .widget_calendar tbody a, + .page-links a:hover, + .page-links a:focus { background: #52FFBD; } + + /* Border Colors */ + /* Primary color 3 Dark */ + .post-navigation, + .post-navigation div + div, + .widget, + .comments-title, + .comment-reply-title { border-color: #271C4D; } + + /* Primary Color 4 */ + /* This is separate because of the 'transparent' */ + .main-navigation ul ul:before, + .main-navigation ul ul:after { border-color: #381D71 transparent; } + + /* Primary Color 4 */ + .main-navigation ul ul li, + .main-navigation ul ul { border-color: #381D71; } + + /* Accent Color 1 */ + input[type="date"]:focus, + input[type="time"]:focus, + input[type="datetime-local"]:focus, + input[type="week"]:focus, + input[type="month"]:focus, + input[type="text"]:focus, + input[type="email"]:focus, + input[type="url"]:focus, + input[type="password"]:focus, + input[type="search"]:focus, + input[type="tel"]:focus, + input[type="number"]:focus, + textarea:focus, + .tagcloud a:hover, + .tagcloud a:focus { border-color: #FC4CA0; } + + /* background-color: transparent; */ + .menu-toggle, + .menu-toggle:hover, + .menu-toggle:focus { background-color: transparent; } + body:not(.search-results) .entry-summary blockquote { border-color: currentColor; } +} \ No newline at end of file diff --git a/style-blue.css b/style-blue.css index b197ebb..bf7aadf 100644 --- a/style-blue.css +++ b/style-blue.css @@ -1,5 +1,15 @@ /* Dark Mode Theme */ +:root { + --primary1: #e1e1e1; + --primary2: #1b264d; + --primary3: #263b61; + --primary4: #13576e; + --accent1: #8b9fad; + --accent2: #FE6813; + --binary: #fff; +} + @media screen and (prefers-color-scheme: dark) { /* Text Colors */ @@ -56,7 +66,7 @@ .pagination a:focus, .comment-reply-title small a:hover, .comment-reply-title small a:focus, - .wp-block-code { color: #e1e1e1; } + .wp-block-code { color: var(--primary1); } /* Accent Color 1 */ blockquote, @@ -106,7 +116,7 @@ .gallery-caption, .widecolumn label, .widecolumn .mu_register label, - a.page-numbers:hover { color: #FC4CA0; } + a.page-numbers:hover { color: var(--accent1); } /* Accent Color 2 */ a, @@ -137,7 +147,7 @@ .site-info a:hover, .site-info a:focus, .main-navigation li:hover > a, - .main-navigation li.focus > a { color: #52FFBD; } + .main-navigation li.focus > a { color: var(--accent2); } /* Binary, White or Black: color: #fff; */ mark, @@ -173,7 +183,7 @@ .page-links a:focus { /* color: #000; */ - color: #fff; + color: var(--binary); } /* Back Ground Colors */ @@ -192,7 +202,7 @@ input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, - .site { background-color: #21133C; } + .site { background-color: var(--primary2); } /* Primary Color 3 Dark */ body, @@ -215,11 +225,11 @@ .menu-toggle.toggled-on, .menu-toggle.toggled-on:hover, .menu-toggle.toggled-on:focus, - .page-links a { background: #271C4D; } + .page-links a { background: var(--primary3);} /* Primary color 4 Medium Dark */ code, - hr { background: #381D71; } + hr { background: var(--primary4); } /* Primary Color 4: Inactive */ input[type="date"], @@ -234,11 +244,11 @@ input[type="search"], input[type="tel"], input[type="number"], - textarea { background: #271C4D; } + textarea { background: var(--primary3); } /* Accent Color 1; */ .widget_calendar tbody a:hover, - .widget_calendar tbody a:focus { background-color: #FC4CA0; } + .widget_calendar tbody a:focus { background-color: var(--accent1); } /* Accent Color 2 */ mark, @@ -257,7 +267,7 @@ input[type="submit"]:focus, .widget_calendar tbody a, .page-links a:hover, - .page-links a:focus { background: #52FFBD; } + .page-links a:focus { background: var(--accent2); } /* Border Colors */ /* Primary color 3 Dark */ @@ -265,16 +275,16 @@ .post-navigation div + div, .widget, .comments-title, - .comment-reply-title { border-color: #271C4D; } + .comment-reply-title { border-color: var(--primary3); } /* Primary Color 4 */ /* This is separate because of the 'transparent' */ .main-navigation ul ul:before, - .main-navigation ul ul:after { border-color: #381D71 transparent; } + .main-navigation ul ul:after { border-color: var(--primary4) transparent; } /* Primary Color 4 */ .main-navigation ul ul li, - .main-navigation ul ul { border-color: #381D71; } + .main-navigation ul ul { border-color: var(--primary4); } /* Accent Color 1 */ input[type="date"]:focus, @@ -291,7 +301,7 @@ input[type="number"]:focus, textarea:focus, .tagcloud a:hover, - .tagcloud a:focus { border-color: #FC4CA0; } + .tagcloud a:focus { border-color: var(--accent1); } /* background-color: transparent; */ .menu-toggle, diff --git a/style.css b/style.css index 6ee34b4..dd8495d 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,5 @@ /* - Theme Name: Haddon 2016 + Theme Name: Twenty Sixteen Dark Theme Theme URI: https://github.com/jakeosx/twenty-sixteen-child-theme Description: Twenty Sixteen Child Theme with dark mode theme; CSS arranged for easy font configuration Author: Jacob Haddon