From f97d476b495126fd2474b8e3a2968658395d2a0f Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 13 Mar 2024 17:09:48 -0400 Subject: Complete restructure --- static/style.css | 430 ------------------------------------------------------- 1 file changed, 430 deletions(-) delete mode 100644 static/style.css (limited to 'static/style.css') diff --git a/static/style.css b/static/style.css deleted file mode 100644 index 4db06f7..0000000 --- a/static/style.css +++ /dev/null @@ -1,430 +0,0 @@ -@font-face { - font-family: 'DejaVu Sans'; - src: url('/static/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/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/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/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/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; -} - -.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; -} - -.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; -} - -.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: 4; - height: 60px; - width: 60px; - position: fixed; - top: 0; - right: 1rem; - cursor: pointer; - opacity: 0; - margin: 0; - } - - .hamburger{ - z-index: 3; - 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: 2; - 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