From 0073dce3e9ce95eb1e75a08f3318ff50870dcd13 Mon Sep 17 00:00:00 2001 From: Ezequiel Bruni Date: Thu, 10 Mar 2022 00:29:29 -0600 Subject: [PATCH] Updated NewFolder --- _colors.scss | 64 +++++++-- _content-components.scss | 105 ++++++++------ _forms.scss | 20 +-- _mixins.scss | 28 +++- _navigation.scss | 11 +- _type.scss | 288 ++++++++++++++++++++------------------- 6 files changed, 303 insertions(+), 213 deletions(-) diff --git a/_colors.scss b/_colors.scss index 9f140db..3c8fdc9 100644 --- a/_colors.scss +++ b/_colors.scss @@ -1,33 +1,69 @@ + /* GLOBAL COLOR VARIABLES */ +:root { + + --primary-color: rgb(219,8,138); + + --secondary-color: rgb(117, 19, 79); + + --tertiary-color: rgb(167,218,212); -$primary-color: rgb(219,8,138) !default; + --background-color-1: rgb(229, 247, 244); -$secondary-color: desaturate(darken($primary-color, 20%), 20%) !default; + --background-color-2: rgb(46,65,72); -$tertiary-color: rgb(167,218,212) !default; + --text-color-1: rgb(46,65,72); -$light-background: lighten($tertiary-color, 20%) !default; + --text-color-2: rgb(255,255,255); + + --success-color: rgb(18, 194, 62); + + --mildwarning-color: rgb(255, 81, 0); + + --warning-color: rgba(255, 0, 0, 1); +} -$dark-background: rgb(46,65,72) !default; + // The colors for dark-mode users + @media (prefers-color-scheme: dark) { + :root { -$dark-text: rgb(46,65,72) !default; + --primary-color: rgb(245, 84, 183); -$light-text: rgb(255,255,255) !default; + --secondary-color: rgb(150, 22, 101); + + --tertiary-color: rgb(167,218,212); + + --background-color-1: rgb(37, 51, 48); + + --background-color-2: rgb(46,65,72); -$success-color: rgb(18, 194, 62) !default; + --body-background-dark: rgb(15, 18, 19); + + --text-color-1: rgb(255,255,255); + + --text-color-2: rgb(172, 202, 197); + + --success-color: rgb(18, 194, 62); + + --mildwarning-color: rgb(255, 81, 0); + + --warning-color: rgb(255, 45, 45); + } -$mildwarning-color: rgb(255, 81, 0) !default; + body { + background: var(--body-background-dark); + } -$warning-color: rgba(255, 0, 0, 1) !default; + } // Selection colors ::-moz-selection { /* Code for Firefox */ - color: $light-text; - background: $secondary-color; + color: var(--text-color-2); + background: var(--secondary-color); } ::selection { - color: $light-text; - background: $secondary-color; + color: var(--text-color-2); + background: var(--secondary-color); } \ No newline at end of file diff --git a/_content-components.scss b/_content-components.scss index 1eee676..2a7ee08 100644 --- a/_content-components.scss +++ b/_content-components.scss @@ -1,33 +1,40 @@ -/* Preformatted Text */ - -pre { - background: $dark-background; - color: $light-text; - font-size: .9rem; - padding: 1rem; - - box-shadow: inset 0px 0px .5em 0px rgba(0,0,0,0.75); -} /* Code Snippets */ code { - font-family: $monospace-font; + font-family: var(--monospace-font); + background: var(--background-color-1); + padding: .3em; + font-size: .9em; + box-shadow: inset 0px 0px .2em 0px rgba(0,0,0,0.3); + border: 1px solid var(--tertiary-color); } -pre code { - display: block; -} + p code { + font-size: var(--small-text); + } + +/* Preformatted Text and Code */ + +pre { + background: var(--background-color-2); + color: var(--text-color-2); + font-size: .9rem; + padding: 1rem; + box-shadow: inset 0px 0px .5em 0px rgba(0,0,0,0.75); -p code { - background: $light-background; - padding: .3em; - font-size: .9em; - box-shadow: inset 0px 0px .2em 0px rgba(0,0,0,0.3); + code { + display: block; + background: transparent; + border: 0px; + box-shadow: none; + } } + + /* IMAGES */ img { @@ -35,7 +42,7 @@ img { } .content img { - border-left: .5rem solid $tertiary-color; + border-left: .5rem solid var(--tertiary-color); } // Focused Images are designed to make pictures stand out a little more @@ -53,33 +60,31 @@ img { // Captioned Images .content figure { - background-color: $dark-background; - font-family: $monospace-font; + background-color: var(--background-color-2); + font-family: var(--monospace-font); img { - border: .5rem solid $dark-background; + border: .5rem solid var(--background-color-2); border-bottom: 0; } figcaption { padding: 0 .5rem .3rem .5rem; font-size: .9em; - color: $light-text; + color: var(--text-color-2); } } - - /* ALERT BOXES */ // Some general styles for alert boxes. .alert { - background-color: $light-background; + background-color: var(--background-color-1); padding: 1rem 1rem 1rem 2.5rem; - border-left: .3rem solid $tertiary-color; + border-left: .3rem solid var(--tertiary-color); background-repeat: no-repeat; background-position: -1rem -1rem; @@ -95,48 +100,68 @@ img { } a:hover { - color: $dark-background; + color: var(--background-color-2); } code { - background: $dark-background; - color: $light-text; + background: var(--background-color-2); + color: var(--text-color-2); } &.generalinfo { - border-color: $tertiary-color; + border-color: var(--tertiary-color); @include icon-search-eye; h3, h4, h5 { - color: $tertiary-color; + color: var(--text-color-1); } } &.mild { - border-color: $mildwarning-color; + border-color: var(--mildwarning-color); @include icon-warning-outline; h3, h4, h5 { - color: $mildwarning-color; + color: var(--mildwarning-color); } } &.success { - border-color: $success-color; + border-color: var(--success-color); @include icon-checkmark-filled; h3, h4, h5 { - color: $success-color; + color: var(--success-color); } } &.warning { - border-color: $warning-color; + border-color: var(--warning-color); @include icon-warning-filled; h3, h4, h5 { - color: $warning-color; + color: var(--warning-color); } } -} \ No newline at end of file +} + + @media (prefers-color-scheme: dark) { + .alert { + &.generalinfo { + @include icon-search-eye-darkmode; + } + + &.mild { + @include icon-warning-outline-darkmode; + } + + &.success { + @include icon-checkmark-filled-darkmode; + } + + &.warning { + @include icon-warning-filled-darkmode; + } + } + } \ No newline at end of file diff --git a/_forms.scss b/_forms.scss index 7846546..7148a43 100644 --- a/_forms.scss +++ b/_forms.scss @@ -7,12 +7,12 @@ margin-bottom: 1.5rem; } -// Turn every immediatechild element of the form into its own block-level element +// Turn every immediate child element of the form into its own block-level element form.content > *, .content form > * { padding: 1rem; display: block; - border-top: 1px solid $tertiary-color; + border-top: 1px solid var(--tertiary-color); } // Basic styles for the most common form elements @@ -20,7 +20,7 @@ form.content > *, .content form > * { input[type=text], input[type=number], input[type=password], input[type=file], textarea, select { display: block; box-sizing: border-box; - font-family: $monospace-font; + font-family: var(--monospace-font); } .content > label, .content form > label { @@ -32,7 +32,7 @@ input[type=text], input[type=number], input[type=password], input[type=file], te font-size: .8rem; padding: .3rem; background: white; - border: 1px solid $secondary-color; + border: 1px solid var(--secondary-color); box-shadow: inset 0px 0px .15em 0px rgba(0,0,0,0.3); border-radius: .3rem; margin-top: .5rem; @@ -47,7 +47,7 @@ input[type=text], input[type=number], input[type=password], input[type=file], te // Styles for fieldsets, checkboxes, and radio boxes .content fieldset, .content form fieldset { - border-top: 1px solid $tertiary-color; + border-top: 1px solid var(--tertiary-color); legend { font-weight: bold; @@ -59,18 +59,18 @@ input[type=checkbox], input[type=radio] { margin-right: .3rem; & + label { - font-family: $monospace-font; + font-family: var(--monospace-font); } } // Styles for submit and button elements input[type=submit], button { - background-color: $secondary-color; - border: 1px solid $dark-background; - color: $light-text; + background-color: var(--secondary-color); + border: 1px solid var(--background-color-2); + color: var(--text-color-2); border-radius: .3rem; font-size: 1em; padding: .5em; - font-family: $monospace-font; + font-family: var(--monospace-font); } \ No newline at end of file diff --git a/_mixins.scss b/_mixins.scss index 4bb0deb..4e4d927 100644 --- a/_mixins.scss +++ b/_mixins.scss @@ -6,14 +6,21 @@ // Error warning (filled) @mixin icon-warning-filled { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z' fill='rgba(0,0,0,1)'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z' fill='rgba(0,0,0,1)'/%3E%3C/svg%3E"); } +@mixin icon-warning-filled-darkmode { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z' fill='rgba(255,255,255,0.5)'/%3E%3C/svg%3E"); +} // Error warning (outline) @mixin icon-warning-outline { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm0-8h2v6h-2V7z' fill='rgba(0,0,0,1)'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm0-8h2v6h-2V7z' fill='rgba(0,0,0,1)'/%3E%3C/svg%3E"); +} + +@mixin icon-warning-outline-darkmode { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm0-8h2v6h-2V7z' fill='rgba(255,255,255,0.5)'/%3E%3C/svg%3E"); } @@ -21,9 +28,12 @@ @mixin icon-search-eye { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='36' height='36'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15zm-3.847-8.699a2 2 0 1 0 2.646 2.646 4 4 0 1 1-2.646-2.646z' fill='rgba(0,0,0,1)'/%3E%3C/svg%3E"); - } +@mixin icon-search-eye-darkmode { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='36' height='36'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15zm-3.847-8.699a2 2 0 1 0 2.646 2.646 4 4 0 1 1-2.646-2.646z' fill='rgba(255,255,255,0.5)'/%3E%3C/svg%3E"); + } + // Search icon (regular) @mixin icon-search-regular { @@ -31,8 +41,18 @@ } +@mixin icon-search-regular-darkmode { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='36' height='36'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M11 2c4.968 0 9 4.032 9 9s-4.032 9-9 9-9-4.032-9-9 4.032-9 9-9zm0 16c3.867 0 7-3.133 7-7 0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7zm8.485.071l2.829 2.828-1.415 1.415-2.828-2.829 1.414-1.414z' fill='rgba(255,255,255,0.5)'/%3E%3C/svg%3E"); +} + + // Checkmark (filled) @mixin icon-checkmark-filled { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='36' height='36'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-.997-6l7.07-7.071-1.414-1.414-5.656 5.657-2.829-2.829-1.414 1.414L11.003 16z' fill='rgba(0,0,0,1)'/%3E%3C/svg%3E"); -} \ No newline at end of file +} + + +@mixin icon-checkmark-filled-darkmode { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='36' height='36'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-.997-6l7.07-7.071-1.414-1.414-5.656 5.657-2.829-2.829-1.414 1.414L11.003 16z' fill='rgba(255,255,255,0.5)'/%3E%3C/svg%3E"); +} diff --git a/_navigation.scss b/_navigation.scss index 938c0d9..a97092a 100644 --- a/_navigation.scss +++ b/_navigation.scss @@ -1,6 +1,5 @@ /* NAVIGATION PATTERNS */ - // The Simple Navigation Bar nav { @@ -13,7 +12,7 @@ nav { // Breadcrumb Navigation nav.breadcrumb { - outline: .1rem dashed $dark-background; + outline: .1rem dashed var(--background-color-2); ul { display: flex; @@ -24,14 +23,14 @@ nav.breadcrumb { a { padding: 0rem .5rem 0rem .5rem; - font-family: $monospace-font; + font-family: var(--monospace-font); &:after { content: " ▶"; } &:hover { - color: $tertiary-color; + color: var(--tertiary-color); } } @@ -58,7 +57,7 @@ nav.accordion { label { padding: .3rem .5rem .3rem .5rem; display: block; - border-top: 2px dashed $dark-background; + border-top: 2px dashed var(--background-color-2); &:after { content: " ▼"; @@ -76,7 +75,7 @@ nav.accordion { a { display: block; padding: .3rem .5rem .3rem .5rem; - border-top: 1px dashed $secondary-color; + border-top: 1px dashed var(--secondary-color); } } } diff --git a/_type.scss b/_type.scss index cb48373..c308fd2 100644 --- a/_type.scss +++ b/_type.scss @@ -13,194 +13,204 @@ /* FONT VARIABLES */ // Make easy font changes with variables. +:root { - $body-font: 'Rubik', sans-serif; + --body-font: 'Rubik', sans-serif; - $heading-font: 'Teko', sans-serif; + --heading-font: 'Teko', sans-serif; + + --monospace-font: 'IBM Plex Mono', monospace; - $monospace-font: 'IBM Plex Mono', monospace; +} /* TYPE SCALING */ // This setup allows typefaces to change size as you make the screen wider or smaller. :root { - font-size: calc(1rem + ((1vw - 7.68px) * 0.3472)); - min-height: 0vw; + font-size: clamp(16px, calc(1rem + ((1vw - 7.68px) * 0.3472)), 20px); + min-height: 0vw; + + + + // Small text size + --small-text: 0.8em; } - @media (min-width: 1920px) { - :root { - font-size: 20px; + @media (min-width: 1920px) { + :root { + font-size: 20px; + } } - } /* Base Styles */ - body { - font-family: $body-font; - font-weight: 400; - line-height: 1.65; - color: $dark-text; - } - - p {margin-bottom: 1.15rem;} + body { + font-family: var(--body-font); + font-weight: 400; + line-height: 1.65; + color: var(--text-color-1); + } + + p {margin-bottom: 1.15rem;} - strong { - font-weight: 700; - } + strong { + font-weight: 700; + } - em { - font-style: italic; - } + em { + font-style: italic; + } - /* HEADINGS */ + /* HEADINGS */ - h1, h2, h3, h4, h5, h6 { - font-family: $heading-font; - font-weight: normal; - margin: 1.05rem 0 1.05rem; - line-height: 1.15; - } - - h1 { - margin-top: 0; - font-size: 2.488em; - } - - h2 {font-size: 2.074em;} - - h3 {font-size: 1.728em;} - - h4 {font-size: 1.44em;} - - h5 {font-size: 1.2em;} + h1, h2, h3, h4, h5, h6 { + font-family: var(--heading-font); + font-weight: normal; + margin: 1.05rem 0 1.05rem; + line-height: 1.15; + } + + h1 { + margin-top: 0; + font-size: 2.488em; + } + + h2 {font-size: 2.074em;} + + h3 {font-size: 1.728em;} + + h4 {font-size: 1.44em;} + + h5 {font-size: 1.2em;} - small, .text_small {font-size: 0.9em;} + small, .text_small { + font-size: var(--small-text); + } /* GENERAL ALIGNMENTS */ - p, - ul, - ol, - pre, - table, - blockquote { - margin-top: 0em; - margin-bottom: 1.5em; - } - - ul ul, - ol ol, - ul ol, - ol ul { - margin-top: 0em; - margin-bottom: 0em; - } - - hr, - .hr { - border: 1px solid; - margin: -1px 0; - } - - sub, - sup { - line-height: 0; - position: relative; - vertical-align: baseline; - } - - sup { - top: -0.5em; - } - - sub { - bottom: -0.25em; - } - + p, + ul, + ol, + pre, + table, + blockquote { + margin-top: 0em; + margin-bottom: 1.5em; + } -/* LISTS */ + ul ul, + ol ol, + ul ol, + ol ul { + margin-top: 0em; + margin-bottom: 0em; + } - // All lists placed in a body of text (such as an article) must be wrapped in any element with the .content class. ie
+ hr, + .hr { + border: 1px solid; + margin: -1px 0; + } - // Nice, simple styling for unordered lists. + sub, + sup { + line-height: 0; + position: relative; + vertical-align: baseline; + } - .content ul { - list-style: circle; - padding-left: 1.5em; + sup { + top: -0.5em; + } - li { - p:last-child { - margin: 0 !important; - } + sub { + bottom: -0.25em; } - } - // More complex styling for ordered lists, so I can style the numbers however I like. Based on a snippet by Roger Johansson. - https://www.456bereastreet.com - .content { +/* LISTS */ - ol { - counter-reset:li; /* Initiate a counter */ - margin-left:0; /* Remove the default left margin */ - padding-left:0; /* Remove the default left padding */ - } - ol > li { - position:relative; /* Create a positioning context */ - margin:0 0 .5em 2em; /* Give each list item a left margin to make room for the numbers */ + // All lists placed in a body of text (such as an article) must be wrapped in any element with the .content class. ie
- list-style:none; /* Disable the normal item numbering */ + // Nice, simple styling for unordered lists. - p:last-child { - margin: 0 !important; - } + .content ul { + list-style: circle; + padding-left: 1.5em; + li { + p:last-child { + margin: 0 !important; + } + } } - ol > li:before { - content:counter(li); /* Use the counter as content */ - counter-increment:li; /* Increment the counter by 1 */ - /* Position and style the number */ - position:absolute; - top:-2px; - left:-2em; - width: 1.3em; - font-weight:bold; - text-align:center; - padding: .15em; - background-color: $light-background; - font-family: $monospace-font; - } + // More complex styling for ordered lists, so I can style the numbers however I like. Based on a snippet by Roger Johansson. - https://www.456bereastreet.com - ol ol li:last-child {margin-bottom:0;} -} + .content { + + ol { + counter-reset:li; /* Initiate a counter */ + margin-left:0; /* Remove the default left margin */ + padding-left:0; /* Remove the default left padding */ + } + ol > li { + position:relative; /* Create a positioning context */ + margin:0 0 .5em 2em; /* Give each list item a left margin to make room for the numbers */ + + list-style:none; /* Disable the normal item numbering */ + + p:last-child { + margin: 0 !important; + } + + } + ol > li:before { + content:counter(li); /* Use the counter as content */ + counter-increment:li; /* Increment the counter by 1 */ + /* Position and style the number */ + position:absolute; + top:-2px; + left:-2em; + width: 1.3em; + font-weight:bold; + text-align:center; + padding: .15em; + + background-color: var(--background-color-1); + font-family: var(--monospace-font); + } + + ol ol li:last-child {margin-bottom:0;} + } /* LINKS */ - a { - color: $primary-color; + a { + color: var(--primary-color); - &:hover { - color: $secondary-color; + &:hover { + color: var(--secondary-color); + } } - } /* BLOCKQUOTE */ - blockquote { - margin-left: 3em; - font-family: $monospace-font; - font-size: 1.1em; + blockquote { + margin-left: 3em; + font-family: var(--monospace-font); + font-size: 1.1em; - p { - margin: 0px; + p { + margin: 0px; + } } - } /* SUP & SUB */ - sup, sub { - font-size: .7em; - } \ No newline at end of file + sup, sub { + font-size: .7em; + } \ No newline at end of file