From c4a481138b4d3c8d6feadeb0321fd7c17789788d Mon Sep 17 00:00:00 2001 From: Eric Swierczek <2423727+swierczek@users.noreply.github.com> Date: Thu, 27 Feb 2025 14:25:16 -0600 Subject: [PATCH] Update sidebar line height and spacing And update README with another step to view local changes --- README.md | 7 ++++++- theme/_assets/default.min.css | 2 +- theme/assets-src/styles/sidebar.less | 7 ++++--- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index fae2b7c9d..65a71d986 100755 --- a/README.md +++ b/README.md @@ -32,7 +32,12 @@ To build the theme assets, run `npm run buildAssets`. You can also dynamically r ### Viewing local changes -Manually load `/build/index.html` in your browser to view your local build. For example, `file:///Users//Documents/ExpressionEngine-User-Guide/build/index.html`. You can use the side navigation to navigate to different local files, but the search functionality always takes you to the live version at docs.expressionengine.com. +There are 2 options for viewing your local changes. + +1. Run `npx http-server -o` which should make the site available at [http://127.0.0.1:8080/build/](http://127.0.0.1:8080/build/). +2. Manually view any HTML file in `/build/` in your browser. For example, `file:///Users//Documents/ExpressionEngine-User-Guide/build/index.html` to view the home page. + +You can use the side navigation to navigate to different local files, but the search functionality takes you to the live version at [https://docs.expressionengine.com](https://docs.expressionengine.com) unless you follow the steps at [Using DocSearch Locally](#using-docsearch-locally). ## Using DocSearch Locally diff --git a/theme/_assets/default.min.css b/theme/_assets/default.min.css index 5ab44bbcf..b71bfc451 100755 --- a/theme/_assets/default.min.css +++ b/theme/_assets/default.min.css @@ -69,7 +69,7 @@ * @link https://expressionengine.com/ * @copyright Copyright (c) 2003-2020, EllisLab, Inc. (https://packettide.com) * @license https://expressionengine.com/license Licensed under Apache License, Version 2.0 - */.sidebar-container{position:fixed;left:0;top:50px;bottom:0;background-color:#f7f7fa;width:100%;z-index:30;display:none}@media only screen and (min-width:900px){.sidebar-container{display:block;height:calc(100% - 70px);top:70px;width:280px}}@media only screen and (min-width:1200px){.sidebar-container{min-width:280px;width:280px;width:calc(((100% - 1200px)/ 2) + 280px)}}.sidebar{margin-left:0;width:100%;height:100%;position:relative;background-color:#f7f7fa;display:flex;flex-direction:column}@media only screen and (min-width:900px){.sidebar{width:280px;float:right}}.sidebar-toc{overflow-y:auto;margin:0 0 1px 0;position:relative;padding-bottom:15px}.sidebar-search{width:100%;padding:20px}.sidebar-search .algolia-autocomplete{width:100%}.search-input{width:100%;padding:6px 30px 6px 10px;border-radius:5px;border:1px solid #e6e6f0;outline:0;background:url(images/search.svg) no-repeat;background-position:right 10px center;transition:border 150ms ease,box-shadow 150ms ease;background-color:#fff}.search-input:focus{border:1px solid #4a62ff;box-shadow:0 8px 10px -10px rgba(52,22,201,.1),0 5px 10px rgba(19,114,198,.04)}.search-input::placeholder{color:#747f8f;opacity:1}.sidebar-sponsor{display:none;padding-top:20px}.sidebar-sponsor p{font-weight:700}.sidebar-sponsor img{padding-top:10px}.sidebar ul{list-style-type:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Roboto,Arial,sans-serif}.sidebar-toc{font-size:.98em}.sidebar-toc>ul{padding:0 0 0 40px;margin:0}.sidebar-toc li ul{margin:8px 0 0 1em;padding-left:1em;border-left:1px solid #e2e5ee}.sidebar-toc li{margin-bottom:5px;color:#544e72;padding-right:10px}.sidebar-toc>ul>li{margin:0 0 10px 0;font-size:.95em}.sidebar-toc>ul>li>a{color:#757698;font-weight:700}.sidebar-toc>li>li{font-size:.95em}.sidebar-toc li.active>a{color:#f62958}.sidebar-toc li a{transition:all 250ms ease;display:block}.sidebar-toc li a:hover{color:#f62958;cursor:pointer}.sidebar-toc li[data-active-page=true]>a{color:#f62958}.sidebar h2{text-transform:uppercase;letter-spacing:1px;font-size:90%;color:#afb0bf;font-weight:700;margin-bottom:15px;padding-left:20px;padding-right:10px}.sidebar h2:not(:first-of-type){margin-top:30px}/*! + */.sidebar-container{position:fixed;left:0;top:50px;bottom:0;background-color:#f7f7fa;width:100%;z-index:30;display:none}@media only screen and (min-width:900px){.sidebar-container{display:block;height:calc(100% - 70px);top:70px;width:280px}}@media only screen and (min-width:1200px){.sidebar-container{min-width:280px;width:280px;width:calc(((100% - 1200px)/ 2) + 280px)}}.sidebar{margin-left:0;width:100%;height:100%;position:relative;background-color:#f7f7fa;display:flex;flex-direction:column}@media only screen and (min-width:900px){.sidebar{width:280px;float:right}}.sidebar-toc{overflow-y:auto;margin:0 0 1px 0;position:relative;padding-bottom:15px}.sidebar-search{width:100%;padding:20px}.sidebar-search .algolia-autocomplete{width:100%}.search-input{width:100%;padding:6px 30px 6px 10px;border-radius:5px;border:1px solid #e6e6f0;outline:0;background:url(images/search.svg) no-repeat;background-position:right 10px center;transition:border 150ms ease,box-shadow 150ms ease;background-color:#fff}.search-input:focus{border:1px solid #4a62ff;box-shadow:0 8px 10px -10px rgba(52,22,201,.1),0 5px 10px rgba(19,114,198,.04)}.search-input::placeholder{color:#747f8f;opacity:1}.sidebar-sponsor{display:none;padding-top:20px}.sidebar-sponsor p{font-weight:700}.sidebar-sponsor img{padding-top:10px}.sidebar ul{list-style-type:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Roboto,Arial,sans-serif}.sidebar-toc{font-size:.98em}.sidebar-toc>ul{padding:0 0 0 40px;margin:0}.sidebar-toc li ul{margin:18px 0 0 1em;padding-left:1em;border-left:1px solid #e2e5ee}.sidebar-toc li{margin-bottom:13px;color:#544e72;padding-right:10px}.sidebar-toc>ul>li{margin:0 0 18px 0;font-size:.95em;line-height:1.14em}.sidebar-toc>ul>li>a{color:#757698;font-weight:700}.sidebar-toc>li>li{font-size:.95em}.sidebar-toc li.active>a{color:#f62958}.sidebar-toc li a{transition:all 250ms ease;display:block}.sidebar-toc li a:hover{color:#f62958;cursor:pointer}.sidebar-toc li[data-active-page=true]>a{color:#f62958}.sidebar h2{text-transform:uppercase;letter-spacing:1px;font-size:90%;color:#afb0bf;font-weight:700;margin-bottom:15px;padding-left:20px;padding-right:10px}.sidebar h2:not(:first-of-type){margin-top:30px}/*! * This source file is part of the open source project * ExpressionEngine User Guide (https://github.com/ExpressionEngine/ExpressionEngine-User-Guide) * diff --git a/theme/assets-src/styles/sidebar.less b/theme/assets-src/styles/sidebar.less index cf7abbcd0..0c60f8142 100755 --- a/theme/assets-src/styles/sidebar.less +++ b/theme/assets-src/styles/sidebar.less @@ -126,22 +126,23 @@ } // All nested lists .sidebar-toc li ul { - margin: 8px 0 0 1em; + margin: 18px 0 0 1em; padding-left: 1em; border-left: 1px solid rgb(226, 229, 238); } // All items .sidebar-toc li { - margin-bottom: 5px; + margin-bottom: 13px; color: @dark-grey; padding-right: @p-sm; } // First level items .sidebar-toc > ul > li { - margin: 0 0 10px 0; + margin: 0 0 18px 0; font-size: 0.95em; + line-height: 1.14em; } .sidebar-toc > ul > li > a { color: rgb(117, 118, 152);