diff options
Diffstat (limited to 'styles')
| -rw-r--r-- | styles/_alert.scss | 46 | ||||
| -rw-r--r-- | styles/_variables.scss | 37 | ||||
| -rw-r--r-- | styles/shared.scss | 52 |
3 files changed, 71 insertions, 64 deletions
diff --git a/styles/_alert.scss b/styles/_alert.scss index b0935ce..e041d4b 100644 --- a/styles/_alert.scss +++ b/styles/_alert.scss @@ -10,11 +10,14 @@ div[role="alert"] { margin-block: 1.5rem; margin-inline: 0.5rem; - border-radius: 0.5rem; + border-radius: 8px; + border: 1px solid rgba(0,0,0,0.1); + box-shadow: 0 4px 6px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.5); + //background-image: $glossyGradient; svg { - width: 1.5em; - height: 1.5em; + width: 2em; + height: 2em; margin-inline-end: 0.5rem; color: inherit; vertical-align: middle; @@ -23,43 +26,32 @@ div[role="alert"] { p { margin-block: 0; - } - - &::before { - flex-shrink: 0; - display: block; - - width: 24px; - height: 24px; - line-height: 24px; - - border-radius: 50%; - font-size: 1rem; - - text-align: center; + font-weight: 500; } } div[role="alert"].note { - background-color: $noteBackground; - color: $noteText; - box-shadow: 0 0 0 1px $noteText; + background-color: #e7f3ff; + color: #004a99; + border-color: #b3d7ff; &::before { content: "i"; - background-color: $noteText; - color: $light; + background-color: #004a99; + color: white; + box-shadow: 0 1px 2px rgba(0,0,0,0.2); } } div[role="alert"].warning { - background-color: $warningBackground; - color: $warningText; - box-shadow: 0 0 0 1px $warningText; + background-color: #fff4ce; + color: #856404; + border-color: #ffeeba; &::before { content: "!"; - background-color: $warningText; - color: $light; + background-color: #856404; + color: white; + box-shadow: 0 1px 2px rgba(0,0,0,0.2); } } diff --git a/styles/_variables.scss b/styles/_variables.scss index fba0516..7862724 100644 --- a/styles/_variables.scss +++ b/styles/_variables.scss @@ -1,26 +1,29 @@ -$titleFontStack: "Archivo Variable", "Liberation Sans", "Arial", "Helvetica", sans-serif; -$mainFontStack: "Archivo Variable", "Liberation Sans", "Arial", "Helvetica", sans-serif; -$monoFontStack: "Roboto Mono Variable", "Fira Code", "Consolas", monospace; +$titleFontStack: "Segoe UI", "Tahoma", "Geneva", "Verdana", sans-serif; +$mainFontStack: "Segoe UI", "Tahoma", "Geneva", "Verdana", sans-serif; +$monoFontStack: "Consolas", "Monaco", "Lucida Console", monospace; -$accent: hsl(209, 94%, 42%); -$accentLight: hsl(215, 90%, 60%); -$accentDark: hsl(215, 90%, 30%); -$secondary: hsl(48, 100%, 50%); -$dark: hsl(340, 13%, 5%); +$accent: hsl(210, 100%, 45%); // Classic blue +$accentLight: hsl(210, 100%, 70%); +$accentDark: hsl(210, 100%, 25%); +$secondary: hsl(35, 100%, 50%); // Glossy orange for highlights +$dark: hsl(210, 15%, 10%); -$background: hsl(210, 40%, 96%); -$backgroundDarker: hsl(210, 40%, 80%); -$light: hsl(214, 64%, 98%); -$lightAlt: hsl(0, 0%, 100%); +$background: hsl(0, 0%, 94%); +$backgroundDarker: hsl(0, 0%, 90%); +$light: white; +$lightAlt: hsl(0, 0%, 95%); -$noteBackground: hsl(210, 40%, 86%); -$noteText: hsl(210, 40%, 40%); +$noteBackground: #fffbcc; +$noteText: #5a5a22; -$warningBackground: hsl(40, 100%, 90%); -$warningText: hsl(40, 100%, 30%); +$warningBackground: #ffe6e6; +$warningText: #cc0000; -$shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); +$shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +// Web 2.0/Skeuomorphic effects +$glassBackground: rgba(255, 255, 255, 0.75); +$bevelShadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 5px rgba(0, 0, 0, 0.2); $floatingRadius: 0.5rem; $breakpointTablet: 480px; diff --git a/styles/shared.scss b/styles/shared.scss index 3f7a155..96f20c6 100644 --- a/styles/shared.scss +++ b/styles/shared.scss @@ -5,67 +5,79 @@ body { font-family: $mainFontStack; line-height: 1.65; - color: #000000; + color: $dark; + background-color: $background; } %heading { font-family: $titleFontStack; - margin-block-start: 0.75em; - margin-block-end: 0.25em; + margin-block-start: 1rem; + margin-block-end: 0.5rem; + color: $accentDark; + text-shadow: 1px 1px 0 #fff; } h1 { @extend %heading; - font-size: 3.25rem; - line-height: 1.3; - + font-size: 2.75rem; + line-height: 1.2; + border-bottom: 2px solid $accentLight; + padding-bottom: 0.5rem; + margin-bottom: 1.5rem; } h2 { @extend %heading; - font-size: 2.5rem; - line-height: 1.55; - font-variation-settings: "wdth" 87.5,"wght" 700,"GRAD" 150 + font-size: 2rem; + line-height: 1.3; } h3 { @extend %heading; - font-size: 2rem; - line-height: 1.55; + font-size: 1.5rem; + line-height: 1.3; } h4 { @extend %heading; - font-size: 1.25rem; - line-height: 1.55; + font-size: 1.2rem; + line-height: 1.3; } p { - font-variation-settings: "GRAD" -15,"wdth" 112.5; + margin-bottom: 1rem; } table { width: 100%; - border-collapse: collapse; + border-collapse: separate; + border-spacing: 0; margin-bottom: 1.5rem; + border: 1px solid #ccc; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); th, td { - border: 1px solid $accent; + border: 1px solid #ddd; padding: 0.75rem; text-align: left; } th { - font-variation-settings: "GRAD" 150,"wdth" 87.5,"wght" 700; + background: $accent; + //background-image: $glossyGradient; + color: white; + font-weight: bold; + text-shadow: 0 -1px 0 rgba(0,0,0,0.3); } tbody tr:nth-child(odd) { - background-color: color.scale($accent, $lightness: 90%); + background-color: #fff; } - th, tbody tr:nth-child(even) { - background-color: color.scale($accent, $lightness: 97%); + background-color: #f9f9f9; } } |