tailwind .columnA

This commit is contained in:
fiatjaf
2023-10-25 17:14:52 -03:00
parent 015b6b1c42
commit b6b950fad8
5 changed files with 7 additions and 43 deletions

View File

@@ -38,27 +38,6 @@ body {
}
}
.columnA {
position: -webkit-sticky;
position: sticky;
top: 2rem;
align-self: flex-start;
flex-basis: 25%;
max-width: 25%;
word-wrap: break-word;
margin-top: 2rem;
}
@media (max-width: 580px) {
.columnA {
display: flex;
position: relative;
max-width: none;
top: auto;
align-items: center;
margin-top: 0rem;
}
}
.column_content {
flex-grow: 0;
flex-shrink: 0;

View File

@@ -118,25 +118,6 @@ body {
}
}
.columnA {
position: -webkit-sticky;
position: sticky;
top: 2rem;
align-self: flex-start;
flex-basis: 25%;
max-width: 25%;
word-wrap: break-word;
margin-top: 2rem;
@media (max-width: 580px) {
display: flex;
position: relative;
max-width: none;
top: auto;
align-items: center;
margin-top: 0rem;
}
}
.column_content {
flex-grow: 0;
flex-shrink: 0;

View File

@@ -16,7 +16,7 @@
<div
class="flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
>
<div class="column columnA">
<div class="flex items-center sm:items-start relative sm:sticky self-start basis-1/4 sm:mt-8 top-auto sm:top-8">
<div class="text-2xl">{{.Title}}</div>
</div>

View File

@@ -35,7 +35,9 @@
<div
class="w-full sm:flex sm:w-9/12 sm:px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
>
<header class="column columnA">
<header
class="flex items-center sm:items-start relative sm:sticky self-start basis-1/4 sm:mt-8 top-auto sm:top-8"
>
<div
class="text-left basis-2/3 overflow-hidden hidden flex items-center"
_="on load or scroll from window or resize from window get #profile_name then measure its top, height then if top is less than height / -2 or height is 0 add .flex then remove .hidden otherwise remove .flex then add .hidden"

View File

@@ -32,7 +32,9 @@
<div
class="sm:flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
>
<div class="column columnA">
<div
class="flex items-center sm:items-start relative sm:sticky self-start basis-1/4 sm:mt-8 top-auto sm:top-8"
>
<div
class="text-left basis-2/3 overflow-hidden hidden flex items-center text-2xl sm:break-all"
_="on load or scroll from window or resize from window get #relay_name then measure its top, height then if top is less than height / -2 or height is 0 add .flex then remove .hidden otherwise remove .flex then add .hidden"