mobile css custom theme support

[henices]

mobile css custom theme support

[henices]

https://github.com/henices/logseq-flow-nord#flow-custom-theme-in-the-mobile

[kenos1]

It appears that sidebar isn't styled correctly

[henices]

could you please post your code in custom.css, thanks.

[kenos1]

@import url("https://cdn.jsdelivr.net/gh/henices/logseq-flow-nord@main/custom.css") only screen and (max-width: 1024px);
@import url("https://raw.githack.com/yoyurec/logseq-awesome-content/main/src/awesomeContent-cdn.css") only screen and (max-width: 1024px);
@import url("https://cdn.jsdelivr.net/gh/pengx17/logseq-dev-theme@master/bullet_threading.css") only screen and (max-width: 1024px);

/*@import '../code/base.css';*/

* {
  font-family: 'IBM Plex Mono', monospace, sans-serif;
  font-variant-ligatures: none !important;
  --ls-font-family: 'IBM Plex Mono', monospace, sans-serif;
  --ls-main-content-max-width: 50rem;
  --ls-page-title-size: 24px;
  --ls-page-text-size: 16px;
}

.dark-theme,
html[data-theme='dark'] {
    --background-color-h: 0;
    --background-color-s: 0%;
    --background-color-l: 2%;
    --cl-background: 0,0%,12%;
    --cl-text-color: 0,0%,85%;
    --cl-primary: 258,100%,77%;
    --cl-secondary: 258,100%,77%;
    --cl-accent: 258,100%,77%;
}

.white-theme,
html[data-theme='light'] {
    --background-color-h: 0;
    --background-color-s: 0%;
    --background-color-l: 100%;
    --cl-background: 0,0%,90%;
    --cl-text-color: 0,0%,13%;
    --cl-primary: 258,50%,48%;
    --cl-secondary: 258,50%,48%;
    --cl-accent: 258,50%,48%;
}

h1 .page-title {
  font-size: 2em;
}

mark {
  font-weight: bold;
}

.block-ref {
  font-style: normal;
}

.page-reference {
  font-weight: bold;
}

.cp__sidebar-help-btn {
  display: none;
}

[henices]

@import url("https://cdn.jsdelivr.net/gh/henices/logseq-flow-nord@main/custom.css") only screen and (max-width: 1024px);
@import url("https://raw.githack.com/yoyurec/logseq-awesome-content/main/src/awesomeContent-cdn.css") only screen and (max-width: 1024px);
@import url("https://cdn.jsdelivr.net/gh/pengx17/logseq-dev-theme@master/bullet_threading.css") only screen and (max-width: 1024px);


/*@import '../code/base.css';*/

* {
font-family: sans-serif;
font-variant-ligatures: none !important;
--ls-font-family: sans-serif;

--ls-main-content-max-width: 50rem; 
--ls-page-title-size: 24px; 
--ls-page-text-size: 16px;
}

.dark-theme,
html[data-theme='dark'] {
    --background-color-h: 0;
    --background-color-s: 0%;
    --background-color-l: 2%;
    --cl-background: 0,0%,12%;
    --cl-text-color: 0,0%,85%;
    --cl-primary: 258,100%,77%;
    --cl-secondary: 258,100%,77%;
    --cl-accent: 258,100%,77%;
}

.white-theme,
html[data-theme='light'] {
    --background-color-h: 0;
    --background-color-s: 0%;
    --background-color-l: 100%;
    --cl-background: 0,0%,90%;
    --cl-text-color: 0,0%,13%;
    --cl-primary: 258,50%,48%;
    --cl-secondary: 258,50%,48%;
    --cl-accent: 258,50%,48%;
}

h1 .page-title {
  font-size: 2em;
}

mark {
  font-weight: bold;
}

.block-ref {
  font-style: normal;
}

.page-reference {
  font-weight: bold;
}

.cp__sidebar-help-btn {
  display: none;
}

monospace font cause the sidebar font too wide.

[kenos1]

it's the colors that aren't styled correctly

[henices]

it's the colors that aren't styled correctly

maybe due to cdn cache reason, I can't reproduce it