From 2782bafcfdb69ef7b69a51a717a6bd35095e9369 Mon Sep 17 00:00:00 2001 From: Alex Scerba Date: Fri, 27 Sep 2024 18:56:29 -0400 Subject: Add base files --- static/style.css | 450 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 450 insertions(+) create mode 100644 static/style.css (limited to 'static') diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..1f27ceb --- /dev/null +++ b/static/style.css @@ -0,0 +1,450 @@ +@font-face { + font-family: 'DejaVu Sans'; + src: url('/static/assets/fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_regular_macroman/DejaVuSans-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'DejaVu Sans'; + src: url('/static/assets/fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_bold_macroman/DejaVuSans-Bold-webfont.woff') format('woff'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'DejaVu Sans'; + src: url('/static/assets/fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_oblique_macroman/DejaVuSans-Oblique-webfont.woff') format('woff'); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: 'DejaVu Sans'; + src: url('/static/assets/fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_boldoblique_macroman/DejaVuSans-BoldOblique-webfont.woff') format('woff'); + font-weight: bold; + font-style: italic; +} + +@font-face { + font-family: 'DejaVu Sans'; + src: url('/static/assets/fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_extralight_macroman/DejaVuSans-ExtraLight-webfont.woff') format('woff'); + font-weight: lighter; + font-style: normal; +} + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + font-family: 'DejaVu Sans', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; +} + +main { + padding: 1rem; + padding-top: 7rem; + padding-bottom: 3rem; + max-width: 85rem; + margin-left: auto; + margin-right: auto; +} + +header { + position: fixed; + width: 100%; + display: flex; + align-items: center; + padding: 1rem; + background-color: white; + border-bottom: 0.1rem solid black; + z-index: 100; +} + +.logo-w-name { + display: flex; +} + +.logo { + padding-left: .75rem; + padding-right: .75rem; + height: 1.5rem; + filter: invert(70%) +} + +.name { + font-weight: bold; + margin: auto 1rem; + color: rgb(100, 100, 100) +} + +h1 { + display: none; + font-size: 2.5rem; + color: rgb(143, 143, 143); + /* padding-left: 1rem; */ + /* border-left: 1rem solid rgb(59, 195, 219); */ + /* border-bottom: .12rem solid rgb(196, 196, 196); */ +} + +b { + color:rgb(100, 100, 100); +} + +.main-nav-position { + display: flex; + justify-content: right; + flex-grow: 1; + padding-right: 2rem; + border-right: .5rem solid rgb(196, 196, 196); +} + +.main-nav { + display: flex; + gap: 2rem; + padding-top: .5rem; + padding-bottom: .5rem; + font-size: .8rem; +} + +.toggler, .hamburger { + display: none; +} + +.even-2-col-grid { + display: grid; + grid-template-columns: 1fr 1fr; +} + +.uneven-column { + display: flex; + gap: 4rem; +} + +.uneven-column-grid { + display: grid; + gap: 3rem; + grid-template-columns: 25rem 1fr; +} + +.side-info { + min-width: 20rem; + max-width: 30%; + /*background-color: rgb(240,240,240);*/ +} + +/* img { + max-width: 100%; + height: auto; + vertical-align: middle; + font-style: italic; + shape-margin: 1rem; +} */ + +img, video { + max-width: 100%; + height: auto; + display: block; + font-style: italic; +/* color: rgb(177, 177, 177); + background-color: rgb(73, 73, 73); */ +} + +iframe { + max-width: 100%; + aspect-ratio: 16/9; + display: block; +} + +.thumbnail img { + width: fit-content; + aspect-ratio: 4/3; + object-fit: cover; + display: block; + position: relative; + z-index: -1; +} + +.thumbnail { + position: relative; +} + +.title { + z-index: -1; + opacity: 0; + display: block; + position: absolute; + top: 0; + left: 0; + padding: 8rem 1rem; + text-align: center; + font-weight: bold; + color: white; + background-color: rgba(27, 27, 27, 0.726); + min-width: 100%; + min-height: 100%; + transition: all 0.3s ease-in-out; +} + +.thumbnail:hover .title { + opacity: 100%; +} + +a { + color: black; +} + +header a, .projects a { + text-decoration: none; +} + +a:hover:not(.thumbnail) { + opacity: 60%; +} + +.projects p { + margin-top: 0.5rem; + border-right: .5rem solid rgb(196, 196, 196); + border-top: .12rem solid rgb(196, 196, 196); +} + +.projectContent p { + margin-left: 1.5rem; +} + +.hide { + display: none; +} + +.footer-logo { + filter: invert(100%); + height: 1rem; + margin-left: .75rem; +} + +footer { + display: flex; + background-color: black; + padding-left: 1rem; + padding-right: 1rem; + gap: 1rem; + align-items: center; +} + +address { + padding-left: 1rem; + gap: 2rem; + font-size: .7rem; +} + +footer * { + color: white; +} + +blockquote { + font-style: italic; +} + +.sketchbook > img:first-of-type { + display: none; +} + +.back-button { + background-color: orange; +} + +@media screen and (max-width: 82rem) { + main { + margin-left: 5rem; + margin-right: 5rem; + } + .uneven-column { + flex-direction: column-reverse; + } + .side-info { + max-width: 100%; + } + .side-info img { + display: block; + margin: auto; + } +} + +@media screen and (max-width: 70rem) { + main { + margin-left: 1rem; + margin-right: 1rem; + } +} + +@media screen and (min-width: 45rem) { + address { + display: flex; + } +} + +@media screen and (max-width: 45rem) { + main { + margin-left: 0.5rem; + margin-right: 0.5rem; + } + nav { + display: none; + } + .footer-logo { + height: 1.5rem; + } + + header { + width: 100%; + } + + .even-2-col-grid { + grid-template-columns: 1fr; + } + + .toggler{ + /* ALWAYS KEEPING THE TOGGLER OR THE CHECKBOX ON TOP OF EVERYTHING : */ + visibility: visible; + display: block; + z-index: 104; + height: 60px; + width: 60px; + position: fixed; + top: 0; + right: 1rem; + cursor: pointer; + opacity: 0; + margin: 0; + } + + .hamburger{ + z-index: 103; + position: fixed; + top: 0; + right: 1rem; + height: 60px; + width: 60px; + padding: 5px; + /*border-bottom-left-radius: 8px; + background-color: var(--dark-transparent);*/ + + /* FOR DISPLAYING EVERY ELEMENT IN THE CENTER : */ + + display: flex; + align-items: center; + justify-content: center; + } + + /* CREATING THE MIDDLE LINE OF THE HAMBURGER : */ + + .hamburger > div{ + position: relative; + top: 0; + right: 0; + background: black; + height: 2px; + width: 60%; + transition: all 0.4s ease; + } + + /* CREATING THE TOP AND BOTTOM LINES : + TOP AT -10PX ABOVE THE MIDDLE ONE AND BOTTOM ONE IS 10PX BELOW THE MIDDLE: */ + + .hamburger > div::before, + .hamburger > div::after{ + content: ''; + position: absolute; + top: -10px; + background: black; + width: 100%; + height: 2px; + transition: all 0.4s ease; + } + + .hamburger > div::after{ + top: 10px; + } + + /* IF THE TOGGLER IS IN ITS CHECKED STATE, THEN SETTING THE BACKGROUND OF THE MIDDLE LAYER TO COMPLETE BLACK AND OPAQUE : */ + + .toggler:checked + .hamburger > div{ + background: rgba(0,0,0,0); /*Not bothering with var because one-off*/ + } + + .toggler:checked + .hamburger > div::before{ + top: 0; + transform: rotate(-45deg); + } + + /* AND ROTATING THE TOP AND BOTTOM LINES : */ + + .toggler:checked + .hamburger > div::after{ + top: 0; + transform: rotate(45deg); + } + + /* MAIN MENU WITH THE WHITE BACKGROUND AND THE TEXT : */ + + .main-nav { + + /* APPLYING TRANSITION TO THE MENU : */ + + display: flex; + flex-direction: column; + position: fixed; + top: 0; + right: 0; + z-index: 102; + background-color: white; + padding: 6rem 2rem 1rem 2rem; + align-items: center; + + /* HIDDEN INITIALLY : */ + + visibility: hidden; + } + + .main-nav > a { + margin-top: 15px; + margin-bottom: 15px; + font-size: 2rem; + } + + /* IF THE TOGGLER IS CHECKED, THEN INCREASE THE WIDTH OF THE MENU TO 30% , CREATING A SMOOTH EFFECT : */ + + .toggler:checked ~ .main-nav{ + visibility: visible; + animation: fadeIn 0.8s ease; + } + .toggler:checked ~ .bg-nav-block { + visibility: visible; + animation: fadeIn 0.8s ease; + } + .toggler:checked ~ .hamburger { + background-color: #00000000; + } +} + +@media screen and (max-width: 27rem) { +/* .logo { + height: 5vw; + } + .name { + font-size: 3vw; + } */ + .address { + font-size: .5rem; + } + .toggler{ + top: .4rem; + } + .hamburger{ + top: .4rem; + } +} \ No newline at end of file -- cgit v1.2.3