From da2a4265472056a2e7fedf974a6a3d7fdf02d736 Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 11:52:32 -0500 Subject: [PATCH 01/20] refactor: move search styles to new file --- _includes/head.html | 2 +- css/search.css | 92 +++++++++++++++++++++++++++++++++++++++------ css/style.css | 81 --------------------------------------- 3 files changed, 82 insertions(+), 93 deletions(-) diff --git a/_includes/head.html b/_includes/head.html index 9215232180..9c48ab14b7 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -7,9 +7,9 @@ - + diff --git a/css/search.css b/css/search.css index cb60915c73..8579f20f70 100644 --- a/css/search.css +++ b/css/search.css @@ -1,22 +1,92 @@ #q { display: none; height: 2.5em; - min-width: 100%; + max-width: 100%; padding: 5px; } .algolia-autocomplete { - min-width: 12em; - max-width: 12em; - top: -0.2em; -} + max-width: 9em; -.algolia-autocomplete #q { - display: initial -} + >input { + color: var(--fg); + background-color: var(--bg); + } + + >input::placeholder { + color: var(--fg); + } + + #q { + display: initial; + border-radius: 8px; + border: 1px solid var(--border); + transition: color .3s ease; + padding-inline: 12px; + outline: none; -@media all and (max-width: 899px) { - .algolia-autocomplete { - display: none !important; + &:focus-visible, + &:focus { + border-color: var(--hover-border); + border-width: 2px; + } } } + +#navbar { + .ds-dropdown-menu .ds-dataset-1 { + background-color: var(--bg); + + .ds-suggestions { + /* background-color: var(--bg); */ + color: var(--fg); + } + + .ds-suggestion a { + background-color: var(--bg); + color: var(--fg); + } + + .ds-suggestion a { + background-color: var(--bg); + color: var(--fg); + } + + .algolia-docsearch-suggestion--category-header { + color: var(--fg); + } + + .algolia-docsearch-suggestion--wrapper { + background-color: var(--bg); + + .algolia-docsearch-suggestion--subcategory-column { + color: var(--menu-grey); + + } + + .algolia-docsearch-suggestion--title, + .algolia-docsearch-suggestion--text { + color: var(--fg); + } + + .algolia-docsearch-suggestion--highlight { + color: var(--link); + background-color: initial; + } + } + + .algolia-docsearch-suggestion { + background-color: initial; + } + + .algolia-docsearch-suggestion--content .algolia-docsearch-suggestion--no-results { + background-color: initial; + } + + } + + .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--title, + .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content { + background-color: var(--hover-bg); + } +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 08836c0df2..30a5d2073e 100644 --- a/css/style.css +++ b/css/style.css @@ -738,87 +738,6 @@ h2 a { color: var(--card-fg) !important; } -/* search */ - -#q { - display: none; - height: 2.5em; - max-width: 100%; - padding: 5px; -} - -.algolia-autocomplete { - max-width: 9em; - > input { - color: var(--fg); - background-color: var(--bg); - } - > input::placeholder { - color: var(--fg); - } - #q { - display: initial; - border-radius: 8px; - border: 1px solid var(--border); - transition: color .3s ease; - padding-inline: 12px; - outline: none; - &:focus-visible, - &:focus { - border-color: var(--hover-border); - border-width: 2px; - } - } -} - - #navbar { - .ds-dropdown-menu .ds-dataset-1 { - background-color: var(--bg); - .ds-suggestions { - /* background-color: var(--bg); */ - color: var(--fg); - } - .ds-suggestion a { - background-color: var(--bg); - color: var(--fg); - } - .ds-suggestion a { - background-color: var(--bg); - color: var(--fg); - } - .algolia-docsearch-suggestion--category-header { - color: var(--fg); - } - .algolia-docsearch-suggestion--wrapper { - background-color: var(--bg); - .algolia-docsearch-suggestion--subcategory-column { - color: var(--menu-grey); - - } - .algolia-docsearch-suggestion--title, - .algolia-docsearch-suggestion--text { - color: var(--fg); - } - .algolia-docsearch-suggestion--highlight { - color: var(--link); - background-color: initial; - } - } - .algolia-docsearch-suggestion { - background-color: initial; - } - .algolia-docsearch-suggestion--content .algolia-docsearch-suggestion--no-results{ - background-color: initial; - } - - } - .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--title, - .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content { - background-color: var(--hover-bg); - } - } - - .content-404 { height: 70vh; padding: 153px 32px 7%; From 10819f4b58dbcb52ea1e6a5d40ad253cf1254637 Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 12:37:48 -0500 Subject: [PATCH 02/20] refactor: move navigation menu to new file --- _includes/head.html | 1 + css/menu.css | 360 ++++++++++++++++++++++++++++++++++++++++++++ css/style.css | 328 ---------------------------------------- 3 files changed, 361 insertions(+), 328 deletions(-) create mode 100644 css/menu.css diff --git a/_includes/head.html b/_includes/head.html index 9c48ab14b7..e19cccf2f2 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -10,6 +10,7 @@ + diff --git a/css/menu.css b/css/menu.css new file mode 100644 index 0000000000..9749a96af0 --- /dev/null +++ b/css/menu.css @@ -0,0 +1,360 @@ +/* ----------------- Menu Header --------------------- */ + +header { + position: fixed; + top: 0; + left: 0; + background: var(--card-bg); + width: 100%; + height: 57px; + display: flex; + align-items: center; + justify-content: space-between; + padding-inline: 25px; + z-index: 100; + border-bottom: 1px solid var(--hover-fg); +} + +.scroll header { + box-shadow: 0 0 4px var(--card-bg); +} + +.header-right { + display: flex; + align-items: center; + gap: 20px; +} + +@media all and (max-width: 1110px) { + header { + column-gap: 12px; + padding-inline: 32px; + } + + .header-right { + display: flex; + align-items: center; + gap: 8px; + margin-right: -10px; + } +} + +/* -------- Logo -------- */ + +#logo { + width: auto; + z-index: 1; +} + +#logo .express { + display: block; + font: 25px "Helvetica Neue", "Open Sans", sans-serif; + font-weight: 100; + color: var(--card-fg) +} + +@media all and (max-width: 1110px) { + #logo { + position: static; + width: 100%; + margin-left: 60px; + } + + #logo a { + display: table !important; + margin: 0 auto; + } + + #logo .express { + margin-top: 0px; + font-weight: bold; + } +} + +/* -------- Overlay -------- */ + +#overlay { + position: fixed; + left: 0; + top: 0; + opacity: 0.6; + width: 100%; + height: 100%; + display: none; + z-index: 1; + background-color: var(--bg); +} + +@media all and (max-width: 1110px) { + #overlay.blurs { + display: block; + } +} + +/* -------- Navigation Bar -------- */ + +#navbar { + line-height: 30px; + display: flex; + align-items: center; +} + +#navbar a { + color: var(--card-fg); +} + +#navbar a.active { + font-weight: bold; +} + +#navbar ul { + list-style: none; +} + +@media all and (max-width: 1110px) { + #navbar { + padding: 0; + top: 1px; + position: static; + } +} + +/* -------- Navigation Menu --------*/ + +#mobile-menu { + display: none; + position: relative; +} + +#navmenu { + padding: 0; + margin: 0; + right: 0px; + z-index: 1000; + margin-right: 15px; + display: flex; + gap: 20px; +} + +@media all and (max-width: 1110px) { + #navmenu { + left: 0; + padding: 0; + top: 57px; + width: 100%; + position: absolute; + display: none; + } + + #navmenu>li:first-child { + display: none; + } + + #navmenu>li { + border-bottom: 1px solid var(--border); + margin: 0; + min-height: 47px; + background: var(--card-bg); + cursor: pointer; + display: flex; + align-items: center; + } + + #navmenu>li.open:hover { + background: var(--card-bg); + } + + #navmenu>li:hover { + background: var(--hover-bg); + + & ul { + background-color: var(--card-bg); + } + } + + #navmenu.opens { + display: block; + } + + + #navbar a { + font-size: 19px; + margin: 0; + width: 100%; + height: 100%; + padding-left: 5%; + } + + #navbar .submenu.open { + flex-direction: column; + align-items: initial; + + > a { + border-bottom: 3px solid var(--border); + } + } + + #navbar .submenu-content li a { + font-size: 16px; + padding: 5px 5px 5px 5%; + padding-left: 10%; + } + + + #mobile-menu { + display: block; + } +} + +/* -------- Submenu --------*/ + +.submenu { + position: relative; + list-style: none; +} + +@media all and (max-width: 1110px) { + .submenu.open>a { + display: flex; + align-items: center; + min-height: 47px; + } +} + +/* ---- Submenu Content ---- */ + +.submenu-content { + position: absolute; + top: 100%; + left: 50%; + transform: translate(-50%); + margin: auto; + box-shadow: 1px 2px var(--hover-fg); + z-index: 1000; + min-width: max-content; + width: fit-content; + border: 1px solid var(--border); + border-radius: 12px; + background-color: var(--bg); + padding: 0; + display: none; +} + +.submenu-content li:first-child a { + border-radius: 12px 12px 0 0; +} + +.submenu-content li:last-child a { + border-radius: 0px 0px 12px 12px; +} + +.submenu.open .submenu-content { + display: initial; +} + +.submenu-content li a { + display: block; + padding: 2px 20px 2px 20px; +} + +#navbar .submenu-content a:hover { + background: var(--hover-bg); + text-decoration: none; +} + +@media all and (max-width: 1110px) { + .submenu-content { + width: 100%; + position: static; + display: none; + margin-top: 7px; + background-color: var(--card-bg); + padding: 0; + margin: 0; + border: none; + border-radius: 0; + box-shadow: none; + max-height: 190px; + overflow-y: auto; + overflow-x: hidden; + transform: none; + cursor: pointer; + } + + .submenu-content li>a { + width: 100%; + } + + .submenu-content li:first-child a { + border-radius: 0; + } + + .submenu-content li:last-child { + border-bottom: 0; + } + + .submenu-content li:last-child a { + border-radius: 0; + } + + .submenu-content.open { + display: inline-block; + } + + .submenu-content li { + border-bottom: 1px solid var(--border); + } +} + + +/* -------- i18n Button --------*/ + +#language-picker-menu { + display: none; +} + +@media all and (max-width: 1110px) { + #language-picker-menu #navmenu>li:first-child { + display: flex; + } + + #language-picker-menu #navmenu { + max-height: 70vh; + overflow-y: auto; + scrollbar-width: thin; + text-align: center; + } + + #language-picker-menu { + display: block; + position: absolute; + top: 0; + right: 0; + width: 100%; + z-index: 1000; + } +} + +/* -------- theme button --------*/ + +#theme-icon-container { + cursor: pointer; +} + +@media all and (max-width: 1110px) { + #theme-icon-container { + z-index: 10000; + } +} + +/* -------- Print --------*/ + +@media print { + header { + position: absolute; + } + + #mobile-menu { + display: none; + } +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 30a5d2073e..c3a84bf162 100644 --- a/css/style.css +++ b/css/style.css @@ -49,18 +49,6 @@ strong, th { color: var(--card-fg); } -#overlay { - position: fixed; - left: 0; - top: 0; - opacity: 0.6; - width: 100%; - height: 100%; - display: none; - z-index: 1; - background-color: var(--bg); -} - main.home { max-width: 75rem; margin: 40px auto 2%; @@ -230,20 +218,6 @@ a { z-index: -1; } -/* logo */ - -#logo { - width: auto; - z-index: 1; -} - -#logo .express { - display: block; - font: 25px "Helvetica Neue", "Open Sans", sans-serif; - font-weight: 100; - color: var(--card-fg) -} - #description .express { display: block; font: 4.5em "Helvetica Neue", "Open Sans", sans-serif; @@ -284,31 +258,6 @@ a { margin: 3px 0; } -.header-right { - display: flex; - align-items: center; - gap: 20px; -} - -header { - position: fixed; - top: 0; - left: 0; - background: var(--card-bg); - width: 100%; - height: 57px; - display: flex; - align-items: center; - justify-content: space-between; - padding-inline: 25px; - z-index: 100; - border-bottom: 1px solid var(--hover-fg); -} - -.scroll header { - box-shadow: 0 0 4px var(--card-bg); -} - /* code */ code { @@ -518,11 +467,6 @@ html[xmlns] .clearfix { color: var(--box-fg); } -#mobile-menu { - display: none; - position: relative; -} - pre, code { white-space: pre-wrap !important; } @@ -577,93 +521,6 @@ footer { font-size: 20px; } -/* navigation */ -#theme-icon-container { - cursor: pointer; -} - -#navbar { - line-height: 30px; - display: flex; - align-items: center; -} - -#navbar a { - color: var(--card-fg); -} - -#navbar a.active { - font-weight: bold; -} - -#navbar ul { - list-style: none; -} - -#navmenu { - display: flex; - gap: 20px; -} - - -/* dropdown menu */ - -.submenu { - position: relative; - list-style: none; -} - -.submenu-content { - position: absolute; - top: 100%; - left: 50%; - transform: translate(-50%); - margin: auto; - box-shadow: 1px 2px var(--hover-fg); - z-index: 1000; - min-width: max-content; - width: fit-content; - border: 1px solid var(--border); - border-radius: 12px; - background-color: var(--bg); - padding: 0; - display: none; -} - -.submenu-content li:first-child a { - border-radius: 12px 12px 0 0; -} - -.submenu-content li:last-child a { - border-radius: 0px 0px 12px 12px; -} - -.submenu.open .submenu-content { - display: initial; -} - -#navmenu { - padding: 0; - margin: 0; - right: 0px; - z-index: 1000; - margin-right: 15px; -} - -.submenu-content li a { - display: block; - padding: 2px 20px 2px 20px; -} - -#navbar .submenu-content a:hover { - background: var(--hover-bg); - text-decoration: none; -} - -#language-picker-menu { - display: none; -} - /* secondary menu */ #menu, @@ -860,32 +717,12 @@ h2 a { margin-right: 5%; } - #logo { - position: static; - width: 100%; - margin-left: 60px; - } - - #logo a { - display: table !important; - margin: 0 auto; - } - - #logo .express { - margin-top: 0px; - font-weight: bold; - } - #home-menu { display: block; position: absolute; top: 7px; } - #overlay.blurs{ - display: block; - } - .menu ul { display: block; } @@ -904,33 +741,6 @@ h2 a { #doc-langs { font-size: 11px; } - - .header-right { - display: flex; - align-items: center; - gap: 8px; - margin-right: -10px; - } - - #language-picker-menu #navmenu>li:first-child { - display: flex; - } - - #language-picker-menu #navmenu { - max-height: 70vh; - overflow-y: auto; - scrollbar-width: thin; - text-align: center; - } - - #language-picker-menu { - display: block; - position: absolute; - top: 0; - right: 0; - width: 100%; - z-index: 1000; - } } @@ -957,17 +767,6 @@ h2 a { } } -@media print { - - header { - position: absolute; - } - - #mobile-menu { - display:none; - } -} - /* For image callouts in writing-middleware.md */ .callout {position: relative;} @@ -1183,134 +982,7 @@ blockquote { } @media all and (max-width: 1110px) { - header { - column-gap: 12px; - padding-inline: 32px; - } - - #mobile-menu { - display: block; - } - .algolia-autocomplete { display: none !important; } - - #navbar { - padding: 0; - top: 1px; - position: static; - } - - #navmenu>li:first-child { - display: none; - } - - #navmenu>li { - border-bottom: 1px solid var(--border); - margin: 0; - min-height: 47px; - background: var(--card-bg); - cursor: pointer; - display: flex; - align-items: center; - } - - #navmenu>li.open:hover { - background: var(--card-bg); - } - #navmenu>li:hover { - background: var(--hover-bg); - & ul { - background-color: var(--card-bg); - } - } - - #navmenu { - left: 0; - padding: 0; - top: 57px; - width: 100%; - position: absolute; - display: none; - } - - #navmenu.opens { - display: block; - } - - #navbar a { - font-size: 19px; - margin: 0; - width: 100%; - height: 100%; - padding-left: 5%; - } - - #navbar .submenu.open { - flex-direction: column; - align-items: initial; - > a { - border-bottom: 1px solid var(--border); - } - } - - .submenu.open > a { - display: flex; - align-items: center; - min-height: 47px; - } - - .submenu-content { - width: 100%; - position: static; - display: none; - margin-top: 7px; - background-color: var(--card-bg); - padding: 0; - margin: 0; - border: none; - border-radius: 0; - box-shadow: none; - max-height: 190px; - overflow-y: auto; - overflow-x: hidden; - transform: none; - cursor: pointer; - } - - .submenu-content li > a { - width: 100%; - } - - .submenu-content li:first-child a { - border-radius: 0; - } - - .submenu-content li:last-child { - border-bottom: 0; - } - - .submenu-content li:last-child a { - border-radius: 0; - } - - .submenu-content.open { - display: inline-block; - } - - #navbar .submenu-content li a { - font-size: 16px; - padding: 5px 5px 5px 5%; - padding-left: 10%; - } - - .submenu-content li { - border-bottom: 1px solid var(--border); - } - - #theme-icon-container{ - z-index: 10000; - } - } From f09efda8ffdb189b6b1232a5916d819a687c4b71 Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 12:47:34 -0500 Subject: [PATCH 03/20] refactor: move blog styles to new file --- _includes/head.html | 1 + css/blog.css | 146 ++++++++++++++++++++++++++++++++++++++++ css/menu.css | 46 ++++++++++++- css/style.css | 157 +------------------------------------------- 4 files changed, 195 insertions(+), 155 deletions(-) create mode 100644 css/blog.css diff --git a/_includes/head.html b/_includes/head.html index e19cccf2f2..7a91aa6045 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -11,6 +11,7 @@ + diff --git a/css/blog.css b/css/blog.css new file mode 100644 index 0000000000..2d030995ea --- /dev/null +++ b/css/blog.css @@ -0,0 +1,146 @@ +#blog-doc { + margin: 0 10px; +} + +#blog-doc:has(> h1#express-blog), +#blog-doc:has(> h1#write-a-blog-post) { + min-height: 300px; +} + +#blog-doc .blog-details~p>img { + width: 200px; + float: right; +} + +#blog-doc p { + font-size: 1.1em; +} + +.blog-posts { + display: flex; + flex-direction: column; + row-gap: 10px; +} + +.blog-post { + width: 100%; + background-color: var(--card-bg); + display: flex; + padding: 10px; + flex-direction: column; + justify-content: space-between; + border-radius: 5px; + border: 1px solid var(--border); + box-shadow: 2px 3px var(--hover-fg); + transition: 0.3s; +} + +.blog-post:hover { + background-color: var(--hover-bg); + border: 1px solid var(--hover-border); + box-shadow: 2px 3px var(--menu-grey); +} + +.blog-post img { + max-width: 100%; + max-height: 100%; + object-fit: cover; +} + +.blog-post .blog-details { + display: flex; + flex-direction: column; +} + +.blog-details div:first-child { + margin-bottom: 5px; +} + +.blog-tag { + font-size: 12px; +} + +.blog-title { + font-size: 1.3rem; + line-height: 1.5rem; + font-weight: 500; + padding-right: .2em; +} + +.blog-title a { + color: var(--card-fg) +} + +.blog-excerpt { + font-size: .75rem; +} + +.blog-img { + max-width: 100%; + margin: auto; +} + +.blog-author { + font-style: italic; +} + +.blog-date { + font-weight: bold; + font-size: 85%; +} + + +@media (min-width: 768px) { + .blog-post { + margin: auto; + } + + .blog-tags { + margin-bottom: 20px; + } + + .blog-title { + font-size: 1.3rem; + margin-bottom: 20px; + line-height: 1.5rem; + } + + .blog-post .blog-details { + display: flex; + flex-direction: row; + margin-left: 1rem; + font-size: 90%; + } + + .blog-post .blog-details div:first-child { + margin-right: 20px; + } + + .blog-details { + font-size: 1rem; + } + + .blog-excerpt { + line-height: initial; + font-size: .85rem; + font-weight: 300; + margin-top: auto; + margin-bottom: 10px; + max-width: 80%; + } +} + +@media (max-width: 500px) { + #blog-doc { + display: flex; + flex-wrap: wrap; + flex-direction: column; + align-items: center; + margin-right: 0; + padding-right: 10px; + } + + #blog-doc .blog-details+p>img { + margin-bottom: 15px; + } +} \ No newline at end of file diff --git a/css/menu.css b/css/menu.css index 9749a96af0..b520c5d905 100644 --- a/css/menu.css +++ b/css/menu.css @@ -189,7 +189,7 @@ header { flex-direction: column; align-items: initial; - > a { + >a { border-bottom: 3px solid var(--border); } } @@ -357,4 +357,48 @@ header { #mobile-menu { display: none; } +} + +/* ----------------- Blog --------------------- */ + +#blog-side-menu-container { + position: fixed; + margin: 0; + padding: 0 10px 0 0; + top: 153px; + left: 30px; + height: 500px; + text-align: left; + font-size: 13px; + overflow-y: auto; +} + +#blog-side-menu-container { + max-width: 210px; +} + +#blog-side-menu-container li { + max-width: 100%; + margin-bottom: 5px; +} + +#blog-side-menu-container>h3>a { + color: var(--fg) +} + +#blog-side-menu { + list-style: none; + padding: 0; +} + +#blog-side-menu>li>a { + color: var(--menu-grey); + font-weight: bold; + font-size: 13px; +} + +@media all and (max-width: 1110px) { + #blog-side-menu-container { + display: none; + } } \ No newline at end of file diff --git a/css/style.css b/css/style.css index c3a84bf162..e93a2b11ea 100644 --- a/css/style.css +++ b/css/style.css @@ -523,8 +523,7 @@ footer { /* secondary menu */ -#menu, -#blog-side-menu-container { +#menu { position: fixed; margin: 0; padding: 0 10px 0 0; @@ -536,24 +535,6 @@ footer { overflow-y: auto; } -#blog-side-menu-container { - max-width: 210px; -} - -#blog-side-menu-container li { - max-width: 100%; - margin-bottom: 5px; -} - -#blog-side-menu-container > h3 > a { - color: var(--fg) -} - -#blog-side-menu { - list-style: none; - padding: 0; -} - #menu ul a.active { color: var(--fg) } @@ -579,8 +560,7 @@ color: var(--fg) #menu a { color: var(--menu-grey);} -#menu > li > a, -#blog-side-menu > li > a { +#menu > li > a { color: var(--menu-grey); font-weight: bold; font-size: 13px; @@ -684,8 +664,7 @@ h2 a { font-weight: normal; } - #menu, - #blog-side-menu-container { + #menu { display: none; } @@ -821,136 +800,6 @@ h2 a { margin-left: -20px; } -/* Blog page styles*/ -#blog-doc { - margin: 0 10px; -} -#blog-doc:has(> h1#express-blog), -#blog-doc:has(> h1#write-a-blog-post) { - min-height: 300px; -} -#blog-doc .blog-details ~ p > img { - width: 200px; - float: right; -} -#blog-doc p { - font-size: 1.1em; -} -.blog-posts { - display: flex; - flex-direction: column; - row-gap: 10px; -} -.blog-post { - width: 100%; - background-color: var(--card-bg); - display: flex; - padding: 10px; - flex-direction: column; - justify-content: space-between; - border-radius: 5px; - border: 1px solid var(--border); - box-shadow: 2px 3px var(--hover-fg); - transition: 0.3s; -} -.blog-post:hover { - background-color: var(--hover-bg); - border: 1px solid var(--hover-border); - box-shadow: 2px 3px var(--menu-grey); -} -.blog-post img { - max-width: 100%; - max-height: 100%; - object-fit: cover; -} -.blog-post .blog-details { - display: flex; - flex-direction: column; -} -.blog-details div:first-child { - margin-bottom: 5px; -} -.blog-tag { - font-size: 12px; -} -.blog-title { - font-size: 1.3rem; - line-height: 1.5rem; - font-weight: 500; - padding-right: .2em; -} -.blog-title a { - color: var(--card-fg) -} -.blog-excerpt { - font-size: .75rem; -} -.blog-img { - max-width: 100%; - margin: auto; -} -.blog-author { - font-style: italic; -} -.blog-date { - font-weight: bold; - font-size: 85%; -} -/* mobile-only */ -@media (max-width: 500px) { - #blog-doc { - display: flex; - flex-wrap: wrap; - flex-direction: column; - align-items: center; - margin-right: 0; - padding-right: 10px; - } - - - - #blog-doc .blog-details + p > img { - margin-bottom: 15px; - } -} - - - -/* blog tablet and up*/ -@media (min-width: 768px) { - .blog-post { - margin: auto; - } - .blog-tags { - margin-bottom: 20px; - } - .blog-title { - font-size: 1.3rem; - margin-bottom: 20px; - line-height: 1.5rem; - } - .blog-post .blog-details { - display: flex; - flex-direction: row; - margin-left: 1rem; - font-size: 90%; - } - .blog-post .blog-details div:first-child { - margin-right: 20px; - } - .blog-details { - font-size: 1rem; - } - .blog-excerpt { - line-height: initial; - font-size: .85rem; - font-weight: 300; - margin-top: auto; - margin-bottom: 10px; - max-width: 80%; - } -} - strong.supported { color: var(--supported-fg) ; } From 27b88e6c01488d7d78531e14a3415e033699275a Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 12:52:18 -0500 Subject: [PATCH 04/20] refactor: rename style.css to general.css --- _includes/head.html | 2 +- css/{style.css => general.css} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename css/{style.css => general.css} (100%) diff --git a/_includes/head.html b/_includes/head.html index 7a91aa6045..550164c717 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -7,7 +7,7 @@ - + diff --git a/css/style.css b/css/general.css similarity index 100% rename from css/style.css rename to css/general.css From 90ec0c1bf61ca8ea3a2fb05b3f61a569061f84e0 Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 13:12:16 -0500 Subject: [PATCH 05/20] refactor: move home style to new file --- _includes/head.html | 1 + css/general.css | 198 +---------------------------------------- css/pages/home.css | 209 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 211 insertions(+), 197 deletions(-) create mode 100644 css/pages/home.css diff --git a/_includes/head.html b/_includes/head.html index 550164c717..7b58a5ced6 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -12,6 +12,7 @@ + diff --git a/css/general.css b/css/general.css index e93a2b11ea..696d6a9bb1 100644 --- a/css/general.css +++ b/css/general.css @@ -20,7 +20,7 @@ h1 { line-height: 36px; } -#intro h3, #api-doc h1 { +#api-doc h1 { font-weight: normal; } @@ -55,78 +55,6 @@ main.home { padding-inline: 5%; } -#home-content { - display: flex; -} - -.en-doc #home-content { - margin-top: 150px; -} - -#homepage-leftpane { - min-width: 500px; - margin-right: 30px; - font-size: 90%; - padding-top: 13px; -} - -#homepage-rightpane { - min-width: 500px; - padding: 25px 30px 0px 0px; -} - -#homepage-rightpane iframe { - min-width: 100%; - min-height: 273px; -} - -#announcements { - margin-top: 40px; - padding: 0 16px; - background: var(--notice-bg); - border: 1px solid var(--notice-accent); - border-radius: 3px; - font-size: 0.9em; - & a { - color: var(--notice-accent); - text-decoration: underline; - } -} - -#announcements ul { - padding-left: 0; -} - -#announcements li { - list-style: none; - margin-bottom: 16px; -} - -#announcements p { - margin: 6px 0; -} - -#announcements time { - font-weight: normal; - margin-right: 12px; -} - -.announcement-title { - font-weight: bold; - margin-bottom: 11px; - display: flex; - align-items: center; - column-gap: 8px -} - -#install-command { - font-family: Consolas, Monaco, "Andale Mono", monospace; - padding: 5px 10px; - border: 1px solid var(--border); - border-radius: 3px; - max-width: 375px; -} - .content { margin: 153px 3% 7%; max-width: 1090px; @@ -137,11 +65,6 @@ span.block-section { display: block; } -#intro h3 { - font-size: 25px; - margin-bottom: 10px; -} - #api-doc section { padding-left: 20px; } @@ -218,37 +141,6 @@ a { z-index: -1; } -#description .express { - display: block; - font: 4.5em "Helvetica Neue", "Open Sans", sans-serif; - font-weight: 100; - margin-bottom: .25em; -} - -#description .express > a { - color: var(--card-fg); -} - -#description .express a#express-version { - font-size: 0.2em; - margin-left: 0.5em; - color: var(--link); - font-weight: 400; -} - -#description { - margin-bottom: 43px; - -webkit-font-smoothing: antialiased; -} - -#description .description { - position: relative; - top: -5px; - font: 100 4.1em "Helvetica Neue", "Open Sans", sans-serif; - color: var(--menu-grey); - line-height: .87; -} - #doc-langs { text-align: center; font-size: 12px; @@ -330,27 +222,7 @@ html[xmlns] .clearfix { height: 1%; } -/* boxes */ - -#boxes { - display: grid; - grid-template-columns: repeat(4, 1fr); - row-gap: 20px; - column-gap: 50px; - margin-top: 30px; -} - -#boxes h3 { - line-height: 1.25em; - color: var(--card-fg); - background: none; - margin-top: 0; - padding-top: 0; -} -#boxes div { - list-style: none; -} /* doc specific */ @@ -599,32 +471,6 @@ h2 a { /* responsive */ @media all and (max-width: 1110px) { - #boxes { - grid-template-columns: 1fr 1fr; - } - - #home-content { - flex-direction: column; - } - - #install-command { - display: none; - } - - #home-content .pane { - min-width: auto; - font-size: 74%; - } - - #homepage-leftpane { - padding-top: 0px; - } - - #homepage-rightpane { - padding-top: 0; - padding-right: 0; - } - .table-scroller { width: 100%; overflow: scroll; @@ -672,30 +518,6 @@ h2 a { padding-left: 0; } - #home-content { - margin: 60px 0 0 5%; - padding-right: 5%; - } - - #description { - margin-bottom: 35px; - } - - #description .express { - display: none; - } - - #description .description { - font-size: 3em; - line-height: .9em; - font-weight: 200; - } - - #install-command { - width: 100%; - margin-right: 5%; - } - #home-menu { display: block; position: absolute; @@ -722,28 +544,10 @@ h2 a { } } - -@media all and (max-width: 540px) { - #boxes { - grid-template-columns: 1fr; - } -} - @media all and (max-width: 420px) { #app-settings-property { width: auto; } - - #description .express { - display: none; - } -} - -@media all and (max-width: 320px) { - - #install-command { - font-size: 12px; - } } /* For image callouts in writing-middleware.md */ diff --git a/css/pages/home.css b/css/pages/home.css new file mode 100644 index 0000000000..c7bfba0509 --- /dev/null +++ b/css/pages/home.css @@ -0,0 +1,209 @@ +/* ---- Home Structure ---- */ + +#home-content { + display: flex; +} + +.en-doc #home-content { + margin-top: 150px; +} + +#homepage-leftpane { + min-width: 500px; + margin-right: 30px; + font-size: 90%; + padding-top: 13px; +} + +#homepage-rightpane { + min-width: 500px; + padding: 25px 30px 0px 0px; +} + +#homepage-rightpane iframe { + min-width: 100%; + min-height: 273px; +} + +#intro h3 { + font-weight: normal; + font-size: 25px; + margin-bottom: 10px; +} + +@media all and (max-width: 1110px) { + #home-content { + flex-direction: column; + margin: 60px 0 0 5%; + padding-right: 5%; + } + + #home-content .pane { + min-width: auto; + font-size: 74%; + } + + #homepage-leftpane { + padding-top: 0px; + } + + #homepage-rightpane { + padding-top: 0; + padding-right: 0; + } +} + +/* ---- Install Command ---- */ + +#install-command { + font-family: Consolas, Monaco, "Andale Mono", monospace; + padding: 5px 10px; + border: 1px solid var(--border); + border-radius: 3px; + max-width: 375px; +} + +@media all and (max-width: 1110px) { + #install-command { + display: none; + width: 100%; + margin-right: 5%; + } +} + +@media all and (max-width: 320px) { + + #install-command { + font-size: 12px; + } +} + +/* ---- Description ---- */ + +#description .express { + display: block; + font: 4.5em "Helvetica Neue", "Open Sans", sans-serif; + font-weight: 100; + margin-bottom: .25em; +} + +#description .express>a { + color: var(--card-fg); +} + +#description .express a#express-version { + font-size: 0.2em; + margin-left: 0.5em; + color: var(--link); + font-weight: 400; +} + +#description { + margin-bottom: 43px; + -webkit-font-smoothing: antialiased; +} + +#description .description { + position: relative; + top: -5px; + font: 100 4.1em "Helvetica Neue", "Open Sans", sans-serif; + color: var(--menu-grey); + line-height: .87; +} + +@media all and (max-width: 1110px) { + #description { + margin-bottom: 35px; + } + + #description .express { + display: none; + } + + #description .description { + font-size: 3em; + line-height: .9em; + font-weight: 200; + } +} + +@media all and (max-width: 420px) { + #description .express { + display: none; + } +} + +/* ---- Announcements ---- */ + +#announcements { + margin-top: 40px; + padding: 0 16px; + background: var(--notice-bg); + border: 1px solid var(--notice-accent); + border-radius: 3px; + font-size: 0.9em; + & a { + color: var(--notice-accent); + text-decoration: underline; + } +} + +#announcements ul { + padding-left: 0; +} + +#announcements li { + list-style: none; + margin-bottom: 16px; +} + +#announcements p { + margin: 6px 0; +} + +#announcements time { + font-weight: normal; + margin-right: 12px; +} + +.announcement-title { + font-weight: bold; + margin-bottom: 11px; + display: flex; + align-items: center; + column-gap: 8px +} + +/* ---- Boxes ---- */ + +#boxes { + display: grid; + grid-template-columns: repeat(4, 1fr); + row-gap: 20px; + column-gap: 50px; + margin-top: 30px; +} + +#boxes h3 { + line-height: 1.25em; + color: var(--card-fg); + background: none; + margin-top: 0; + padding-top: 0; +} + +#boxes div { + list-style: none; +} + +@media all and (max-width: 1110px) { + #boxes { + grid-template-columns: 1fr 1fr; + } +} + +@media all and (max-width: 540px) { + #boxes { + grid-template-columns: 1fr; + } +} From ff97ad6910f4651aab327e3173388da87af28fce Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 13:17:52 -0500 Subject: [PATCH 06/20] refactor: move footer styles to new file --- _includes/head.html | 1 + css/footer.css | 62 +++++++++++++++++++++++++++++++++++++++++++++ css/general.css | 61 -------------------------------------------- 3 files changed, 63 insertions(+), 61 deletions(-) create mode 100644 css/footer.css diff --git a/_includes/head.html b/_includes/head.html index 7b58a5ced6..f9e8eb95a7 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -12,6 +12,7 @@ + diff --git a/css/footer.css b/css/footer.css new file mode 100644 index 0000000000..93265fae3e --- /dev/null +++ b/css/footer.css @@ -0,0 +1,62 @@ +footer { + font-size: 12px; + margin: 60px 5% 30px; + display: flex; + gap: 24px; + flex-direction: column; +} + +#footer-content { + width: 100%; + justify-content: space-between; + gap: 32px; + display: flex; +} + +#footer-copyright { + display: flex; + flex-direction: column; + justify-content: center; + gap: 20px; +} + +#footer-copyright a { + width: fit-content; +} + +#footer-copyright img { + max-width: 125px; +} + +#footer-policy { + display: flex; + flex-wrap: wrap; + column-gap: 20px; + row-gap: 8px; + justify-content: center; + font-size: 15px; +} + +#footer-links { + display: flex; + gap: 20px; +} + +.footer-social { + display: flex; + gap: 20px; + font-size: 20px; +} + +@media all and (max-width: 1110px) { + #footer-content { + flex-wrap: wrap; + justify-content: center; + } + + #footer-copyright>a { + width: 100%; + display: flex; + justify-content: center; + } +} \ No newline at end of file diff --git a/css/general.css b/css/general.css index 696d6a9bb1..c5003e53bc 100644 --- a/css/general.css +++ b/css/general.css @@ -343,56 +343,6 @@ pre, code { white-space: pre-wrap !important; } -footer { - font-size: 12px; - margin: 60px 5% 30px; - display: flex; - gap: 24px; - flex-direction: column; -} - -#footer-content { - width: 100%; - justify-content: space-between; - gap: 32px; - display: flex; -} - -#footer-copyright { - display: flex; - flex-direction: column; - justify-content: center; - gap: 20px; -} - -#footer-copyright a { - width: fit-content; -} - -#footer-copyright img { - max-width: 125px; -} - -#footer-policy{ - display: flex; - flex-wrap: wrap; - column-gap: 20px; - row-gap: 8px; - justify-content: center; - font-size: 15px; -} - -#footer-links{ - display: flex; - gap: 20px; -} - -.footer-social { - display: flex; - gap: 20px; - font-size: 20px; -} - /* secondary menu */ #menu { @@ -528,17 +478,6 @@ h2 a { display: block; } - #footer-content { - flex-wrap: wrap; - justify-content: center; - } - - #footer-copyright > a { - width: 100%; - display: flex; - justify-content: center; - } - #doc-langs { font-size: 11px; } From a5ff94219470985df306f74ed294d774ec0b0f83 Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 13:25:59 -0500 Subject: [PATCH 07/20] refactor: move api styles to new file --- _includes/head.html | 1 + css/general.css | 46 ++------------------------------------- css/pages/api.css | 53 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 56 insertions(+), 44 deletions(-) create mode 100644 css/pages/api.css diff --git a/_includes/head.html b/_includes/head.html index f9e8eb95a7..661a57f585 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -14,6 +14,7 @@ + diff --git a/css/general.css b/css/general.css index c5003e53bc..9e3bf39bb1 100644 --- a/css/general.css +++ b/css/general.css @@ -20,9 +20,7 @@ h1 { line-height: 36px; } -#api-doc h1 { - font-weight: normal; -} + h1, h2, h3 { margin: 5px 0; @@ -65,42 +63,6 @@ span.block-section { display: block; } -#api-doc section { - padding-left: 20px; -} - -#api-doc > h3 { - padding-top: 10px; - padding-bottom: 5px; - font-weight: bold; - font-size: 24px; - color: var(--menu-grey) -} - -#api-doc h2 { - font-weight: bold; - font-size: 29px; - margin: 40px 0 20px; -} - -#api-doc section h3 { - padding-top: 10px; - padding-bottom: 5px; - font-weight: bold; - font-size: 18px; -} - -#api-doc h4 { - font-size: 16px; - font-weight: bold; -} - -#api-doc h5 { - font-size: 14px; - font-weight: bold; - color: var(--menu-grey) -} - /* scroll */ *::-webkit-scrollbar { @@ -135,7 +97,7 @@ a { padding-top: 40px; } -#api-doc *:target, #page-doc *:target { +#page-doc *:target { margin-top: -120px; padding-top: 120px; z-index: -1; @@ -426,10 +388,6 @@ h2 a { overflow: scroll; } - #api-doc section { - padding-left: 0; - } - code { word-break: break-all; } diff --git a/css/pages/api.css b/css/pages/api.css new file mode 100644 index 0000000000..8d08533e0c --- /dev/null +++ b/css/pages/api.css @@ -0,0 +1,53 @@ +#api-doc *:target { + margin-top: -120px; + padding-top: 120px; + z-index: -1; +} + +#api-doc section { + padding-left: 20px; +} + +@media all and (max-width: 1110px) { + #api-doc section { + padding-left: 0; + } +} + +/* ---- Titles ---- */ + +#api-doc h1 { + font-weight: normal; +} + +#api-doc>h3 { + padding-top: 10px; + padding-bottom: 5px; + font-weight: bold; + font-size: 24px; + color: var(--menu-grey) +} + +#api-doc h2 { + font-weight: bold; + font-size: 29px; + margin: 40px 0 20px; +} + +#api-doc section h3 { + padding-top: 10px; + padding-bottom: 5px; + font-weight: bold; + font-size: 18px; +} + +#api-doc h4 { + font-size: 16px; + font-weight: bold; +} + +#api-doc h5 { + font-size: 14px; + font-weight: bold; + color: var(--menu-grey) +} \ No newline at end of file From c78273541a16b060e822ecf813dc4c98ebf515b0 Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 13:41:33 -0500 Subject: [PATCH 08/20] refactor: move side menu styles to menu.css --- css/general.css | 56 --------------------------------------------- css/menu.css | 61 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 61 insertions(+), 56 deletions(-) diff --git a/css/general.css b/css/general.css index 9e3bf39bb1..70d4ad5982 100644 --- a/css/general.css +++ b/css/general.css @@ -305,54 +305,6 @@ pre, code { white-space: pre-wrap !important; } -/* secondary menu */ - -#menu { - position: fixed; - margin: 0; - padding: 0 10px 0 0; - top: 153px; - left: 30px; - height: 500px; - text-align: left; - font-size: 13px; - overflow-y: auto; -} - -#menu ul a.active { -color: var(--fg) -} - -#menu em { - font-weight: bold; - color: var(--card-fg); -} - -#menu li { - list-style: none; -} - -#menu ul { - height: 0; - overflow: hidden; -} - -#menu ul.active { - height: auto; - padding: 0; -} -#menu a { - color: var(--menu-grey);} - -#menu > li > a { - color: var(--menu-grey); - font-weight: bold; - font-size: 13px; -} - -#menu ul a { - padding-right: 7px; -} /* can't find this in proj*/ h2 a { @@ -418,10 +370,6 @@ h2 a { font-weight: normal; } - #menu { - display: none; - } - .content { padding-left: 0; } @@ -432,10 +380,6 @@ h2 a { top: 7px; } - .menu ul { - display: block; - } - #doc-langs { font-size: 11px; } diff --git a/css/menu.css b/css/menu.css index b520c5d905..9e47c447f8 100644 --- a/css/menu.css +++ b/css/menu.css @@ -401,4 +401,65 @@ header { #blog-side-menu-container { display: none; } +} + +/* ----------------- Side Menu --------------------- */ + +#menu { + position: fixed; + margin: 0; + padding: 0 10px 0 0; + top: 153px; + left: 30px; + height: 500px; + text-align: left; + font-size: 13px; + overflow-y: auto; +} + +#menu ul a.active { + color: var(--fg) +} + +#menu em { + font-weight: bold; + color: var(--card-fg); +} + +#menu li { + list-style: none; +} + +#menu ul { + height: 0; + overflow: hidden; +} + +#menu ul.active { + height: auto; + padding: 0; +} + +#menu a { + color: var(--menu-grey); +} + +#menu>li>a { + color: var(--menu-grey); + font-weight: bold; + font-size: 13px; +} + +#menu ul a { + padding-right: 7px; +} + +@media all and (max-width: 1110px) { + #menu { + display: none; + } + + .menu ul { + display: block; + } } \ No newline at end of file From a0b2371dc52069c1bc6a81880434f1e43d209f9f Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 13:44:33 -0500 Subject: [PATCH 09/20] refactor: move middleware styles to new file --- _includes/head.html | 1 + css/general.css | 54 ------------------------------------ css/pages/middleware.css | 59 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 60 insertions(+), 54 deletions(-) create mode 100644 css/pages/middleware.css diff --git a/_includes/head.html b/_includes/head.html index 661a57f585..ea8d73061e 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -15,6 +15,7 @@ + diff --git a/css/general.css b/css/general.css index 70d4ad5982..068391dfa2 100644 --- a/css/general.css +++ b/css/general.css @@ -391,60 +391,6 @@ h2 a { } } -/* For image callouts in writing-middleware.md */ - -.callout {position: relative;} - -#mw-fig { - border-collapse: separate; - padding: 0; - border: 0; - width: 960px; - margin-bottom: 20px;} -#mw-fig-imgcell { - margin: 0; - padding: 0px; - border: 0; - width: 410px; -} -#mw-fig-img { - margin: 0px; - padding: 0px; - width: 410px; - height: 308px; -} - -.mw-fig-callouts { - margin: 0; - padding: 0 0 0 5px; - border: 0; - width: 550px; -} - -/* For middleware pages */ - -#mw-container { - display: flex; - display: -webkit-flex; /* Safari */ - width: 100%; -} - -#mw-list { - min-width: 180px; - margin: 0; - padding: 0 10px 0 10px; - font-size: 13px; - overflow-y: auto; - } - -#middleware-content { - margin-left: 10px; -} - -#mw-list ul li { - margin-left: -20px; -} - strong.supported { color: var(--supported-fg) ; } diff --git a/css/pages/middleware.css b/css/pages/middleware.css new file mode 100644 index 0000000000..781021d608 --- /dev/null +++ b/css/pages/middleware.css @@ -0,0 +1,59 @@ +/* -------- writing-middleware.md -------- */ + +.callout { + position: relative; +} + +#mw-fig { + border-collapse: separate; + padding: 0; + border: 0; + width: 960px; + margin-bottom: 20px; +} + +#mw-fig-imgcell { + margin: 0; + padding: 0px; + border: 0; + width: 410px; +} + +#mw-fig-img { + margin: 0px; + padding: 0px; + width: 410px; + height: 308px; +} + +.mw-fig-callouts { + margin: 0; + padding: 0 0 0 5px; + border: 0; + width: 550px; +} + +/* -------- middleware pages --------*/ + +#mw-container { + display: flex; + display: -webkit-flex; + /* Safari */ + width: 100%; +} + +#mw-list { + min-width: 180px; + margin: 0; + padding: 0 10px 0 10px; + font-size: 13px; + overflow-y: auto; +} + +#middleware-content { + margin-left: 10px; +} + +#mw-list ul li { + margin-left: -20px; +} \ No newline at end of file From bb3d83e6bebdb2d954fb3920e5e5cf0c97b69dc7 Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 13:46:22 -0500 Subject: [PATCH 10/20] refactor: move special api styles to api.css --- css/general.css | 10 ---------- css/pages/api.css | 12 ++++++++++++ 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/css/general.css b/css/general.css index 068391dfa2..c7c9916847 100644 --- a/css/general.css +++ b/css/general.css @@ -289,10 +289,6 @@ html[xmlns] .clearfix { /* general */ -#app-settings-property { - width: 200px; -} - .button { display: block; padding: 3px 5px; @@ -385,12 +381,6 @@ h2 a { } } -@media all and (max-width: 420px) { - #app-settings-property { - width: auto; - } -} - strong.supported { color: var(--supported-fg) ; } diff --git a/css/pages/api.css b/css/pages/api.css index 8d08533e0c..42f50cf071 100644 --- a/css/pages/api.css +++ b/css/pages/api.css @@ -50,4 +50,16 @@ font-size: 14px; font-weight: bold; color: var(--menu-grey) +} + +/* ---- Special Styles ---- */ + +#app-settings-property { + width: 200px; +} + +@media all and (max-width: 420px) { + #app-settings-property { + width: auto; + } } \ No newline at end of file From 85306c2eb4e307884f20b8414008b4e6af37869b Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 13:49:03 -0500 Subject: [PATCH 11/20] refactor: move resposive styles of search to search.css --- css/general.css | 20 -------------------- css/search.css | 19 +++++++++++++++++++ 2 files changed, 19 insertions(+), 20 deletions(-) diff --git a/css/general.css b/css/general.css index c7c9916847..ac06003d02 100644 --- a/css/general.css +++ b/css/general.css @@ -320,14 +320,6 @@ h2 a { font-size: 16px; } -/* search-bar desktop re-sizing */ -@media all and (min-width: 950px) { - .algolia-autocomplete { - margin-right:15px; - max-width: 12em; - } -} - /* responsive */ @media all and (max-width: 1110px) { @@ -370,12 +362,6 @@ h2 a { padding-left: 0; } - #home-menu { - display: block; - position: absolute; - top: 7px; - } - #doc-langs { font-size: 11px; } @@ -410,9 +396,3 @@ blockquote { padding-left: 1.2em; border-left: .25rem solid var(--border); } - -@media all and (max-width: 1110px) { - .algolia-autocomplete { - display: none !important; - } -} diff --git a/css/search.css b/css/search.css index 8579f20f70..71707054b0 100644 --- a/css/search.css +++ b/css/search.css @@ -89,4 +89,23 @@ .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content { background-color: var(--hover-bg); } +} + +@media all and (max-width: 1110px) { + #home-menu { + display: block; + position: absolute; + top: 7px; + } + + .algolia-autocomplete { + display: none !important; + } +} + +@media all and (min-width: 950px) { + .algolia-autocomplete { + margin-right:15px; + max-width: 12em; + } } \ No newline at end of file From ba2fe7d897bc840815a9c7808687cc29a34de35b Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 13:51:55 -0500 Subject: [PATCH 12/20] refactor: move i18n section footer to footer.css --- css/footer.css | 17 +++++++++++++++++ css/general.css | 13 ------------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/css/footer.css b/css/footer.css index 93265fae3e..9f5012d335 100644 --- a/css/footer.css +++ b/css/footer.css @@ -59,4 +59,21 @@ footer { display: flex; justify-content: center; } +} + +/* ---- i18n footer section ---- */ + +#doc-langs { + text-align: center; + font-size: 12px; +} + +#doc-langs p { + margin: 3px 0; +} + +@media all and (max-width: 1110px) { + #doc-langs { + font-size: 11px; + } } \ No newline at end of file diff --git a/css/general.css b/css/general.css index ac06003d02..eefbf4bbf8 100644 --- a/css/general.css +++ b/css/general.css @@ -103,15 +103,6 @@ a { z-index: -1; } -#doc-langs { - text-align: center; - font-size: 12px; -} - -#doc-langs p { - margin: 3px 0; -} - /* code */ code { @@ -361,10 +352,6 @@ h2 a { .content { padding-left: 0; } - - #doc-langs { - font-size: 11px; - } } strong.supported { From 615d6ce26f9736bf74fe78b054622a5e5b97191b Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 13:56:54 -0500 Subject: [PATCH 13/20] refactor: move home style to home.css --- css/general.css | 6 ------ css/pages/home.css | 6 ++++++ 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/css/general.css b/css/general.css index eefbf4bbf8..41788ebe8b 100644 --- a/css/general.css +++ b/css/general.css @@ -47,12 +47,6 @@ strong, th { color: var(--card-fg); } -main.home { - max-width: 75rem; - margin: 40px auto 2%; - padding-inline: 5%; -} - .content { margin: 153px 3% 7%; max-width: 1090px; diff --git a/css/pages/home.css b/css/pages/home.css index c7bfba0509..f884a3e950 100644 --- a/css/pages/home.css +++ b/css/pages/home.css @@ -1,5 +1,11 @@ /* ---- Home Structure ---- */ +main.home { + max-width: 75rem; + margin: 40px auto 2%; + padding-inline: 5%; +} + #home-content { display: flex; } From 855be692ced205c8812fcf41f97edebccb297d0b Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 14:00:04 -0500 Subject: [PATCH 14/20] refactor: move logo table styles to community.css and strong styles to support.css --- css/general.css | 18 ------------------ css/pages/community.css | 10 ++++++++++ css/pages/support.css | 7 +++++++ 3 files changed, 17 insertions(+), 18 deletions(-) create mode 100644 css/pages/community.css create mode 100644 css/pages/support.css diff --git a/css/general.css b/css/general.css index 41788ebe8b..70e3075cf6 100644 --- a/css/general.css +++ b/css/general.css @@ -348,24 +348,6 @@ h2 a { } } -strong.supported { - color: var(--supported-fg) ; -} -strong.eol { - color: var(--eol-fg) ; -} - -.logo-table { - display: flex; - flex-wrap: wrap; - row-gap: 8px; - column-gap: 48px; -} - -.logo-table h3{ - margin-bottom: 12px; -} - .hidden-dark { display: block; } diff --git a/css/pages/community.css b/css/pages/community.css new file mode 100644 index 0000000000..7f563b0e88 --- /dev/null +++ b/css/pages/community.css @@ -0,0 +1,10 @@ +.logo-table { + display: flex; + flex-wrap: wrap; + row-gap: 8px; + column-gap: 48px; +} + +.logo-table h3{ + margin-bottom: 12px; +} \ No newline at end of file diff --git a/css/pages/support.css b/css/pages/support.css new file mode 100644 index 0000000000..626fac4c75 --- /dev/null +++ b/css/pages/support.css @@ -0,0 +1,7 @@ +strong.supported { + color: var(--supported-fg); +} + +strong.eol { + color: var(--eol-fg); +} \ No newline at end of file From 1652bed90721cb7860aa3681540cb20d56a7e38b Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 14:28:49 -0500 Subject: [PATCH 15/20] refactor: reorganize general.css for improved structure --- css/general.css | 219 ++++++++++++++++++++------------------ css/themes/dark-theme.css | 4 + 2 files changed, 119 insertions(+), 104 deletions(-) diff --git a/css/general.css b/css/general.css index 70e3075cf6..97de5e6ff7 100644 --- a/css/general.css +++ b/css/general.css @@ -11,24 +11,51 @@ body { color: var(--fg); } -body.no-scroll{ +body.no-scroll { overflow: hidden; } +/* ---- Content ---- */ + +.content { + margin: 153px 3% 7%; + max-width: 1090px; + padding-left: 225px; +} + +#page-doc *:target { + margin-top: -120px; + padding-top: 120px; + z-index: -1; +} + +@media all and (max-width: 1110px) { + .content { + padding-left: 0; + } +} + +/* ---- Paragraph ---- */ + h1 { font-size: 30px; line-height: 36px; } - - -h1, h2, h3 { +h1, +h2, +h3 { margin: 5px 0; color: var(--card-fg); -webkit-font-smoothing: antialiased; } +.h2:target { + display: block; + padding-top: 40px; +} + .content h1 { margin-bottom: 20px; } @@ -43,21 +70,32 @@ p { line-height: 1.35em; } -strong, th { - color: var(--card-fg); -} -.content { - margin: 153px 3% 7%; - max-width: 1090px; - padding-left: 225px; -} +@media all and (max-width: 1110px) { + h1 { + font-size: 22px; + line-height: 26px; + } -span.block-section { - display: block; + h2 { + font-size: 18px; + line-height: 25px; + } + + h3 { + font-size: 16px; + line-height: 23px; + word-break: break-all; + } + + h4 { + font-size: 16px; + line-height: 18px; + font-weight: normal; + } } -/* scroll */ +/* ---- scroll ---- */ *::-webkit-scrollbar { background-color: opacity(var(--box-fg), 0.145); @@ -79,25 +117,14 @@ span.block-section { background-color: var(--menu-grey); } -/* links */ +/* ---- links ---- */ a { color: var(--link); text-decoration: none; } -.h2:target { - display: block; - padding-top: 40px; -} - -#page-doc *:target { - margin-top: -120px; - padding-top: 120px; - z-index: -1; -} - -/* code */ +/* ---- code ---- */ code { background-color: var(--code-bg); @@ -119,7 +146,18 @@ pre code { padding: 0; } -/* top button */ +pre, +code { + white-space: pre-wrap !important; +} + +@media all and (max-width: 1110px) { + code { + word-break: break-all; + } +} + +/* ---- top button ---- */ .scroll #top { opacity: .5; @@ -140,13 +178,13 @@ pre code { text-decoration: none; opacity: 0; transition: opacity 300ms; - border: 1px solid var(--border); + border: 1px solid var(--border); background-color: var(--card-bg); color: var(--card-fg); display: none; } -/* clearfix */ +/* ---- clearfix ---- */ .clearfix:after { content: "."; @@ -169,25 +207,28 @@ html[xmlns] .clearfix { height: 1%; } +/* ---- Tables ---- */ - -/* doc specific */ - -.doctable, section table { +.doctable, +section table { margin: 1em 1em 1em 0; border: 1px solid var(--border); border-collapse: collapse; width: 100%; } -.doctable td, .doctable th, section table td, section table th { +.doctable td, +.doctable th, +section table td, +section table th { padding: 7px; line-height: 120%; vertical-align: top; border: 1px solid var(--border); } -.doctable tr th, section table tr th { +.doctable tr th, +section table tr th { background: var(--card-bg); font-size: 110%; } @@ -196,7 +237,8 @@ html[xmlns] .clearfix { margin-top: 0; } -.doctable td p, li p { +.doctable td p, +li p { width: 100% !important; } @@ -204,7 +246,18 @@ html[xmlns] .clearfix { margin: 20px 0 } -/* doc boxes */ +th { + color: var(--card-fg); +} + +@media all and (max-width: 1110px) { + .table-scroller { + width: 100%; + overflow: scroll; + } +} + +/* ---- Admonitions ----*/ .doc-box { padding: 16px; @@ -226,7 +279,7 @@ html[xmlns] .clearfix { border-left: 3px solid var(--notice-accent); } -.doc-notice a{ +.doc-notice a { color: var(--notice-accent); text-decoration: underline; } @@ -236,7 +289,7 @@ html[xmlns] .clearfix { border-left: 3px solid var(--info-accent); } -.doc-info a{ +.doc-info a { color: var(--info-accent); text-decoration: underline; } @@ -250,6 +303,7 @@ html[xmlns] .clearfix { background: var(--warn-bg); border-left: 3px solid var(--warn-accent); } + .doc-warn-title { color: var(--warn-accent); } @@ -259,6 +313,8 @@ html[xmlns] .clearfix { text-decoration: underline; } +/* ---- i18n alert ---- */ + #i18n-notice-box { margin: 100px 3% 20px 3%; position: relative; @@ -272,25 +328,7 @@ html[xmlns] .clearfix { cursor: pointer; } -/* general */ - -.button { - display: block; - padding: 3px 5px; - border-radius: 3px; - cursor: pointer; - color: var(--box-fg); -} - -pre, code { - white-space: pre-wrap !important; -} - - -/* can't find this in proj*/ -h2 a { - color: var(--card-fg) !important; -} +/* ---- 404 page ---- */ .content-404 { height: 70vh; @@ -305,57 +343,30 @@ h2 a { font-size: 16px; } -/* responsive */ - -@media all and (max-width: 1110px) { - .table-scroller { - width: 100%; - overflow: scroll; - } +/* ---- Individual Elements ---- */ - code { - word-break: break-all; - } +blockquote { + margin-left: 0; + font-weight: 600; + font-style: italic; + padding-left: 1.2em; + border-left: .25rem solid var(--border); +} +@media all and (max-width: 1110px) { ul { padding-left: 5%; } - - h1 { - font-size: 22px; - line-height: 26px; - } - - h2 { - font-size: 18px; - line-height: 25px; - } - - h3 { - font-size: 16px; - line-height: 23px; - word-break: break-all; - } - - h4 { - font-size: 16px; - line-height: 18px; - font-weight: normal; - } - - .content { - padding-left: 0; - } } -.hidden-dark { +.button { display: block; + padding: 3px 5px; + border-radius: 3px; + cursor: pointer; + color: var(--box-fg); } -blockquote { - margin-left: 0; - font-weight: 600; - font-style: italic; - padding-left: 1.2em; - border-left: .25rem solid var(--border); -} +strong { + color: var(--card-fg); +} \ No newline at end of file diff --git a/css/themes/dark-theme.css b/css/themes/dark-theme.css index 931e68c013..654316088d 100644 --- a/css/themes/dark-theme.css +++ b/css/themes/dark-theme.css @@ -30,4 +30,8 @@ html.dark-mode { .blog-excerpt { color: var(--notice-accent); } +} + +.hidden-dark { + display: block; } \ No newline at end of file From 21d0f28f94c5313f6764da18421b2cc1532ae1d4 Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 14:30:59 -0500 Subject: [PATCH 16/20] refactor: add support.css and community.css stylesheets to head.html --- _includes/head.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/_includes/head.html b/_includes/head.html index ea8d73061e..055f0e8178 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -16,6 +16,8 @@ + + From 12cb8b8530d1d1f279fe250608321addaf2e9980 Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 14:34:11 -0500 Subject: [PATCH 17/20] rename general.css to style.css --- _includes/head.html | 2 +- css/{general.css => style.css} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename css/{general.css => style.css} (100%) diff --git a/_includes/head.html b/_includes/head.html index 055f0e8178..c6263944e8 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -7,7 +7,7 @@ - + diff --git a/css/general.css b/css/style.css similarity index 100% rename from css/general.css rename to css/style.css From e6291c78d2157c2d11a94aaadb14ae326f213f89 Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 17:41:52 -0500 Subject: [PATCH 18/20] merge files from the pages folder --- css/{pages/home.css => pages.css} | 154 ++++++++++++++++++++++++++++++ css/pages/api.css | 65 ------------- css/pages/community.css | 10 -- css/pages/middleware.css | 59 ------------ css/pages/support.css | 7 -- 5 files changed, 154 insertions(+), 141 deletions(-) rename css/{pages/home.css => pages.css} (62%) delete mode 100644 css/pages/api.css delete mode 100644 css/pages/community.css delete mode 100644 css/pages/middleware.css delete mode 100644 css/pages/support.css diff --git a/css/pages/home.css b/css/pages.css similarity index 62% rename from css/pages/home.css rename to css/pages.css index f884a3e950..106cb8116b 100644 --- a/css/pages/home.css +++ b/css/pages.css @@ -1,3 +1,86 @@ +/* -------- API -------- */ + +#api-doc *:target { + margin-top: -120px; + padding-top: 120px; + z-index: -1; +} + +#api-doc section { + padding-left: 20px; +} + +@media all and (max-width: 1110px) { + #api-doc section { + padding-left: 0; + } +} + +/* ---- Titles ---- */ + +#api-doc h1 { + font-weight: normal; +} + +#api-doc>h3 { + padding-top: 10px; + padding-bottom: 5px; + font-weight: bold; + font-size: 24px; + color: var(--menu-grey) +} + +#api-doc h2 { + font-weight: bold; + font-size: 29px; + margin: 40px 0 20px; +} + +#api-doc section h3 { + padding-top: 10px; + padding-bottom: 5px; + font-weight: bold; + font-size: 18px; +} + +#api-doc h4 { + font-size: 16px; + font-weight: bold; +} + +#api-doc h5 { + font-size: 14px; + font-weight: bold; + color: var(--menu-grey) +} + +/* ---- Special Styles ---- */ + +#app-settings-property { + width: 200px; +} + +@media all and (max-width: 420px) { + #app-settings-property { + width: auto; + } +} + +/* -------- Community.md -------- */ + +.logo-table { + display: flex; + flex-wrap: wrap; + row-gap: 8px; + column-gap: 48px; +} + +.logo-table h3 { + margin-bottom: 12px; +} + +/* -------- index.md -------- */ + /* ---- Home Structure ---- */ main.home { @@ -148,6 +231,7 @@ main.home { border: 1px solid var(--notice-accent); border-radius: 3px; font-size: 0.9em; + & a { color: var(--notice-accent); text-decoration: underline; @@ -213,3 +297,73 @@ main.home { grid-template-columns: 1fr; } } + +/* -------- writing-middleware.md -------- */ + +.callout { + position: relative; +} + +#mw-fig { + border-collapse: separate; + padding: 0; + border: 0; + width: 960px; + margin-bottom: 20px; +} + +#mw-fig-imgcell { + margin: 0; + padding: 0px; + border: 0; + width: 410px; +} + +#mw-fig-img { + margin: 0px; + padding: 0px; + width: 410px; + height: 308px; +} + +.mw-fig-callouts { + margin: 0; + padding: 0 0 0 5px; + border: 0; + width: 550px; +} + +/* -------- middleware pages -------- */ + +#mw-container { + display: flex; + display: -webkit-flex; + /* Safari */ + width: 100%; +} + +#mw-list { + min-width: 180px; + margin: 0; + padding: 0 10px 0 10px; + font-size: 13px; + overflow-y: auto; +} + +#middleware-content { + margin-left: 10px; +} + +#mw-list ul li { + margin-left: -20px; +} + +/* ------- Support.md -------- */ + +strong.supported { + color: var(--supported-fg); +} + +strong.eol { + color: var(--eol-fg); +} \ No newline at end of file diff --git a/css/pages/api.css b/css/pages/api.css deleted file mode 100644 index 42f50cf071..0000000000 --- a/css/pages/api.css +++ /dev/null @@ -1,65 +0,0 @@ -#api-doc *:target { - margin-top: -120px; - padding-top: 120px; - z-index: -1; -} - -#api-doc section { - padding-left: 20px; -} - -@media all and (max-width: 1110px) { - #api-doc section { - padding-left: 0; - } -} - -/* ---- Titles ---- */ - -#api-doc h1 { - font-weight: normal; -} - -#api-doc>h3 { - padding-top: 10px; - padding-bottom: 5px; - font-weight: bold; - font-size: 24px; - color: var(--menu-grey) -} - -#api-doc h2 { - font-weight: bold; - font-size: 29px; - margin: 40px 0 20px; -} - -#api-doc section h3 { - padding-top: 10px; - padding-bottom: 5px; - font-weight: bold; - font-size: 18px; -} - -#api-doc h4 { - font-size: 16px; - font-weight: bold; -} - -#api-doc h5 { - font-size: 14px; - font-weight: bold; - color: var(--menu-grey) -} - -/* ---- Special Styles ---- */ - -#app-settings-property { - width: 200px; -} - -@media all and (max-width: 420px) { - #app-settings-property { - width: auto; - } -} \ No newline at end of file diff --git a/css/pages/community.css b/css/pages/community.css deleted file mode 100644 index 7f563b0e88..0000000000 --- a/css/pages/community.css +++ /dev/null @@ -1,10 +0,0 @@ -.logo-table { - display: flex; - flex-wrap: wrap; - row-gap: 8px; - column-gap: 48px; -} - -.logo-table h3{ - margin-bottom: 12px; -} \ No newline at end of file diff --git a/css/pages/middleware.css b/css/pages/middleware.css deleted file mode 100644 index 781021d608..0000000000 --- a/css/pages/middleware.css +++ /dev/null @@ -1,59 +0,0 @@ -/* -------- writing-middleware.md -------- */ - -.callout { - position: relative; -} - -#mw-fig { - border-collapse: separate; - padding: 0; - border: 0; - width: 960px; - margin-bottom: 20px; -} - -#mw-fig-imgcell { - margin: 0; - padding: 0px; - border: 0; - width: 410px; -} - -#mw-fig-img { - margin: 0px; - padding: 0px; - width: 410px; - height: 308px; -} - -.mw-fig-callouts { - margin: 0; - padding: 0 0 0 5px; - border: 0; - width: 550px; -} - -/* -------- middleware pages --------*/ - -#mw-container { - display: flex; - display: -webkit-flex; - /* Safari */ - width: 100%; -} - -#mw-list { - min-width: 180px; - margin: 0; - padding: 0 10px 0 10px; - font-size: 13px; - overflow-y: auto; -} - -#middleware-content { - margin-left: 10px; -} - -#mw-list ul li { - margin-left: -20px; -} \ No newline at end of file diff --git a/css/pages/support.css b/css/pages/support.css deleted file mode 100644 index 626fac4c75..0000000000 --- a/css/pages/support.css +++ /dev/null @@ -1,7 +0,0 @@ -strong.supported { - color: var(--supported-fg); -} - -strong.eol { - color: var(--eol-fg); -} \ No newline at end of file From 6a7fff23c0f5d9cf293183cd68dc94d8010f077a Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 17:45:17 -0500 Subject: [PATCH 19/20] merge footer menu and search in one file --- css/footer.css | 79 -------------- css/{menu.css => globals.css} | 196 ++++++++++++++++++++++++++++++++++ css/search.css | 111 ------------------- 3 files changed, 196 insertions(+), 190 deletions(-) delete mode 100644 css/footer.css rename css/{menu.css => globals.css} (68%) delete mode 100644 css/search.css diff --git a/css/footer.css b/css/footer.css deleted file mode 100644 index 9f5012d335..0000000000 --- a/css/footer.css +++ /dev/null @@ -1,79 +0,0 @@ -footer { - font-size: 12px; - margin: 60px 5% 30px; - display: flex; - gap: 24px; - flex-direction: column; -} - -#footer-content { - width: 100%; - justify-content: space-between; - gap: 32px; - display: flex; -} - -#footer-copyright { - display: flex; - flex-direction: column; - justify-content: center; - gap: 20px; -} - -#footer-copyright a { - width: fit-content; -} - -#footer-copyright img { - max-width: 125px; -} - -#footer-policy { - display: flex; - flex-wrap: wrap; - column-gap: 20px; - row-gap: 8px; - justify-content: center; - font-size: 15px; -} - -#footer-links { - display: flex; - gap: 20px; -} - -.footer-social { - display: flex; - gap: 20px; - font-size: 20px; -} - -@media all and (max-width: 1110px) { - #footer-content { - flex-wrap: wrap; - justify-content: center; - } - - #footer-copyright>a { - width: 100%; - display: flex; - justify-content: center; - } -} - -/* ---- i18n footer section ---- */ - -#doc-langs { - text-align: center; - font-size: 12px; -} - -#doc-langs p { - margin: 3px 0; -} - -@media all and (max-width: 1110px) { - #doc-langs { - font-size: 11px; - } -} \ No newline at end of file diff --git a/css/menu.css b/css/globals.css similarity index 68% rename from css/menu.css rename to css/globals.css index 9e47c447f8..b61a943cad 100644 --- a/css/menu.css +++ b/css/globals.css @@ -462,4 +462,200 @@ header { .menu ul { display: block; } +} + +/* -------- Footer -------- */ + +footer { + font-size: 12px; + margin: 60px 5% 30px; + display: flex; + gap: 24px; + flex-direction: column; +} + +#footer-content { + width: 100%; + justify-content: space-between; + gap: 32px; + display: flex; +} + +#footer-copyright { + display: flex; + flex-direction: column; + justify-content: center; + gap: 20px; +} + +#footer-copyright a { + width: fit-content; +} + +#footer-copyright img { + max-width: 125px; +} + +#footer-policy { + display: flex; + flex-wrap: wrap; + column-gap: 20px; + row-gap: 8px; + justify-content: center; + font-size: 15px; +} + +#footer-links { + display: flex; + gap: 20px; +} + +.footer-social { + display: flex; + gap: 20px; + font-size: 20px; +} + +@media all and (max-width: 1110px) { + #footer-content { + flex-wrap: wrap; + justify-content: center; + } + + #footer-copyright>a { + width: 100%; + display: flex; + justify-content: center; + } +} + +/* ---- i18n footer section ---- */ + +#doc-langs { + text-align: center; + font-size: 12px; +} + +#doc-langs p { + margin: 3px 0; +} + +@media all and (max-width: 1110px) { + #doc-langs { + font-size: 11px; + } +} + +/* -------- Search -------- */ + +#q { + display: none; + height: 2.5em; + max-width: 100%; + padding: 5px; +} + +.algolia-autocomplete { + max-width: 9em; + + >input { + color: var(--fg); + background-color: var(--bg); + } + + >input::placeholder { + color: var(--fg); + } + + #q { + display: initial; + border-radius: 8px; + border: 1px solid var(--border); + transition: color .3s ease; + padding-inline: 12px; + outline: none; + + &:focus-visible, + &:focus { + border-color: var(--hover-border); + border-width: 2px; + } + } +} + +#navbar { + .ds-dropdown-menu .ds-dataset-1 { + background-color: var(--bg); + + .ds-suggestions { + /* background-color: var(--bg); */ + color: var(--fg); + } + + .ds-suggestion a { + background-color: var(--bg); + color: var(--fg); + } + + .ds-suggestion a { + background-color: var(--bg); + color: var(--fg); + } + + .algolia-docsearch-suggestion--category-header { + color: var(--fg); + } + + .algolia-docsearch-suggestion--wrapper { + background-color: var(--bg); + + .algolia-docsearch-suggestion--subcategory-column { + color: var(--menu-grey); + + } + + .algolia-docsearch-suggestion--title, + .algolia-docsearch-suggestion--text { + color: var(--fg); + } + + .algolia-docsearch-suggestion--highlight { + color: var(--link); + background-color: initial; + } + } + + .algolia-docsearch-suggestion { + background-color: initial; + } + + .algolia-docsearch-suggestion--content .algolia-docsearch-suggestion--no-results { + background-color: initial; + } + + } + + .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--title, + .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content { + background-color: var(--hover-bg); + } +} + +@media all and (max-width: 1110px) { + #home-menu { + display: block; + position: absolute; + top: 7px; + } + + .algolia-autocomplete { + display: none !important; + } +} + +@media all and (min-width: 950px) { + .algolia-autocomplete { + margin-right:15px; + max-width: 12em; + } } \ No newline at end of file diff --git a/css/search.css b/css/search.css deleted file mode 100644 index 71707054b0..0000000000 --- a/css/search.css +++ /dev/null @@ -1,111 +0,0 @@ -#q { - display: none; - height: 2.5em; - max-width: 100%; - padding: 5px; -} - -.algolia-autocomplete { - max-width: 9em; - - >input { - color: var(--fg); - background-color: var(--bg); - } - - >input::placeholder { - color: var(--fg); - } - - #q { - display: initial; - border-radius: 8px; - border: 1px solid var(--border); - transition: color .3s ease; - padding-inline: 12px; - outline: none; - - &:focus-visible, - &:focus { - border-color: var(--hover-border); - border-width: 2px; - } - } -} - -#navbar { - .ds-dropdown-menu .ds-dataset-1 { - background-color: var(--bg); - - .ds-suggestions { - /* background-color: var(--bg); */ - color: var(--fg); - } - - .ds-suggestion a { - background-color: var(--bg); - color: var(--fg); - } - - .ds-suggestion a { - background-color: var(--bg); - color: var(--fg); - } - - .algolia-docsearch-suggestion--category-header { - color: var(--fg); - } - - .algolia-docsearch-suggestion--wrapper { - background-color: var(--bg); - - .algolia-docsearch-suggestion--subcategory-column { - color: var(--menu-grey); - - } - - .algolia-docsearch-suggestion--title, - .algolia-docsearch-suggestion--text { - color: var(--fg); - } - - .algolia-docsearch-suggestion--highlight { - color: var(--link); - background-color: initial; - } - } - - .algolia-docsearch-suggestion { - background-color: initial; - } - - .algolia-docsearch-suggestion--content .algolia-docsearch-suggestion--no-results { - background-color: initial; - } - - } - - .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--title, - .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content { - background-color: var(--hover-bg); - } -} - -@media all and (max-width: 1110px) { - #home-menu { - display: block; - position: absolute; - top: 7px; - } - - .algolia-autocomplete { - display: none !important; - } -} - -@media all and (min-width: 950px) { - .algolia-autocomplete { - margin-right:15px; - max-width: 12em; - } -} \ No newline at end of file From 0e8e0652df4554a0e19b89830ba370442b012068 Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Tue, 11 Feb 2025 17:46:35 -0500 Subject: [PATCH 20/20] fix head --- _includes/head.html | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/_includes/head.html b/_includes/head.html index c6263944e8..105309f124 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -9,15 +9,9 @@ - - + - - - - - - +