From f4d4c3db089928725d04532bca9b318a094f62f3 Mon Sep 17 00:00:00 2001 From: blimytoad <79717734+blimytoad@users.noreply.github.com> Date: Fri, 10 Feb 2023 13:03:53 -0500 Subject: [PATCH 1/2] nothing --- max/.DS_Store | Bin 10244 -> 10244 bytes max/updated-2/index.html | 72 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 72 insertions(+) create mode 100644 max/updated-2/index.html diff --git a/max/.DS_Store b/max/.DS_Store index 6d5500a666e5fc8260cc6491d4b44d827f9520dd..db34452878da3fcd725d31e33cbf01e15387acfe 100644 GIT binary patch delta 99 zcmZn(XbG6$RCU^hRb-sD6i`**voS=lrj`Bq%b5hlrW?MX + + + + Sort Later + + + + + + + + +
+ + + + + + +
+ + + + + + + + + + +
+ + + + + + + +
+ + From 29c1a2c9f9a7040ce1204d07e3e275edbf72debb Mon Sep 17 00:00:00 2001 From: blimytoad <79717734+blimytoad@users.noreply.github.com> Date: Mon, 20 Feb 2023 22:38:18 -0500 Subject: [PATCH 2/2] responsiveness for smaller screens responsive changes for tablet/mobile --- max/final/sources/styles.css | 715 +++++++++++++++++++++++++++++++++++ 1 file changed, 715 insertions(+) create mode 100644 max/final/sources/styles.css diff --git a/max/final/sources/styles.css b/max/final/sources/styles.css new file mode 100644 index 0000000..0d79df6 --- /dev/null +++ b/max/final/sources/styles.css @@ -0,0 +1,715 @@ +/* HTML */ +:root{ + --stroke-width: 2px; + --stroke-color: #000; +} + + + +*{ + margin: 0; + box-sizing: border-box; +} + +main{ + position: relative; + padding: 1rem 4rem; + + display: flex; + flex-direction: column; + align-items: center; +} + + + + + +#top-title{ + width: 50vw; +} + +#false-file{ + position: relative; + width: 100%; + + border: var(--stroke-width) solid var(--stroke-color); + border-top-right-radius: 4rem; + border-top-left-radius: 4rem; + + background-color: #fff; + margin-top: -0.75rem; + + background-repeat: repeat-x; + + display: flex; + flex-direction: column; + justify-content: space-between; + z-index: 1; +} + +#web-title{ + width: calc(100% + 4rem); + margin: -1rem 0 0 -2rem; + z-index: 1; +} + +#date-year{ + position: absolute; + inset: 0 0 0 0; + width: calc(100% + 8rem); + margin: -4rem; + + z-index: 0; + pointer-events: none; +} + + + + + + + + + +#when{ + width: 100%; + position: relative; + margin: -1rem 0; + z-index: 1; +} + +#month-container{ + display: flex; + justify-content: center; + align-items: center; + + width: calc(100% + 6rem); + margin-left: -3rem; + + background-image: url(../assets/svg/date-month.svg); +} + +.date-container{ + width: 100%; + height: 45vh; +} + +.date-svg{ + width: calc(100% + 6rem); + height: 100%; + margin-left: -3rem; +} + + + + + + + + + +h1{ + font-family: "aktiv-grotesk-condensed", sans-serif; + font-weight: 900; + font-style: normal; + text-transform: uppercase; + + font-size: 3rem; + line-height: 1rem; + + color: black; + + white-space: nowrap; +} + + + + + + + + + +#credits{ + width: calc(100% + 6rem); + margin: -1rem 0 -5rem -3rem; + + display: flex; + flex-wrap: wrap; + column-gap: 1rem; + justify-content: center; + position: relative; + + z-index: 1; +} + +p{ + font-family: "aktiv-grotesk-condensed", sans-serif; + font-weight: 900; + font-style: normal; + text-transform: uppercase; + + font-size: 5rem; + line-height: 4.5rem; + white-space: nowrap; + + color: black; + -webkit-text-fill-color: white; + -webkit-text-stroke-width: var(--stroke-width); + -webkit-text-stroke-color: var(--stroke-color); + + display: block; + transform: scaleY(1.5); +} + +p a{ + color: black; + -webkit-text-fill-color: white; + -webkit-text-stroke-width: var(--stroke-width); + -webkit-text-stroke-color: var(--stroke-color); + + cursor: pointer; + text-decoration: none; +} + +p a:hover{ + -webkit-text-fill-color: rgba(0, 0, 0, 1); +} + +p a:visited{ + color: inherit; +} + + + + + + + + + +.other-files{ + width: 100%; + height: 5vh; + + border-top: var(--stroke-width) solid var(--stroke-color); +} + +#footer{ + width: 100%; + display: flex; + justify-content: space-between; + margin-top: 1rem; +} + +h2{ + font-family: "aktiv-grotesk-condensed", sans-serif; + font-weight: 900; + font-style: normal; + text-transform: uppercase; + text-align: center; + font-size: 1.5rem; + line-height: 1.5rem; +} + +h2 a{ + cursor: pointer; + text-decoration: none; + color: #000; +} + +#bottom-title{ + width: 30vw; + position: absolute; + inset: auto 0 1.5rem 0; /* CHANGE THIS INSET TO MOVE IT UP OR DOWN */ + margin: 0 auto; + z-index: 0; +} + + + + + + + + +/* PRINT SECTION STARTS HERE ------------------------------------------------------------------------------------------ */ +/* #web-gradient{ + position: absolute; + inset: 0; + + width: 100%; + height: 100%; + + mix-blend-mode: multiply; + pointer-events: none; + + z-index: 2; +} */ + +/* Valia's version */ +#web-gradient{ + position: absolute; + inset: 0; + width: 100%; + height: calc(100% + 1rem); + transform: translateY(-1rem); + mix-blend-mode: multiply; + pointer-events: none; + z-index: 2; +} + + + + + + + + + +#print{ + display: none; + position: fixed; + width: 100%; + height: 100%; +} + +.print-container{ + position: fixed; + width: 100%; + height: 100%; +} + +#print-gradient{ + mix-blend-mode: multiply; +} + + + + + + + + + +#print-graphics{ + padding: 1cm; +} + +#print-year{ + position: fixed; + height: 100%; + left: 50%; + transform: translateX(-50%); +} + +#print-top-container{ + width: 100%; + height: 4%; + overflow: hidden; +} + +#print-top-title{ + width: 40%; + margin-left: 50%; + transform: translateX(-50%); +} + +#print-bottom-container{ + width: 100%; + height: 2%; + overflow: hidden; +} + +#print-bottom-title{ + width: 25%; + margin-left: 50%; + transform: translate3d(-50%, -0.25cm, 0); +} + + + + + + + + + +#print-file{ + position: relative; + width: 100%; + height: 94%; + + border: var(--stroke-width) solid var(--stroke-color); + border-top-right-radius: 1cm; + border-top-left-radius: 1cm; + + display: flex; + flex-direction: column; + justify-content: space-between; +} + +#print-dots{ + position: absolute; + inset: 0 0 auto 0; + z-index: 0; +} + +#print-logo{ + width: calc(100% + 1cm); + margin: -0.5cm 0 0 -0.5cm; + height: 30%; + z-index: 1; +} + +.print-other-files{ + width: 100%; + height: 1cm; + + border-top: var(--stroke-width) solid var(--stroke-color); +} + + + + + + + + + +#print-midground{ + display: flex; + justify-content: center; + align-items: center; + padding: 2cm; +} + +#print-work-container{ + max-width: 100%; + max-height: 100%; +} + +#work-img{ + max-width: 100%; + max-height: 100%; +} + +h3{ + font-family: "aktiv-grotesk-condensed", sans-serif; + font-weight: 900; + font-style: normal; + text-transform: uppercase; + + font-size: 2rem; + line-height: 2rem; + + color: black; + -webkit-text-fill-color: rgba(0, 0, 0, 0); + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: black; +} + +h4{ + font-family: "aktiv-grotesk-condensed", sans-serif; + font-weight: 900; + font-style: normal; + text-transform: uppercase; + + font-size: 1.5rem; + line-height: 1.5rem; +} + + + + + + + + + +#print-foreground{ + padding: 1cm; +} + +#print-logo-container{ + position: relative; + width: 100%; + height: 94%; + top: 4%; + + display: flex; + flex-direction: column; + justify-content: space-between; +} + +#print-logo-over{ + width: calc(100% + 1cm); + margin: -0.5cm 0 0 -0.5cm; + height: 30%; + z-index: 1; +} + + + + + + + + + +@media print { + @page{ + margin: 0; + } + + body{ + width: 100%; + height: 100%; + position: relative; + } + + main{ + display: none; + } + + #print{ + display: block; + } +} + +@media only screen and (max-width: 957px) { + p{ + font-family: "aktiv-grotesk-condensed", sans-serif; + font-weight: 900; + font-style: normal; + text-transform: uppercase; + + font-size: 4.5rem; + line-height: 4rem; + white-space: nowrap; + + color: black; + -webkit-text-fill-color: white; + -webkit-text-stroke-width: var(--stroke-width); + -webkit-text-stroke-color: var(--stroke-color); + + display: block; + transform: scaleY(1.5); + } +} + +@media only screen and (max-width: 886px) { + + #bottom-title{ + width: 24vw; + position: absolute; + inset: auto 0 5rem 0; /* CHANGE THIS INSET TO MOVE IT UP OR DOWN */ + margin: 0 auto; + z-index: 0; + } +} + +@media only screen and (max-width: 792px) { + + #bottom-title{ + width: 24vw; + position: absolute; + inset: auto 0 7rem 0; /* CHANGE THIS INSET TO MOVE IT UP OR DOWN */ + margin: 0 auto; + z-index: 0; + } + + h2 { + padding-top: 3vh; + cursor: pointer; + text-decoration: none; + color: #000; + } +} + +@media only screen and (max-width: 773px) { + + #bottom-title{ + width: 24vw; + position: absolute; + inset: auto 0 7rem 0; /* CHANGE THIS INSET TO MOVE IT UP OR DOWN */ + margin: 0 auto; + z-index: 0; + } + + #web-gradient{ + position: absolute; + inset: 0; + width: 110%; + height: calc(100% + 1rem); + transform: translateY(-1rem); + mix-blend-mode: multiply; + pointer-events: none; + z-index: 2; + } + + p{ + font-family: "aktiv-grotesk-condensed", sans-serif; + font-weight: 900; + font-style: normal; + text-transform: uppercase; + + font-size: 4rem; + line-height: 3.5rem; + white-space: nowrap; + + color: black; + -webkit-text-fill-color: white; + -webkit-text-stroke-width: var(--stroke-width); + -webkit-text-stroke-color: var(--stroke-color); + + display: block; + transform: scaleY(1.5); + } +} + +@media only screen and (max-width: 603px) { + + #bottom-title{ + width: 24vw; + position: absolute; + inset: auto 0 7rem 0; /* CHANGE THIS INSET TO MOVE IT UP OR DOWN */ + margin: 0 auto; + z-index: 0; + } + + #web-gradient{ + position: absolute; + inset: 0; + width: 110%; + height: calc(100% + 1rem); + transform: translateY(-1rem); + mix-blend-mode: multiply; + pointer-events: none; + z-index: 2; + } + +} + +@media only screen and (max-width: 530px) { + + #bottom-title{ + width: 22vw; + position: absolute; + inset: auto 0 10rem 0; /* CHANGE THIS INSET TO MOVE IT UP OR DOWN */ + margin: 0 auto; + z-index: 0; + } + + h2 { + padding: 2vh; + padding-top: 3vh; + cursor: pointer; + text-decoration: none; + color: #000; + } + + p { + font-family: "aktiv-grotesk-condensed", sans-serif; + font-weight: 900; + font-style: normal; + text-transform: uppercase; + + font-size: 3.5rem; + line-height: 3rem; + white-space: nowrap; + + color: black; + -webkit-text-fill-color: white; + -webkit-text-stroke-width: var(--stroke-width); + -webkit-text-stroke-color: var(--stroke-color); + + display: block; + transform: scaleY(1.5); + } +} + +@media only screen and (max-width: 482px) { + + #bottom-title{ + width: 22vw; + position: absolute; + inset: auto 0 11.5rem 0; /* CHANGE THIS INSET TO MOVE IT UP OR DOWN */ + margin: 0 auto; + z-index: 0; + } + + h2 { + padding: 2vh; + padding-top: 3vh; + cursor: pointer; + text-decoration: none; + color: #000; + } +} + +@media only screen and (max-width: 463px) { + + #bottom-title{ + width: 22vw; + position: absolute; + inset: auto 0 12.5rem 0; /* CHANGE THIS INSET TO MOVE IT UP OR DOWN */ + margin: 0 auto; + z-index: 0; + } + + h2 { + padding: 2vh; + padding-top: 3vh; + cursor: pointer; + text-decoration: none; + color: #000; + } +} + +@media only screen and (max-width: 448px) { + + #bottom-title{ + width: 22vw; + position: absolute; + inset: auto 0 14.5rem 0; /* CHANGE THIS INSET TO MOVE IT UP OR DOWN */ + margin: 0 auto; + z-index: 0; + } + + h2 { + padding: 2vh; + cursor: pointer; + text-decoration: none; + color: #000; + } +} + +@media only screen and (max-width: 411px) { + + #bottom-title{ + width: 22vw; + position: absolute; + inset: auto 0 12.5rem 0; /* CHANGE THIS INSET TO MOVE IT UP OR DOWN */ + margin: 0 auto; + z-index: 0; + } + + h2 { + padding-top: 3vh; + cursor: pointer; + text-decoration: none; + color: #000; + } + + #web-gradient{ + position: absolute; + inset: 0; + width: 140%; + height: calc(100% + 1rem); + transform: translateY(-1rem); + mix-blend-mode: multiply; + pointer-events: none; + z-index: 2; + } +}