diff --git a/css/main.css b/css/main.css index 602b559..bfdbb64 100644 --- a/css/main.css +++ b/css/main.css @@ -5,13 +5,40 @@ --accent-color-1: #ff91d8; --accent-color-1-light: #ffcdff; --accent-color-2: #ffff7d; + + --crossfader-thumb-width: 30px; + --crossfader-thumb-height: 60px; + --crossfader-thumb-radius: 15px; + } +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(fonts/Roboto Regular.woff2) format('woff2'); +} +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url(fonts/Roboto Thin.woff2) format('woff2'); +} +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url(fonts/Roboto Black.woff2) format('woff2'); +} html { color: var(--text-color); font-size: 1em; line-height: 1.4; + font-family: Roboto, Arial, sans-serif; } ::-moz-selection { @@ -52,14 +79,6 @@ textarea { resize: vertical; } -/* ========================================================================== - Author's custom styles - ========================================================================== */ - -html { - font-family: Arial, sans-serif; -} - #bg { z-index: -2; overflow: hidden; @@ -73,11 +92,8 @@ html { #bg img { z-index: -1; position: fixed; - /* max-width: 100%; - max-height: 100%; */ } - #desk { /* display: none; */ display: flex; @@ -92,6 +108,10 @@ html { padding-bottom: 2em; gap: 15px; } + +.hidden { + display: none; +} .player { max-width: 480px; display: flex; @@ -124,9 +144,11 @@ iframe { .load-button { /* flex-grow: 2; */ + cursor: pointer; border: none; background-color: var(--accent-color-2); color: var(--bg-color); + font-weight: 900; border-radius: 5px; /* padding: 2em; */ width: 50%; @@ -137,10 +159,12 @@ iframe { font-size: 0.8em; margin: auto; + font-weight: 100; color: var(--text-color-light); } .control-label span { + font-weight: 400; color: var(--accent-color-2); } @@ -179,10 +203,35 @@ span.volume-value { display: inline-block; } -#crossfader { + +#crossfader-wrapper { width: 30em; padding: 3em 0; } +#crossfader { + width: 100%; + z-index: 2; +} + +.graduations { + z-index: 0; + width: 100; + margin: 0 13px 0 13px; + display: flex; + justify-content: space-between; +} +.graduation { + z-index: 0; + width: 3px; + height: 23px; + border-radius: 23px; + background-color: var(--accent-color-1-light); +} + +.graduation-small { + width: 2px; + height: 8px; +} /* Custom crossfader styling made using http://danielstern.ca/range.css */ input[type=range] { @@ -216,10 +265,10 @@ input[type=range]::-moz-range-track { } input[type=range]::-moz-range-thumb { background: var(--accent-color-2); - border: solid var(--accent-color-1-light); + /* border: solid var(--accent-color-1-light); */ cursor: pointer; border-width: 0px; - border-radius: 25px; + border-radius: var(--crossfader-thumb-radius); } input[type=range]::-ms-track { background: transparent; @@ -238,7 +287,7 @@ input[type=range]::-ms-fill-upper { } input[type=range]::-ms-thumb { background: var(--accent-color-2); - border: solid var(--accent-color-1-light); + /* border: solid var(--accent-color-1-light); */ cursor: pointer; margin-top: 0px; /*Needed to keep the Edge thumb centred*/ @@ -256,47 +305,50 @@ input[type=range]#crossfader::-webkit-slider-runnable-track { } input[type=range]#crossfader::-webkit-slider-thumb { margin-top: -20.65px; - width: 30px; - height: 50px; - border-width: 5px; - border-radius: 12px; + width: var(--crossfader-thumb-width); + height: var(--crossfader-thumb-height); + /* border-width: 5px; + border-radius: 12px; */ } input[type=range]#crossfader::-moz-range-track { - border-radius: 25px; + /* border-radius: 25px; */ width: 100%; height: 13.3px; cursor: pointer; } input[type=range]#crossfader::-moz-range-thumb { - width: 30px; - height: 50px; - border-width: 5px; - border-radius: 12px; + width: var(--crossfader-thumb-width); + height: var(--crossfader-thumb-height); + /* border-width: 5px; */ + /* border-radius: 12px; */ cursor: pointer; } input[type=range]#crossfader::-ms-track { - border-width: 18.75px 0; + /* border-width: 18.75px 0; */ height: 13.3px; } input[type=range]#crossfader::-ms-fill-lower { - border-width: 2.3px; - border-radius: 50px; + /* border-width: 2.3px; + border-radius: 50px; */ } input[type=range]#crossfader::-ms-fill-upper { - border-radius: 50px; + /* border-radius: 50px; */ } input[type=range]#crossfader::-ms-thumb { - width: 30px; - height: 50px; - border-width: 5px; - border-radius: 12px; + width: var(--crossfader-thumb-width); + height: var(--crossfader-thumb-height); + /* border-width: 5px; + border-radius: 12px; */ cursor: pointer; margin-top: 0px; /*Needed to keep the Edge thumb centred*/ } +.footer { + font-weight: 100; +} .footer a, .footer a:visited { color: var(--text-color); text-decoration: none; @@ -305,176 +357,3 @@ input[type=range]#crossfader::-ms-thumb { .footer span { cursor: pointer; } -/* ========================================================================== - Helper classes - ========================================================================== */ - -/* - * Hide visually and from screen readers - */ - -.hidden, -[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 - * - * 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 */ -} - -/* - * 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; -} - -/* - * Hide visually and from screen readers, but maintain layout - */ - -.invisible { - visibility: hidden; -} - -/* - * Clearfix: contain floats - * - * For modern browsers - * 1. The space content is one way to avoid an Opera bug when the - * `contenteditable` attribute is included anywhere else in the document. - * Otherwise it causes space to appear at the top and bottom of elements - * 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: " "; - display: table; -} - -.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 */ -} - -/* ========================================================================== - Print styles. - Inlined to avoid the additional HTTP request: - https://www.phpied.com/delay-loading-your-print-css/ - ========================================================================== */ - -@media print { - *, - *::before, - *::after { - background: #fff !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) ")"; - } - - /* - * 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; - } - - /* - * 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; - } -} diff --git a/css/shooting-star.css b/css/shooting-star.css new file mode 100644 index 0000000..bcf11e2 --- /dev/null +++ b/css/shooting-star.css @@ -0,0 +1,160 @@ +:root { + --shooting-star-duration: 3000ms; + --shooting-star-angle: 10deg; + --shooting-star-translate: 300px; + --shooting-star-direction: 1; /* 1 or -1 */ +} + + +/* From https://www.geeksforgeeks.org/how-to-create-shooting-star-animation-effect-using-css/ */ +.shooting-stars-wrapper { + position: fixed; + width: 100%; + height: 100%; + -webkit-transform: scaleX(var(--shooting-star-direction)) rotateZ(var(--shooting-star-angle)); + + transform: scaleX(var(--shooting-star-direction)) rotateZ(var(--shooting-star-angle)); + +} + +.shooting-star { + position: absolute; + /* left: 50%; */ + top: 50%; + height: 2px; + border-radius: 885px; + background: linear-gradient(-45deg, #eef0f5, rgba(0, 0, 255, 0)); + + -webkit-filter: drop-shadow(0 0 6px #eef1f8); + filter: drop-shadow(0 0 6px #d7dff0); + + -webkit-animation: tail var(--shooting-star-duration) ease-in-out 1, + shooting var(--shooting-star-duration) ease-in-out 1; + animation: tail var(--shooting-star-duration) ease-in-out 1, + shooting var(--shooting-star-duration) ease-in-out 1; +} + +/* .shooting-star.is-shooting { + -webkit-animation: tail var(--shooting-star-duration) ease-in-out 1, + shooting var(--shooting-star-duration) ease-in-out 1; + animation: tail var(--shooting-star-duration) ease-in-out 1, + shooting var(--shooting-star-duration) ease-in-out 1; +} */ + +/* Here we add before and after effect to star */ +.shooting-star::before, +.shooting-star::after { + content: ""; + position: absolute; + top: calc(50% - 1px); + right: 0; + height: 2px; + background: linear-gradient( + -45deg, + rgba(0, 0, 255, 0), + #eaeef8, + rgba(0, 0, 255, 0) + ); + -webkit-transform: translateX(50%) rotateZ(45deg); + transform: translateX(50%) rotateZ(45deg); + border-radius: 100%; + -webkit-animation: shining var(--shooting-star-duration) ease-in-out 1; + animation: shining var(--shooting-star-duration) ease-in-out 1; +} +/* .shooting-star.is-shooting::before, +.shooting-star.is-shooting::after { + -webkit-animation: shining var(--shooting-star-duration) ease-in-out 1; + animation: shining var(--shooting-star-duration) ease-in-out 1; +} */ +.shooting-star::after { + -webkit-transform: translateX(50%) rotateZ(-45deg); + transform: translateX(50%) rotateZ(-45deg); +} + +/* Here we are adding location of each +nth-child, animations, delays, and +before and after effects to each +and every balls(stars) */ +/* .shooting-star:nth-child(1) { + top: calc(50% - -119px); + left: calc(50% - 43px); + -webkit-animation-delay: 4000ms; + animation-delay: 4000ms; +} +.shooting-star:nth-child(1)::before, +.shooting-star:nth-child(1)::after { + -webkit-animation-delay: 4000ms; + animation-delay: 4000ms; +} */ + +/* This code will help to generate +effect in tail of star */ +@keyframes tail { + 0% { + width: 0; + } + 30% { + width: 100px; + } + 100% { + width: 0; + } +} +@-webkit-keyframes tail { + 0% { + width: 0; + } + 30% { + width: 100px; + } + 100% { + width: 0; + } +} + +/* This code will generate shining +effect in head of star */ +@keyframes shining { + 0% { + width: 0; + } + 50% { + width: 30px; + } + 100% { + width: 0; + } +} +@-webkit-keyframes shining { + 0% { + width: 0; + } + 50% { + width: 30px; + } + 100% { + width: 0; + } +} + +/* Here we make shooting effect */ +@keyframes shooting { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 100% { + -webkit-transform: translateX(var(--shooting-star-translate)); + transform: translateX(var(--shooting-star-translate)); + } +} +@-webkit-keyframes shooting { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 100% { + -webkit-transform: translateX(var(--shooting-star-translate)); + transform: translateX(var(--shooting-star-translate)); + } +} diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..1466051 Binary files /dev/null and b/favicon.ico differ diff --git a/fonts/Roboto Black.woff2 b/fonts/Roboto Black.woff2 new file mode 100644 index 0000000..067cb32 Binary files /dev/null and b/fonts/Roboto Black.woff2 differ diff --git a/fonts/Roboto Regular.woff2 b/fonts/Roboto Regular.woff2 new file mode 100644 index 0000000..020729e Binary files /dev/null and b/fonts/Roboto Regular.woff2 differ diff --git a/fonts/Roboto Thin.woff2 b/fonts/Roboto Thin.woff2 new file mode 100644 index 0000000..71c9bb7 Binary files /dev/null and b/fonts/Roboto Thin.woff2 differ diff --git a/img/icon/android-chrome-192x192.png b/img/icon/android-chrome-192x192.png new file mode 100644 index 0000000..ffab06a Binary files /dev/null and b/img/icon/android-chrome-192x192.png differ diff --git a/img/icon/android-chrome-512x512.png b/img/icon/android-chrome-512x512.png new file mode 100644 index 0000000..86689d6 Binary files /dev/null and b/img/icon/android-chrome-512x512.png differ diff --git a/img/icon/apple-touch-icon.png b/img/icon/apple-touch-icon.png new file mode 100644 index 0000000..890f718 Binary files /dev/null and b/img/icon/apple-touch-icon.png differ diff --git a/img/icon/favicon-16x16.png b/img/icon/favicon-16x16.png new file mode 100644 index 0000000..96c7329 Binary files /dev/null and b/img/icon/favicon-16x16.png differ diff --git a/img/icon/favicon-32x32.png b/img/icon/favicon-32x32.png new file mode 100644 index 0000000..e1fb806 Binary files /dev/null and b/img/icon/favicon-32x32.png differ diff --git a/index.html b/index.html index 458af08..2664b86 100644 --- a/index.html +++ b/index.html @@ -12,12 +12,14 @@ - - - + + + + - - + + + @@ -26,6 +28,9 @@