From 5e3dff7d231e0f388d21cc698dad18561838e635 Mon Sep 17 00:00:00 2001 From: Chlod Alejandro Date: Thu, 15 Feb 2024 13:57:26 +0800 Subject: [PATCH] make compatible with Chrome 38 --- .github/workflows/ci.yml | 55 +++ README.md => build/README.md | 0 {fonts => build/fonts}/Montserrat-Bold.ttf | Bin {fonts => build/fonts}/Oswald-Bold.ttf | Bin {fonts => build/fonts}/Outfit-Bold.ttf | Bin {fonts => build/fonts}/Outfit-Regular.ttf | Bin {images => build/images}/background.jpg | Bin {images => build/images}/logo-centennial.png | Bin {images => build/images}/logo-eece.png | Bin {images => build/images}/logo-gdsc.png | Bin {images => build/images}/logo-mme.png | Bin {images => build/images}/wordmark-mapua.png | Bin {images => build/images}/wordmark-mapua.svg | 0 build/index.css | 323 +++++++++++++ build/index.css.map | 1 + index.html => build/index.html | 451 +++---------------- public/README.md | 21 + public/fonts/Montserrat-Bold.ttf | Bin 0 -> 198120 bytes public/fonts/Oswald-Bold.ttf | Bin 0 -> 87604 bytes public/fonts/Outfit-Bold.ttf | Bin 0 -> 55396 bytes public/fonts/Outfit-Regular.ttf | Bin 0 -> 54916 bytes public/images/background.jpg | Bin 0 -> 747997 bytes public/images/logo-centennial.png | Bin 0 -> 219275 bytes public/images/logo-eece.png | Bin 0 -> 103449 bytes public/images/logo-gdsc.png | Bin 0 -> 5972 bytes public/images/logo-mme.png | Bin 0 -> 384570 bytes public/images/wordmark-mapua.png | Bin 0 -> 61610 bytes public/images/wordmark-mapua.svg | 22 + public/index.html | 380 ++++++++++++++++ src/index.scss | 369 +++++++++++++++ 30 files changed, 1230 insertions(+), 392 deletions(-) create mode 100644 .github/workflows/ci.yml rename README.md => build/README.md (100%) rename {fonts => build/fonts}/Montserrat-Bold.ttf (100%) rename {fonts => build/fonts}/Oswald-Bold.ttf (100%) rename {fonts => build/fonts}/Outfit-Bold.ttf (100%) rename {fonts => build/fonts}/Outfit-Regular.ttf (100%) rename {images => build/images}/background.jpg (100%) rename {images => build/images}/logo-centennial.png (100%) rename {images => build/images}/logo-eece.png (100%) rename {images => build/images}/logo-gdsc.png (100%) rename {images => build/images}/logo-mme.png (100%) rename {images => build/images}/wordmark-mapua.png (100%) rename {images => build/images}/wordmark-mapua.svg (100%) create mode 100644 build/index.css create mode 100644 build/index.css.map rename index.html => build/index.html (50%) create mode 100644 public/README.md create mode 100644 public/fonts/Montserrat-Bold.ttf create mode 100644 public/fonts/Oswald-Bold.ttf create mode 100644 public/fonts/Outfit-Bold.ttf create mode 100644 public/fonts/Outfit-Regular.ttf create mode 100644 public/images/background.jpg create mode 100644 public/images/logo-centennial.png create mode 100644 public/images/logo-eece.png create mode 100644 public/images/logo-gdsc.png create mode 100644 public/images/logo-mme.png create mode 100644 public/images/wordmark-mapua.png create mode 100644 public/images/wordmark-mapua.svg create mode 100644 public/index.html create mode 100644 src/index.scss diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..eb28004 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,55 @@ +name: Deploy static content to Pages + +on: + push: + branches: ["main"] + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: "pages" + cancel-in-progress: true + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Copy public to build + run: cp -r public build + - name: Compile SCSS files + run: | + /usr/bin/find src/ -name '*.scss' | while read -r file + do + OUT_PATH=${file#"src/"} + npx -y sass "$file":"build/${OUT_PATH%".scss"}.css" + done + - name: Upload static build + uses: actions/upload-artifact@v4 + with: + name: static + path: build + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Setup Pages + uses: actions/configure-pages@v4 + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + # Upload entire repository + path: 'build' + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/README.md b/build/README.md similarity index 100% rename from README.md rename to build/README.md diff --git a/fonts/Montserrat-Bold.ttf b/build/fonts/Montserrat-Bold.ttf similarity index 100% rename from fonts/Montserrat-Bold.ttf rename to build/fonts/Montserrat-Bold.ttf diff --git a/fonts/Oswald-Bold.ttf b/build/fonts/Oswald-Bold.ttf similarity index 100% rename from fonts/Oswald-Bold.ttf rename to build/fonts/Oswald-Bold.ttf diff --git a/fonts/Outfit-Bold.ttf b/build/fonts/Outfit-Bold.ttf similarity index 100% rename from fonts/Outfit-Bold.ttf rename to build/fonts/Outfit-Bold.ttf diff --git a/fonts/Outfit-Regular.ttf b/build/fonts/Outfit-Regular.ttf similarity index 100% rename from fonts/Outfit-Regular.ttf rename to build/fonts/Outfit-Regular.ttf diff --git a/images/background.jpg b/build/images/background.jpg similarity index 100% rename from images/background.jpg rename to build/images/background.jpg diff --git a/images/logo-centennial.png b/build/images/logo-centennial.png similarity index 100% rename from images/logo-centennial.png rename to build/images/logo-centennial.png diff --git a/images/logo-eece.png b/build/images/logo-eece.png similarity index 100% rename from images/logo-eece.png rename to build/images/logo-eece.png diff --git a/images/logo-gdsc.png b/build/images/logo-gdsc.png similarity index 100% rename from images/logo-gdsc.png rename to build/images/logo-gdsc.png diff --git a/images/logo-mme.png b/build/images/logo-mme.png similarity index 100% rename from images/logo-mme.png rename to build/images/logo-mme.png diff --git a/images/wordmark-mapua.png b/build/images/wordmark-mapua.png similarity index 100% rename from images/wordmark-mapua.png rename to build/images/wordmark-mapua.png diff --git a/images/wordmark-mapua.svg b/build/images/wordmark-mapua.svg similarity index 100% rename from images/wordmark-mapua.svg rename to build/images/wordmark-mapua.svg diff --git a/build/index.css b/build/index.css new file mode 100644 index 0000000..4451cd7 --- /dev/null +++ b/build/index.css @@ -0,0 +1,323 @@ +* { + box-sizing: border-box; + user-select: none; + -webkit-user-select: none; +} + +@font-face { + font-family: "Outfit"; + font-weight: bold; + src: url("fonts/Outfit-Bold.ttf"); +} +@font-face { + font-family: "Outfit"; + font-weight: normal; + src: url("fonts/Outfit-Regular.ttf"); +} +@font-face { + font-family: "Montserrat"; + font-weight: bold; + src: url("fonts/Montserrat-Bold.ttf"); +} +@font-face { + font-family: "Oswald"; + font-weight: bold; + src: url("fonts/Oswald-Bold.ttf"); +} +html, body { + margin: 0; + overflow: hidden; +} + +.background-cover { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.6); + z-index: -10; +} + +body.end .background-cover { + opacity: 0; + transition: opacity 3s linear; +} + +.background { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: -15; + background-image: url("images/background.jpg"); + background-size: cover; + background-position: center; + transition: filter 3s ease-in-out; +} + +body.end .background { + filter: blur(10px); +} + +header { + height: 18vh; + padding: 0.5vh; + background-color: rgba(246, 246, 246, 0.8); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +body.end header { + background-color: rgba(246, 246, 246, 0.6); + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 400; + transition: all 3s ease-in-out; +} + +header > img.logo-centennial { + height: 13.6vh; + padding: 4px; +} + +header > img.wordmark-mapua { + max-height: 0; +} + +header > div { + color: #CAA452; + font-family: "Montserrat", sans-serif; + font-weight: bold; + text-transform: uppercase; + font-size: 3.4vh; + line-height: 1em; + overflow: hidden; + transition: all 0.5s ease-in-out; +} + +body.end header > img.logo-centennial { + height: 35vh; + width: auto; + max-width: 50vw; + transition: all 3s ease-in-out; +} + +body.end header > img.wordmark-mapua { + margin-bottom: 5vh; + max-height: 10vh; + transition: all 1.5s 1.5s ease-in-out; +} + +body.end header > div { + max-height: 0 !important; + transition: max-height 1.5s ease-in-out; +} + +body.clock header > div { + max-height: 0; +} + +body.countdown header > div { + max-height: 1em; +} + +body { + font-family: "Outfit", "Helvetica", sans-serif; + text-align: center; +} + +body:not(.clock):not(.countdown) > main { + opacity: 0; +} + +main { + height: 75vh; + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: center; + align-content: center; + transition: opacity 0.5s ease-in-out; +} + +body.end > main { + opacity: 0; + transition: opacity 0.5s ease-in-out; +} + +.break { + flex-basis: 100%; + height: 6vmin; +} + +.counter { + font-size: 11.25vmin; + max-width: 22.5vw; + width: 100%; +} + +.date, .days { + max-width: 100% !important; +} + +body.willTransition .days { + transition: opacity 1s 2s ease-in-out, max-height 1s 2s ease-in-out; +} + +body.willTransition .date { + font-size: 9vmin; + transition: opacity 1s ease-in-out, max-height 1s ease-in-out; +} + +body:not(.countdown) .date, +body.countdown .days { + opacity: 1; + max-height: 100%; +} + +body.countdown .date, +body:not(.countdown) .days { + opacity: 0; + max-height: 0; +} + +.days { + font-size: 15vmin; + max-width: 45vw; +} + +.counter > .number { + text-shadow: 0 1vmin 0.7vmin rgba(42, 42, 42, 0.95); + color: #FFB81D; + font-size: 1.5em; + font-weight: bold; + line-height: 0.8em; +} + +/* number */ +.days > .number, +.date > .number { + font-size: 2.4em; + color: #D94230; + text-transform: uppercase; +} + +.date > .label { + margin-bottom: 2vh; +} + +#dayOfWeek { + font-size: 1em; +} + +#clockDate { + font-size: 1.4em; +} + +/* labels */ +.counter > .label { + color: white; + display: block; + font-size: 0.4em; + line-height: 1em; + text-transform: uppercase; + overflow: hidden; + transition: max-height 0.5s ease-in-out; +} + +body.countdown .counter:not(.date) > .label { + max-height: 1em; +} + +body.clock .counter:not(.date) > .label { + max-height: 0; +} + +body.countdown .colon { + opacity: 0; +} + +.colon { + font-family: "Oswald", "Outfit", "Helvetica", sans-serif; + font-size: 18vmin; + line-height: 11.25vmin; + color: #F6F6F6; +} + +body.willTransition .colon { + transition: opacity 0.5s ease-in-out; +} + +footer { + height: 7vh; + text-align: left; + background-color: rgba(246, 246, 246, 0.8); +} + +footer > img { + padding: 0.5vmin 0 0.5vmin 0.5vmin; + width: auto; + height: 7vh; +} + +footer > img:not(.eece) { + border-radius: 1vmin; +} + +footer > img.eece { + -webkit-filter: drop-shadow(1vmin 0.4vmin 0.6vmin #222); + filter: drop-shadow(1vmin 0.4vmin 0.6vmin #222); +} + +body.end footer { + position: fixed; + bottom: 0; + left: 0; + width: 100vw; + z-index: 500; + background: unset; + transition: all 3s ease-in-out; +} + +#headerPlaceholder, +#footerPlaceholder { + display: none; +} + +body.end #headerPlaceholder { + display: block; + height: 18vh; +} + +body.end #footerPlaceholder { + display: block; + height: 7vh; +} + +body:not(.end) .confetti { + display: none; +} + +#confettiContainer { + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + z-index: 800; +} + +body.end .confetti { + display: block; + position: fixed; + background-color: #CAA452; +} + +/*# sourceMappingURL=index.css.map */ diff --git a/build/index.css.map b/build/index.css.map new file mode 100644 index 0000000..1e4c267 --- /dev/null +++ b/build/index.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../src/index.scss"],"names":[],"mappings":"AAkBA;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAGJ;EACI;;;AAGJ;EACI,QAvFY;EAwFZ;EACA;EAEA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI,OA9GS;EA+GT;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGJ;EACI;EACA;EACA;EAEA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAIJ;EACI;EACA;;;AAIJ;AAAA;EAEI;EACA;;;AAGJ;AAAA;EAEI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA,OAzNW;EA0NX;EACA;EACA;;;AAGJ;AACA;AAAA;EAEI;EACA,OAlOQ;EAmOR;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,QA9RY;EA+RZ;EACA;;;AAGJ;EACI;EACA;EACA,QAtSY;;;AAyShB;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGJ;AAAA;EAEI;;;AAGJ;EACI;EACA,QAvUY;;;AA0UhB;EACI;EACA,QAzUY;;;AA4UhB;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAeJ;EACI;EACA;EAGA,kBApWS","file":"index.css"} \ No newline at end of file diff --git a/index.html b/build/index.html similarity index 50% rename from index.html rename to build/index.html index d6fba85..6d6f510 100644 --- a/index.html +++ b/build/index.html @@ -5,374 +5,10 @@ Mapúa University – Road to 100 - + +
@@ -430,6 +66,12 @@ + + \ No newline at end of file diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 0000000..83a6b84 --- /dev/null +++ b/src/index.scss @@ -0,0 +1,369 @@ + +$header-height: 18vh; +$header-padding: 1vh; +$header-logo-ratio: 5; +$footer-height: 7vh; +$font-scale: 15; + +$background-opacity: 0.6; +$hf-opacity: 0.8; + +$mapua-gold: #CAA452; +$mapua-yellow: #FFB81D; +$mapua-red: #D94230; + +$date-transition-speed: 3s; +$end-transition-speed: 3s; +$confetti-lifespan: 5s; + +* { + box-sizing: border-box; + user-select: none; + -webkit-user-select: none; +} + +@font-face { + font-family: 'Outfit'; + font-weight: bold; + src: url('fonts/Outfit-Bold.ttf'); +} + +@font-face { + font-family: 'Outfit'; + font-weight: normal; + src: url('fonts/Outfit-Regular.ttf'); +} + +@font-face { + font-family: 'Montserrat'; + font-weight: bold; + src: url('fonts/Montserrat-Bold.ttf'); +} + +@font-face { + font-family: 'Oswald'; + font-weight: bold; + src: url('fonts/Oswald-Bold.ttf'); +} + +html, body { + margin: 0; + overflow: hidden; +} + +.background-cover { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, $background-opacity); + z-index: -10; +} + +body.end .background-cover { + opacity: 0; + transition: opacity $end-transition-speed linear; +} + +.background { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: -15; + + background-image: url("images/background.jpg"); + background-size: cover; + background-position: center; + + transition: filter $end-transition-speed ease-in-out; +} + +body.end .background { + filter: blur(10px); +} + +header { + height: $header-height; + padding: calc($header-padding / 2); + background-color: rgba(246, 246, 246, $hf-opacity); + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +body.end header { + background-color: rgba(246, 246, 246, 0.6); + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 400; + + transition: all $end-transition-speed ease-in-out; +} + +header > img.logo-centennial { + height: calc((($header-height - $header-padding) / $header-logo-ratio) * ($header-logo-ratio - 1)); + padding: 4px; +} + +header > img.wordmark-mapua { + max-height: 0; +} + +header > div { + color: $mapua-gold; + font-family: 'Montserrat', sans-serif; + font-weight: bold; + text-transform: uppercase; + font-size: calc(($header-height - $header-padding) / $header-logo-ratio); + line-height: 1em; + overflow: hidden; + + transition: all 0.5s ease-in-out; +} + +body.end header > img.logo-centennial { + height: 35vh; + width: auto; + max-width: 50vw; + + transition: all $end-transition-speed ease-in-out; +} + +body.end header > img.wordmark-mapua { + margin-bottom: 5vh; + max-height: 10vh; + transition: all calc($end-transition-speed / 2) calc($end-transition-speed / 2) ease-in-out; +} + +body.end header > div { + max-height: 0 !important; + transition: max-height calc($end-transition-speed / 2) ease-in-out; +} + +body.clock header > div { + max-height: 0; +} + +body.countdown header > div { + max-height: 1em; +} + +body { + font-family: 'Outfit', 'Helvetica', sans-serif; + text-align: center; +} + +body:not(.clock):not(.countdown) > main { + opacity: 0; +} + +main { + height: calc(100vh - $header-height - $footer-height); + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: center; + align-content: center; + + transition: opacity 0.5s ease-in-out; +} + +body.end > main { + opacity: 0; + transition: opacity calc($end-transition-speed / 6) ease-in-out; +} + +.break { + flex-basis: 100%; + height: calc($font-scale * 0.4vmin); +} + +.counter { + font-size: calc($font-scale * 0.75vmin); + max-width: calc($font-scale * 1.5vw); + width: 100%; +} + +.date, .days { + max-width: 100% !important; +} + +body.willTransition .days { + transition: opacity calc($date-transition-speed / 3) calc($date-transition-speed / 3 * 2) ease-in-out, + max-height calc($date-transition-speed / 3) calc($date-transition-speed / 3 * 2) ease-in-out; +} + +body.willTransition .date { + font-size: calc($font-scale * 0.6vmin); + transition: opacity calc($date-transition-speed / 3) ease-in-out, + max-height calc($date-transition-speed / 3) ease-in-out; +} + +body:not(.countdown) .date, +body.countdown .days { + opacity: 1; + max-height: 100%; +} + +body.countdown .date, +body:not(.countdown) .days { + opacity: 0; + max-height: 0; +} + +.days { + font-size: calc($font-scale * 1vmin); + max-width: calc($font-scale * 3vw); +} + +.counter > .number { + text-shadow: 0 1vmin 0.7vmin rgba(42, 42, 42, 0.95); + color: $mapua-yellow; + font-size: 1.5em; + font-weight: bold; + line-height: 0.8em; +} + +/* number */ +.days > .number, +.date > .number { + font-size: 2.4em; + color: $mapua-red; + text-transform: uppercase; +} + +.date > .label { + margin-bottom: 2vh; +} + +#dayOfWeek { + font-size: 1em; +} + +#clockDate { + font-size: 1.4em; +} + +/* labels */ +.counter > .label { + color: white; + display: block; + font-size: 0.4em; + line-height: 1em; + text-transform: uppercase; + overflow: hidden; + + transition: max-height 0.5s ease-in-out; +} + +body.countdown .counter:not(.date) > .label { + max-height: 1em; +} + +body.clock .counter:not(.date) > .label { + max-height: 0; +} + +body.countdown .colon { + opacity: 0; +} + +.colon { + font-family: 'Oswald', 'Outfit', 'Helvetica', sans-serif; + font-size: calc($font-scale * 0.75vmin * 1.6); + line-height: calc($font-scale * 0.75vmin); + color: #F6F6F6; +} + +body.willTransition .colon { + transition: opacity 0.5s ease-in-out; +} + +footer { + height: $footer-height; + text-align: left; + background-color: rgba(246, 246, 246, $hf-opacity); +} + +footer > img { + padding: 0.5vmin 0 0.5vmin 0.5vmin; + width: auto; + height: $footer-height; +} + +footer > img:not(.eece) { + border-radius: 1vmin; +} + +footer > img.eece { + -webkit-filter: drop-shadow(1vmin 0.4vmin 0.6vmin #222); + filter: drop-shadow(1vmin 0.4vmin 0.6vmin #222); +} + +body.end footer { + position: fixed; + bottom: 0; + left: 0; + width: 100vw; + z-index: 500; + background: unset; + + transition: all $end-transition-speed ease-in-out; +} + +#headerPlaceholder, +#footerPlaceholder { + display: none; +} + +body.end #headerPlaceholder { + display: block; + height: $header-height; +} + +body.end #footerPlaceholder { + display: block; + height: $footer-height; +} + +body:not(.end) .confetti { + display: none; +} + +#confettiContainer { + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + z-index: 800; +} + +// @keyframes confettiFall { +// from { +// /* sync with index.html:162 */ +// top: calc(-2vw); +// transform: rotate3d($rotX, $rotY, $rotZ, 0); +// } +// to { +// top: calc(100vh + 2vw); +// transform: rotate3d($rotX, $rotY, $rotZ, calc(1turn * $rots)); +// } +// } + +body.end .confetti { + display: block; + position: fixed; + // top: calc(-1 * $size); + + background-color: $mapua-gold; + // animation: confettiFall $confetti-lifespan ease-in; +} \ No newline at end of file