From c8d390dbc5a749af533f1ec05de2d5b6f37fa156 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 28 Apr 2022 20:45:29 +0000
Subject: [PATCH] fix: always hide popover on mobile (fixes #104)
---
assets/styles/base.scss | 41 ++++++++++++++++++++++++++++-------------
1 files changed, 28 insertions(+), 13 deletions(-)
diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index 3202e8d..0c7d957 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -491,39 +491,50 @@
}
}
+@keyframes dropin {
+ 0% {
+ display: none;
+ opacity: 0;
+ visibility: hidden;
+ }
+ 1% {
+ display: inline-block;
+ opacity: 0;
+ transform: translate(-50%, 40%);
+ }
+ 100% {
+ opacity: 1;
+ visibility: visible;
+ transform: translate(-50%, 20%);
+ }
+}
+
.popover {
z-index: 999;
position: absolute;
width: 20em;
- display: inline-block;
- visibility: hidden;
+ display: none;
background-color: var(--light);
padding: 1em;
border: 1px solid var(--outlinegray);
border-radius: 5px;
transform: translate(-50%, 40%);
- opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
- transition-delay: 0.1s;
user-select: none;
-
- & > * {
- display: none;
- }
-
- &.visible > * {
- display: inline-block;
- }
+ overflow-wrap: anywhere;
+ box-shadow: 6px 6px 36px 0px rgba(0,0,0,0.25);
@media all and (max-width: 600px) {
- display: none;
+ display: none !important;
}
&.visible {
opacity: 1;
visibility: visible;
transform: translate(-50%, 20%);
+ display: inline-block;
+ animation: dropin 0.2s ease;
}
& > h3 {
@@ -534,6 +545,8 @@
& > .meta {
margin-top: 0.25em;
opacity: 0.5;
+ font-family: "JetBrains Mono", monospace;
+ font-size: 0.8rem;
}
& > p {
@@ -543,6 +556,8 @@
}
}
+
+
#contact_buttons ul {
list-style-type: none;
--
Gitblit v1.10.0