@charset "UTF-8"; /* ______ ______ ______ ______ ______ __ __ __ ______ ______ ______ ______ /\ ___\/\ __ \/\__ _\ /\ ___\/\__ _\/\ \_\ \/\ \ /\ ___\ /\ ___\/\ __ \/\ == \ \ \ \__ \ \ \/\ \/_/\ \/ \ \___ \/_/\ \/\ \____ \ \ \___\ \ __\ \ \ __\\ \ \/\ \ \ __< \ \_____\ \_____\ \ \_\ \/\_____\ \ \_\ \/\_____\ \_____\ \_____\ \ \_\ \ \_____\ \_\ \_\ _\/_____/\/_____/ \/_/_____\/_____/ \/_/ _\/_____/\/_____/\/_____/ _\/_/ __ \/_____/\/_/ /_/___ ______ /\ "-./ \/\ \/\ \ /\ ___\/\ ___\ /\ __ \/\ "-.\ \/\ __-. /\ "-./ \/\ \/\ \ /\ ___\/\ ___\ \ \ \-./\ \ \ \ \ \___\ \ __\\ \___ \ \ \ __ \ \ \-. \ \ \/\ \ \ \ \-./\ \ \ \ \ \___\ \ __\\ \___ \ \ \_\ \ \_\ \_\ \_____\ \_____\/\_____\ \ \_\ \_\ \_\\"\_\ \____- \ \_\ \ \_\ \_\ \_____\ \_____\/\_____\ \/_/ \/_/\/_/\/_____/\/_____/\/_____/ \/_/\/_/\/_/ \/_/\/____/ \/_/ \/_/\/_/\/_____/\/_____/\/_____/ */ /* html { overflow-x: hidden; } */ body { color: lightgray; font-family: 'soehne-leicht'; font-size: 20px; font-weight: 400; line-height: 1.35em; background-color: #191919; margin: 0; transition: background-color 0.5s ease; float: left; height: 100%; } #site-content { width: 100vw; } #site-content, #site-content-constrained { padding: 30px 95px 0 20px; margin: 0 auto; float: left; } #site-content-constrained { max-width: 1000px;} /* This is the primary wrapper */ .masthead { width: 100%; } .masthead .logo { width: 200px; position: fixed; top: 30px; left: 20px; } .masthead .logo svg { fill: indianred; transition: 0.3s; mix-blend-mode: difference; } .masthead .logo svg:hover { fill: blue; transition: 0.3s; } /*------- CLOCK -----------*/ #clock { position: fixed; top: 25px; right: 120px; text-align: right; color: #888; } /*______ ______ __ ______ ______ ______ /\ ___\/\ __ \/\ \ /\ __ \/\ == \/\ ___\ \ \ \___\ \ \/\ \ \ \___\ \ \/\ \ \ __<\ \___ \ \ \_____\ \_____\ \_____\ \_____\ \_\ \_\/\_____\ \/_____/\/_____/\/_____/\/_____/\/_/ /_/\/_____/ The colors will largely stick to the following: Background: #191919 IndianRed, or #cd5c5c Lightgray, or #d3d3d3 Blue, or #0000FF Lightblue, or #ADD8E6 */ /*_ _ ___ _ | \ | | __ _ __ __ / _ \ __ __ ___ _ __ | | __ _ _ _ | \| | / _` |\ \ / / | | | |\ \ / // _ \| '__|| | / _` || | | | | |\ || (_| | \ V / | |_| | \ V /| __/| | | || (_| || |_| | |_| \_| \__,_| \_/ \___/ \_/ \___||_| |_| \__,_| \__, | Not a lot to this one, but important all the same |___/ */ .site-header__logo:hover { display: none; } span.upward { font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Oxygen,Fira Sans,Droid Sans,sans-serif; font-weight: 500; padding-left: 20px; } /*___ _ _ / __| ___ __| |_(_)___ _ _ ___ \__ \/ -_) _| _| / _ \ ' \(_-< |___/\___\__|\__|_\___/_||_/__/*/ section { width: 100%; margin: 30px 0; display: inline-block; float: left; } section.introduction { margin: 150px 0 0;} .page-intro { width: 100%; display: block; } .page-intro h1 { max-width: 800px; text-align: left; margin-bottom: 10px; } section.exposition { margin: 15px 0; } .p-window { float: left; width: 100%; } /* A container for multiple paragraphs */ p { line-height: 1.45em; max-width: 850px; float: left; margin-bottom: .5em; margin-top: .5em; } section.lists { } /* columns on profile */ .columns { margin-bottom: 0; max-width: 850px; } .profile-list { line-height: 1.35em; margin-bottom: 20px; column-count: 2; } .profile-list ul { list-style: none; padding: 0; margin: 0; width: 100%; float: left; } .profile-list li { margin-bottom: 3px; } .profile-list li::before { content: "~ "; } /* A fancy little tilde before each list item */ /* work overview paragraphs */ p.work-overview { margin: 5px 0 15px;} section.hearmeout { float: right; } /* Right-aligned p on homepage */ /*ooooo..o oooo o8o .o8 d8P' `Y8 `888 `"' "888 Y88bo. 888 oooo .oooo888 .ooooo. .oooo.o `"Y8888o. 888 `888 d88' `888 d88' `88b d88( "8 `"Y88b 888 888 888 888 888ooo888 `"Y88b. oo .d8P 888 888 888 888 888 .o o. )88b 8""88888P' o888o o888o `Y8bod88P" `Y8bod8P' 8""888*/ #swipe-contain img { width: 800px; height: auto; } .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; } /* .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } */ /*▗▄▄▖ ▗▄▖ ▗▄▄▖ ▗▄▄▄▖▗▄▄▄▖ ▗▄▖ ▗▖ ▗▄▄▄▖ ▗▄▖ ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌ █ ▐▌ ▐▌ ▐▌▐▌ █ ▐▌ ▐▌ ▐▛▀▘ ▐▌ ▐▌▐▛▀▚▖ █ ▐▛▀▀▘▐▌ ▐▌▐▌ █ ▐▌ ▐▌ ▐▌ ▝▚▄▞▘▐▌ ▐▌ █ ▐▌ ▝▚▄▞▘▐▙▄▄▖▗▄█▄▖▝▚▄▞ */ section.project { max-width: none; margin-bottom: 50px; } /* Portfolio window */ section.project img { border-radius: 10px; } /*------- Row types -----------*/ .fullrow { float: left; width: 100%; margin: 0; } .row-multi, .row-of-two, .row-of-three { float: left; width: calc(100% + 20px); margin: 0 0 0 -10px; } /* Within the row types, these will decide row widths */ .eighty-five-row { width: 85%; } .one-row, .two-row, .imagefull, .eighty-five-row { float: left; padding: 0; margin: 10px 0; } .one-row { width: 100%; } .one-row img { width: 100%; } .two-row { width: 50%; } .three-row { width: 33.333333333%; float: left; } .fullrow a, .row-multi a, .row-of-two a, .row-of-three a, .img-pad { float: left; display: block; background-color: transparent; border: none;text-decoration: none; padding: 0 10px; } /* This ensures padding enough to maintain spacing */ /* ..... . .x+=:. .d88888Neu. 'L z` ^% F""""*8888888F .. . : . .@88 "8888" d88E`"888E` :888'8888. x88: `)8b. 9888L X888 888X '888> 9888 9888 888E 888E d888 '88%" 8888N=*8888 uzu. `8888L X888 888X '888> 9888 9888 888E 888E 8888.+" %8" R88 ,""888i ?8888 X888 888X '888> 9888 9888 888E 888E 8888L @8Wou 9% 4 9888L %888> "*88%""*88" '888!` 9888 9888 888& .888E '8888c. .+ .888888P` ' '8888 '88% `~ " `"` "888*""888" *888" 888& "88888% ` ^"F "*8Nu.z*" ^Y" ^Y' `" "888E "YP' .dWi `88E 4888~ J8% ^"===*"` */ /*------- Border radius on images -----------*/ img.radiustl { border-radius: 160px 0 0; } /*------- Turns images greyscale -----------*/ img.grey { -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */ filter: grayscale(100%); /* FF 35+ */ } img.grey:hover { transition: filter .5s ease-in-out; -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */ filter: grayscale(0%); /* FF 35+ */ } /*░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓███████▓▒░ ░▒▓████████▓▒░ ░▒▓██████▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓██████▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓██▓▒░ ░▒▓█▓▒░ ░▒▓███████▓▒░ ░▒▓████████▓▒░ ░▒▓██████▓▒░ */ .video-row { float: left; display: block; width: 100%; min-width: 400px; max-width: 85%; margin: 15px 0; } .video-place { position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; } .video-row iframe { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; border: none; border-radius: 15px; } /*d8888ba, 88 d8"' `"8b ,d "" d8' 88 88 ,adPPYYba, 8b,dPPYba, MM88MMM 88 ,adPPYba, 8b,dPPYba, ,adPPYba, 88 "" `Y8 88P' "8a 88 88 a8" "8a 88P' `"8a I8[ "" Y8, ,adPPPPP88 88 d8 88 88 8b d8 88 88 `"Y8ba, Y8a. .a8P 88, ,88 88b, ,a8" 88, 88 "8a, ,a8" 88 88 aa ]8I `"Y8888Y"' `"8bbdP"Y8 88`YbbdP"' "Y888 88 `"YbbdP"' 88 88 `"YbbdP"' 88 */ /* row for all project details */ .explanation { display: block; width: 100%; float: left; } .explanation p { max-width: 850px; margin: 0; padding-bottom: 20px; } .caption { text-align: left; font-size: 18px; letter-spacing: .03em; line-height: 1.25em; padding: 8px 8px 12px 0; margin: 0; font-family: 'soehne-leicht'; float: left; color: gray; } section.nextsteps { } /* 88 88 88 88 88 88 88 88 88aaaaaaaa88 ,adPPYba, ,adPPYYba, ,adPPYb,88 ,adPPYba, 8b,dPPYba, ,adPPYba, 88""""""""88 a8P_____88 "" `Y8 a8" `Y88 a8P_____88 88P' "Y8 I8[ "" 88 88 8PP""""""" ,adPPPPP88 8b 88 8PP""""""" 88 `"Y8ba, 88 88 "8b, ,aa 88, ,88 "8a, ,d88 "8b, ,aa 88 aa ]8I 88 88 `"Ybbd8"' `"8bbdP"Y8 `"8bbdP"Y8 `"Ybbd8"' 88 `"YbbdP*/ /* large serif headers */ h1, h2 { font-family: 'AppleGaramondLight', Garamond, serif; line-height: 1em; letter-spacing: -.005em; margin: 0; max-width: 90%; color: lightgray; font-weight: normal; } h1 { font-size: 55px; } h1.red { color: indianred; } h2 { font-size: 48px; } h2.big-idea { color: lightblue; } .casename { font-weight: 600; font-family: 'soehne-halbfett'; font-size: 65px; } h3,h4,h5,h6 {font-weight:400; font-family: 'soehne-halbfett'; } h3 { font-weight: 600; font-size: inherit; margin: 20px 0 5px 0; color: indianred; font-size: 22px; } /* secondary serif, homepage, right-aligned */ h2.andalso { max-width: 700px; float: right; } /* 88 88 88 88 88 "" 88 ,d 88 88 88 88 88 88 88 8b,dPPYba, 88 ,d8 ,adPPYba, MM88MMM 8b d8 88 ,adPPYba, ,adPPYba, 88 88 88P' `"8a 88 ,a8" I8[ "" 88 `8b d8' 88 a8P_____88 I8[ "" 88 88 88 88 8888[ `"Y8ba, 88 `8b d8' 88 8PP""""""" `"Y8ba, 88 88 88 88 88`"Yba, aa ]8I 88, `8b,d8' 88 "8b, ,aa aa ]8I 88888888888 88 88 88 88 `Y8a `"YbbdP"' "Y888 Y88' 88 `"Ybbd8"' `"YbbdP"' d8' */ a.box { color: #ffffff; text-decoration: none; border: 1px solid hsla(32, 24%, 70%, 1); padding: 0 8px; border-radius: 8px; background-color: #524bfa; } a.box2 { color: #ffffff; text-decoration: none; border: 1px solid hsla(32, 24%, 70%, 1); padding: 0 8px; border-radius: 8px; background-color: #FF4500; } a.box2:hover, a.box:hover { background-color: #c5b4a0; color: #1a1a1a; } a.simplelink { color: indianred; font-family: 'soehne-buch'; letter-spacing: -.02em; } a.simplelink:hover { color: blue; transition: filter 1.5s ease-in-out; } strong { color: indianred;} .code_mono { display: inline; background: var(--neutral-alpha-weak); border: 1px solid #888; border-radius: 4px; font-family: JetBrainsMono; font-size: 80%; margin: 0 var(--static-space-2); padding: 2px 4px; vertical-align: top; } /*_____ _ | ___|___ ___ | |_ ___ _ __ | |_ / _ \ / _ \ | __|/ _ \| '__| | _|| (_) || (_) || |_| __/| | |_| \___/ \___/ \__|\___||_| */ footer { position: relative; z-index: 1; margin: 120px auto 0; padding: 15px 0; border-top: 1px solid #3e3e3e; clear: both; font-size: 14px; text-align: left; float: left; width: 100%; color: lightgray;letter-spacing: .03em; } footer ul { list-style: none; padding: 0; margin: 0; float: left; } footer li { display: inline; float: left; } footer span.divider { padding: 0 10px; float: left; } footer li.email, footer li.social { padding: 4px 15px 0 0; } footer li svg { height: 20px; width: auto; margin-top: -2px; fill: indianred; } footer svg:hover { transition: transform .7s ease-in-out; transform: rotate(360deg); fill: blue;} /*Bring it back to ... ____ _ ____ _ | _ \ ___ ___ _ __ ___ _ __ __| || _ \ ___ __ _ ___ | |_ | |_) |/ _ \/ __|| '_ \ / _ \ | '_ \ / _` || |_) |/ _ \ / _` | / __|| __| | _ <| __/\__ \| |_) || (_) || | | || (_| || _ <| __/| (_| || (__ | |_ |_| \_\\___||___/| .__/ \___/ |_| |_| \__,_||_| \_\\___| \__,_| \___| \__| |*/ @media only screen and (min-device-width : 800px) and (max-device-width : 5000px) { .site-header_nameplate { display: none; } } @media only screen and (min-device-width : 901px) and (max-device-width : 1100px) { .site-intro { font-size: 58px; } section { margin: 20px 0; } } @media only screen and (min-device-width : 800px) and (max-device-width : 900px) { .site-intro { font-size: 52px; line-break: 1em; } section.introduction { width: 85%; } section { margin: 20px 0; } .right-sans { font-size: 25px; } } @media only screen and (min-device-width : 201px) and (max-device-width : 799px) { .site-intro { font-size: 52px; line-break: 1em; } section.introduction { width: 100%; } section { margin: 20px 0; } .right-sans { font-size: 25px; } p { width: 90%;} #site-content, #site-content-constrained { padding: 0; } section { padding: 0 15px; } .site-header_nameplate { height: 32px; color: #000000; display: inline; position: fixed; left: 55px; } .site-header_nameplate img { height: 100%; width: auto; } .masthead { display: none; } } @media only screen and (min-device-width : 200px) and (max-device-width : 700px) { .two-row, .eighty-five-row, .video-row { width: 100%; max-width: 100%; } body { margin: 0; } } @media only screen and (min-device-width : 200px) and (max-device-width : 575px) { .site-intro { font-size: 38px; } section { margin: 10px 0; } #site-content, #site-content-constrained { padding-bottom: 0; } .columns, .profile-list { column-count: 1; } .profile-list { width: 100%; } h1, h2 { font-size: 36px; width: 85%; } section.exposition { margin: 0; } } @media only screen and (min-device-width : 100px) and (max-device-width : 400px) { .site-header_nameplate { height: 30px; color: #000000; display: inline; position: fixed; left: 45px; } .columns { column-count: 1; } .profile-list { width: 100%; } } @media only screen and (min-device-width : 100px) and (max-device-width : 1050px) { .profile-intro { width: 85%; display: block;} .portrait { width: 100%;} footer { margin-bottom: 8px; } footer ul { padding: 0 0 0 15px;} section.hearmeout, .hearmeout h2.andalso { float: left; } body { font-size: 19px; } .radiustl, .images img { border-radius: 10px; } } /*_____ _ |_ _|_ _ _ __ ___ __ _ _ __ __ _ _ __ | |__ _ _ | | | | | || '_ \ / _ \ / _` || '__|/ _` || '_ \ | '_ \ | | | | | | | |_| || |_) || (_) || (_| || | | (_| || |_) || | | || |_| | |_| \__, || .__/ \___/ \__, ||_| \__,_|| .__/ |_| |_| \__, | |___/ |_| |___/ |_| |___/ */ /* LIGHT */ .soehne-l { font-family: 'soehne-leicht', sans-serif; } @font-face {font-family: 'soehne-leicht'; src: url('font/soehne-leicht.eot'); src: url('font/soehne-leicht.eot?#iefix') format('embedded-opentype'), url('font/soehne-leicht.woff2') format('woff2'), url('font/soehne-leicht.woff') format('woff2');} /* BOOK */ .soehne-h { font-family: 'soehne-buch', sans-serif; } @font-face {font-family: 'soehne-buch'; src: url('font/soehne-buch.eot'); src: url('font/soehne-buch.eot?#iefix') format('embedded-opentype'), url('font/soehne-buch.woff2') format('woff2'), url('font/soehne-buch.woff') format('woff2');} /* BOLD */ .soehne-h, strong { font-family: 'soehne-halbfett', sans-serif; color: lightblue; } @font-face {font-family: 'soehne-halbfett'; src: url('font/soehne-halbfett.eot'); src: url('font/soehne-halbfett.eot?#iefix') format('embedded-opentype'), url('font/soehne-halbfett.woff2') format('woff2'), url('font/soehne-halbfett.woff') format('woff2');} /* SERIFS DON'T LIE */ .agl { font-family: 'AppleGaramondLight', serif; } @font-face {font-family: 'AppleGaramondLight'; src: url('font/AppleGaramondLight.eot'); src: url('font/AppleGaramondLight.eot?#iefix') format('embedded-opentype'), url('font/AppleGaramondLight.woff2') format('woff2'), url('font/AppleGaramondLight.woff') format('woff2');} /* MONO */ .mono { font-family: 'JetBrainsMono', serif; color: lightblue; } @font-face {font-family: 'JetBrainsMono'; src: url('font/JetBrainsMono-Regular.eot'); src: url('font/JetBrainsMono-Regular.eot?#iefix') format('embedded-opentype'), url('font/JetBrainsMono-Regular.woff2') format('woff2'), url('font/JetBrainsMono-Regular.woff') format('woff2');}