Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-01 19:45:23 +02:00
Code Issues Releases Activity

Sidebar redesign (#200)

Browse source 
* New sidebar

* Save state to local storage

* Make sidebar sticky

* Text overflow

* Fix add page button on mobile

* Mobile layout

* Display sidebar when ready

* Add logo

* Remove files

* Fix margin

* Update logo padding-bottom

* Hovers

* Decrease logo's font size

* Make logo not sticky

* Cleanup classnames

* Simplify css

* Update sidebar module

* Fix animation

* Fix cursor issue

* Fix vars and logo paddings
This commit is contained in:
Tanya 2022-06-16 21:37:37 +08:00 • committed by GitHub
parent 16ba86fddb
commit 30d96909d3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 531 additions and 185 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/frontend/styles/vars.pcss
View file

@ -23,14 +23,16 @@
/**
* Site layout sizes
*/
--layout-padding-horizontal: 16px;
--layout-padding-horizontal: 22px;
--layout-padding-vertical: 30px;
--layout-width-aside: 300px;
--layout-sidebar-width: 344px;
--layout-width-main-col: 650px;
--layout-height-header: 56px;
@media (--mobile) {
--layout-padding-horizontal: 15px;
--layout-padding-vertical: 15px;
--layout-height-header: 88px;
}
--font-mono: Menlo,Monaco,Consolas,Courier New,monospace;
@ -70,6 +72,13 @@
background: color-mod(var(--color-link-active) blackness(+10%));
}
}
--squircle {
@supports(-webkit-mask-box-image: url('')){
border-radius: 0;
-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10.3872C0 1.83334 1.83334 0 10.3872 0H13.6128C22.1667 0 24 1.83334 24 10.3872V13.6128C24 22.1667 22.1667 24 13.6128 24H10.3872C1.83334 24 0 22.1667 0 13.6128V10.3872Z' fill='black'/%3E%3C/svg%3E%0A") 48% 41% 37.9% 53.3%;;
}
}
}
/**
@ -80,3 +89,4 @@
@custom-media --tablet all and (min-width: 980px) and (max-width: 1050px);
@custom-media --mobile all and (max-width: 980px);
@custom-media --retina all and (-webkit-min-device-pixel-ratio: 1.5);
@custom-media --can-hover all and (hover:hover)