Skip to content

Commit

Permalink
improv
Browse files Browse the repository at this point in the history
  • Loading branch information
@meqativ
meqativ committed Aug 5, 2024
1 parent c50c1b2 commit 4c6ee16
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 72 deletions.
22 changes: 10 additions & 12 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<!D_OCTYPE html>
<!DOCTYPE html5>
<html lang="en">
<head>
<script preload defer src="./script.js"></script>
<link preload href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+Mono:wght@300&display=swap" rel="stylesheet">
<link preload href="./assets/favicon.svg" rel="icon" type="image/svg+xml" />
<script preload defer src="./script.js"></script>
<link preload href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+Mono:wght@300&display=swap" rel="stylesheet">
<link preload href="./assets/favicon.svg" rel="icon" type="image/svg+xml" />
<link preload href="style.css" rel="stylesheet" type="text/css" />
<meta property="og:title" content="meqativ"/>
<meta itemprop="image" property="og:image" content="https://meqativ.github.io/home/assets/avatar.png" />
<meta content="origin" name="referrer">
<meta name="theme-color" content="#8800ff" />
<meta content="origin" name="referrer">
<meta name="theme-color" content="#8800ff" />
<meta name="color-scheme" content="dark light" />
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta charset="utf-8" />
Expand All @@ -18,9 +18,8 @@
<main>
<h6 id="lib_text">made with no libraries</h6>
<h1 class="title" translate="no">meqativ</h1>
<div class="pfp">
<img tabindex="0" class="avatar" alt="avatar" src="./assets/avatar.png"/>
<!--img class="overlay" alt="christmas overlay" src="./assets/jollyoverlay.png"/-->
<div class="pfp" tabindex="0" alt="my avatar">
<img class="avatar" src="./assets/avatar.png"/>
</div>
<h3 tabindex="0" id="bio">
<span translate="no" id="ua_flag"><img draggable="false" alt="Ukrainian flag" src="./assets/ukrainian_flag.svg"/></span>Ukrainian born in 2007
Expand All @@ -29,7 +28,7 @@ <h2 id="stuff_title" class="title">my stuff</h2>
<h3 id="js_warning">enable JavaScript for extended button functionality</h3>
<script>
document.querySelector("h3#js_warning").remove();
document.currentScript.remove();
document.currentScript.remove();
</script>
<ul class="buttons">
<a href="https://github.com/meqativ/home">
Expand Down Expand Up @@ -80,8 +79,7 @@ <h3 translate="no"><span translate="no" id="strikethrough">twitter</span> x</h3>
</button>
</a>
<a href="https://discord.com/users/744276454946242723">

<button title="Discord user profile. Slow response time, even if you're able to send a message. preferably use telegram">
<button title="Discord user profile">
<div class="logo_container">
<picture>
<img draggable="false" src="./assets/discord/blurple/logo.svg" />
Expand Down
113 changes: 53 additions & 60 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,21 @@
@import url("./modules/scrollbars.css");
div[style="position: fixed !important; bottom: 0% !important; width: 100% !important; height: 55px !important; z-index: 9999 !important;"] {
display: none !important;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
font-style: italic;
background-repeat: no-repeat;
background-size: cover;
shape-margin: .75rem;
max-width: 100%;
height: auto;
vertical-align: middle;
font-style: italic;
background-repeat: no-repeat;
background-size: cover;
shape-margin: .75rem;
}
:root {
--scrollbar-width: .8rem;
--scrollbar-track-base: transparent;

}
@media (prefers-color-scheme: dark) {
img#code {
filter: invert(1);
}
img#code {
filter: invert(1);
}
body {
background-color: #000;
}
Expand All @@ -43,11 +39,11 @@ img {
}
}
img#code {
width: 1rem;
width: 1rem;
}
#lib_text {
text-align: center;
opacity: .2;
text-align: center;
opacity: .2;
}
#lib_text::selection {
background: rgba(125, 0, 255, 1);
Expand All @@ -63,14 +59,14 @@ img {
}
.title {
margin-top: 3%;
}
}

* {
transition: all 0.25s ease-in;
-webkit-tap-highlight-color: transparent;
font-family: 'Noto Sans Mono', sans-serif;
margin: 0;
padding: 0;
transition: all 0.25s ease-in;
-webkit-tap-highlight-color: transparent;
font-family: 'Noto Sans Mono', sans-serif;
margin: 0;
padding: 0;
}
font {
transition: font-size 0s;
Expand All @@ -80,11 +76,11 @@ font {
outline-offset: .2rem;
}
main {
display: flex;
justify-content: center;
flex-wrap: nowrap;
flex-direction: column;
align-items: center
display: flex;
justify-content: center;
flex-wrap: nowrap;
flex-direction: column;
align-items: center
}

h3#js_warning {
Expand Down Expand Up @@ -126,7 +122,7 @@ button:focus {
width: min(100%, 18rem);
}
.buttons > a {
padding: unset;
padding: unset;
}
.buttons > div.telegram-btns {
scroll-padding-bottom: 2rem;
Expand Down Expand Up @@ -156,31 +152,31 @@ button:focus {
align-self: flex-start;
height: 1rem;
width: 1rem;
min-width: unset;
min-height: unset;
min-width: unset;
min-height: unset;
}
.buttons a button h3 {
text-align: start;
width: 100%;
cursor: pointer;
}
div.telegram-btns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
transition: max-height ease-in .25s;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
transition: max-height ease-in .25s;
}
div.telegram-btns[closed="false"] {
max-height: 5rem;
height: 5rem;
& button { padding-top: .5rem; padding-bottom: .5rem; }
max-height: 5rem;
height: 5rem;
& button { padding-top: .5rem; padding-bottom: .5rem; }
}
div.telegram-btns[closed="true"] {
& button { padding-top: 0px; padding-bottom: 0px; }
max-height: 0px;
height: 0px;
max-height: 0px;
height: 0px;
}
div.telegram-btns button {
gap: .5rem;
Expand Down Expand Up @@ -225,31 +221,28 @@ div.logo_container picture {
}

.pfp {
margin: .8rem;
text-align: center;
z-index: 0;
margin: .8rem;
text-align: center;
-webkit-border-radius: 15%;
-moz-border-radius: 15%;
border-radius: 15%;
-khtml-border-radius: 15%;
display: grid;
transition: scale ease-in-out .5s;
display: grid;
transition: scale ease-in-out .5s;
}
.pfp > img {
border-radius: inherit;
object-fit: contain;
width: min(100%, 10rem);
width: min(100%, 10rem);
height: 10rem;

grid-column: 1;
grid-row: 1;
z-index: 1;
}
.pfp > img.avatar {
backdrop-filter: blur(4px);
z-index: 0;

grid-column: 1;
grid-row: 1;
z-index: 1;
}
.pfp:hover, .pfp img:focus, .pfp img:focus+.overlay {
scale: 1.8;
.pfp:hover, .pfp:focus {
scale: 1.8;
}
span#age {
border-radius: 100%;
Expand All @@ -262,7 +255,7 @@ span#ua_flag img {
background-color: transparent;
user-select: none;
height: 1.5rem;
vertical-align: sub;
aspect-ratio: 3/2;
border-radius: .5rem;
vertical-align: sub;
aspect-ratio: 3/2;
border-radius: .5rem;
}

0 comments on commit 4c6ee16

Please sign in to comment.