mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-04-05 07:44:33 +00:00
chore: make VK tile name similar on both of the tiles
This commit is contained in:
parent
90ecc9143d
commit
a835088cc5
2 changed files with 51 additions and 53 deletions
|
@ -35,7 +35,7 @@
|
|||
|
||||
<body class="flex flex-col gap-8 overflow-x-hidden bg-bg-black">
|
||||
<header
|
||||
class="fixed top-0 left-0 right-0 z-10 w-full text-white -translate-y-full transition-transform bg-bg-pink rounded-b-lg"
|
||||
class="fixed top-0 left-0 right-0 z-10 w-full text-white transition-transform -translate-y-full rounded-b-lg bg-bg-pink"
|
||||
id="header">
|
||||
<div class="container flex flex-wrap gap-1 mx-auto sm:items-center sm:justify-between">
|
||||
<a href="#landing">
|
||||
|
@ -150,7 +150,7 @@
|
|||
<div class="flex items-center justify-center w-full p-8 bg-pink-600">
|
||||
<p class="text-4xl font-bold">Music</p>
|
||||
</div>
|
||||
<div class="flex justify-center px-8 py-4 bg-opacity-50 bg-pink-600">
|
||||
<div class="flex justify-center px-8 py-4 bg-pink-600 bg-opacity-50">
|
||||
<p class="text-lg font-light">I listen a lot of various music, but mainly listen to
|
||||
EDM \ Happy Hardcore \ Tech \ Rock \ Alternative. By artist like: S3RL, Camellia,
|
||||
t+pazolite, BTMH, Saint Motel, and more...</p>
|
||||
|
@ -228,7 +228,7 @@
|
|||
<div class="flex items-center justify-center w-full p-8 bg-blue-500">
|
||||
<p class="text-3xl font-bold sm:text-4xl">Contact</p>
|
||||
</div>
|
||||
<div class="flex justify-center px-8 py-4 bg-opacity-50 bg-blue-500">
|
||||
<div class="flex justify-center px-8 py-4 bg-blue-500 bg-opacity-50">
|
||||
<p class="text-lg font-light">Feel free to reach out anytime! Ways to contact me via
|
||||
instant messengers are available in <a class="text-bg-pink hover:underline"
|
||||
href="#links">links</a> section!</p>
|
||||
|
@ -485,7 +485,7 @@
|
|||
<div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#1f6cc5]">
|
||||
<img class="object-contain w-16 h-16 mx-auto" alt="" src="./static/assets/VKLogo.png" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium">VK</p>
|
||||
<p class="text-2xl font-medium">VKontakte</p>
|
||||
<p class="text-base font-light">radiquum</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -698,6 +698,22 @@ video {
|
|||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.-ml-4 {
|
||||
margin-left: -1rem;
|
||||
}
|
||||
|
||||
.-mt-8 {
|
||||
margin-top: -2rem;
|
||||
}
|
||||
|
||||
.-mt-6 {
|
||||
margin-top: -1.5rem;
|
||||
}
|
||||
|
||||
.-ml-2 {
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
@ -746,6 +762,11 @@ video {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.h-fit {
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.max-h-\[182px\] {
|
||||
max-height: 182px;
|
||||
}
|
||||
|
@ -794,26 +815,16 @@ video {
|
|||
max-width: 50vw;
|
||||
}
|
||||
|
||||
.translate-y-\[var\(--transform-y\2c 0\)\] {
|
||||
--tw-translate-y: var(--transform-y,0);
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.translate-y-6 {
|
||||
--tw-translate-y: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.-translate-y-6 {
|
||||
--tw-translate-y: -1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.-translate-y-full {
|
||||
--tw-translate-y: -100%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.translate-y-\[var\(--transform-y\2c 0\)\] {
|
||||
--tw-translate-y: var(--transform-y,0);
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(-25%);
|
||||
|
@ -1000,11 +1011,6 @@ video {
|
|||
background-color: rgb(18 27 44 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-bg-blue {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(146 207 245 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-bg-gray {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(38 38 38 / var(--tw-bg-opacity));
|
||||
|
@ -1020,6 +1026,11 @@ video {
|
|||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-blue-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-green-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
|
||||
|
@ -1035,6 +1046,11 @@ video {
|
|||
background-color: rgb(234 88 12 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-pink-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(219 39 119 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
|
@ -1045,31 +1061,6 @@ video {
|
|||
background-color: rgb(234 179 8 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-pink-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(219 39 119 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-blue-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-blue-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-blue-700 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(29 78 216 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-pink-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(236 72 153 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-opacity-40 {
|
||||
--tw-bg-opacity: 0.4;
|
||||
}
|
||||
|
@ -1172,6 +1163,11 @@ video {
|
|||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-6xl {
|
||||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
@ -1207,10 +1203,6 @@ video {
|
|||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.opacity-\[var\(--header-opacity\2c 0\)\] {
|
||||
opacity: var(--header-opacity,0);
|
||||
}
|
||||
|
||||
.brightness-50 {
|
||||
--tw-brightness: brightness(.5);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
|
@ -1220,6 +1212,12 @@ video {
|
|||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.backdrop-blur-lg {
|
||||
--tw-backdrop-blur: blur(16px);
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
|
||||
.transition-\[border-color\] {
|
||||
transition-property: border-color;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
|
Loading…
Add table
Reference in a new issue