diff --git a/index.html b/index.html index 4c65198..868d065 100644 --- a/index.html +++ b/index.html @@ -8,37 +8,37 @@ @@ -51,20 +51,22 @@

Senior Game Developer, Engine Developer, Low-Level Network, Low-Level Systems

-

- (This site is a work in progress) -

Studies + Projects + + Github @@ -75,7 +77,7 @@

id="central-footer" > 🧑‍💻 built by and copyright Caio Raphael diff --git a/static/home.38954.css b/static/home.38954.css index 3f6591a..483960c 100644 --- a/static/home.38954.css +++ b/static/home.38954.css @@ -2,40 +2,45 @@ /* custom styles for: pre, code */ *:where(:not(html, iframe, canvas, img, svg, video, audio, pre, code):not(svg *, symbol *)) { - all: unset; - display: revert; + all: unset; + display: revert; } *, *::before, *::after { - box-sizing: border-box; + box-sizing: border-box; } html { - -moz-text-size-adjust: none; - -webkit-text-size-adjust: none; - text-size-adjust: none; + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; } -a, button { - cursor: revert; +a, +button { + cursor: revert; } -ol, ul, menu, summary { - list-style: none; +ol, +ul, +menu, +summary { + list-style: none; } img { - max-inline-size: 100%; - max-block-size: 100%; + max-inline-size: 100%; + max-block-size: 100%; } table { - border-collapse: collapse; + border-collapse: collapse; } -input, textarea { +input, +textarea { -webkit-user-select: auto; } @@ -49,12 +54,12 @@ meter { } :where(pre) { - all: revert; - box-sizing: border-box; + all: revert; + box-sizing: border-box; } ::placeholder { - color: unset; + color: unset; } ::marker { @@ -63,33 +68,35 @@ meter { } :where([hidden]) { - display: none; + display: none; } :where([contenteditable]:not([contenteditable="false"])) { - -moz-user-modify: read-write; - -webkit-user-modify: read-write; - overflow-wrap: break-word; - -webkit-line-break: after-white-space; - -webkit-user-select: auto; + -moz-user-modify: read-write; + -webkit-user-modify: read-write; + overflow-wrap: break-word; + -webkit-line-break: after-white-space; + -webkit-user-select: auto; } :where([draggable="true"]) { - -webkit-user-drag: element; + -webkit-user-drag: element; } :where(dialog:modal) { - all: revert; - box-sizing: border-box; + all: revert; + box-sizing: border-box; } -pre, code { - margin: 0; +pre, +code { + margin: 0; } ::-webkit-details-marker { - display: none; + display: none; } + :root { --padding: 12px; --padding_d2: 6px; @@ -101,12 +108,16 @@ pre, code { --soft-dark-transparent: #181820e5; /* --dark: rgb(19, 19, 26); */ --dark-transparent: rgba(19, 19, 26, 0.93); - --dark-hover: rgba(57, 57, 76, 0.25); /* --vscode-list-inactiveSelectionBackground; */ + --dark-hover: rgba(57, 57, 76, 0.25); + /* --vscode-list-inactiveSelectionBackground; */ --darker: rgb(11, 11, 15); --darker-transparent: rgb(11, 11, 15, 0.93); - --white: #c8c8d5; /* --vscode-list-activeSelectionForeground; --vscode-list-inactiveSelectionForeground */ - --white-small-fade: #a4a4b6; /*--vscode-list-focusForeground */ - --white-fade: rgba(171, 171, 191, 0.8); /* --vscode-breadcrumb-foreground */ + --white: #c8c8d5; + /* --vscode-list-activeSelectionForeground; --vscode-list-inactiveSelectionForeground */ + --white-small-fade: #a4a4b6; + /*--vscode-list-focusForeground */ + --white-fade: rgba(171, 171, 191, 0.8); + /* --vscode-breadcrumb-foreground */ /* Body */ --body-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; @@ -118,13 +129,13 @@ pre, code { --home-button-text: var(--white); /* Highlight */ - --highlight-bg: #f5d41f; + --highlight-bg: #C97829; --highlight-text: #130606; --highlight-hover-bg: #f3db53; --highlight-hover-text: #0c0b0b; /* Site Logo */ - --logo-font: "Arial", serif; + --logo-font: "montserrat", serif; --logo-border: rgba(225, 225, 225, .1); /* Left Sidebar */ @@ -134,7 +145,7 @@ pre, code { --left-sidebar-text: var(--white-small-fade); --left-sidebar-text-title-close: var(--white-small-fade); --left-sidebar-text-title-open: var(--white); - --left-sidebar-bg-hover: var(--dark-hover); + --left-sidebar-bg-hover: var(--dark-hover); --left-sidebar-text-hover: var(--white); /* Right Sidebar */ @@ -144,7 +155,7 @@ pre, code { --right-sidebar-text-top: var(--white); --right-sidebar-h2: var(--white-small-fade); --right-sidebar-h3: var(--white-fade); - --right-sidebar-hover-bg: var(--dark-hover); + --right-sidebar-hover-bg: var(--dark-hover); --right-sidebar-hover-h2: var(--white); --right-sidebar-hover-h3: var(--white-small-fade); @@ -223,145 +234,147 @@ pre, code { --blockquote-info-anchor: #d2aefc; --blockquote-info-anchor-text-shadow: .4px 0 .8px black; } + /* ROOT */ - html { - scroll-behavior: smooth; - scroll-padding: 2em; - } +html { + scroll-behavior: smooth; + scroll-padding: 2em; +} - /* Chrome, Safari, Edge: Scrollbar */ - html::-webkit-scrollbar { - height: 12px; - } - html::-webkit-scrollbar-track { - background: var(--table-scrollbar); - border-radius: 6px; - } - html::-webkit-scrollbar-thumb { - background: var(--highlight-bg); - border-radius: 6px; - } - html::-webkit-scrollbar-thumb:hover { - background: var(--checkbox-border); - } +/* Chrome, Safari, Edge: Scrollbar */ +html::-webkit-scrollbar { + height: 12px; +} - body { - display: flex; - flex-direction: column; - min-height: 100svh; +html::-webkit-scrollbar-track { + background: var(--table-scrollbar); + border-radius: 6px; +} - font-family: var(--body-font); +html::-webkit-scrollbar-thumb { + background: var(--highlight-bg); + border-radius: 6px; +} - background-image: url("/assets/bg.png"); - background-repeat: no-repeat; - background-position: center; - background-attachment: fixed; - background-size: cover; - } +html::-webkit-scrollbar-thumb:hover { + background: var(--checkbox-border); +} +body { + display: flex; + flex-direction: column; + min-height: 100svh; + font-family: var(--body-font); + background-image: url("/assets/bg.png"); + background-repeat: no-repeat; + background-position: center; + background-attachment: fixed; + background-size: cover; +} -/* MAIN */ - main { - background: var(--central-bg); - display: flex; - flex: 1; - flex-direction: column; - align-items: center; - justify-content: center; - } - main > section { - display: flex; - } - main > section { - display: flex; - flex-direction: column; - } +/* MAIN */ +main { + background: var(--central-bg); + + display: flex; + flex: 1; + flex-direction: column; + align-items: center; + justify-content: center; +} +main>section { + display: flex; +} - /* TITLE */ +main>section { + display: flex; + flex-direction: column; +} - main > section > header { - display: flex; - flex-direction: column; - text-align: center; - padding: 25px 36px 60px; - } - /* Title */ - main > section > header > h1 { - color: transparent; - background: linear-gradient(45deg, #866ee7, #ea60da, #ed8f57, #fbd41d, #2cca91); +/* TITLE */ - filter: drop-shadow(8px 8px 12px rgba(0, 0, 0, 0.8)); - background-clip: text; - -webkit-background-clip: text; +main>section>header { + display: flex; + flex-direction: column; + text-align: center; + padding: 25px 36px 60px; +} - font-family: var(--logo-font); - font-size: 6em; - font-weight: 800; - letter-spacing: 3px; +/* Title */ +main>section>header>h1 { + color: #C97829; + filter: drop-shadow(8px 8px 12px rgba(0, 0, 0, 0.8)); + background-clip: text; + -webkit-background-clip: text; - /* text-transform: uppercase; */ - padding-bottom: calc(var(--padding)*1.2); - } + font-family: var(--logo-font); + font-size: 6em; + font-weight: 800; + letter-spacing: 3px; + /* text-transform: uppercase; */ + padding-bottom: calc(var(--padding)*1.2); +} - /* Secondary title */ - main > section > header > h1 > span { - color: var(--home-title-2); - } - /* Description */ - main > section > header > p { - color: var(--home-description); - font-size: 1.6em - } +/* Secondary title */ +main>section>header>h1>span { + color: var(--home-title-2); +} - /* WIP message */ - #wip-msg { - padding-top: 20px; - } +/* Description */ +main>section>header>p { + color: var(--home-description); + font-size: 1.6em +} +/* WIP message */ +#wip-msg { + padding-top: 20px; +} - /* MAIN BUTTONS */ - main > section > div { - color: var(--home-button-text); +/* MAIN BUTTONS */ - display: flex; - justify-content: center; - gap: 60px; - } +main>section>div { + color: var(--home-button-text); - main > section > div > .btn { - background: var(--highlight-bg); - color: var(--highlight-text); + display: flex; + justify-content: center; + gap: 60px; +} - font-size: 1.5em; - padding: .4em 1em; - } +main>section>div>.btn { + background: var(--highlight-bg); + color: var(--highlight-text); + border-radius: 4px; + font-size: 1.5em; + padding: .4em 1em; +} - main > section > div > .btn:hover { - background: var(--highlight-hover-bg); - color: var(--highlight-hover-text); - } +main>section>div>.btn:hover { + background: var(--highlight-hover-bg); + color: var(--highlight-hover-text); +} /* HEADER */ - body > header { - background: var(--left-sidebar-bg); - border-bottom: 1px solid var(--left-sidebar-border); - } +body>header { + background: var(--left-sidebar-bg); + border-bottom: 1px solid var(--left-sidebar-border); +} - body > header > a { - display: inline-block; - padding: var(--padding); - } +body>header>a { + display: inline-block; + padding: var(--padding); +} /* BUTTON CHANGE THEME */ @@ -376,7 +389,7 @@ pre, code { font-weight: 800; padding: var(--padding_d2); - + color: var(--header-button-text); background: var(--header-button-bg); border: 1px solid var(--header-button-border); @@ -394,35 +407,35 @@ pre, code { /* CENTRAL FOOTER */ - #central-footer { - background: var(--central-bg); - color: var(--footer-text); +#central-footer { + background: var(--central-bg); + color: var(--footer-text); - display: flex; - justify-content: center; + display: flex; + justify-content: center; - padding: 25px 12px 25px 12px; + padding: 25px 12px 25px 12px; - gap: var(--padding_d2); - } + gap: var(--padding_d2); +} - #central-footer > a { - background: var(--highlight-bg); - color: var(--highlight-text); +#central-footer>a { + background: var(--highlight-bg); + color: var(--highlight-text); - border-radius: var(--border-radius); - cursor: pointer; - padding: 0 var(--padding_d2); - } + border-radius: var(--border-radius); + cursor: pointer; + padding: 0 var(--padding_d2); +} /* Mobile */ -@media (orientation: portrait) { - main > section { +@media (orientation: portrait) { + main>section { font-size: smaller; } #central-footer { font-size: x-small; } -} +} \ No newline at end of file diff --git a/static/studies-index.38954.css b/static/studies-index.38954.css index 062fe1f..fc85d05 100644 --- a/static/studies-index.38954.css +++ b/static/studies-index.38954.css @@ -2,40 +2,45 @@ /* custom styles for: pre, code */ *:where(:not(html, iframe, canvas, img, svg, video, audio, pre, code):not(svg *, symbol *)) { - all: unset; - display: revert; + all: unset; + display: revert; } *, *::before, *::after { - box-sizing: border-box; + box-sizing: border-box; } html { - -moz-text-size-adjust: none; - -webkit-text-size-adjust: none; - text-size-adjust: none; + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; } -a, button { - cursor: revert; +a, +button { + cursor: revert; } -ol, ul, menu, summary { - list-style: none; +ol, +ul, +menu, +summary { + list-style: none; } img { - max-inline-size: 100%; - max-block-size: 100%; + max-inline-size: 100%; + max-block-size: 100%; } table { - border-collapse: collapse; + border-collapse: collapse; } -input, textarea { +input, +textarea { -webkit-user-select: auto; } @@ -49,12 +54,12 @@ meter { } :where(pre) { - all: revert; - box-sizing: border-box; + all: revert; + box-sizing: border-box; } ::placeholder { - color: unset; + color: unset; } ::marker { @@ -63,33 +68,35 @@ meter { } :where([hidden]) { - display: none; + display: none; } :where([contenteditable]:not([contenteditable="false"])) { - -moz-user-modify: read-write; - -webkit-user-modify: read-write; - overflow-wrap: break-word; - -webkit-line-break: after-white-space; - -webkit-user-select: auto; + -moz-user-modify: read-write; + -webkit-user-modify: read-write; + overflow-wrap: break-word; + -webkit-line-break: after-white-space; + -webkit-user-select: auto; } :where([draggable="true"]) { - -webkit-user-drag: element; + -webkit-user-drag: element; } :where(dialog:modal) { - all: revert; - box-sizing: border-box; + all: revert; + box-sizing: border-box; } -pre, code { - margin: 0; +pre, +code { + margin: 0; } ::-webkit-details-marker { - display: none; + display: none; } + :root { --padding: 12px; --padding_d2: 6px; @@ -101,12 +108,16 @@ pre, code { --soft-dark-transparent: #181820e5; /* --dark: rgb(19, 19, 26); */ --dark-transparent: rgba(19, 19, 26, 0.93); - --dark-hover: rgba(57, 57, 76, 0.25); /* --vscode-list-inactiveSelectionBackground; */ + --dark-hover: rgba(57, 57, 76, 0.25); + /* --vscode-list-inactiveSelectionBackground; */ --darker: rgb(11, 11, 15); --darker-transparent: rgb(11, 11, 15, 0.93); - --white: #c8c8d5; /* --vscode-list-activeSelectionForeground; --vscode-list-inactiveSelectionForeground */ - --white-small-fade: #a4a4b6; /*--vscode-list-focusForeground */ - --white-fade: rgba(171, 171, 191, 0.8); /* --vscode-breadcrumb-foreground */ + --white: #c8c8d5; + /* --vscode-list-activeSelectionForeground; --vscode-list-inactiveSelectionForeground */ + --white-small-fade: #a4a4b6; + /*--vscode-list-focusForeground */ + --white-fade: rgba(171, 171, 191, 0.8); + /* --vscode-breadcrumb-foreground */ /* Body */ --body-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; @@ -134,7 +145,7 @@ pre, code { --left-sidebar-text: var(--white-small-fade); --left-sidebar-text-title-close: var(--white-small-fade); --left-sidebar-text-title-open: var(--white); - --left-sidebar-bg-hover: var(--dark-hover); + --left-sidebar-bg-hover: var(--dark-hover); --left-sidebar-text-hover: var(--white); /* Right Sidebar */ @@ -144,7 +155,7 @@ pre, code { --right-sidebar-text-top: var(--white); --right-sidebar-h2: var(--white-small-fade); --right-sidebar-h3: var(--white-fade); - --right-sidebar-hover-bg: var(--dark-hover); + --right-sidebar-hover-bg: var(--dark-hover); --right-sidebar-hover-h2: var(--white); --right-sidebar-hover-h3: var(--white-small-fade); @@ -223,86 +234,92 @@ pre, code { --blockquote-info-anchor: #d2aefc; --blockquote-info-anchor-text-shadow: .4px 0 .8px black; } -/* ROOT */ - html { - scroll-behavior: smooth; - scroll-padding: 2em; - } - body { - display: flex; +/* ROOT */ +html { + scroll-behavior: smooth; + scroll-padding: 2em; +} - font-family: var(--body-font); +body { + display: flex; - background-image: url("/assets/bg.png"); - background-repeat: no-repeat; - background-position: center; - background-attachment: fixed; - background-size: cover; - } + font-family: var(--body-font); + background-image: url("/assets/bg.png"); + background-repeat: no-repeat; + background-position: center; + background-attachment: fixed; + background-size: cover; +} +.hidden { + display: none; +} /* SCROLLBAR */ - /* Ensure the containers own scrollbars (you already have this) */ - /* html, */ - #left-sidebar, - #right-sidebar, - main > article, - #left-sidebar nav { - /* you already have height:100svh on sidebars and overflow:auto/auto-y */ - -webkit-overflow-scrolling: touch; /* optional, smooth scrolling on mobile */ - } - - /* Scrollbar styles for the actual scrollable elements (explicit) */ - /* html::-webkit-scrollbar, */ - #left-sidebar::-webkit-scrollbar, - #right-sidebar::-webkit-scrollbar, - main > article::-webkit-scrollbar, - #left-sidebar nav::-webkit-scrollbar { - width: 12px; /* vertical */ - height: 12px; /* horizontal */ - } - - /* Track */ - /* html::-webkit-scrollbar-track, */ - #left-sidebar::-webkit-scrollbar-track, - #right-sidebar::-webkit-scrollbar-track, - main > article::-webkit-scrollbar-track, - #left-sidebar nav::-webkit-scrollbar-track { - background: var(--scrollbar-bg); - border-radius: 6px; - } +/* Ensure the containers own scrollbars (you already have this) */ +/* html, */ +#left-sidebar, +#right-sidebar, +main>article, +#left-sidebar nav { + /* you already have height:100svh on sidebars and overflow:auto/auto-y */ + -webkit-overflow-scrolling: touch; + /* optional, smooth scrolling on mobile */ +} + +/* Scrollbar styles for the actual scrollable elements (explicit) */ +/* html::-webkit-scrollbar, */ +#left-sidebar::-webkit-scrollbar, +#right-sidebar::-webkit-scrollbar, +main>article::-webkit-scrollbar, +#left-sidebar nav::-webkit-scrollbar { + width: 12px; + /* vertical */ + height: 12px; + /* horizontal */ +} + +/* Track */ +/* html::-webkit-scrollbar-track, */ +#left-sidebar::-webkit-scrollbar-track, +#right-sidebar::-webkit-scrollbar-track, +main>article::-webkit-scrollbar-track, +#left-sidebar nav::-webkit-scrollbar-track { + background: var(--scrollbar-bg); + border-radius: 6px; +} - /* Thumb */ - /* html::-webkit-scrollbar-thumb, */ - #left-sidebar::-webkit-scrollbar-thumb, - #right-sidebar::-webkit-scrollbar-thumb, - main > article::-webkit-scrollbar-thumb, - #left-sidebar nav::-webkit-scrollbar-thumb { - /* background: var(--highlight-bg); */ - background: #6f6f73; - border-radius: 6px; - } +/* Thumb */ +/* html::-webkit-scrollbar-thumb, */ +#left-sidebar::-webkit-scrollbar-thumb, +#right-sidebar::-webkit-scrollbar-thumb, +main>article::-webkit-scrollbar-thumb, +#left-sidebar nav::-webkit-scrollbar-thumb { + /* background: var(--highlight-bg); */ + background: #6f6f73; + border-radius: 6px; +} - /* Hover */ - /* html::-webkit-scrollbar-thumb:hover, */ - #left-sidebar::-webkit-scrollbar-thumb:hover, - #right-sidebar::-webkit-scrollbar-thumb:hover, - main > article::-webkit-scrollbar-thumb:hover, - #left-sidebar nav::-webkit-scrollbar-thumb:hover { - /* background: var(--highlight-hover-bg); */ - background: #57575a; - } +/* Hover */ +/* html::-webkit-scrollbar-thumb:hover, */ +#left-sidebar::-webkit-scrollbar-thumb:hover, +#right-sidebar::-webkit-scrollbar-thumb:hover, +main>article::-webkit-scrollbar-thumb:hover, +#left-sidebar nav::-webkit-scrollbar-thumb:hover { + /* background: var(--highlight-hover-bg); */ + background: #57575a; +} - /* Corner where a horizontal and vertical scrollbar meet (prevents default white square) */ - /* html::-webkit-scrollbar-corner, */ - #left-sidebar::-webkit-scrollbar-corner, - #right-sidebar::-webkit-scrollbar-corner, - main > article::-webkit-scrollbar-corner, - #left-sidebar nav::-webkit-scrollbar-corner { - background: var(--scrollbar-bg); - } +/* Corner where a horizontal and vertical scrollbar meet (prevents default white square) */ +/* html::-webkit-scrollbar-corner, */ +#left-sidebar::-webkit-scrollbar-corner, +#right-sidebar::-webkit-scrollbar-corner, +main>article::-webkit-scrollbar-corner, +#left-sidebar nav::-webkit-scrollbar-corner { + background: var(--scrollbar-bg); +} .site-logo { @@ -316,7 +333,7 @@ pre, code { font-size: 2.3em; letter-spacing: 3px; font-weight: 800; - + background-clip: text; -webkit-background-clip: text; @@ -326,194 +343,269 @@ pre, code { /* LEFT SIDEBAR */ - #left-sidebar { - background: var(--left-sidebar-bg); - border-right: 1px solid var(--left-sidebar-border); +#left-sidebar { + background: var(--left-sidebar-bg); + border-right: 1px solid var(--left-sidebar-border); - /* Sticky */ - position: sticky; - top: 0; - height: 100svh; + /* Sticky */ + position: sticky; + top: 0; + height: 100svh; - width: 40%; + width: 40%; - overflow: auto; + overflow: auto; - padding: 5svh 0% 0% 10%; - } + padding: 5svh 0% 0% 10%; +} - #left-sidebar > a { - display: flex; - padding: var(--padding_x2) var(--padding); - } +#left-sidebar>a { + display: flex; + padding: var(--padding_x2) var(--padding); +} - #left-sidebar nav { - padding: 0 var(--padding); - overflow: auto; - } +#left-sidebar nav { + padding: 0 var(--padding); + overflow: auto; +} - #left-sidebar > nav > details { - padding-bottom: 0; - } +#left-sidebar>nav>details { + padding-bottom: 0; +} - #left-sidebar > nav > details[open] { - padding-bottom: calc(var(--padding) * 1.5); - } +#left-sidebar>nav>details[open] { + padding-bottom: calc(var(--padding) * 1.5); +} - #left-sidebar > nav > details > summary { - color: var(--left-sidebar-text-title-close); +#left-sidebar>nav>details>summary { + color: var(--left-sidebar-text-title-close); - display: flex; + display: flex; - padding: var(--padding) 0; - font-weight: bold; - cursor: cell; - user-select: none; - } + padding: var(--padding) 0; + font-weight: bold; + cursor: cell; + user-select: none; +} - #left-sidebar > nav > details > summary:hover { - background: var(--left-sidebar-bg-hover); - color: var(--left-sidebar-text-hover); - } +#left-sidebar>nav>details>summary:hover { + background: var(--left-sidebar-bg-hover); + color: var(--left-sidebar-text-hover); +} - #left-sidebar > nav > details[open] > summary { - color: var(--left-sidebar-text-title-open); - } +#left-sidebar>nav>details[open]>summary { + color: var(--left-sidebar-text-title-open); +} - #left-sidebar > nav > details > ul > li { - border-left: 1px solid var(--left-sidebar-border-details); +#left-sidebar>nav>details>ul>li { + border-left: 1px solid var(--left-sidebar-border-details); - margin: 0 var(--padding_d2); - } + margin: 0 var(--padding_d2); +} - #left-sidebar > nav > details > ul > li > a { - color: var(--left-sidebar-text); +#left-sidebar>nav>details>ul>li>a { + color: var(--left-sidebar-text); - display: flex; - cursor: pointer; - padding: var(--padding_d2); - } + display: flex; + cursor: pointer; + padding: var(--padding_d2); +} - #left-sidebar nav > details > ul > li > a:hover:not(.active) { - background: var(--left-sidebar-bg-hover); - color: var(--left-sidebar-text-hover); - - border-top-right-radius: var(--border-radius); - border-bottom-right-radius: var(--border-radius); - } +#left-sidebar nav>details>ul>li>a:hover:not(.active) { + background: var(--left-sidebar-bg-hover); + color: var(--left-sidebar-text-hover); - #left-sidebar > nav > details > ul > li > a::before { - background: var(--left-sidebar-bg); - border: 1px solid var(--left-sidebar-border-details); - - content: ''; - display: inline-block; - width: var(--padding_d2); - height: var(--padding_d2); - - position: relative; - left: calc((var(--padding) * -.78)); - top: 3px; - transform: rotate(45deg); - } + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); +} - #left-sidebar > nav > details > ul > li > a.active { - background: var(--highlight-bg); - color: var(--highlight-text); +#left-sidebar>nav>details>ul>li>a::before { + background: var(--left-sidebar-bg); + border: 1px solid var(--left-sidebar-border-details); - border-top-right-radius: var(--border-radius); - border-bottom-right-radius: var(--border-radius); - } + content: ''; + display: inline-block; + width: var(--padding_d2); + height: var(--padding_d2); - #left-sidebar nav > details > ul > li > a.active::before { - background: var(--highlight-bg); - border: var(--highlight-bg); + position: relative; + left: calc((var(--padding) * -.78)); + top: 3px; + transform: rotate(45deg); +} - left: calc((var(--padding) * -.76)); - } +#left-sidebar>nav>details>ul>li>a.active { + background: var(--highlight-bg); + color: var(--highlight-text); + + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); +} + +#left-sidebar nav>details>ul>li>a.active::before { + background: var(--highlight-bg); + border: var(--highlight-bg); + + left: calc((var(--padding) * -.76)); +} +/* NAVBAR */ +#navbar { + background: var(--dark-transparent); + border-bottom: 1px solid var(--darker); + + position: sticky; + top: 0; + z-index: 1000; + + width: 100%; + padding: var(--padding) var(--padding_x2); +} + +.navbar-container { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1400px; + margin: 0 auto; +} + +.navbar-logo { + color: transparent; + background: linear-gradient(45deg, #866ee7, #ea60da, #ed8f57, #fbd41d, #2cca91); + -webkit-text-fill-color: transparent; + -webkit-text-stroke: .5px var(--logo-border); + + text-transform: uppercase; + font-family: var(--logo-font); + font-size: 1.8em; + letter-spacing: 3px; + font-weight: 800; + + background-clip: text; + -webkit-background-clip: text; + + background-position-x: -78px; + background-attachment: local; + + text-decoration: none; + transition: opacity 0.3s ease; +} + +.navbar-logo:hover { + opacity: 0.8; +} + +.navbar-links { + display: flex; + gap: var(--padding_x2); + align-items: center; +} + +.navbar-link { + color: var(--white-small-fade); + text-decoration: none; + font-weight: 500; + padding: var(--padding_d2) var(--padding); + border-radius: var(--border-radius); + transition: all 0.3s ease; +} + +.navbar-link:hover { + color: var(--white); + background: var(--dark-hover); +} + +.navbar-link.active { + color: var(--white); + background: var(--highlight-bg); + color: var(--highlight-text); +} + /* CENTRAL */ - #central-wrapper { - background: var(--central-bg); - - display: flex; - flex-direction: column; - flex: auto; +#central-wrapper { + background: var(--central-bg); - width: 60%; - } + display: flex; + flex-direction: column; + flex: auto; - main { - display: flex; - flex-direction: row; + width: 100%; +} - width: 100%; - min-height: 94%; +main { + display: flex; + flex-direction: row; - padding: 0 var(--padding_x2); + width: 100%; + min-height: 94%; - flex: 1 1 auto; - align-self: center; - } + padding: var(--padding_x2); + max-width: 1400px; + margin: 0 auto; - main > article { - display: flex; - flex: 1; - flex-direction: column; + flex: 1 1 auto; + align-self: center; +} - padding-top: 5svh; - - overflow: auto; - } +main>article { + display: flex; + flex: 1; + flex-direction: column; - main > article > nav > button:last-child { - display: none; - } + padding-top: 5svh; + overflow: auto; +} - /* CONTENT > NOTE > TITLE */ +main>article>nav>button:last-child { + display: none; +} - main > article > header { - padding: var(--padding_x2) var(--padding_x2) var(--padding); - } + +/* CONTENT > NOTE > TITLE */ + +main>article>header { + padding: var(--padding_x2) var(--padding_x2) var(--padding); +} /* CENTRAL HEADER */ - #central-header { - display: flex; +#central-header { + display: flex; - position: sticky; - top: 0; - height: 5px; - } + position: sticky; + top: 0; + height: 5px; +} /* CENTRAL FOOTER */ - #central-footer { - color: var(--footer-text); +#central-footer { + color: var(--footer-text); - display: flex; + display: flex; - justify-content: left; - padding: 25px 12px 25px 60px; + justify-content: left; + padding: 25px 12px 25px 60px; - gap: var(--padding_d2); - } + gap: var(--padding_d2); +} - #central-footer > a { - background: var(--highlight-bg); - color: var(--highlight-text); +#central-footer>a { + background: var(--highlight-bg); + color: var(--highlight-text); - border-radius: var(--border-radius); - cursor: pointer; - padding: 0 var(--padding_d2); - } + border-radius: var(--border-radius); + cursor: pointer; + padding: 0 var(--padding_d2); +} /* Mobile */ -@media (orientation: portrait) { +@media (orientation: portrait) { #left-sidebar { width: 100%; } @@ -521,11 +613,39 @@ pre, code { #central-wrapper { display: none; } + + .navbar-container { + flex-direction: column; + gap: var(--padding); + } + + .navbar-links { + flex-wrap: wrap; + justify-content: center; + gap: var(--padding); + } +} + +@media (max-width: 768px) { + .navbar-container { + flex-direction: column; + gap: var(--padding); + } + + .navbar-links { + flex-wrap: wrap; + justify-content: center; + gap: var(--padding); + } + + .navbar-logo { + font-size: 1.5em; + } } /* NOTE TITLE */ -main > article > header > h1 { +main>article>header>h1 { color: var(--note-title); font-size: 3em; } @@ -533,11 +653,11 @@ main > article > header > h1 { /* NOTE SUBTITLE */ -main > article > header > p { - color: var(--note-subtitle); +main>article>header>p { + color: var(--note-subtitle); - font-size: 0.9em; - padding-top: 8px; + font-size: 0.9em; + padding-top: 8px; } @@ -591,12 +711,14 @@ main > article > header > p { color: #ff8513; margin: 2.0em 0em 0.5em; } + #note-content h5 { font-size: 1.05em; font-weight: bold; color: #f04545; margin: 1.5em 0em 0.3em; } + #note-content h6 { font-size: 1.0em; font-weight: bold; @@ -604,11 +726,12 @@ main > article > header > p { margin: 1.5em 0em 0.3em; } -/* +/* Only the first h2 OR the first h3 in the div will have; it's the first between both. Only whichever comes first among all children of the div—and only if it is an

or

—will get the style. Later

or

elements are ignored. */ -#note-content h2:first-child, #note-content h3:first-child { +#note-content h2:first-child, +#note-content h3:first-child { margin-top: .6em } @@ -644,8 +767,10 @@ Only whichever comes first among all children of the div—and only if it is an /* STRONG */ -#note-content strong, #note-content b, #note-content table th { - font-weight: 600 +#note-content strong, +#note-content b, +#note-content table th { + font-weight: 600 } @@ -656,17 +781,18 @@ Only whichever comes first among all children of the div—and only if it is an } #note-content .line-emphasis { - font-style: normal; - background-color: var(--line-emphasis); - border-radius: 4px; - margin-left: -4px; - padding-left: 4px; + font-style: normal; + background-color: var(--line-emphasis); + border-radius: 4px; + margin-left: -4px; + padding-left: 4px; } /* STRIKE-THROUGH */ -#note-content del, #note-content s { +#note-content del, +#note-content s { /* font-weight: lighter; */ /* color: red; */ @@ -682,7 +808,7 @@ Only whichever comes first among all children of the div—and only if it is an #note-content dl, #note-content ol, #note-content ul { - margin-left: 20px + margin-left: 20px } #note-content dl dl, @@ -694,18 +820,18 @@ Only whichever comes first among all children of the div—and only if it is an #note-content ul dl, #note-content ul ol, #note-content ul ul { - margin-top: 0; - margin-bottom: 0 + margin-top: 0; + margin-bottom: 0 } /* Numbered List */ -/* +/* Even if I use this 3 at the same time, the counter doesn't reset. -
-
    +
    +
    1. -Apparently I'll have to create a counter with counter-reset and counter-increment, +Apparently I'll have to create a counter with counter-reset and counter-increment, and use its value to change the content of the marker, something like that. For now, I'll use a different symbol and remove these previous attempts. */ @@ -714,7 +840,7 @@ For now, I'll use a different symbol and remove these previous attempts. position: relative; } -#note-content li > ol { +#note-content li>ol { list-style: square; } @@ -730,41 +856,43 @@ For now, I'll use a different symbol and remove these previous attempts. #note-content li blockquote, /* #note-content li iframe, */ #note-content li table { - margin: 1em 0 + margin: 1em 0 } #note-content li::before { - content: "•"; + content: "•"; + + position: absolute; + left: -0.7em; + top: -0.1em; - position: absolute; - left: -0.7em; - top: -0.1em; - font-size: x-large; - font-weight: bold; + font-weight: bold; } #note-content li li::before { - content: "◦"; /* Unicode 25E6 */ - top: -0.025em; - left: -0.6em; + content: "◦"; + /* Unicode 25E6 */ + top: -0.025em; + left: -0.6em; } /* INPUT (Checkbox) */ input { - width: 16px; - height: 16px; - border: 2px solid var(--checkbox-border); - border-radius: 3px; - position: relative; + width: 16px; + height: 16px; + border: 2px solid var(--checkbox-border); + border-radius: 3px; + position: relative; } input[type="checkbox"] { - appearance: checkbox; - -webkit-appearance: checkbox; /* Safari */ + appearance: checkbox; + -webkit-appearance: checkbox; + /* Safari */ } @@ -792,17 +920,18 @@ input[type="checkbox"] { #note-content .table { white-space: nowrap; font-family: var(--code-font); - max-width: 100%; + max-width: 100%; overflow-x: auto; border: 1px solid #ccc; padding: 0px 2px; /* Firefox: Scrollbar */ - scrollbar-width: thin; + scrollbar-width: thin; scrollbar-color: var(--highlight-bg) var(--table-scrollbar); - cursor: grab; /* hint that it can be dragged */ + cursor: grab; + /* hint that it can be dragged */ user-select: none; } @@ -814,18 +943,21 @@ input[type="checkbox"] { /* Chrome, Safari, Edge: Scrollbar */ #note-content .table::-webkit-scrollbar { - height: 12px; + height: 12px; } + #note-content .table::-webkit-scrollbar-track { - background: var(--table-scrollbar); - border-radius: 6px; + background: var(--table-scrollbar); + border-radius: 6px; } + #note-content .table::-webkit-scrollbar-thumb { - background: var(--highlight-bg); - border-radius: 6px; + background: var(--highlight-bg); + border-radius: 6px; } + #note-content .table::-webkit-scrollbar-thumb:hover { - background: var(--checkbox-border); + background: var(--checkbox-border); } @@ -845,28 +977,30 @@ input[type="checkbox"] { border-radius: var(--border-radius); } -#note-content table thead th:first-child{ +#note-content table thead th:first-child { border-top-left-radius: var(--border-radius); } -#note-content table thead th:last-child{ + +#note-content table thead th:last-child { border-top-right-radius: var(--border-radius); } -#note-content table tbody tr:last-child{ +#note-content table tbody tr:last-child { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } -#note-content table tbody tr:last-child td:first-child{ +#note-content table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--border-radius); } -#note-content table tbody tr:last-child td:last-child{ + +#note-content table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--border-radius); } #note-content table td, #note-content table th { - padding: 5px 15px + padding: 5px 15px } #note-content table tr:nth-child(2n) { @@ -881,13 +1015,13 @@ input[type="checkbox"] { /* BLOCK QUOTE */ #note-content blockquote p { - margin: 1em 0 + margin: 1em 0 } #note-content blockquote dl, #note-content blockquote ol, #note-content blockquote ul { - margin: 0 1em 1em 1em + margin: 0 1em 1em 1em } #note-content blockquote { @@ -899,13 +1033,13 @@ input[type="checkbox"] { } #note-content blockquote footer { - margin: 1em 0; - font-style: italic + margin: 1em 0; + font-style: italic } #note-content blockquote footer cite:before { - content: "—"; - padding: 0 .3em + content: "—"; + padding: 0 .3em } #note-content blockquote footer cite a { @@ -926,12 +1060,12 @@ input[type="checkbox"] { color: var(--blockquote-info-color); } -#note-content blockquote.info > p { +#note-content blockquote.info>p { display: flex; gap: var(--padding_d2); } -#note-content blockquote.info > p:first-child > strong:first-child { +#note-content blockquote.info>p:first-child>strong:first-child { font-size: 2.5em; } @@ -963,6 +1097,7 @@ input[type="checkbox"] { border: none; display: block; } + /*! ORIGINAL THEME: Rose Pine The idea is: @@ -993,7 +1128,7 @@ pre code { white-space: pre; border-radius: 8px; - + padding: 1em; } @@ -1089,6 +1224,7 @@ code { .hljs-attr { color: var(--code-keyword); } + .hljs-punctuation { color: var(--code-punctuation) } @@ -1096,6 +1232,73 @@ code { .hljs-emphasis { font-style: italic } + .hljs-strong { font-weight: bold } + +/* TOPICS GRID */ +.topics-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2em; + margin-top: 2em; + padding: 1em 0; +} + +.topic-card { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 2em 1.5em; + border-radius: var(--border-radius); + background: var(--dark-transparent); + border: 1px solid var(--darker); + transition: all 0.3s ease; + cursor: pointer; + text-decoration: none; +} + +.topic-card:hover { + background: var(--dark-hover); + transform: translateY(-4px); + border-color: var(--white-fade); +} + +.topic-card:hover .topic-name { + color: var(--hyperlink-hover); +} + +.topic-icon { + font-size: 3.5em; + margin-bottom: 0.5em; + line-height: 1; +} + +.topic-name { + color: var(--hyperlink); + font-size: 1.2em; + font-weight: 600; + margin-bottom: 0.5em; + transition: color 0.3s ease; +} + +.topic-description { + color: var(--white-fade); + font-size: 0.9em; + line-height: 1.4; +} + +@media (max-width: 1200px) { + .topics-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .topics-grid { + grid-template-columns: 1fr; + gap: 1.5em; + } +} \ No newline at end of file diff --git a/static/studies.38954.css b/static/studies.38954.css index d3f82d3..4523235 100644 --- a/static/studies.38954.css +++ b/static/studies.38954.css @@ -2,40 +2,45 @@ /* custom styles for: pre, code */ *:where(:not(html, iframe, canvas, img, svg, video, audio, pre, code):not(svg *, symbol *)) { - all: unset; - display: revert; + all: unset; + display: revert; } *, *::before, *::after { - box-sizing: border-box; + box-sizing: border-box; } html { - -moz-text-size-adjust: none; - -webkit-text-size-adjust: none; - text-size-adjust: none; + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; } -a, button { - cursor: revert; +a, +button { + cursor: revert; } -ol, ul, menu, summary { - list-style: none; +ol, +ul, +menu, +summary { + list-style: none; } img { - max-inline-size: 100%; - max-block-size: 100%; + max-inline-size: 100%; + max-block-size: 100%; } table { - border-collapse: collapse; + border-collapse: collapse; } -input, textarea { +input, +textarea { -webkit-user-select: auto; } @@ -49,12 +54,12 @@ meter { } :where(pre) { - all: revert; - box-sizing: border-box; + all: revert; + box-sizing: border-box; } ::placeholder { - color: unset; + color: unset; } ::marker { @@ -63,33 +68,35 @@ meter { } :where([hidden]) { - display: none; + display: none; } :where([contenteditable]:not([contenteditable="false"])) { - -moz-user-modify: read-write; - -webkit-user-modify: read-write; - overflow-wrap: break-word; - -webkit-line-break: after-white-space; - -webkit-user-select: auto; + -moz-user-modify: read-write; + -webkit-user-modify: read-write; + overflow-wrap: break-word; + -webkit-line-break: after-white-space; + -webkit-user-select: auto; } :where([draggable="true"]) { - -webkit-user-drag: element; + -webkit-user-drag: element; } :where(dialog:modal) { - all: revert; - box-sizing: border-box; + all: revert; + box-sizing: border-box; } -pre, code { - margin: 0; +pre, +code { + margin: 0; } ::-webkit-details-marker { - display: none; + display: none; } + :root { --padding: 12px; --padding_d2: 6px; @@ -101,12 +108,16 @@ pre, code { --soft-dark-transparent: #181820e5; /* --dark: rgb(19, 19, 26); */ --dark-transparent: rgba(19, 19, 26, 0.93); - --dark-hover: rgba(57, 57, 76, 0.25); /* --vscode-list-inactiveSelectionBackground; */ + --dark-hover: rgba(57, 57, 76, 0.25); + /* --vscode-list-inactiveSelectionBackground; */ --darker: rgb(11, 11, 15); --darker-transparent: rgb(11, 11, 15, 0.93); - --white: #c8c8d5; /* --vscode-list-activeSelectionForeground; --vscode-list-inactiveSelectionForeground */ - --white-small-fade: #a4a4b6; /*--vscode-list-focusForeground */ - --white-fade: rgba(171, 171, 191, 0.8); /* --vscode-breadcrumb-foreground */ + --white: #c8c8d5; + /* --vscode-list-activeSelectionForeground; --vscode-list-inactiveSelectionForeground */ + --white-small-fade: #a4a4b6; + /*--vscode-list-focusForeground */ + --white-fade: rgba(171, 171, 191, 0.8); + /* --vscode-breadcrumb-foreground */ /* Body */ --body-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; @@ -134,7 +145,7 @@ pre, code { --left-sidebar-text: var(--white-small-fade); --left-sidebar-text-title-close: var(--white-small-fade); --left-sidebar-text-title-open: var(--white); - --left-sidebar-bg-hover: var(--dark-hover); + --left-sidebar-bg-hover: var(--dark-hover); --left-sidebar-text-hover: var(--white); /* Right Sidebar */ @@ -144,7 +155,7 @@ pre, code { --right-sidebar-text-top: var(--white); --right-sidebar-h2: var(--white-small-fade); --right-sidebar-h3: var(--white-fade); - --right-sidebar-hover-bg: var(--dark-hover); + --right-sidebar-hover-bg: var(--dark-hover); --right-sidebar-hover-h2: var(--white); --right-sidebar-hover-h3: var(--white-small-fade); @@ -223,85 +234,89 @@ pre, code { --blockquote-info-anchor: #d2aefc; --blockquote-info-anchor-text-shadow: .4px 0 .8px black; } + /* ROOT */ - html { - scroll-behavior: smooth; - scroll-padding: 2em; - } +html { + scroll-behavior: smooth; + scroll-padding: 2em; +} - body { - display: flex; +body { + display: flex; - font-family: var(--body-font); + font-family: var(--body-font); - background-image: url("/assets/bg.png"); - background-repeat: no-repeat; - background-position: center; - background-attachment: fixed; - background-size: cover; - } + background-image: url("/assets/bg.png"); + background-repeat: no-repeat; + background-position: center; + background-attachment: fixed; + background-size: cover; +} /* SCROLLBAR */ - /* Ensure the containers own scrollbars (you already have this) */ - /* html, */ - #left-sidebar, - #right-sidebar, - main > article, - #left-sidebar nav { - /* you already have height:100svh on sidebars and overflow:auto/auto-y */ - -webkit-overflow-scrolling: touch; /* optional, smooth scrolling on mobile */ - } - - /* Scrollbar styles for the actual scrollable elements (explicit) */ - /* html::-webkit-scrollbar, */ - #left-sidebar::-webkit-scrollbar, - #right-sidebar::-webkit-scrollbar, - main > article::-webkit-scrollbar, - #left-sidebar nav::-webkit-scrollbar { - width: 12px; /* vertical */ - height: 12px; /* horizontal */ - } - - /* Track */ - /* html::-webkit-scrollbar-track, */ - #left-sidebar::-webkit-scrollbar-track, - #right-sidebar::-webkit-scrollbar-track, - main > article::-webkit-scrollbar-track, - #left-sidebar nav::-webkit-scrollbar-track { - background: var(--scrollbar-bg); - border-radius: 6px; - } +/* Ensure the containers own scrollbars (you already have this) */ +/* html, */ +#left-sidebar, +#right-sidebar, +main>article, +#left-sidebar nav { + /* you already have height:100svh on sidebars and overflow:auto/auto-y */ + -webkit-overflow-scrolling: touch; + /* optional, smooth scrolling on mobile */ +} + +/* Scrollbar styles for the actual scrollable elements (explicit) */ +/* html::-webkit-scrollbar, */ +#left-sidebar::-webkit-scrollbar, +#right-sidebar::-webkit-scrollbar, +main>article::-webkit-scrollbar, +#left-sidebar nav::-webkit-scrollbar { + width: 12px; + /* vertical */ + height: 12px; + /* horizontal */ +} + +/* Track */ +/* html::-webkit-scrollbar-track, */ +#left-sidebar::-webkit-scrollbar-track, +#right-sidebar::-webkit-scrollbar-track, +main>article::-webkit-scrollbar-track, +#left-sidebar nav::-webkit-scrollbar-track { + background: var(--scrollbar-bg); + border-radius: 6px; +} - /* Thumb */ - /* html::-webkit-scrollbar-thumb, */ - #left-sidebar::-webkit-scrollbar-thumb, - #right-sidebar::-webkit-scrollbar-thumb, - main > article::-webkit-scrollbar-thumb, - #left-sidebar nav::-webkit-scrollbar-thumb { - /* background: var(--highlight-bg); */ - background: #6f6f73; - border-radius: 6px; - } +/* Thumb */ +/* html::-webkit-scrollbar-thumb, */ +#left-sidebar::-webkit-scrollbar-thumb, +#right-sidebar::-webkit-scrollbar-thumb, +main>article::-webkit-scrollbar-thumb, +#left-sidebar nav::-webkit-scrollbar-thumb { + /* background: var(--highlight-bg); */ + background: #6f6f73; + border-radius: 6px; +} - /* Hover */ - /* html::-webkit-scrollbar-thumb:hover, */ - #left-sidebar::-webkit-scrollbar-thumb:hover, - #right-sidebar::-webkit-scrollbar-thumb:hover, - main > article::-webkit-scrollbar-thumb:hover, - #left-sidebar nav::-webkit-scrollbar-thumb:hover { - /* background: var(--highlight-hover-bg); */ - background: #57575a; - } +/* Hover */ +/* html::-webkit-scrollbar-thumb:hover, */ +#left-sidebar::-webkit-scrollbar-thumb:hover, +#right-sidebar::-webkit-scrollbar-thumb:hover, +main>article::-webkit-scrollbar-thumb:hover, +#left-sidebar nav::-webkit-scrollbar-thumb:hover { + /* background: var(--highlight-hover-bg); */ + background: #57575a; +} - /* Corner where a horizontal and vertical scrollbar meet (prevents default white square) */ - /* html::-webkit-scrollbar-corner, */ - #left-sidebar::-webkit-scrollbar-corner, - #right-sidebar::-webkit-scrollbar-corner, - main > article::-webkit-scrollbar-corner, - #left-sidebar nav::-webkit-scrollbar-corner { - background: var(--scrollbar-bg); - } +/* Corner where a horizontal and vertical scrollbar meet (prevents default white square) */ +/* html::-webkit-scrollbar-corner, */ +#left-sidebar::-webkit-scrollbar-corner, +#right-sidebar::-webkit-scrollbar-corner, +main>article::-webkit-scrollbar-corner, +#left-sidebar nav::-webkit-scrollbar-corner { + background: var(--scrollbar-bg); +} .site-logo { color: transparent; @@ -314,206 +329,223 @@ pre, code { font-size: 1.5em; letter-spacing: 3px; font-weight: 800; - + background-clip: text; -webkit-background-clip: text; } /* LEFT SIDEBAR */ - #left-sidebar { - background: var(--left-sidebar-bg); - border-right: 1px solid var(--left-sidebar-border); +#left-sidebar { + background: var(--left-sidebar-bg); + border-right: 1px solid var(--left-sidebar-border); - /* Sticky */ - position: sticky; - top: 0; - height: 100svh; + /* Sticky */ + position: sticky; + top: 0; + height: 100svh; - min-width: 15%; + min-width: 15%; - overflow: auto; - } + overflow: auto; +} - #left-sidebar > a { - display: flex; - padding: var(--padding_x2) var(--padding); - } +#left-sidebar>a { + display: flex; + padding: var(--padding_x2) var(--padding); +} - #left-sidebar nav { - padding: 0 var(--padding); - overflow: auto; - } +#left-sidebar nav { + padding: 0 var(--padding); + overflow: auto; +} - #left-sidebar > nav > details { - padding-bottom: 0; - } +#left-sidebar>nav>details { + padding-bottom: 0; +} - #left-sidebar > nav > details[open] { - padding-bottom: calc(var(--padding) * 1.5); - } +#left-sidebar>nav>details[open] { + padding-bottom: calc(var(--padding) * 1.5); +} - #left-sidebar > nav > details > summary { - color: var(--left-sidebar-text-title-close); +#left-sidebar>nav>details>summary { + color: var(--left-sidebar-text-title-close); - display: flex; + display: flex; - padding: var(--padding) 0; - font-weight: bold; - cursor: cell; - user-select: none; - } + padding: var(--padding) 0; + font-weight: bold; + cursor: cell; + user-select: none; +} - #left-sidebar > nav > details > summary:hover { - background: var(--left-sidebar-bg-hover); - color: var(--left-sidebar-text-hover); - } +#left-sidebar>nav>details>summary:hover { + background: var(--left-sidebar-bg-hover); + color: var(--left-sidebar-text-hover); +} - #left-sidebar > nav > details[open] > summary { - color: var(--left-sidebar-text-title-open); - } +#left-sidebar>nav>details[open]>summary { + color: var(--left-sidebar-text-title-open); +} - #left-sidebar > nav > details > ul > li { - border-left: 1px solid var(--left-sidebar-border-details); +#left-sidebar>nav>details>ul>li { + border-left: 1px solid var(--left-sidebar-border-details); - margin: 0 var(--padding_d2); - } + margin: 0 var(--padding_d2); +} - #left-sidebar > nav > details > ul > li > a { - color: var(--left-sidebar-text); +#left-sidebar>nav>details>ul>li>a { + color: var(--left-sidebar-text); - display: flex; - cursor: pointer; - padding: var(--padding_d2); - } + display: flex; + cursor: pointer; + padding: var(--padding_d2); +} - #left-sidebar nav > details > ul > li > a:hover:not(.active) { - background: var(--left-sidebar-bg-hover); - color: var(--left-sidebar-text-hover); - - border-top-right-radius: var(--border-radius); - border-bottom-right-radius: var(--border-radius); - } +#left-sidebar nav>details>ul>li>a:hover:not(.active) { + background: var(--left-sidebar-bg-hover); + color: var(--left-sidebar-text-hover); - #left-sidebar > nav > details > ul > li > a::before { - background: var(--left-sidebar-bg); - border: 1px solid var(--left-sidebar-border-details); + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); +} - content: ''; - display: inline-block; - width: var(--padding_d2); - height: var(--padding_d2); - - position: relative; - left: calc((var(--padding) * -.78)); - top: 3px; - transform: rotate(45deg); - } +#left-sidebar>nav>details>ul>li>a::before { + background: var(--left-sidebar-bg); + border: 1px solid var(--left-sidebar-border-details); - #left-sidebar > nav > details > ul > li > a.active { - background: var(--highlight-bg); - color: var(--highlight-text); + content: ''; + display: inline-block; + width: var(--padding_d2); + height: var(--padding_d2); - border-top-right-radius: var(--border-radius); - border-bottom-right-radius: var(--border-radius); - } + position: relative; + left: calc((var(--padding) * -.78)); + top: 3px; + transform: rotate(45deg); +} - #left-sidebar nav > details > ul > li > a.active::before { - background: var(--highlight-bg); - border: var(--highlight-bg); +#left-sidebar>nav>details>ul>li>a.active { + background: var(--highlight-bg); + color: var(--highlight-text); - left: calc((var(--padding) * -.76)); - } + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); +} + +#left-sidebar nav>details>ul>li>a.active::before { + background: var(--highlight-bg); + border: var(--highlight-bg); + + left: calc((var(--padding) * -.76)); +} /* RIGHT SIDEBAR */ - #right-sidebar { - background: var(--right-sidebar-bg); +#right-sidebar { + background: var(--right-sidebar-bg); - /* Sticky */ - position: sticky; - top: 0; - height: 100svh; + /* Sticky */ + position: sticky; + top: 0; + height: 100svh; - min-width: 12%; + min-width: 14%; + max-width: 280px; - overflow-x: hidden; - overflow-y: auto; - } + overflow-x: hidden; + overflow-y: auto; +} - :root { - --padding: 16px; - --padding_d2: 8px; - --padding_x2: 32px; - } +:root { + --padding: 16px; + --padding_d2: 8px; + --padding_x2: 32px; +} - #right-sidebar > nav { - border-left: 1px solid var(--right-sidebar-border); - /* margin: 0 var(--padding); */ - height: 100%; - } +#right-sidebar>nav { + border-left: 1px solid var(--right-sidebar-border); + /* margin: 0 var(--padding); */ + height: 100%; +} - /* On This Page title */ - #right-sidebar > nav > strong { - color: var(--right-sidebar-text-top); +/* On This Page title */ +#right-sidebar>nav>strong { + color: var(--right-sidebar-text-top); - display: flex; - padding: 30px 18px; - font-weight: bold; - font-size: large; - } + display: flex; + padding: 24px 18px 16px 18px; + font-weight: bold; + font-size: 1.1em; + text-transform: uppercase; + letter-spacing: 0.5px; + border-bottom: 1px solid var(--right-sidebar-border); + margin-bottom: 8px; +} - /* Container holding all table of contents */ - #right-sidebar > nav > ul { - border-left: 1px solid var(--right-sidebar-border-details); +/* Container holding all table of contents */ +#right-sidebar>nav>ul { + border-left: 1px solid var(--right-sidebar-border-details); - margin: 0 24px; - /* height: 100%; */ - } + margin: 0 24px; + /* height: 100%; */ +} - /* H2 Headers */ - #right-sidebar > nav > ul > li > a { - color: var(--right-sidebar-h2); - } +/* H2 Headers */ +#right-sidebar>nav>ul>li>a { + color: var(--right-sidebar-h2); + font-weight: 600; + font-size: 0.95em; + padding: 10px var(--padding_d2); + margin: 2px 0; + border-radius: var(--border-radius); + transition: all 0.2s ease; +} - #table-of-contents > nav > ul > li > a:hover:not(.active) { - background: var(--right-sidebar-hover-bg); - color: var(--right-sidebar-hover-h2); +#table-of-contents>nav>ul>li>a:hover:not(.active) { + background: var(--right-sidebar-hover-bg); + color: var(--right-sidebar-hover-h2); - border-top-right-radius: var(--border-radius); - border-bottom-right-radius: var(--border-radius); - } + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); +} - /* H3 Headers */ - #table-of-contents a { - color: var(--right-sidebar-h3); +/* H3 Headers */ +#table-of-contents a { + color: var(--right-sidebar-h3); + font-size: 0.9em; - display: inline-block; - cursor: pointer; - padding: var(--padding_d2); - } + display: inline-block; + cursor: pointer; + padding: 8px var(--padding_d2); + margin: 1px 0; + border-radius: var(--border-radius); + transition: all 0.2s ease; + width: 100%; +} - #table-of-contents a:hover:not(.active) { - background: var(--right-sidebar-hover-bg); - color: var(--right-sidebar-hover-h3); +#table-of-contents a:hover:not(.active) { + background: var(--right-sidebar-hover-bg); + color: var(--right-sidebar-hover-h3); - border-top-right-radius: var(--border-radius); - border-bottom-right-radius: var(--border-radius); - } + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); +} - #table-of-contents ul a::before { - background: var(--right-sidebar-bg); - border: 1px solid var(--right-sidebar-border-details); - content: ''; - display: inline-block; - position: relative; - left: -14px; - width: 11px; - height: 11px; - border-radius: 50%; - } - /* Circle with svg */ - /* #table-of-contents ul a::before{ +#table-of-contents ul a::before { + background: var(--right-sidebar-bg); + border: 1px solid var(--right-sidebar-border-details); + content: ''; + display: inline-block; + position: relative; + left: -14px; + width: 11px; + height: 11px; + border-radius: 50%; +} + +/* Circle with svg */ +/* #table-of-contents ul a::before{ content: ''; display:inline-block; width:12px; @@ -525,116 +557,175 @@ pre, code { transform: translate(-14.5px, 0px); } */ - #table-of-contents a.active { - background: var(--highlight-bg); +#table-of-contents a.active { + background: var(--highlight-bg); - color: var(--highlight-text); - border-top-right-radius: var(--border-radius); - border-bottom-right-radius: var(--border-radius); - } + color: var(--highlight-text); + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); +} - #table-of-contents ul a.active::before { - background: var(--right-sidebar-bg); - } +#table-of-contents ul a.active::before { + background: var(--right-sidebar-bg); +} - #table-of-contents ul ul { - border-left: 1px solid var(--right-sidebar-border-details); +#table-of-contents ul ul { + border-left: 1px solid var(--right-sidebar-border-details); - margin-left: calc(var(--padding) * 1.75); - } + margin-left: calc(var(--padding) * 1.75); + margin-top: 4px; + margin-bottom: 4px; +} - /* Strike-through */ - #table-of-contents del, #table-of-contents s { - /* font-weight: lighter; */ - /* color: red; */ - - text-decoration-line: line-through; - text-decoration-color: var(--table-strikethrough); - text-decoration-thickness: 2px; - /* text-decoration-style: dotted; */ - } +/* Better visual hierarchy for nested items */ +#table-of-contents ul ul a { + font-size: 0.85em; + padding: 6px var(--padding_d2); + color: var(--right-sidebar-h3); +} + +/* Smooth scroll behavior */ +html { + scroll-behavior: smooth; +} + +/* Collapsible TOC sections */ +#table-of-contents details { + margin: 4px 0; +} + +#table-of-contents details>summary { + color: var(--right-sidebar-h2); + font-weight: 600; + font-size: 0.95em; + padding: 10px var(--padding_d2); + margin: 2px 0; + cursor: pointer; + list-style: none; + border-radius: var(--border-radius); + transition: all 0.2s ease; + user-select: none; +} + +#table-of-contents details>summary::-webkit-details-marker { + display: none; +} + +#table-of-contents details>summary::before { + content: '▶'; + display: inline-block; + margin-right: 8px; + font-size: 0.7em; + transition: transform 0.2s ease; + color: var(--right-sidebar-h3); +} + +#table-of-contents details[open]>summary::before { + transform: rotate(90deg); +} + +#table-of-contents details>summary:hover { + background: var(--right-sidebar-hover-bg); + color: var(--right-sidebar-hover-h2); +} + +/* Strike-through */ +#table-of-contents del, +#table-of-contents s { + /* font-weight: lighter; */ + /* color: red; */ + + text-decoration-line: line-through; + text-decoration-color: var(--table-strikethrough); + text-decoration-thickness: 2px; + /* text-decoration-style: dotted; */ +} /* CENTRAL */ - #central-wrapper { - background: var(--central-bg); - - display: flex; - flex-direction: column; - flex: auto; +#central-wrapper { + background: var(--central-bg); - width: 73%; - } + display: flex; + flex-direction: column; + flex: auto; - #central-wrapper > .icon-home { - display: none; + width: 73%; + min-width: 0; + /* Allow flexbox to shrink */ +} - position: sticky; +#central-wrapper>.icon-home { + display: none; - top: 20px; - left: 30px; - width: 50px; - color: whitesmoke; - opacity: 0.6; - } + position: sticky; - main { - display: flex; - flex-direction: row; + top: 20px; + left: 30px; + width: 50px; + color: whitesmoke; + opacity: 0.6; +} - width: 100%; - min-height: 94%; +main { + display: flex; + flex-direction: row; - padding: 0 var(--padding_x2); + width: 100%; + min-height: 94%; - flex: 1 1 auto; - align-self: center; - } + padding: 0 var(--padding_x2); - @media (min-width: 2600px) { - main { - width: 1800px; - } + flex: 1 1 auto; + align-self: center; +} + +@media (min-width: 2600px) { + main { + width: 1800px; } +} - main > article { - display: flex; - flex: 1; - flex-direction: column; +main>article { + display: flex; + flex: 1; + flex-direction: column; - padding-top: var(--padding_x2); - - overflow: auto; - } + padding-top: var(--padding_x2); - main > article > nav > button:last-child { - display: none; - } + overflow: auto; + min-width: 0; + /* Allow flexbox to shrink */ +} +main>article>nav>button:last-child { + display: none; +} - /* CONTENT > NOTE > TITLE */ - main > article > header { - padding: var(--padding_x2) var(--padding_x2) var(--padding); - } +/* CONTENT > NOTE > TITLE */ + +main>article>header { + padding: var(--padding_x2) var(--padding_x2) var(--padding); +} /* CENTRAL HEADER */ - #central-header { - display: flex; +#central-header { + display: flex; - position: sticky; - top: 0; - height: 5px; - } + position: sticky; + top: 0; + height: 5px; +} /* DROPDOWN MENU */ - /* +/* Stylization for this is super limited. Some of the styles here don't work at all. I'll probably use tabs anyway. */ - /* #dropdown-menu { +/* #dropdown-menu { display: flex; justify-content: end; position: absolute; @@ -759,7 +850,7 @@ pre, code { /* BUTTON CHANGE THEME */ - /* #button-color-theme { +/* #button-color-theme { display: flex; position: absolute; @@ -772,9 +863,9 @@ pre, code { width: 110px; height: 45px; padding: 8.5px 12px; - + justify-content: center; - + color: var(--header-button-text); background: var(--header-button-bg); border: 1px solid var(--header-button-border); @@ -792,62 +883,62 @@ pre, code { /* PREVIOUS / NEXT */ - #previous-next { - display: grid; - grid-template-columns: 1fr 1fr; +#previous-next { + display: grid; + grid-template-columns: 1fr 1fr; - padding: 35px 24px 15px 24px; - row-gap: var(--padding); - } + padding: 35px 24px 15px 24px; + row-gap: var(--padding); +} - #previous-next > a { - background: var(--prev-next-bg); - color: var(--prev-next-text); - border: 1px solid var(--prev-next-border); - - display: flex; - padding: var(--padding); - gap: calc(var(--padding) / 4); - border-radius: var(--border-radius); - cursor: pointer; - width: 35%; - } +#previous-next>a { + background: var(--prev-next-bg); + color: var(--prev-next-text); + border: 1px solid var(--prev-next-border); - #previous-next > a:first-child { - justify-self: start; - } + display: flex; + padding: var(--padding); + gap: calc(var(--padding) / 4); + border-radius: var(--border-radius); + cursor: pointer; + width: 35%; +} - #previous-next > a:last-child { - justify-self: end; - display: flex; - justify-content: end; - } +#previous-next>a:first-child { + justify-self: start; +} - #previous-next > a:hover { - background: var(--prev-next-hover-bg); - } +#previous-next>a:last-child { + justify-self: end; + display: flex; + justify-content: end; +} + +#previous-next>a:hover { + background: var(--prev-next-hover-bg); +} /* CENTRAL FOOTER */ - #central-footer { - color: var(--footer-text); +#central-footer { + color: var(--footer-text); - display: flex; - justify-content: center; + display: flex; + justify-content: center; - padding: 25px 12px 25px 12px; + padding: 25px 12px 25px 12px; - gap: var(--padding_d2); - } + gap: var(--padding_d2); +} - #central-footer > a { - background: var(--highlight-bg); - color: var(--highlight-text); +#central-footer>a { + background: var(--highlight-bg); + color: var(--highlight-text); - border-radius: var(--border-radius); - cursor: pointer; - padding: 0 var(--padding_d2); - } + border-radius: var(--border-radius); + cursor: pointer; + padding: 0 var(--padding_d2); +} /* Mobile */ @@ -855,7 +946,7 @@ pre, code { main { padding-top: 2svh; } - + #left-sidebar { display: none; } @@ -867,11 +958,24 @@ pre, code { #right-sidebar { display: none; } + + #back-to-top { + bottom: 20px; + right: 20px; + width: 45px; + height: 45px; + font-size: 20px; + } + + #note-content { + max-width: 100%; + padding: var(--padding); + } } /* NOTE TITLE */ -main > article > header > h1 { +main>article>header>h1 { color: var(--note-title); font-size: 3em; } @@ -879,14 +983,62 @@ main > article > header > h1 { /* NOTE SUBTITLE */ -main > article > header > p { - color: var(--note-subtitle); +main>article>header>p { + color: var(--note-subtitle); - font-size: 0.9em; - padding-top: 8px; + font-size: 0.9em; + padding-top: 8px; } +/* READING PROGRESS INDICATOR */ +#reading-progress { + position: fixed; + top: 0; + left: 0; + width: 0%; + height: 3px; + background: var(--highlight-bg); + z-index: 10000; + transition: width 0.1s ease; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); +} + +/* BACK TO TOP BUTTON */ +#back-to-top { + position: fixed; + bottom: 30px; + right: 30px; + width: 50px; + height: 50px; + background: var(--highlight-bg); + color: var(--highlight-text); + border: none; + border-radius: 50%; + cursor: pointer; + display: none; + align-items: center; + justify-content: center; + font-size: 24px; + z-index: 9999; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + transition: all 0.3s ease; + opacity: 0; + transform: translateY(20px); +} + +#back-to-top.visible { + display: flex; + opacity: 1; + transform: translateY(0); +} + +#back-to-top:hover { + background: var(--highlight-hover-bg); + transform: translateY(-4px); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); +} + /* NOTE CONTENT */ #note-content { @@ -898,6 +1050,9 @@ main > article > header > p { padding: var(--padding) var(--padding_x2); overflow-x: hidden; overflow-y: visible; + max-width: 900px; + margin: 0 auto; + width: 100%; } @@ -922,6 +1077,9 @@ main > article > header > p { font-weight: bold; color: #3d7fe0; margin: 3.0em 0em 0.5em; + padding-top: 1em; + border-top: 2px solid rgba(61, 127, 224, 0.2); + scroll-margin-top: 80px; } #note-content h3 { @@ -929,6 +1087,7 @@ main > article > header > p { font-weight: bold; color: #eecf1d; margin: 2.0em 0em 0.5em; + scroll-margin-top: 80px; } #note-content h4 { @@ -937,12 +1096,14 @@ main > article > header > p { color: #ff8513; margin: 2.0em 0em 0.5em; } + #note-content h5 { font-size: 1.05em; font-weight: bold; color: #f04545; margin: 1.5em 0em 0.3em; } + #note-content h6 { font-size: 1.0em; font-weight: bold; @@ -950,11 +1111,12 @@ main > article > header > p { margin: 1.5em 0em 0.3em; } -/* +/* Only the first h2 OR the first h3 in the div will have; it's the first between both. Only whichever comes first among all children of the div—and only if it is an

      or

      —will get the style. Later

      or

      elements are ignored. */ -#note-content h2:first-child, #note-content h3:first-child { +#note-content h2:first-child, +#note-content h3:first-child { margin-top: .6em } @@ -966,10 +1128,20 @@ Only whichever comes first among all children of the div—and only if it is an #note-content p, #note-content table, #note-content ul { - line-height: 1.8rem; + line-height: 1.9rem; letter-spacing: -.1px; } +/* Better spacing for paragraphs */ +#note-content p { + margin: 1.2em 0; +} + +/* Section dividers for better visual separation */ +#note-content h2+* { + margin-top: 0.5em; +} + /* HYPERLINK */ @@ -990,8 +1162,10 @@ Only whichever comes first among all children of the div—and only if it is an /* STRONG */ -#note-content strong, #note-content b, #note-content table th { - font-weight: 600 +#note-content strong, +#note-content b, +#note-content table th { + font-weight: 600 } @@ -1002,17 +1176,18 @@ Only whichever comes first among all children of the div—and only if it is an } #note-content .line-emphasis { - font-style: normal; - background-color: var(--line-emphasis); - border-radius: 4px; - margin-left: -4px; - padding-left: 4px; + font-style: normal; + background-color: var(--line-emphasis); + border-radius: 4px; + margin-left: -4px; + padding-left: 4px; } /* STRIKE-THROUGH */ -#note-content del, #note-content s { +#note-content del, +#note-content s { /* font-weight: lighter; */ /* color: red; */ @@ -1028,7 +1203,7 @@ Only whichever comes first among all children of the div—and only if it is an #note-content dl, #note-content ol, #note-content ul { - margin-left: 20px + margin-left: 20px } #note-content dl dl, @@ -1040,18 +1215,18 @@ Only whichever comes first among all children of the div—and only if it is an #note-content ul dl, #note-content ul ol, #note-content ul ul { - margin-top: 0; - margin-bottom: 0 + margin-top: 0; + margin-bottom: 0 } /* Numbered List */ -/* +/* Even if I use this 3 at the same time, the counter doesn't reset. -
      -
        +
        +
        1. -Apparently I'll have to create a counter with counter-reset and counter-increment, +Apparently I'll have to create a counter with counter-reset and counter-increment, and use its value to change the content of the marker, something like that. For now, I'll use a different symbol and remove these previous attempts. */ @@ -1060,7 +1235,7 @@ For now, I'll use a different symbol and remove these previous attempts. position: relative; } -#note-content li > ol { +#note-content li>ol { list-style: square; } @@ -1076,41 +1251,43 @@ For now, I'll use a different symbol and remove these previous attempts. #note-content li blockquote, /* #note-content li iframe, */ #note-content li table { - margin: 1em 0 + margin: 1em 0 } #note-content li::before { - content: "•"; + content: "•"; + + position: absolute; + left: -0.7em; + top: -0.1em; - position: absolute; - left: -0.7em; - top: -0.1em; - font-size: x-large; - font-weight: bold; + font-weight: bold; } #note-content li li::before { - content: "◦"; /* Unicode 25E6 */ - top: -0.025em; - left: -0.6em; + content: "◦"; + /* Unicode 25E6 */ + top: -0.025em; + left: -0.6em; } /* INPUT (Checkbox) */ input { - width: 16px; - height: 16px; - border: 2px solid var(--checkbox-border); - border-radius: 3px; - position: relative; + width: 16px; + height: 16px; + border: 2px solid var(--checkbox-border); + border-radius: 3px; + position: relative; } input[type="checkbox"] { - appearance: checkbox; - -webkit-appearance: checkbox; /* Safari */ + appearance: checkbox; + -webkit-appearance: checkbox; + /* Safari */ } @@ -1138,17 +1315,18 @@ input[type="checkbox"] { #note-content .table { white-space: nowrap; font-family: var(--code-font); - max-width: 100%; + max-width: 100%; overflow-x: auto; border: 1px solid #ccc; padding: 0px 2px; /* Firefox: Scrollbar */ - scrollbar-width: thin; + scrollbar-width: thin; scrollbar-color: var(--highlight-bg) var(--table-scrollbar); - cursor: grab; /* hint that it can be dragged */ + cursor: grab; + /* hint that it can be dragged */ user-select: none; } @@ -1160,18 +1338,21 @@ input[type="checkbox"] { /* Chrome, Safari, Edge: Scrollbar */ #note-content .table::-webkit-scrollbar { - height: 12px; + height: 12px; } + #note-content .table::-webkit-scrollbar-track { - background: var(--table-scrollbar); - border-radius: 6px; + background: var(--table-scrollbar); + border-radius: 6px; } + #note-content .table::-webkit-scrollbar-thumb { - background: var(--highlight-bg); - border-radius: 6px; + background: var(--highlight-bg); + border-radius: 6px; } + #note-content .table::-webkit-scrollbar-thumb:hover { - background: var(--checkbox-border); + background: var(--checkbox-border); } @@ -1191,28 +1372,30 @@ input[type="checkbox"] { border-radius: var(--border-radius); } -#note-content table thead th:first-child{ +#note-content table thead th:first-child { border-top-left-radius: var(--border-radius); } -#note-content table thead th:last-child{ + +#note-content table thead th:last-child { border-top-right-radius: var(--border-radius); } -#note-content table tbody tr:last-child{ +#note-content table tbody tr:last-child { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } -#note-content table tbody tr:last-child td:first-child{ +#note-content table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--border-radius); } -#note-content table tbody tr:last-child td:last-child{ + +#note-content table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--border-radius); } #note-content table td, #note-content table th { - padding: 5px 15px + padding: 5px 15px } #note-content table tr:nth-child(2n) { @@ -1227,13 +1410,13 @@ input[type="checkbox"] { /* BLOCK QUOTE */ #note-content blockquote p { - margin: 1em 0 + margin: 1em 0 } #note-content blockquote dl, #note-content blockquote ol, #note-content blockquote ul { - margin: 0 1em 1em 1em + margin: 0 1em 1em 1em } #note-content blockquote { @@ -1245,13 +1428,13 @@ input[type="checkbox"] { } #note-content blockquote footer { - margin: 1em 0; - font-style: italic + margin: 1em 0; + font-style: italic } #note-content blockquote footer cite:before { - content: "—"; - padding: 0 .3em + content: "—"; + padding: 0 .3em } #note-content blockquote footer cite a { @@ -1272,12 +1455,12 @@ input[type="checkbox"] { color: var(--blockquote-info-color); } -#note-content blockquote.info > p { +#note-content blockquote.info>p { display: flex; gap: var(--padding_d2); } -#note-content blockquote.info > p:first-child > strong:first-child { +#note-content blockquote.info>p:first-child>strong:first-child { font-size: 2.5em; } @@ -1309,6 +1492,7 @@ input[type="checkbox"] { border: none; display: block; } + /*! ORIGINAL THEME: Rose Pine The idea is: @@ -1339,7 +1523,7 @@ pre code { white-space: pre; border-radius: 8px; - + padding: 1em; } @@ -1435,6 +1619,7 @@ code { .hljs-attr { color: var(--code-keyword); } + .hljs-punctuation { color: var(--code-punctuation) } @@ -1442,6 +1627,7 @@ code { .hljs-emphasis { font-style: italic } + .hljs-strong { font-weight: bold -} +} \ No newline at end of file diff --git a/static/studies.38954.js b/static/studies.38954.js index 49c8fcd..1b9405f 100644 --- a/static/studies.38954.js +++ b/static/studies.38954.js @@ -1,4 +1,50 @@ +// Reading Progress Indicator +document.addEventListener('DOMContentLoaded', function () { + // Create progress bar + const progressBar = document.createElement('div'); + progressBar.id = 'reading-progress'; + document.body.appendChild(progressBar); + + // Create back to top button + const backToTopBtn = document.createElement('button'); + backToTopBtn.id = 'back-to-top'; + backToTopBtn.innerHTML = '↑'; + backToTopBtn.setAttribute('aria-label', 'Back to top'); + document.body.appendChild(backToTopBtn); + + // Update progress bar + function updateProgress() { + const article = document.querySelector('main > article') || document.querySelector('#note-content'); + if (!article) return; + + const scrollTop = window.pageYOffset || document.documentElement.scrollTop; + const docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; + const scrollPercent = (scrollTop / docHeight) * 100; + + progressBar.style.width = scrollPercent + '%'; + + // Show/hide back to top button + if (scrollTop > 300) { + backToTopBtn.classList.add('visible'); + } else { + backToTopBtn.classList.remove('visible'); + } + } + + // Back to top functionality + backToTopBtn.addEventListener('click', function () { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); + }); + + // Update on scroll + window.addEventListener('scroll', updateProgress); + updateProgress(); +}); + if ('IntersectionObserver' in window) { document.addEventListener('DOMContentLoaded', function () { const links = document.querySelectorAll('#table-of-contents a'); @@ -15,14 +61,25 @@ if ('IntersectionObserver' in window) { activeLink = linksById[entry.target.id]; if (activeLink) { activeLink.classList.add('active'); + + // Scroll TOC item into view if needed + const tocContainer = document.getElementById('right-sidebar'); + if (tocContainer && activeLink.offsetParent) { + const linkRect = activeLink.getBoundingClientRect(); + const containerRect = tocContainer.getBoundingClientRect(); + + if (linkRect.bottom > containerRect.bottom || linkRect.top < containerRect.top) { + activeLink.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + } } } }); - }, {rootMargin: `0% 0% -80% 0%`}); + }, { rootMargin: `0% 0% -80% 0%` }); links.forEach(link => { - const id = link.getAttribute('href') ? link.getAttribute('href').slice(1) : null; - // Checking if href exists before slicing the #. + const id = link.getAttribute('href') ? link.getAttribute('href').slice(1) : null; + // Checking if href exists before slicing the #. if (id) { const target = document.getElementById(id); if (target) { @@ -31,9 +88,24 @@ if ('IntersectionObserver' in window) { } } - link.addEventListener('click', function () { + link.addEventListener('click', function (e) { + e.preventDefault(); + const targetId = this.getAttribute('href')?.slice(1); + if (targetId) { + const target = document.getElementById(targetId); + if (target) { + target.scrollIntoView({ behavior: 'smooth', block: 'start' }); + // Update URL without jumping + history.pushState(null, null, '#' + targetId); + } + } + + const body = document.body; if (body.classList.contains('model-open')) { - mainAsideCloseButton.click() + const mainAsideCloseButton = document.querySelector('.main-aside-close-button'); + if (mainAsideCloseButton) { + mainAsideCloseButton.click(); + } } }); }); @@ -78,9 +150,9 @@ sliders.forEach(slider => { // note_content.scrollTop -= e.movementY; - /* This doesn't work */ + /* This doesn't work */ // window.scrollBy(0, -e.movementY * 10); - /* This works, but the scroll is not satisfying. It's slow. */ + /* This works, but the scroll is not satisfying. It's slow. */ }); }); diff --git a/studies/_index.html b/studies/_index.html index 1949329..df5683e 100644 --- a/studies/_index.html +++ b/studies/_index.html @@ -1,1255 +1,1072 @@ - - - - Caio Raphael - - - - - - - - - - - - - - - - - -
          -
          -
          -
          -

          - Studies -

          -

          -

          -
          -
          -

          - Hello! -

          -

          - This is a collection of studies I did in the past 3-4 years. -

          -

          - Use the left panel to navigate between the topics. -

          + + + Caio Raphael + + + + + + + + + + + + + + + + + + - - - +
          +
          +
          +
          + 🧑‍💻 built by and copyright + + Caio Raphael + + 📅 2025-10-21 .  2025-11-22 🚀 +
          +
          + + + + \ No newline at end of file