From e537180226be7d7503c07193af62f787c4cf935e Mon Sep 17 00:00:00 2001 From: Maria Raykova Date: Sun, 8 Mar 2020 17:22:46 -0400 Subject: [PATCH] finished subtle anim using scss --- css/midterm.css | 895 +++++++++++++++++++++++++++++----------------- css/midterm.map | 12 + midterm.html | 27 ++ scss/midterm.scss | 21 +- 4 files changed, 606 insertions(+), 349 deletions(-) create mode 100644 css/midterm.map diff --git a/css/midterm.css b/css/midterm.css index 304f0ac..c134b54 100644 --- a/css/midterm.css +++ b/css/midterm.css @@ -9,14 +9,14 @@ ========================================================================== Base styles: opinionated defaults - ========================================================================== */ - -html { - color: #222; - font-size: 1em; - line-height: 1.4; -} - + ========================================================================== */ +/* line 14, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +html { + color: #222; + font-size: 1em; + line-height: 1.4; +} + /* * Remove text-shadow in selection highlight: * https://twitter.com/miketaylr/status/12228805301 @@ -25,235 +25,452 @@ html { * https://stackoverflow.com/a/16982510/7133471 * * Customize the background color to match your design. - */ - -::-moz-selection { - background: #b3d4fc; - text-shadow: none; -} - -::selection { - background: #b3d4fc; - text-shadow: none; -} - + */ +/* line 30, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +::-moz-selection { + background: #b3d4fc; + text-shadow: none; +} + +/* line 35, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +::selection { + background: #b3d4fc; + text-shadow: none; +} + /* * A better looking default horizontal rule - */ - -hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; - padding: 0; -} - + */ +/* line 44, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + /* * Remove the gap between audio, canvas, iframes, * images, videos and the bottom of their containers: * https://github.com/h5bp/html5-boilerplate/issues/440 - */ - -audio, -canvas, -iframe, -img, -svg, -video { - vertical-align: middle; -} - + */ +/* line 59, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: middle; +} + /* * Remove default fieldset styles. - */ - -fieldset { - border: 0; - margin: 0; - padding: 0; -} - + */ +/* line 72, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +fieldset { + border: 0; + margin: 0; + padding: 0; +} + /* * Allow only vertical resizing of textareas. - */ - -textarea { - resize: vertical; -} - + */ +/* line 82, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +textarea { + resize: vertical; +} + /* ========================================================================== Browser Upgrade Prompt - ========================================================================== */ - -.browserupgrade { - margin: 0.2em 0; - background: #ccc; - color: #000; - padding: 0.2em 0; -} - + ========================================================================== */ +/* line 90, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.browserupgrade { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + /* ========================================================================== Author's custom styles - ========================================================================== */ - -body { - background-color: black; -} - -#body-wrapper { - font-family: sans-serif; /* choose a better font */ - margin: 0 auto; - max-width: 750px; - text-align: center; -} - -header { - background-color: white; - display: flex; - flex-direction: column; - justify-content: center; -} - -ul, ol { - text-align: left; - margin-left: 10%; - margin-right: 10%; -} - -.copy { - padding: 10px 50px; - display: flex; - flex-direction: column; - justify-content: space-around; -} - -.particle-wrapper { - height: 400px; - display: grid; - grid-template-columns: 1fr; - grid-template-rows: 1fr auto 1fr; -} - -.particle-wrapper p { - grid-row: 2/3; - grid-column: 1/2; -} - -.particle-container { - overflow: hidden; - height: 100%; - grid-row: 1/4; - grid-column: 1/2; - position: relative; -} - -.particle-temp { - position: absolute; - border-radius: 50%; - margin: 15px; -} - -@keyframes blur_fade { - 0% { - height: 2px; - width: 2px; - opacity: 0; - } - 20% { - filter: blur(0.2); - opacity: 0.3; - } - 100% { - height: 40px; - width: 40px; - filter: blur(3px); - opacity: 0; - } -} - -@keyframes circle { - 0% { - transform-origin: -10px -10px; - transform: rotate(0deg); - } - 100% { - transform-origin: -10px -10px; - transform: rotate(360deg); - } -} - -.particle-temp:nth-child(1) { - top: 50px; - left: 50px; - animation-delay: 0s; - background: white; - animation: - blur_fade 20s ease infinite, - circle 5s linear infinite; -} - -.particle-temp:nth-child(2) { - top: 100px; - left: 50px; - background: white; - animation: - blur_fade 20s ease infinite, - circle 6.5s linear infinite; - animation-delay: -8s; -} - -.particle-temp:nth-child(3) { - top: 200px; - left: 50px; - animation-delay: 8s; - background: white; - animation: - blur_fade 20s ease infinite, - circle 8s linear infinite; -} - - -#subtle { - background-color: pink; -} - -#fireworks { - background-color: seashell; -} - -#info1 { - background-color: lemonchiffon; -} - -#info2 { - background-color: aliceblue; -} - -#info3 { - background-color: pink; -} - - - - - - - - + ========================================================================== */ +/* line 102, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +body { + background-color: black; +} + +/* line 106, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +#body-wrapper { + font-family: sans-serif; + /* choose a better font */ + margin: 0 auto; + max-width: 750px; + text-align: center; +} + +/* line 113, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +header { + background-color: white; + display: flex; + flex-direction: column; + justify-content: center; +} + +/* line 120, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +ul, ol { + text-align: left; + margin-left: 10%; + margin-right: 10%; +} + +/* line 126, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.copy { + padding: 10px 50px; + display: flex; + flex-direction: column; + justify-content: space-around; +} + +/* line 133, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-wrapper { + height: 400px; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr auto 1fr; +} + +/* line 140, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-wrapper p { + grid-row: 2/3; + grid-column: 1/2; +} + +/* line 145, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-container { + overflow: hidden; + height: 100%; + grid-row: 1/4; + grid-column: 1/2; + position: relative; +} + +/* line 153, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp { + position: absolute; + border-radius: 50%; + margin: 15px; + background: white; +} + +@keyframes blur_fade { + 0% { + height: 2px; + width: 2px; + opacity: 0; + } + 20% { + filter: blur(0.2); + opacity: 0.3; + } + 100% { + height: 40px; + width: 40px; + filter: blur(3px); + opacity: 0; + } +} + +@keyframes circle { + 0% { + transform-origin: -10px -10px; + transform: rotate(0deg); + } + 100% { + transform-origin: -10px -10px; + transform: rotate(360deg); + } +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(1) { + top: 150px; + left: 50px; + animation: blur_fade 20s ease infinite alternate, circle 10s linear infinite; + animation-delay: 13s, 3s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(2) { + top: 350px; + left: 550px; + animation: blur_fade 20s ease infinite alternate, circle 7s linear infinite; + animation-delay: 10s, 3s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(3) { + top: 100px; + left: 450px; + animation: blur_fade 20s ease infinite alternate, circle 5s linear infinite; + animation-delay: 1s, 3s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(4) { + top: 200px; + left: 600px; + animation: blur_fade 20s ease infinite alternate, circle 7s linear infinite; + animation-delay: 10s, 3s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(5) { + top: 250px; + left: 550px; + animation: blur_fade 20s ease infinite alternate, circle 6s linear infinite; + animation-delay: 11s, 4s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(6) { + top: 250px; + left: 400px; + animation: blur_fade 20s ease infinite alternate, circle 10s linear infinite; + animation-delay: 13s, 2s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(7) { + top: 100px; + left: 300px; + animation: blur_fade 20s ease infinite alternate, circle 10s linear infinite; + animation-delay: 0s, 2s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(8) { + top: 250px; + left: 250px; + animation: blur_fade 20s ease infinite alternate, circle 10s linear infinite; + animation-delay: 5s, 2s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(9) { + top: 400px; + left: 550px; + animation: blur_fade 20s ease infinite alternate, circle 9s linear infinite; + animation-delay: 12s, 4s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(10) { + top: 350px; + left: 50px; + animation: blur_fade 20s ease infinite alternate, circle 9s linear infinite; + animation-delay: 12s, 3s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(11) { + top: 200px; + left: 450px; + animation: blur_fade 20s ease infinite alternate, circle 9s linear infinite; + animation-delay: 9s, 3s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(12) { + top: 400px; + left: 200px; + animation: blur_fade 20s ease infinite alternate, circle 6s linear infinite; + animation-delay: 10s, 1s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(13) { + top: 400px; + left: 600px; + animation: blur_fade 20s ease infinite alternate, circle 7s linear infinite; + animation-delay: 4s, 3s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(14) { + top: 200px; + left: 100px; + animation: blur_fade 20s ease infinite alternate, circle 7s linear infinite; + animation-delay: 14s, 0s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(15) { + top: 250px; + left: 600px; + animation: blur_fade 20s ease infinite alternate, circle 9s linear infinite; + animation-delay: 0s, 4s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(16) { + top: 50px; + left: 300px; + animation: blur_fade 20s ease infinite alternate, circle 8s linear infinite; + animation-delay: 11s, 1s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(17) { + top: 300px; + left: 400px; + animation: blur_fade 20s ease infinite alternate, circle 10s linear infinite; + animation-delay: 10s, 4s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(18) { + top: 300px; + left: 500px; + animation: blur_fade 20s ease infinite alternate, circle 9s linear infinite; + animation-delay: 10s, 4s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(19) { + top: 350px; + left: 600px; + animation: blur_fade 20s ease infinite alternate, circle 9s linear infinite; + animation-delay: 14s, 4s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(20) { + top: 200px; + left: 100px; + animation: blur_fade 20s ease infinite alternate, circle 5s linear infinite; + animation-delay: 15s, 4s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(21) { + top: 200px; + left: 200px; + animation: blur_fade 20s ease infinite alternate, circle 5s linear infinite; + animation-delay: 7s, 4s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(22) { + top: 100px; + left: 250px; + animation: blur_fade 20s ease infinite alternate, circle 6s linear infinite; + animation-delay: 5s, 3s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(23) { + top: 300px; + left: 450px; + animation: blur_fade 20s ease infinite alternate, circle 9s linear infinite; + animation-delay: 4s, 4s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(24) { + top: 200px; + left: 350px; + animation: blur_fade 20s ease infinite alternate, circle 9s linear infinite; + animation-delay: 7s, 1s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(25) { + top: 200px; + left: 150px; + animation: blur_fade 20s ease infinite alternate, circle 9s linear infinite; + animation-delay: 12s, 2s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(26) { + top: 250px; + left: 500px; + animation: blur_fade 20s ease infinite alternate, circle 5s linear infinite; + animation-delay: 13s, 2s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(27) { + top: 250px; + left: 650px; + animation: blur_fade 20s ease infinite alternate, circle 10s linear infinite; + animation-delay: 14s, 3s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(28) { + top: 200px; + left: 50px; + animation: blur_fade 20s ease infinite alternate, circle 10s linear infinite; + animation-delay: 0s, 3s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(29) { + top: 250px; + left: 250px; + animation: blur_fade 20s ease infinite alternate, circle 6s linear infinite; + animation-delay: 1s, 4s; +} + +/* line 191, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.particle-temp:nth-child(30) { + top: 300px; + left: 700px; + animation: blur_fade 20s ease infinite alternate, circle 8s linear infinite; + animation-delay: 15s, 4s; +} + +/* line 202, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +#subtle { + background-color: pink; +} + +/* line 206, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +#fireworks { + background-color: seashell; +} + +/* line 210, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +#info1 { + background-color: lemonchiffon; +} + +/* line 214, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +#info2 { + background-color: aliceblue; +} + +/* line 218, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +#info3 { + background-color: pink; +} + /* ========================================================================== Helper classes - ========================================================================== */ - + ========================================================================== */ /* * Hide visually and from screen readers - */ - -.hidden { - display: none !important; -} - + */ +/* line 237, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.hidden { + display: none !important; +} + /* * Hide only visually, but have it available for screen readers: * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility @@ -261,46 +478,46 @@ ul, ol { * 1. For long content, line feeds are not interpreted as spaces and small width * causes content to wrap 1 word per line: * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe -*/ - -.sr-only { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - /* 1 */ -} - +*/ +/* line 250, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.sr-only { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + /* 1 */ +} + /* * Extends the .sr-only class to allow the element * to be focusable when navigated to via the keyboard: * https://www.drupal.org/node/897638 -*/ - -.sr-only.focusable:active, -.sr-only.focusable:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: static; - white-space: inherit; - width: auto; -} - +*/ +/* line 269, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.sr-only.focusable:active, +.sr-only.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + white-space: inherit; + width: auto; +} + /* * Hide visually and from screen readers, but maintain layout -*/ - -.invisible { - visibility: hidden; -} - +*/ +/* line 284, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.invisible { + visibility: hidden; +} + /* * Clearfix: contain floats * @@ -311,99 +528,107 @@ ul, ol { * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. -*/ - -.clearfix:before, -.clearfix:after { - content: " "; - /* 1 */ - display: table; - /* 2 */ -} - -.clearfix:after { - clear: both; -} - +*/ +/* line 300, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.clearfix:before, +.clearfix:after { + content: " "; + /* 1 */ + display: table; + /* 2 */ +} + +/* line 308, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ +.clearfix:after { + clear: both; +} + /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. - ========================================================================== */ - -@media only screen and (min-width: 35em) { - /* Style adjustments for viewports that meet the condition */ -} - -@media print, - (-webkit-min-device-pixel-ratio: 1.25), - (min-resolution: 1.25dppx), - (min-resolution: 120dpi) { - /* Style adjustments for high resolution devices */ -} - + ========================================================================== */ +@media only screen and (min-width: 35em) { + /* Style adjustments for viewports that meet the condition */ +} + +@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) { + /* Style adjustments for high resolution devices */ +} + /* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: https://www.phpied.com/delay-loading-your-print-css/ - ========================================================================== */ - -@media print { - *, - *:before, - *:after { - background: transparent !important; - color: #000 !important; - /* Black prints faster */ - box-shadow: none !important; - text-shadow: none !important; - } - a, - a:visited { - text-decoration: underline; - } - a[href]:after { - content: " (" attr(href) ")"; - } - abbr[title]:after { - content: " (" attr(title) ")"; - } + ========================================================================== */ +@media print { + /* line 336, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ + *, + *:before, + *:after { + background: transparent !important; + color: #000 !important; + /* Black prints faster */ + box-shadow: none !important; + text-shadow: none !important; + } + /* line 345, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ + a, + a:visited { + text-decoration: underline; + } + /* line 349, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ + a[href]:after { + content: " (" attr(href) ")"; + } + /* line 352, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ + abbr[title]:after { + content: " (" attr(title) ")"; + } /* * Don't show links that are fragment identifiers, * or use the `javascript:` pseudo protocol - */ - a[href^="#"]:after, - a[href^="javascript:"]:after { - content: ""; - } - pre { - white-space: pre-wrap !important; - } - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } + */ + /* line 359, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } + /* line 363, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ + pre { + white-space: pre-wrap !important; + } + /* line 366, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } /* * Printing Tables: * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables - */ - thead { - display: table-header-group; - } - tr, - img { - page-break-inside: avoid; - } - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - h2, - h3 { - page-break-after: avoid; - } -} - + */ + /* line 375, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ + thead { + display: table-header-group; + } + /* line 378, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ + tr, + img { + page-break-inside: avoid; + } + /* line 382, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + /* line 388, ../../../../../Users/mariaraykova/Library/Mobile Documents/com~apple~CloudDocs/MFA_Coursework/5470_Adv_Web_Design/Projects/dmd5470-mr/scss/midterm.scss */ + h2, + h3 { + page-break-after: avoid; + } +} + +/*# sourceMappingURL=midterm.css.map */ \ No newline at end of file diff --git a/css/midterm.map b/css/midterm.map new file mode 100644 index 0000000..bc23c2d --- /dev/null +++ b/css/midterm.map @@ -0,0 +1,12 @@ +{ + "version": 3, + "file": "midterm.css", + "sources": [ + "../scss/midterm.scss" + ], + "sourcesContent": [ + "/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ \n\n * main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme \n\n * What follows is the result of much research on cross-browser styling.\n * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,\n * Kroc Camen, and the H5BP dev community and team.\n \n\n==========================================================================\n Base styles: opinionated defaults\n ========================================================================== */\n\nhtml {\n color: #222;\n font-size: 1em;\n line-height: 1.4;\n}\n\n/*\n * Remove text-shadow in selection highlight:\n * https://twitter.com/miketaylr/status/12228805301\n *\n * Vendor-prefixed and regular ::selection selectors cannot be combined:\n * https://stackoverflow.com/a/16982510/7133471\n *\n * Customize the background color to match your design.\n */\n\n::-moz-selection {\n background: #b3d4fc;\n text-shadow: none;\n}\n\n::selection {\n background: #b3d4fc;\n text-shadow: none;\n}\n\n/*\n * A better looking default horizontal rule\n */\n\nhr {\n display: block;\n height: 1px;\n border: 0;\n border-top: 1px solid #ccc;\n margin: 1em 0;\n padding: 0;\n}\n\n/*\n * Remove the gap between audio, canvas, iframes,\n * images, videos and the bottom of their containers:\n * https://github.com/h5bp/html5-boilerplate/issues/440\n */\n\naudio,\ncanvas,\niframe,\nimg,\nsvg,\nvideo {\n vertical-align: middle;\n}\n\n/*\n * Remove default fieldset styles.\n */\n\nfieldset {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\n/*\n * Allow only vertical resizing of textareas.\n */\n\ntextarea {\n resize: vertical;\n}\n\n/* ==========================================================================\n Browser Upgrade Prompt\n ========================================================================== */\n\n.browserupgrade {\n margin: 0.2em 0;\n background: #ccc;\n color: #000;\n padding: 0.2em 0;\n}\n\n/* ==========================================================================\n Author's custom styles\n ========================================================================== */\n\n\nbody {\n background-color: black;\n} \n\n#body-wrapper {\n font-family: sans-serif; /* choose a better font */\n margin: 0 auto;\n max-width: 750px;\n text-align: center;\n}\n\nheader {\n background-color: white;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\nul, ol {\n text-align: left;\n margin-left: 10%;\n margin-right: 10%;\n}\n\n.copy {\n padding: 10px 50px;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n}\n\n.particle-wrapper {\n height: 400px;\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: 1fr auto 1fr;\n}\n\n.particle-wrapper p {\n grid-row: 2/3;\n grid-column: 1/2;\n}\n\n.particle-container {\n overflow: hidden;\n height: 100%;\n grid-row: 1/4; \n grid-column: 1/2;\n position: relative;\n}\n\n.particle-temp {\n position: absolute;\n border-radius: 50%;\n margin: 15px;\n background: white;\n}\n\n@keyframes blur_fade {\n 0% {\n height: 2px;\n width: 2px;\n opacity: 0;\n }\n 20% {\n filter: blur(0.2);\n opacity: 0.3;\n }\n 100% {\n height: 40px;\n width: 40px;\n filter: blur(3px);\n opacity: 0;\n }\n}\n\n@keyframes circle {\n 0% {\n transform-origin: -10px -10px;\n transform: rotate(0deg);\n }\n 100% {\n transform-origin: -10px -10px;\n transform: rotate(360deg);\n }\n}\n\n\n@for $i from 1 through 30 {\n .particle-temp:nth-child(#{$i}) {\n top: random($limit: 8)*50px;\n left: random($limit: 14)*50px;\n animation: \n blur_fade 20s ease infinite alternate, \n circle random($limit: 6)+4s linear infinite;\n animation-delay: random($limit: 16)-1s, random($limit: 5)-1s;\n }\n}\n\n\n#subtle {\n background-color: pink;\n}\n\n#fireworks {\n background-color: seashell;\n}\n\n#info1 {\n background-color: lemonchiffon;\n}\n\n#info2 {\n background-color: aliceblue;\n}\n\n#info3 {\n background-color: pink;\n}\n\n\n\n\n\n\n\n\n/* ==========================================================================\n Helper classes\n ========================================================================== */\n\n/*\n * Hide visually and from screen readers\n */\n\n.hidden {\n display: none !important;\n}\n\n/*\n* Hide only visually, but have it available for screen readers:\n* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility\n*\n* 1. For long content, line feeds are not interpreted as spaces and small width\n* causes content to wrap 1 word per line:\n* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe\n*/\n\n.sr-only {\n border: 0;\n clip: rect(0, 0, 0, 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n /* 1 */\n}\n\n/*\n* Extends the .sr-only class to allow the element\n* to be focusable when navigated to via the keyboard:\n* https://www.drupal.org/node/897638\n*/\n\n.sr-only.focusable:active,\n.sr-only.focusable:focus {\n clip: auto;\n height: auto;\n margin: 0;\n overflow: visible;\n position: static;\n white-space: inherit;\n width: auto;\n}\n\n/*\n* Hide visually and from screen readers, but maintain layout\n*/\n\n.invisible {\n visibility: hidden;\n}\n\n/*\n* Clearfix: contain floats\n*\n* For modern browsers\n* 1. The space content is one way to avoid an Opera bug when the\n* `contenteditable` attribute is included anywhere else in the document.\n* Otherwise it causes space to appear at the top and bottom of elements\n* that receive the `clearfix` class.\n* 2. The use of `table` rather than `block` is only necessary if using\n* `:before` to contain the top-margins of child elements.\n*/\n\n.clearfix:before,\n.clearfix:after {\n content: \" \";\n /* 1 */\n display: table;\n /* 2 */\n}\n\n.clearfix:after {\n clear: both;\n}\n\n/* ==========================================================================\n EXAMPLE Media Queries for Responsive Design.\n These examples override the primary ('mobile first') styles.\n Modify as content requires.\n ========================================================================== */\n\n@media only screen and (min-width: 35em) {\n /* Style adjustments for viewports that meet the condition */\n}\n\n@media print,\n (-webkit-min-device-pixel-ratio: 1.25),\n (min-resolution: 1.25dppx),\n (min-resolution: 120dpi) {\n /* Style adjustments for high resolution devices */\n}\n\n/* ==========================================================================\n Print styles.\n Inlined to avoid the additional HTTP request:\n https://www.phpied.com/delay-loading-your-print-css/\n ========================================================================== */\n\n@media print {\n *,\n *:before,\n *:after {\n background: transparent !important;\n color: #000 !important;\n /* Black prints faster */\n box-shadow: none !important;\n text-shadow: none !important;\n }\n a,\n a:visited {\n text-decoration: underline;\n }\n a[href]:after {\n content: \" (\" attr(href) \")\";\n }\n abbr[title]:after {\n content: \" (\" attr(title) \")\";\n }\n /*\n * Don't show links that are fragment identifiers,\n * or use the `javascript:` pseudo protocol\n */\n a[href^=\"#\"]:after,\n a[href^=\"javascript:\"]:after {\n content: \"\";\n }\n pre {\n white-space: pre-wrap !important;\n }\n pre,\n blockquote {\n border: 1px solid #999;\n page-break-inside: avoid;\n }\n /*\n * Printing Tables:\n * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables\n */\n thead {\n display: table-header-group;\n }\n tr,\n img {\n page-break-inside: avoid;\n }\n p,\n h2,\n h3 {\n orphans: 3;\n widows: 3;\n }\n h2,\n h3 {\n page-break-after: avoid;\n }\n}\n\n" + ], + "names": [], + "mappings": "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" +} \ No newline at end of file diff --git a/midterm.html b/midterm.html index b94afdb..00d48ba 100644 --- a/midterm.html +++ b/midterm.html @@ -35,6 +35,33 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

You can use animated particles to create a subtle background effect...

diff --git a/scss/midterm.scss b/scss/midterm.scss index 56d22cd..b55ce73 100644 --- a/scss/midterm.scss +++ b/scss/midterm.scss @@ -99,13 +99,6 @@ textarea { ========================================================================== */ -$speed-rand: random($limit: 6)+4; -$top-rand: random($limit: 8)*50; -$left-rand: random($limit: 14)*50; -$anim-delay-rand: random($limit: 31)-16; - - - body { background-color: black; } @@ -194,14 +187,14 @@ ul, ol { } -@for $i from 1 to 25 { - .particle-temp:nth-child($i) { - top: #{$top-rand}px; - left: #{$left-rand}px; - animation-delay: #{$anim-delay-rand}s; +@for $i from 1 through 30 { + .particle-temp:nth-child(#{$i}) { + top: random($limit: 8)*50px; + left: random($limit: 14)*50px; animation: - blur_fade 20s ease infinite, - circle #{$speed-rand}s linear infinite; + blur_fade 20s ease infinite alternate, + circle random($limit: 6)+4s linear infinite; + animation-delay: random($limit: 16)-1s, random($limit: 5)-1s; } }