neosubhamoy/neosubhamoy-portfolio
1
1
Fork 0
mirror of https://github.com/neosubhamoy/neosubhamoy-portfolio.git synced 2025-12-20 03:29:35 +05:30
Code Issues Wiki Activity

(feat): implemented basic shareviaqr div styling

Browse Source
This commit is contained in:
Subhamoy Biswas
2023-11-24 23:57:53 +05:30
parent fb190abe20
commit 60e3cfc9be
2 changed files with 42 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
htdocs/assets/_floatingbar.php
View File

@@ -100,13 +100,18 @@
</div> </div>
</div> </div>
</div> </div>
<div id="sharewindow" class="sharewindow w-[90vw] md:w-[50vw] mx-auto h-[45vh] md:h-[60vh] fixed inset-x-0 top-[20vh] z-40 justify-center items-center bg-bg_secondary rounded-xl hidden"> <div id="sharewindow" class="sharewindow w-[90vw] md:w-[50vw] mx-auto h-[45vh] md:h-[60vh] p-4 fixed inset-x-0 top-[20vh] z-40 justify-between items-center bg-bg_secondary rounded-xl hidden">
<div class="shareviaqr flex flex-col items-center"> <div class="shareviaqr w-fit h-full flex flex-col items-center p-3">
<div class="qrwrapper"> <p class="self-start">Scan to Share</p>
<img src="https://api.qrserver.com/v1/create-qr-code/?data=https://neosubhamoy.dev&size=200x200&&color=38BDF8&format=svg" alt="shareqrcode"> <div class="bg-bg_primary p-5 rounded-lg my-3">
<div class="qrwrapper w-[150px] h-[150px]">
<img src="https://api.qrserver.com/v1/create-qr-code/?data=https://neosubhamoy.dev&color=38BDF8&bgcolor=0F172A" alt="shareqrcode">
</div> </div>
</div> </div>
<div class="extrashareopt"></div> </div>
<div class="extrashareopt w-full h-full flex flex-col items-center p-3 border-l-[1px] border-accent_secondary_transparent">
<p class="self-start">Other Sharing Options</p>
</div>
</div> </div>
<div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center"> <div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center">
<div id="searchbar" class="searchbar bg-bg_secondary rounded-full p-[0.30rem] flex items-center cursor-pointer mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_extratransparent transition transform duration-300"> <div id="searchbar" class="searchbar bg-bg_secondary rounded-full p-[0.30rem] flex items-center cursor-pointer mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_extratransparent transition transform duration-300">

32
htdocs/assets/style.css
View File

@@ -922,6 +922,10 @@ video {
height: 100vh; height: 100vh;
} }
.h-\[150px\] {
height: 150px;
}
.w-0 { .w-0 {
width: 0px; width: 0px;
} }
@@ -995,6 +999,18 @@ video {
width: 100vw; width: 100vw;
} }
.w-\[40\%\] {
width: 40%;
}
.w-\[60\%\] {
width: 60%;
}
.w-\[150px\] {
width: 150px;
}
.rotate-\[15deg\] { .rotate-\[15deg\] {
--tw-rotate: 15deg; --tw-rotate: 15deg;
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)); 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));
@@ -1054,6 +1070,10 @@ video {
justify-content: space-around; justify-content: space-around;
} }
.self-start {
align-self: flex-start;
}
.overflow-hidden { .overflow-hidden {
overflow: hidden; overflow: hidden;
} }
@@ -1214,6 +1234,14 @@ video {
padding: 0.30rem; padding: 0.30rem;
} }
.p-4 {
padding: 1rem;
}
.p-5 {
padding: 1.25rem;
}
.px-2 { .px-2 {
padding-left: 0.5rem; padding-left: 0.5rem;
padding-right: 0.5rem; padding-right: 0.5rem;
@@ -1294,6 +1322,10 @@ video {
padding-right: 0.85rem; padding-right: 0.85rem;
} }
.text-left {
text-align: left;
}
.text-center { .text-center {
text-align: center; text-align: center;
} }