By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

Responsive breadcrumbs and profile header

roundabout,
created on Wednesday, 17 July 2024, 08:30:03 (1721205003), received on Wednesday, 31 July 2024, 06:54:51 (1722408891)
Author identity: vlad <vlad.muntoiu@gmail.com>

80a18a916c320ef4403e96be190af15d6c1c7245

static/efficient-ui/THEME.css

@@ -376,7 +376,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                --color-breadcrumbs-separator: var(--color-navbar-text);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                --height-breadcrumbs: 48px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            --padding-breadcrumbs: 16px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            --padding-breadcrumbs: 8px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                --shadow-breadcrumbs: var(--shadow-navbar);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                --border-breadcrumbs: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                --radius-breadcrumbs: 0;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/efficient-ui/breadcrumbs.css

@@ -3,7 +3,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                align-items: center;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                justify-content: space-between;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                background: var(--color-breadcrumbs);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            height: var(--height-breadcrumbs);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            min-height: var(--height-breadcrumbs);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                box-shadow: var(--shadow-breadcrumbs);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                border: var(--shadow-breadcrumbs);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                padding: var(--padding-breadcrumbs);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/style.css

@@ -205,7 +205,7 @@ dd {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                justify-content: center;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        @media screen and (min-width: 577px) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        @media screen and (min-width: 641px) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                #sidenav-trigger {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                    display: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -214,7 +214,7 @@ dd {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        @media screen and (max-width: 576px) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        @media screen and (max-width: 640px) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                #main-nav-links-desktop {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                    display: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -652,3 +652,20 @@ small {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                    text-align: center;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .breadcrumbs > ul {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            white-space: nowrap;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        @media screen and (max-width: 480px) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            .breadcrumbs > ul {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                flex-flow: row nowrap;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                overflow-y: scroll;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                align-self: stretch;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                align-items: center;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            .breadcrumbs {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                min-height: 64px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                padding: 4px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }