andrews/sheep/home.css

4 lines
17 KiB
CSS

/* Hi! This file was generated, so it's hard to read. The source code is at home-page/index.html.scss */
:root{color-scheme:dark;} .visually-hidden{clip:rect(0 0 0 0); clip-path:inset(50%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px;}button{-webkit-appearance:none; border:none; padding:0; background:none; font:inherit; color:inherit;}button:not(:disabled){cursor:pointer;}a{text-decoration:none; color:inherit;}html,body{height:100%;}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';margin:0; background-color:#171931; color:rgba(255,255,255,0.7); word-break:break-word;}code,pre{font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;}.strip{position:absolute; z-index:-1; top:0; left:0; right:0; height:145px; background-image:linear-gradient(180deg,transparent 86.21%,rgb(23,25,49,0.75) 86.21%,rgb(23,25,49,0.92),#171931),linear-gradient(90deg,#20de88,#28bbe8);}.intro{position:fixed; bottom:50%; right:50%; z-index:5; transform-origin:bottom right; animation:to-corner-then-disappear 2s cubic-bezier(0.7,0,0.35,1) 1.2s forwards;}@keyframes to-corner-then-disappear{ 0%{bottom:50%; right:50%; transform:scale(1);}70%{bottom:35px; right:35px; opacity:1; transform:scale(0.5);} 80%{bottom:35px; right:35px; opacity:1; transform:scale(0.5);}100%{bottom:35px; right:35px; opacity:0; transform:scale(0.5);}}.intro-back{position:absolute; top:50%; left:50%; border-radius:50%; background-color:black; pointer-events:none; transform:translateZ(0); animation:circle-in 0.8s 0.8s both;}@keyframes circle-in{from{ width:142vmax; height:142vmax; margin:-71vmax;}to{width:100px; height:100px; margin:-50px;}}.logo{position:absolute; width:90px; top:50%; left:50%; transform:translate(-50%,-48%); pointer-events:none;}.logo-path{fill:none; stroke:rgba(255,255,255,0.7); stroke-width:20; animation:stroke-intro 1s 0.5s backwards;}@keyframes stroke-intro{from{stroke-dasharray:0 1376; stroke-dashoffset:-170;}to{stroke-dasharray:1376 0; stroke-dashoffset:-730;}}.from-sheep .logo-path{animation:none;}sheep-btn{animation:do-not-show-so-quickly 0.2s 2.4s backwards;}@keyframes do-not-show-so-quickly{from{opacity:0;}to{opacity:1;}}.about{max-width:600px; width:100%; margin:0 auto;}.card{border-radius:10px; overflow:hidden; padding:0 20px; margin:20px; background-color:#24364a; box-shadow:0 3px 10px rgba(0,0,0,0.5);}.card p,.card h2{margin:15px 0;}.card h2{color:rgba(255,255,255,0.9); font-weight:normal;}.a11y-link:focus{position:fixed; top:0; left:0; margin:20px; background:white; color:#066460; padding:10px 20px; box-shadow:0 3px 10px rgba(0,0,0,0.5); border-radius:5px; overflow:visible; width:auto; height:auto; clip:auto; clip-path:none;}.card h1{margin-top:20px; margin-bottom:-15px; display:inline-block; -webkit-background-clip:text; background-clip:text; color:transparent; background-image:linear-gradient(90deg,#20de88,#28bbe8); font-size:64px;}.card .datum{margin-top:1em;}.attribute{background-color:#111213; text-transform:uppercase; font-size:0.8em; padding:5px 10px; border-radius:50px; margin-right:5px;}.age-clickable{cursor:pointer; color:rgba(255,255,255,0.9);}.age{position:relative; display:inline-block; -webkit-user-select:none; user-select:none;}.age span{position:absolute; -webkit-user-select:text; user-select:text; color:rgba(255,255,255,0.8);}.age span::after{content:attr(data-last); color:var(--last); position:absolute; top:1em; left:0;}.insignificant{opacity:0.4;}.emoji{ color:white;}.line{border:none; border-top:1px solid rgba(151,189,179,0.2); margin:15px -20px;}.intern-stats{ padding-left:27px; margin:15px 0;}.applied{color:#fdba74;}.denied{color:#fca5a5;}.interviews{color:#fde047;}.interests{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:100px 200px; grid-template-areas:"sheep webdev" "sheep ling";padding:0; list-style:none; margin:0 -20px;}.interest{display:flex; align-items:flex-end; justify-content:flex-start; padding:10px; background-size:cover; background-position:center;}.interest-name{background-color:rgba(0,0,0,0.5); padding:2px 10px; border-radius:20px;}.interest-sheep{grid-area:sheep; background-image:url('../img/interest-sheep.jpg');}.interest-webdev{grid-area:webdev; background-image:url('../img/interest-webdev.jpg');}.interest-ling{grid-area:ling; background-image:url('../img/interest-ling.jpg');}.socials{display:grid; grid-template-columns:repeat(auto-fill,minmax(40px,1fr)); gap:5px; overflow:hidden; border-radius:15px;}.social{display:block; position:relative; padding-bottom:100%; background-color:white; border-radius:15%; box-sizing:border-box; transition:transform .2s; z-index:1; overflow:hidden;}.social-instagram{background-image:radial-gradient(circle at 20% 100%,#F9D773,#F5AB3F,#F05431,#DD1D4F,#AA128D,#3D3CE2);}.social-replit .ball{border-width:10px;}.social-jsperf{background-image:linear-gradient(#6ca5dd,#1a6ab9);}.social-piskel{background-image:linear-gradient(90deg,transparent 0 33.3%,rgba(0,0,0,0.25) 33.3% 66.7%,rgba(0,0,0,0.5) 66.7% 100%),linear-gradient(#2A6FFF 0%,#2A6FFF 33.3%,#00EE00 33.3%,#00EE00 66.7%,#FF0000 66.7%,#FF0000 100%);}.social-devpost{background-image:linear-gradient(90deg,#3ACCE6 20%,transparent 20%,transparent 80%,#3ACCE6 80%);}.social-gmaps::before,.social-gmaps::after{content:'';display:block; position:absolute; top:-100%; bottom:-100%; left:0; right:0; margin:0 auto; width:calc(100% * 1.4142135623730951 / 3); z-index:-1; transform:rotate(45deg);}.social-gmaps::before{background-image:linear-gradient(#1B73E8 50%,#EA4336 50%); transform:rotate(45deg) translateX(-100%);}.social-gmaps::after{background-image:linear-gradient(#4285F4 50%,#FABD05 50%);}.social-tiktok .ball{box-shadow:3px 0 0 #FE2B54,-3px 0 0 #22F5ED,inset 3px 0 0 #FE2B54,inset -3px 0 0 #22F5ED;}.social-leetcode .ball{border-color:#FFA115; border-left-color:black; border-right-color:white;}.social-leetcode .ball::after{content:'';display:block; position:absolute; top:50%; left:50%; width:100%; padding:0 2.5px; height:5px; background-color:#B3B3B3; border-radius:5px; margin:-2.5px; }.social-steam{background-image:linear-gradient(to bottom,#111d2e 0%,#051839 21.2%,#0a1b48 40.7%,#132e62 58.1%,#144b7e 73.8%,#136497 87.3%,#1387b8 100%);}.ball{position:absolute; width:50%; height:50%; margin:25%; border-radius:50%; background-color:white; border:5px solid transparent; box-sizing:border-box; transition:all .2s;}.border-ball{border-color:white; background-color:transparent;}.social-name{display:none;}.usernames{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); margin:20px 0; gap:10px;}.username{display:flex; text-decoration:none; color:inherit; align-items:center;}a.username:hover{color:white;} .username-icon{display:block; width:32px; height:32px; padding:0; margin-right:10px;}.block-link{display:flex; text-decoration:none; color:inherit; margin:0 -20px; border-top:1px solid rgba(151,189,179,0.2); padding:20px;}.no-subtitle{padding:0 20px; height:64px; align-items:center;}.block-link:hover{background-color:rgba(255,255,255,0.05);}.block-link-content{flex:auto;}.block-link-title{display:block; font-size:1.2em; color:rgba(255,255,255,0.8);}.block-link-subtitle{font-size:0.9em;}.block-link-icon-wrapper{flex:none;}.block-link-icon{display:block; width:32px; height:32px;}.resume-icon{background-image:url('/home-page/icons/feather-arrow-right.svg'); background-position:center; background-repeat:no-repeat; transition:transform .2s;}.block-link:hover .resume-icon{transform:translateX(5px);}.project-wrapper{flex:auto;}.projects-info{padding:0 20px; max-width:600px; margin:0 auto; box-sizing:border-box;}.projects-header{font-weight:lighter; font-size:56px; margin:0; margin-top:20px; color:rgba(255,255,255,0.9);}.projects-note{margin:0; margin-top:10px;}.link{color:#1ce0e0;}.link:hover{text-decoration:underline;}.warning{padding:20px; border-radius:10px; background-color:#dd2263; color:white; box-shadow:0 3px 10px rgba(0,0,0,0.5); margin:20px 0;}.old-js-warning{display:none;}.old-js .old-js-warning{display:block;}.filters{display:none;}.has-js .filters{display:block;}.filter-by{margin:0; font-weight:normal; font-size:0.9em; text-transform:uppercase; margin-top:20px; color:rgba(255,255,255,0.5);}.base-tag{background-position:center; background-repeat:no-repeat; background-size:75%,auto;}.tag-recommend{background-color:#f0db20;background-image:url("/home-page/icons/tag-recommend.svg"),linear-gradient(150deg,#f0db20,#efb302);}.filter-tag{display:inline-flex; cursor:pointer; background-color:#111213; border-radius:50px; margin-top:10px; margin-right:10px; overflow:hidden; height:30px;}.filter-tag:hover{background-color:#272c31;}.filter-checkbox:focus-visible + .filter-tag{box-shadow:0 0 0 1px black,0 0 0 2px white;}.filter-checkbox:checked + .filter-tag{background-color:white; color:#111213;}.filter-tag-icon{width:30px;}.filter-checkbox:checked + .filter-tag .tag-recommend{background-image:url("/home-page/icons/feather-check.svg"),linear-gradient(150deg,#f0db20,#efb302);}.filter-checkbox:checked + .filter-tag .tag-recommend{background-image:url("/home-page/icons/feather-check-black.svg"),linear-gradient(150deg,#f0db20,#efb302);}.filter-tag-name{margin:0 10px; align-self:center;}.tag-game{background-color:#aaec12;background-image:url("/home-page/icons/tag-game.svg"),linear-gradient(150deg,#aaec12,#2ac213);}.filter-tag-icon{width:30px;}.filter-checkbox:checked + .filter-tag .tag-game{background-image:url("/home-page/icons/feather-check.svg"),linear-gradient(150deg,#aaec12,#2ac213);}.filter-checkbox:checked + .filter-tag .tag-game{background-image:url("/home-page/icons/feather-check-black.svg"),linear-gradient(150deg,#aaec12,#2ac213);}.tag-utility{background-color:#24b1f8;background-image:url("/home-page/icons/tag-utility.svg"),linear-gradient(150deg,#24b1f8,#2966d7);}.filter-tag-icon{width:30px;}.filter-checkbox:checked + .filter-tag .tag-utility{background-image:url("/home-page/icons/feather-check.svg"),linear-gradient(150deg,#24b1f8,#2966d7);}.tag-visual{background-color:#dc14eb;background-image:url("/home-page/icons/tag-visual.svg"),linear-gradient(150deg,#dc14eb,#7c1cf1);}.filter-tag-icon{width:30px;}.filter-checkbox:checked + .filter-tag .tag-visual{background-image:url("/home-page/icons/feather-check.svg"),linear-gradient(150deg,#dc14eb,#7c1cf1);}.tag-directory{background-color:#97a6b4;background-image:url("/home-page/icons/tag-directory.svg"),linear-gradient(150deg,#97a6b4,#7b8098);}.filter-tag-icon{width:30px;}.filter-checkbox:checked + .filter-tag .tag-directory{background-image:url("/home-page/icons/feather-check.svg"),linear-gradient(150deg,#97a6b4,#7b8098);}.tag-school{background-color:#e09304;background-image:url("/home-page/icons/tag-school.svg"),linear-gradient(150deg,#e09304,#fe7716);}.filter-tag-icon{width:30px;}.filter-checkbox:checked + .filter-tag .tag-school{background-image:url("/home-page/icons/feather-check.svg"),linear-gradient(150deg,#e09304,#fe7716);}.tag-incomplete{background-color:#de4b88;background-image:url("/home-page/icons/tag-incomplete.svg"),linear-gradient(150deg,#de4b88,#d24343);}.filter-tag-icon{width:30px;}.filter-checkbox:checked + .filter-tag .tag-incomplete{background-image:url("/home-page/icons/feather-check.svg"),linear-gradient(150deg,#de4b88,#d24343);}.tag-unintuitive{background-color:#a8713e;background-image:url("/home-page/icons/tag-unintuitive.svg"),linear-gradient(150deg,#a8713e,#78402d);}.filter-tag-icon{width:30px;}.filter-checkbox:checked + .filter-tag .tag-unintuitive{background-image:url("/home-page/icons/feather-check.svg"),linear-gradient(150deg,#a8713e,#78402d);}.projects{display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); padding:20px 0; grid-auto-flow:dense;}.project{display:block; position:relative; padding-bottom:100%; color:inherit; background-image:linear-gradient(45deg,#20de88,#28bbe8); transition:box-shadow .5s;}.showing-desc::after{content:'';border-bottom:10px solid #24364a; border-left:10px solid transparent; border-right:10px solid transparent; position:absolute; bottom:0; left:50%; margin-top:10px; margin-left:-10px; pointer-events:none;}.thumbnail{position:absolute; top:0; left:0; width:100%; z-index:0; opacity:0.7; filter:grayscale(1); transition:opacity .5s,filter .5s;}.showing-desc .thumbnail{opacity:1; filter:grayscale(0); transition:opacity .2s,filter .2s;}.title{display:block; position:absolute; bottom:0; left:0; right:0; z-index:1; background-image:linear-gradient(0deg,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.45) 50%,rgba(0,0,0,0.2) 70%,rgba(0,0,0,0.05) 90%,transparent 100%); padding:10px 15px; padding-top:30px; font-size:1px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; color:white; opacity:0; transition:opacity .2s;}.tags{display:flex; position:absolute; top:0; left:0; z-index:1; margin:8px;}.tag{display:block; width:24px; height:24px; border-radius:50%; margin-right:8px; opacity:0; transition:opacity .5s; transition-delay:0s; box-shadow:0 2px 5px rgba(0,0,0,0.15);}.project.showing-desc .tag{opacity:0; pointer-events:none;}.project:hover .tag:nth-child(1){transition-delay:calc(0.1s * 1);}.show-info{display:none; position:absolute; top:0; right:0; z-index:1; width:36px; height:36px; background-color:rgba(0,0,0,0.3); background-image:url('/home-page/icons/feather-info.svg'); background-size:24px; background-repeat:no-repeat; background-position:center; padding:6px; margin:6px; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,0.5); opacity:0; transition:opacity .5s,background-color .2s,box-shadow .2s; transition-delay:0.05s,0,0;}.show-info:hover{background-color:rgba(0,0,0,0.8); box-shadow:0 3px 5px rgba(0,0,0,0.5);}.project:hover .tag:nth-child(2){transition-delay:calc(0.1s * 2);}.project:hover .tag:nth-child(3){transition-delay:calc(0.1s * 3);}.description{display:flex; flex-direction:column; align-items:center; background-color:#24364a; grid-column:1 / -1; line-height:1.5;}.description-body{width:100%; max-width:680px; box-sizing:border-box; padding:20px;}.desc-title{margin:0; flex:auto; color:rgba(255,255,255,0.9); font-weight:normal; font-size:2em; line-height:1.1;}.desc-tag{display:inline-flex; height:30px; overflow:hidden; margin-top:10px; margin-right:10px;}.desc-tag-icon{width:30px; border-top-left-radius:25px; border-bottom-left-radius:25px;}.desc-tag-name{border-top-right-radius:25px; border-bottom-right-radius:25px; border:1px solid rgba(151,189,179,0.2); border-left:none; padding-right:10px; padding-left:5px; display:flex; align-items:center;}.description-text p{margin:10px 0;}.description-text p:last-child{margin-bottom:0;}.desc-visit{align-self:stretch; text-align:center; text-transform:uppercase; background-color:#1ce0e0; color:black; padding:10px 0; margin:20px; margin-top:0; border-radius:50px; font-weight:bold; transition:background-color .2s;}.desc-visit:hover{background-color:rgba(255,255,255,0.05);}.tinder-note{margin:0; padding:20px; padding-top:0; padding-right:60px;}@media (hover:hover){a.username:hover .social{transform:scale(1.1);}a.social:hover .ball,a.username:hover .ball{transform:scale(1.2);}.project:not(.showing-desc):hover{box-shadow:0 5px 15px rgba(0,0,0,0.8); transition:box-shadow .2s; z-index:1;}.project:hover .thumbnail{opacity:1; filter:grayscale(0); transition:opacity .2s,filter .2s;}.project:not(.showing-desc):hover .tag{opacity:1;}.project:not(.showing-desc):hover .show-info{opacity:1;}}@media (max-width:400px){.webdev-extra{display:none;}}@media (min-width:680px){.socials{grid-template-columns:repeat(auto-fill,minmax(50px,1fr)); gap:10px;}.projects{grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; padding:20px;}.project{border-radius:10px; box-shadow:0 2px 5px rgba(0,0,0,0.3);}.showing-desc::after{top:100%; bottom:unset; filter:drop-shadow(0 3px 10px black);} .showing-desc::before{content:'';display:block; background-color:#24364a; position:absolute; top:100%; left:50%; margin-top:20px; margin-left:-30px; width:60px; height:23px; z-index:1; pointer-events:none;}.thumbnail{border-radius:10px;}.title{font-size:24px; opacity:0.5;}.project.showing-desc .title{opacity:0; pointer-events:none;}.has-js .show-info{display:block;}.description{border-radius:10px; box-shadow:0 3px 10px rgba(0,0,0,0.5);}.desc-visit{display:none;}}@media (min-width:680px) and (hover:hover){.project:not(.showing-desc):hover .title{opacity:1;}}@media (min-width:1000px){.strip{height:60px; background-image:linear-gradient(180deg,transparent 66.67%,rgb(23,25,49,0.75) 66.67%,rgb(23,25,49,0.92),#171931),linear-gradient(90deg,#20de88,#28bbe8);}.about{overflow:auto; width:500px; position:fixed; top:0; left:0; bottom:0; -ms-overflow-style:none; scrollbar-width:none; }.about::-webkit-scrollbar{display:none; }.card{margin-left:40px;}.socials{gap:20px; overflow:unset;}.project-wrapper{margin-left:500px;}.projects-info{margin:0; max-width:none;}.projects-header{margin-top:60px;}}@media (hover:hover) and (min-width:1000px){a.social{transform:scale(1.1);}}
/*please work*/