diff --git a/src/ui/src/assets/css/_scrollbars.scss b/src/ui/src/assets/css/_scrollbars.scss index f0297dc..ca792c4 100644 --- a/src/ui/src/assets/css/_scrollbars.scss +++ b/src/ui/src/assets/css/_scrollbars.scss @@ -1,5 +1,5 @@ *::-webkit-scrollbar { - width: 4px; + width: 8px; } *::-webkit-scrollbar-track { @@ -7,6 +7,7 @@ } *::-webkit-scrollbar-thumb { + z-index: 2000; background-color: color(scrollbar); border-radius: 20px; border: solid 4px color(background); diff --git a/src/ui/src/assets/css/_slide.scss b/src/ui/src/assets/css/_slide.scss index 58fdacd..8e2923d 100644 --- a/src/ui/src/assets/css/_slide.scss +++ b/src/ui/src/assets/css/_slide.scss @@ -1,11 +1,11 @@ .slide { font-family: "Iosevka", sans-serif; - font-size: 4vw; + font-size: 3vw; display: flex; flex-direction: column; align-items: center; justify-content: center; - padding: 8vw; + padding: 2em; text-align: center; aspect-ratio: 1.333; overflow: hidden; @@ -13,12 +13,13 @@ color: color(foreground); h1, h2, h3, h4, h5 { - margin: 0; + margin: 0 0 1em 0; padding: 0; } ul, ol, pre { text-align: left; + line-height: 1.8em; } ul, ol { @@ -59,7 +60,8 @@ img { max-width: 95%; - max-height: 80vh; + max-height: 75vh; + height: auto; } .figcaption { @@ -72,19 +74,45 @@ } &.title { + gap: 0.5em; + + img { + max-width: 50%; + } + p { font-style: italic; - font-size: 3.5vw; + font-size: 1em; color: color(scrollbar); - + margin: 0; + line-height: normal; + &:nth-of-type(2) { - font-size: 2.8vw; + font-size: 0.8em; } } + + h1 { + color: color(hightlight); + font-size: 1.6em; + } + + h2 { + font-size: 1.3em; + } } p { margin-top: 0; + line-height: 2em; + } + + h1 { + font-size: 2em; + } + + h2 { + font-size: 1.6em; } code:not([class*=language-]) { @@ -94,9 +122,9 @@ } pre { - font-size: 1.5vw; + font-size: 0.3em; width: 90%; - padding: 4vw !important; + padding: 1em !important; * { font-weight: normal !important; diff --git a/src/ui/src/assets/css/_slidesList.scss b/src/ui/src/assets/css/_slidesList.scss index 4423577..00beb7c 100644 --- a/src/ui/src/assets/css/_slidesList.scss +++ b/src/ui/src/assets/css/_slidesList.scss @@ -2,6 +2,7 @@ //background: #222; background: color(sidebarBackground); overflow-y: auto; + margin: 0; .slide-wrap { width: 100%; diff --git a/src/ui/src/assets/css/_toolbar.scss b/src/ui/src/assets/css/_toolbar.scss index 9cac6e7..8caedf0 100644 --- a/src/ui/src/assets/css/_toolbar.scss +++ b/src/ui/src/assets/css/_toolbar.scss @@ -25,6 +25,7 @@ > svg { max-height: 90%; + opacity: 0.3; width: auto; margin: 0 2rem; } diff --git a/src/ui/src/assets/css/_window.scss b/src/ui/src/assets/css/_window.scss index a5f1db5..ff53727 100644 --- a/src/ui/src/assets/css/_window.scss +++ b/src/ui/src/assets/css/_window.scss @@ -5,6 +5,7 @@ height: 100%; width: 100%; position: absolute; + gap: 0; .toolbar { grid-column: 1 / span 2; @@ -14,9 +15,18 @@ background: color(mainBackground); overflow-y: auto; transition: all 0.3s ease-in-out; + display: flex; + align-items: center; + justify-content: center; + + > * { + width: 100%; + } - & > .slide:first-child { - margin: 2rem; + &:not(.fullscreen) { + & > .slide:first-child { + font-size: calc(3vw * 0.7); + } } }