Skip to content

Instantly share code, notes, and snippets.

@enpitsuLin

enpitsuLin/xLog.css

Last active February 27, 2024 03:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save enpitsuLin/d90409c48e1465f1eeb702ec2cc8824e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save enpitsuLin/d90409c48e1465f1eeb702ec2cc8824e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. enpitsuLin revised this gist Sep 23, 2023. 1 changed file with 6 additions and 1 deletion.
    7 changes: 6 additions & 1 deletion xLog.css
    View file
    Original file line number Diff line number Diff line change
    @@ -78,8 +78,13 @@ html.dark {
    margin-top: 1rem;
    }

    .xlog-header .xlog-social-platforms {
    display: none;
    }

    .xlog-header .xlog-site-info {
    flex-direction: column;
    align-items: center
    }

    .xlog-site-info>span {
    @@ -175,4 +180,4 @@ html.dark {
    footer div[role='tooltip'] {
    transform: translateY(65px);
    }
    }
    }
  2. enpitsuLin revised this gist Sep 14, 2023. 1 changed file with 11 additions and 26 deletions.
    37 changes: 11 additions & 26 deletions xLog.css
    View file
    Original file line number Diff line number Diff line change
    @@ -16,12 +16,6 @@ html.dark {
    }
    }

    @media screen and (min-width: 1024px) {
    .xlog-post-area:has(.xlog-post-toc) {
    margin-right: 20vw;
    }
    }

    @media (min-width: 769px) {
    .xlog-social-platforms.hidden {
    display: none;
    @@ -33,8 +27,7 @@ html.dark {
    --sidebar-width: 16rem;
    }

    .xlog-post-area,
    div:has(> * > button[aria-label='toggle chain info']) {
    .xlog-post-area {
    padding-right: 2rem;
    }
    }
    @@ -49,19 +42,15 @@ html.dark {
    z-index: 1000;
    }

    .xlog-page:has(button[aria-label="toggle chain info"][aria-expanded='false']) .xlog-post-area {
    min-height: calc(100vh - 124px);
    }

    .xlog-page:has(button[aria-label="toggle chain info"][aria-expanded='true']) .xlog-post-area {
    min-height: calc(100vh - 324px);
    }

    .xlog-post-area>div:is(.mx-auto,.max-w-screen-md) {
    .xlog-post-area>div:is(.mx-auto, .max-w-screen-md) {
    margin: 0;
    max-width: unset;
    }

    .xlog-post-actions {
    left: calc(100% + 4rem);
    }

    .xlog-header {
    position: fixed;
    left: 0;
    @@ -70,13 +59,9 @@ html.dark {
    z-index: 100;
    }

    div:has(> .xlog-site-navigation) {
    order: 1;
    }

    div:has(> .xlog-site-info) {
    order: 2;
    padding: 0;
    .xlog-header .xlog-banner+div.flex.flex-col {
    flex-direction: column-reverse;
    justify-content: flex-end;
    }

    .xlog-header>div:nth-child(2)>div:first-child {
    @@ -125,7 +110,7 @@ html.dark {
    margin: 0 !important;
    }

    div:has(> .xlog-site-patron) {
    .xlog-site-description+div.flex.flex-col {
    flex-direction: column;
    }

    @@ -141,7 +126,7 @@ html.dark {

    .xlog-post-area {
    margin-left: calc(1rem + var(--sidebar-width));
    margin-right: 1rem;
    margin-right: 20vw;
    max-width: unset;
    }

  3. enpitsuLin revised this gist Aug 24, 2023. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion xLog.css
    View file
    Original file line number Diff line number Diff line change
    @@ -168,7 +168,6 @@ html.dark {
    }

    footer>div>div {
    width: 100%;
    text-align: center;
    margin-left: 0 !important;
    margin-top: 0.75rem !important;
  4. enpitsuLin revised this gist Aug 13, 2023. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions xLog.css
    View file
    Original file line number Diff line number Diff line change
    @@ -22,6 +22,12 @@ html.dark {
    }
    }

    @media (min-width: 769px) {
    .xlog-social-platforms.hidden {
    display: none;
    }
    }

    @media (min-width: 768px) and (max-width: 1024px) {
    :root {
    --sidebar-width: 16rem;
  5. enpitsuLin revised this gist Jul 18, 2023. 1 changed file with 4 additions and 9 deletions.
    13 changes: 4 additions & 9 deletions xLog.css
    View file
    Original file line number Diff line number Diff line change
    @@ -50,15 +50,10 @@ html.dark {
    .xlog-page:has(button[aria-label="toggle chain info"][aria-expanded='true']) .xlog-post-area {
    min-height: calc(100vh - 324px);
    }


    .xlog-posts>[role='article'] {
    transition: box-shadow ease-in .2s;
    }

    .xlog-posts>[role='article']:hover {
    background-color: color-mix(in srgb, var(--theme-color), #0000 88%);
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--theme-color);

    .xlog-post-area>div:is(.mx-auto,.max-w-screen-md) {
    margin: 0;
    max-width: unset;
    }

    .xlog-header {
  6. enpitsuLin revised this gist Jun 20, 2023. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions xLog.css
    View file
    Original file line number Diff line number Diff line change
    @@ -57,8 +57,7 @@ html.dark {
    }

    .xlog-posts>[role='article']:hover {
    --bg-color: color-mix(in srgb, var(--theme-color), #0000 88%);
    background-color: var(--bg-color);
    background-color: color-mix(in srgb, var(--theme-color), #0000 88%);
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--theme-color);
    }

  7. enpitsuLin revised this gist Jun 20, 2023. 1 changed file with 0 additions and 7 deletions.
    7 changes: 0 additions & 7 deletions xLog.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,3 @@
    @import "https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css";
    @import "https://s1.hdslb.com/bfs/static/jinkela/long/font/medium.css";

    html {
    font-family: 'HarmonyOS_Medium';
    }

    html {
    --theme-color: #4f46e5;
    }
  8. enpitsuLin revised this gist Jun 20, 2023. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion xLog.css
    View file
    Original file line number Diff line number Diff line change
    @@ -64,7 +64,9 @@ html.dark {
    }

    .xlog-posts>[role='article']:hover {
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    --bg-color: color-mix(in srgb, var(--theme-color), #0000 88%);
    background-color: var(--bg-color);
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--theme-color);
    }

    .xlog-header {
  9. enpitsuLin revised this gist Jun 20, 2023. 1 changed file with 14 additions and 2 deletions.
    16 changes: 14 additions & 2 deletions xLog.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,10 @@
    @import "https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css";
    @import "https://s1.hdslb.com/bfs/static/jinkela/long/font/medium.css";

    html {
    font-family: 'HarmonyOS_Medium';
    }

    html {
    --theme-color: #4f46e5;
    }
    @@ -51,7 +58,12 @@ html.dark {
    min-height: calc(100vh - 324px);
    }

    .xlog-post:focus {

    .xlog-posts>[role='article'] {
    transition: box-shadow ease-in .2s;
    }

    .xlog-posts>[role='article']:hover {
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    }

    @@ -184,4 +196,4 @@ html.dark {
    footer div[role='tooltip'] {
    transform: translateY(65px);
    }
    }
    }
  10. enpitsuLin revised this gist May 17, 2023. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion xLog.css
    View file
    Original file line number Diff line number Diff line change
    @@ -138,7 +138,7 @@ html.dark {
    max-width: unset;
    }

    div:has(> * > button[aria-label='toggle chain info']) {
    section.xlog-blockchain-info {
    margin-left: calc(1rem + var(--sidebar-width));
    margin-right: 1rem;
    max-width: unset;
  11. enpitsuLin revised this gist May 12, 2023. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions xLog.css
    View file
    Original file line number Diff line number Diff line change
    @@ -43,11 +43,11 @@ html.dark {
    z-index: 1000;
    }

    .xlog-page:has(button[aria-label="toggle chain info"][aria-expanded='false']) div[class^='xlog-post-id-'] {
    .xlog-page:has(button[aria-label="toggle chain info"][aria-expanded='false']) .xlog-post-area {
    min-height: calc(100vh - 124px);
    }

    .xlog-page:has(button[aria-label="toggle chain info"][aria-expanded='true']) div[class^='xlog-post-id-'] {
    .xlog-page:has(button[aria-label="toggle chain info"][aria-expanded='true']) .xlog-post-area {
    min-height: calc(100vh - 324px);
    }

  12. enpitsuLin revised this gist May 12, 2023. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions xLog.css
    View file
    Original file line number Diff line number Diff line change
    @@ -43,11 +43,11 @@ html.dark {
    z-index: 1000;
    }

    div:is(.xlog-page-index, .xlog-page-archive):has(button[aria-expanded='false']) div[class^='xlog-post-id-'] {
    .xlog-page:has(button[aria-label="toggle chain info"][aria-expanded='false']) div[class^='xlog-post-id-'] {
    min-height: calc(100vh - 124px);
    }

    div:is(.xlog-page-index, .xlog-page-archive):has(button[aria-expanded='true']) div[class^='xlog-post-id-'] {
    .xlog-page:has(button[aria-label="toggle chain info"][aria-expanded='true']) div[class^='xlog-post-id-'] {
    min-height: calc(100vh - 324px);
    }

  13. enpitsuLin revised this gist May 12, 2023. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions xLog.css
    View file
    Original file line number Diff line number Diff line change
    @@ -17,7 +17,7 @@ html.dark {
    }

    @media screen and (min-width: 1024px) {
    div[class^='xlog-post-id-']:has(.xlog-post-toc) {
    .xlog-post-area:has(.xlog-post-toc) {
    margin-right: 20vw;
    }
    }
    @@ -27,7 +27,7 @@ html.dark {
    --sidebar-width: 16rem;
    }

    div[class^='xlog-post-id-'],
    .xlog-post-area,
    div:has(> * > button[aria-label='toggle chain info']) {
    padding-right: 2rem;
    }
    @@ -132,7 +132,7 @@ html.dark {
    margin-left: 0 !important;
    }

    div[class^='xlog-post-id-'] {
    .xlog-post-area {
    margin-left: calc(1rem + var(--sidebar-width));
    margin-right: 1rem;
    max-width: unset;
    @@ -184,4 +184,4 @@ html.dark {
    footer div[role='tooltip'] {
    transform: translateY(65px);
    }
    }
    }
  14. enpitsuLin revised this gist May 2, 2023. 1 changed file with 27 additions and 21 deletions.
    48 changes: 27 additions & 21 deletions xLog.css
    View file
    Original file line number Diff line number Diff line change
    @@ -18,7 +18,7 @@ html.dark {

    @media screen and (min-width: 1024px) {
    div[class^='xlog-post-id-']:has(.xlog-post-toc) {
    margin-right: 40vh;
    margin-right: 20vw;
    }
    }

    @@ -34,19 +34,25 @@ html.dark {
    }

    @media (min-width: 768px) {
    div:is(.xlog-page-index, .xlog-page-archive):has(button[aria-expanded='false'])
    div[class^='xlog-post-id-'] {

    .medium-zoom-image--opened {
    z-index: 1001;
    }

    .medium-zoom-overlay {
    z-index: 1000;
    }

    div:is(.xlog-page-index, .xlog-page-archive):has(button[aria-expanded='false']) div[class^='xlog-post-id-'] {
    min-height: calc(100vh - 124px);
    }

    div:is(.xlog-page-index, .xlog-page-archive):has(button[aria-expanded='true'])
    div[class^='xlog-post-id-'] {
    div:is(.xlog-page-index, .xlog-page-archive):has(button[aria-expanded='true']) div[class^='xlog-post-id-'] {
    min-height: calc(100vh - 324px);
    }

    .xlog-post:focus {
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
    var(--tw-ring-color);
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    }

    .xlog-header {
    @@ -66,49 +72,49 @@ html.dark {
    padding: 0;
    }

    .xlog-header > div:nth-child(2) > div:first-child {
    .xlog-header>div:nth-child(2)>div:first-child {
    display: none;
    }

    .xlog-header > div:nth-child(2) > div:last-child {
    .xlog-header>div:nth-child(2)>div:last-child {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    flex-direction: column;
    }

    .xlog-header > div:nth-child(2) > div:last-child > div:last-child {
    .xlog-header>div:nth-child(2)>div:last-child>div:last-child {
    margin-top: 1rem;
    }

    .xlog-header .xlog-site-info {
    flex-direction: column;
    }

    .xlog-site-info > span {
    .xlog-site-info>span {
    margin-bottom: 1rem;
    }

    .xlog-site-info > span + div {
    .xlog-site-info>span+div {
    margin: 0 !important;
    width: 100%;
    text-align: center;
    }

    .xlog-site-info > span + div > div.flex:first-child {
    .xlog-site-info>span+div>div.flex:first-child {
    flex-direction: column;
    }

    .xlog-site-info > span + div > div.flex:first-child > * {
    .xlog-site-info>span+div>div.flex:first-child>* {
    margin-bottom: 1rem;
    }

    .xlog-site-name + div.flex {
    .xlog-site-name+div.flex {
    flex-direction: row-reverse;
    margin: 0;
    gap: 1rem;
    }

    .xlog-site-name + div.flex > * {
    .xlog-site-name+div.flex>* {
    margin: 0 !important;
    }

    @@ -146,32 +152,32 @@ html.dark {
    z-index: 1000;
    }

    footer > div {
    footer>div {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    justify-content: center !important;
    flex-direction: column-reverse;
    align-items: center;
    }

    footer > div > div {
    footer>div>div {
    width: 100%;
    text-align: center;
    margin-left: 0 !important;
    margin-top: 0.75rem !important;
    }

    footer > div > div:nth-child(2) {
    footer>div>div:nth-child(2) {
    display: flex !important;
    justify-content: center;
    }

    footer > div > div:nth-child(2) > * {
    footer>div>div:nth-child(2)>* {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
    }

    footer > div > button {
    footer>div>button {
    margin: 0 !important;
    }

  15. enpitsuLin revised this gist Apr 25, 2023. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions xLog.css
    View file
    Original file line number Diff line number Diff line change
    @@ -34,11 +34,13 @@ html.dark {
    }

    @media (min-width: 768px) {
    .xlog-page-index:has(button[aria-expanded='false']) div[class^='xlog-post-id-'] {
    div:is(.xlog-page-index, .xlog-page-archive):has(button[aria-expanded='false'])
    div[class^='xlog-post-id-'] {
    min-height: calc(100vh - 124px);
    }

    .xlog-page-index:has(button[aria-expanded='true']) div[class^='xlog-post-id-'] {
    div:is(.xlog-page-index, .xlog-page-archive):has(button[aria-expanded='true'])
    div[class^='xlog-post-id-'] {
    min-height: calc(100vh - 324px);
    }

  16. enpitsuLin revised this gist Apr 24, 2023. 1 changed file with 156 additions and 85 deletions.
    241 changes: 156 additions & 85 deletions xLog.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,108 +1,179 @@
    html {
    --theme-color: #4f46e5;
    }

    html.dark {
    --theme-color: #818cf8;
    }

    .xlog-post:focus {
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
    var(--tw-ring-color);
    :root {
    --sidebar-width: 20rem;
    }

    .xlog-header {
    position: fixed;
    left: 0;
    height: 100vh;
    width: 20rem;
    }
    .xlog-header > div:nth-child(2) {
    flex-direction: column-reverse;
    @media screen and (max-width: 1024px) {
    .xlog-post-toc {
    display: none !important;
    }
    }

    .xlog-header > div:nth-child(2) > div:last-child {
    margin-top: 0.5rem;
    margin-bottom: 10rem;
    flex-direction: column;
    @media screen and (min-width: 1024px) {
    div[class^='xlog-post-id-']:has(.xlog-post-toc) {
    margin-right: 40vh;
    }
    }

    .xlog-header > div:nth-child(2) > div:last-child > div:last-child {
    margin-top: 1rem;
    }
    @media (min-width: 768px) and (max-width: 1024px) {
    :root {
    --sidebar-width: 16rem;
    }

    .xlog-header .xlog-site-info {
    flex-direction: column;
    }
    .xlog-site-info > span {
    margin-bottom: 1rem;
    }
    .xlog-site-info > span + div {
    margin: 0 !important;
    width: 100%;
    text-align: center;
    }
    .xlog-site-info > span + div > div.flex:first-child {
    flex-direction: column;
    }
    .xlog-site-info > span + div > div.flex:first-child > * {
    margin-bottom: 1rem;
    }
    .xlog-site-name + div.flex {
    flex-direction: row-reverse;
    margin: 0;
    gap: 1rem;
    div[class^='xlog-post-id-'],
    div:has(> * > button[aria-label='toggle chain info']) {
    padding-right: 2rem;
    }
    }

    .xlog-site-name + div.flex > * {
    margin: 0 !important;
    }
    @media (min-width: 768px) {
    .xlog-page-index:has(button[aria-expanded='false']) div[class^='xlog-post-id-'] {
    min-height: calc(100vh - 124px);
    }

    .xlog-site-patron {
    margin: 0 0 0 auto !important;
    padding-right: 1rem;
    }
    .xlog-page-index:has(button[aria-expanded='true']) div[class^='xlog-post-id-'] {
    min-height: calc(100vh - 324px);
    }

    .xlog-page-index:has(button[aria-expanded='false']) div[class^='xlog-post-id-'] {
    min-height: calc(100vh - 124px);
    }
    .xlog-page-index:has(button[aria-expanded='true']) div[class^='xlog-post-id-'] {
    min-height: calc(100vh - 324px);
    }
    .xlog-post:focus {
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
    var(--tw-ring-color);
    }

    footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 20rem;
    z-index: 1000;
    }
    footer > div {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    justify-content: center !important;
    flex-direction: column-reverse;
    align-items: center;
    }
    .xlog-header {
    position: fixed;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width);
    z-index: 100;
    }

    footer > div > div {
    width: 100%;
    text-align: center;
    margin-left: 0 !important;
    margin-top: 0.75rem !important;
    }
    footer > div > div:nth-child(2) {
    display: flex !important;
    justify-content: center;
    }
    footer > div > div:nth-child(2) > * {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
    }
    div:has(> .xlog-site-navigation) {
    order: 1;
    }

    footer > div > button {
    margin: 0 !important;
    }
    div:has(> .xlog-site-info) {
    order: 2;
    padding: 0;
    }

    .xlog-header > div:nth-child(2) > div:first-child {
    display: none;
    }

    .xlog-header > div:nth-child(2) > div:last-child {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    flex-direction: column;
    }

    .xlog-header > div:nth-child(2) > div:last-child > div:last-child {
    margin-top: 1rem;
    }

    .xlog-header .xlog-site-info {
    flex-direction: column;
    }

    .xlog-site-info > span {
    margin-bottom: 1rem;
    }

    .xlog-site-info > span + div {
    margin: 0 !important;
    width: 100%;
    text-align: center;
    }

    .xlog-site-info > span + div > div.flex:first-child {
    flex-direction: column;
    }

    .xlog-site-info > span + div > div.flex:first-child > * {
    margin-bottom: 1rem;
    }

    .xlog-site-name + div.flex {
    flex-direction: row-reverse;
    margin: 0;
    gap: 1rem;
    }

    .xlog-site-name + div.flex > * {
    margin: 0 !important;
    }

    div:has(> .xlog-site-patron) {
    flex-direction: column;
    }

    .xlog-site-description {
    order: 3;
    }

    .xlog-site-patron {
    order: 2;
    margin-top: 0.2rem !important;
    margin-left: 0 !important;
    }

    div[class^='xlog-post-id-'] {
    margin-left: calc(1rem + var(--sidebar-width));
    margin-right: 1rem;
    max-width: unset;
    }

    div:has(> * > button[aria-label='toggle chain info']) {
    margin-left: calc(1rem + var(--sidebar-width));
    margin-right: 1rem;
    max-width: unset;
    }

    footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    z-index: 1000;
    }

    footer > div {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    justify-content: center !important;
    flex-direction: column-reverse;
    align-items: center;
    }

    footer > div > div {
    width: 100%;
    text-align: center;
    margin-left: 0 !important;
    margin-top: 0.75rem !important;
    }

    footer > div > div:nth-child(2) {
    display: flex !important;
    justify-content: center;
    }

    footer > div > div:nth-child(2) > * {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
    }

    footer > div > button {
    margin: 0 !important;
    }

    footer div[role='tooltip'] {
    transform: translateY(65px);
    footer div[role='tooltip'] {
    transform: translateY(65px);
    }
    }
  17. enpitsuLin created this gist Apr 24, 2023.
    108 changes: 108 additions & 0 deletions xLog.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,108 @@
    html {
    --theme-color: #4f46e5;
    }
    html.dark {
    --theme-color: #818cf8;
    }

    .xlog-post:focus {
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
    var(--tw-ring-color);
    }

    .xlog-header {
    position: fixed;
    left: 0;
    height: 100vh;
    width: 20rem;
    }
    .xlog-header > div:nth-child(2) {
    flex-direction: column-reverse;
    }

    .xlog-header > div:nth-child(2) > div:last-child {
    margin-top: 0.5rem;
    margin-bottom: 10rem;
    flex-direction: column;
    }

    .xlog-header > div:nth-child(2) > div:last-child > div:last-child {
    margin-top: 1rem;
    }

    .xlog-header .xlog-site-info {
    flex-direction: column;
    }
    .xlog-site-info > span {
    margin-bottom: 1rem;
    }
    .xlog-site-info > span + div {
    margin: 0 !important;
    width: 100%;
    text-align: center;
    }
    .xlog-site-info > span + div > div.flex:first-child {
    flex-direction: column;
    }
    .xlog-site-info > span + div > div.flex:first-child > * {
    margin-bottom: 1rem;
    }
    .xlog-site-name + div.flex {
    flex-direction: row-reverse;
    margin: 0;
    gap: 1rem;
    }

    .xlog-site-name + div.flex > * {
    margin: 0 !important;
    }

    .xlog-site-patron {
    margin: 0 0 0 auto !important;
    padding-right: 1rem;
    }

    .xlog-page-index:has(button[aria-expanded='false']) div[class^='xlog-post-id-'] {
    min-height: calc(100vh - 124px);
    }
    .xlog-page-index:has(button[aria-expanded='true']) div[class^='xlog-post-id-'] {
    min-height: calc(100vh - 324px);
    }

    footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 20rem;
    z-index: 1000;
    }
    footer > div {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    justify-content: center !important;
    flex-direction: column-reverse;
    align-items: center;
    }

    footer > div > div {
    width: 100%;
    text-align: center;
    margin-left: 0 !important;
    margin-top: 0.75rem !important;
    }
    footer > div > div:nth-child(2) {
    display: flex !important;
    justify-content: center;
    }
    footer > div > div:nth-child(2) > * {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
    }

    footer > div > button {
    margin: 0 !important;
    }

    footer div[role='tooltip'] {
    transform: translateY(65px);
    }