Here’s my CSS for getting my published site right to left oriented (my
website - פנגייה - רשימת סיכומים - פנגייה).
/* Variables */
.published-container {
--sidebar-left-border-width: 2px;
--sidebar-right-border-width: 2px;
--site-name-size: 36px;
--logo-max-height: 100px;
--component-title-size: var(--font-ui-medium);
}
/* Make it rtl */
div,
h1,
h2,
h3,
h4,
h5 {
direction: rtl;
}
:root {
direction: inherit;
writing-mode: sideways-rl;
text-orientation: sideways-right;
}
h1,
h2,
h3,
h4,
h5,
.page-header,
.markdown-rendered th {
font-weight: bold;
}
.is-collapsed .collapse-icon svg {
transform: rotate(90deg);
}
/* Fix rtl shenanigans */
.site-body-left-column {
padding: 32px 18px 0 0;
border-left: var(--sidebar-left-border-width) solid
var(--sidebar-left-border-color);
border-right: 0;
}
.site-body-left-column .site-body-left-column-inner {
margin-right: auto;
margin-left: 0;
}
.site-body-left-column-site-logo img {
margin-left: auto;
margin-right: auto;
}
.theme-dark .site-body-left-column-site-logo {
filter: invert(1);
}
.theme-dark .site-header-logo {
filter: invert(1);
}
.site-body-left-column-site-name {
padding: 4px 16px 32px 16px;
margin-right: auto;
margin-left: auto;
font-family: "Secular One", sans-serif;
font-weight: 400;
}
.site-body-left-column-site-theme-toggle .option.mod-light {
left: 0;
right: 2px;
}
.site-body-left-column-site-theme-toggle .option.mod-dark {
left: 0;
right: 22px;
}
.site-body-left-column .search-view-outer {
padding-right: 0;
padding-left: 18px;
}
.extra-title {
right: 0;
left: unset;
}
/* Navigation bar */
.nav-view-outer .tree-item-children .tree-item-children {
padding-right: 18px;
padding-left: 0;
}
.nav-view-outer .tree-item-self {
margin-right: -1px;
border-right: 1px solid transparent;
padding-right: 16px;
padding-left: 0.7em;
margin-left: 0;
border-left: 0;
}
.nav-view-outer .tree-item-children {
padding-left: 0;
padding-right: 6px;
}
.nav-view-outer .tree-item-self:not(.mod-collapsible) {
border-right: 1px solid var(--nav-item-border-color);
border-left: 0;
}
.nav-view-outer .tree-item-self:hover:not(.mod-collapsible):not(.mod-active) {
border-right: 1px solid var(--nav-item-border-color-hover);
border-left: 0;
}
.nav-view-outer .tree-item-self.mod-active {
background-color: transparent;
font-weight: var(--nav-item-weight-active);
padding-left: 0.1em;
color: var(--nav-item-color-active);
border-right: 1px solid var(--nav-item-border-color-active);
padding-right: 16px;
border-left: 0;
}
.nav-view-outer .tree-item-self.mod-collapsible.is-clickable {
margin-left: 0;
margin-right: -8px;
}
.nav-view-outer .tree-item-children .tree-item-children .tree-item-children {
padding-right: 18px;
margin-right: -1px;
padding-left: 0;
margin-left: 0;
border-left: 0;
}
.site-body-right-column {
right: initial;
left: 0;
border-right: var(--sidebar-right-border-width) solid
var(--sidebar-right-border-color);
border-left: 0;
}
@media screen and (max-width: 750px) {
.nav-view-outer .tree-item-self.is-clickable {
padding: unset;
padding-right: 16px;
padding-top: 8px;
padding-bottom: 8px;
}
.nav-view-outer .tree-item-self.is-clickable .tree-item-icon.collapse-icon {
order: unset;
}
.nav-view-outer
.tree-item-children
.tree-item-children
.tree-item-self.is-clickable:not(.mod-collapsible)
.tree-item-inner {
padding-right: unset;
padding-left: unset;
}
.published-container.has-navigation .site-body-left-column {
transform: translateX(100%);
}
}
@media screen and (max-width: 1000px) {
.publish-renderer {
margin-left: 0;
}
}
@media screen and (min-width: 1000px) {
body:not(.sliding-windows)
.is-readable-line-width.has-outline.has-navigation
.publish-renderer
> .markdown-preview-view
> .markdown-preview-sizer,
body:not(.sliding-windows)
.is-readable-line-width.has-graph.has-navigation
.publish-renderer
> .markdown-preview-view
> .markdown-preview-sizer {
margin-right: 0;
}
.published-container.is-readable-line-width .publish-renderer {
margin-left: max(calc((100vw - var(--page-width)) / 2), var(--sidebar-right-width));
}
}
.not-found-container {
right: 0;
top: 0;
left: 0;
margin-right: auto;
margin-left: auto;
}
/* Left "On This Page" bar */
.site-body-right-column .site-body-right-column-inner {
margin-right: unset;
margin-left: auto;
}
.outline-view-outer .tree-item-self {
padding-left: 0.7em;
padding-right: unset;
}
.outline-view-outer .tree-item-children {
border-right: 1px solid var(--nav-item-border-color);
border-left: 0;
}
.tree-item-children {
padding-right: 18px;
padding-left: 0;
}
.list-item .published-section-header {
font-size: var(--font-ui-medium);
}
.site-footer {
left: 18px;
right: auto;
}