Author: Jim Winstead (jimwins)
Committer: GitHub (web-flow)
Pusher: jimwins
Date: 2024-11-26T14:13:10-08:00
Commit: Adds styling for active link in nav, plus :root CSS variables (#10) · php/web-shared@ae7e895 · GitHub
Raw diff: https://github.com/php/web-shared/commit/ae7e8958e167b9fd44025e035f0b35c6653e7a81.diff
Adds styling for active link in nav, plus :root CSS variables (#10)
Changed paths:
M styles/defaults.css
Diff:
diff --git a/styles/defaults.css b/styles/defaults.css
index 762efec..e5110e5 100644
--- a/styles/defaults.css
+++ b/styles/defaults.css
@@ -17,13 +17,25 @@
* on its own line (rather then inline-block, as is the default).
*/
+:root {
+ --font-family-sans-serif: "Fira Sans", "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ --font-family-mono: "Fira Mono", "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ --dark-grey-color: #333;
+ --dark-blue-color: #4F5B93;
+ --medium-blue-color: #7A86B8;
+ --light-blue-color: #E2E4EF;
+ --dark-magenta-color: #793862;
+ --medium-magenta-color: #AE508D;
+ --light-magenta-color: #CF82B1;
+}
+
/* {{{ Base styles */
html {
font-size:100%;
}
body {
- color: #333;
- font: normal 1rem/1.5 Tahoma, Arial, sans-serif, serif, monospace;
+ color: var(--dark-grey-color);
+ font: normal 1rem/1.5 var(--font-family-sans-serif);
background-color: #C4C9DF;
width: 100%;
overflow-y: scroll;
@@ -34,15 +46,15 @@ body, header, section, footer {
}
header {
width: 100%;
- border-bottom: 0.25em solid #4F5B93;
- background-color: #8892BF;
+ border-bottom: 0.25em solid var(--dark-blue-color);
+ background-color: var(--medium-blue-color);
box-shadow: 0 .25em .25em rgba(0,0,0,.1);
z-index: 1;
}
body footer {
- border-top: .25em solid #8892BF;
- background-color: #333;
+ border-top: .25em solid var(--dark-blue-color);
+ background-color: var(--dark-grey-color);
width: 100%;
}
nav {
@@ -67,10 +79,19 @@ nav li {
body header nav a:link,
body header nav a:visited {
display: inline-block;
- color: #E2E4EF;
+ color: var(--light-blue-color);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
text-decoration: none;
}
+header nav li.active > a {
+ box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
+}
+header nav li.active > a,
+header nav li.active > a:hover,
+header nav li.active > a:focus {
+ color: #fff;
+ background-color: var(--dark-blue-color);
+}
header nav ul a {
padding: 0 0.75em;
}
@@ -83,8 +104,8 @@ nav form {
}
nav input {
width: 100%;
- color: #333 !important;
- font: normal 1rem/1.5 "Source Sans Pro", Helvetica, Arial, sans-serif !important;
+ color: var(--dark-grey-color) !important;
+ font: normal 1rem/1.5 var(--font-family-sans-serif) !important;
text-shadow: 0 1px 0 #ffffff;
border: 0;
border-radius: 2px;
@@ -107,29 +128,29 @@ a:focus {
color:#693;
}
h1, h2, h3, h4, h5, h6, dt {
- font-family: "Source Sans Pro", Helvetica, Arial, sans-serif !important;
+ font-family: var(--font-family-sans-serif);
font-weight: bolder;
- color: #333;
+ color: var(--dark-grey-color);
padding: .375em .5em;
- border-bottom: 1px solid #C4C9DF;
+ border-bottom: 1px solid var(--medium-blue-color);
border-radius: 0 0 2px 2px;
line-height: 1.5rem;
margin:0 0 1.5rem;
}
h1 {
font-size: 1.5rem;
- background: #E2E4EF;
- border-top: 2px solid #4F5B93;
+ background: var(--light-blue-color);
+ border-top: 2px solid var(--dark-blue-color);
}
h2 {
font-size: 1.25rem;
- background: #E2E4EF;
+ background: var(--light-blue-color);
}
h3, dt {
font-size: 1.125rem;
}
dl {
- background-color: #333;
+ background-color: var(--dark-grey-color);
opacity: 0.9;
color: #fff;
}
@@ -234,17 +255,17 @@ tbody tr:nth-child(odd) {
background-color: #bbd;
}
tbody tr:nth-child(even) {
- background-color: #E2E4EF;
+ background-color: var(--light-blue-color);
}
thead tr,
tfoot tr {
background-color: #8892BF;
}
thead th {
- border-bottom: 2px solid #4F5B93;
+ border-bottom: 2px solid var(--dark-blue-color);
}
tfoot th {
- border-top: 2px solid #4F5B93;
+ border-top: 2px solid var(--dark-blue-color);
}
td,
th {
@@ -256,7 +277,7 @@ th {
/* {{{ Mega Drop Down */
#megadropdown {
display: none;
- background-color: #333;
+ background-color: var(--dark-grey-color);
height: 100%;
width: 100%;
opacity: 0.9;
@@ -289,7 +310,7 @@ th {
}
@media (max-width:40rem) {
#mainmenu-toggle-overlay {
- background: #4F5B93 url(//php.net/images/mobile-menu.png) no-repeat center center;
+ background: var(--dark-blue-color) url(//php.net/images/mobile-menu.png) no-repeat center center;
float: right;
display: block;
height: 32px;