Smaller headers and user profile on mobile devices

static/efficient-ui/THEME.css

@@ -525,6 +525,23 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            525  
                                                --color-modal-backdrop: radial-gradient(circle, #00000040 12.5%, #000000cc 100%);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            526  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            527  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        528 +
                                        /* Make headings smaller */
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        529 +
                                        @media screen and (max-width: 576px) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        530 +
                                            h2 {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        531 +
                                                font-size: 25.5px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        532 +
                                                line-height: 28px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        533 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        534 +
                                            h1 {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        535 +
                                                font-size: 33px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        536 +
                                                line-height: 36px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        537 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        538 +
                                            h1.headline {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        539 +
                                                font-size: 39px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        540 +
                                                line-height: 44px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        541 +
                                                font-weight: 300;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        542 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        543 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        544 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            545  
                                            /* Extra styles */
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            546  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            547  
                                            h6 {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -836,4 +853,4 @@ x-notebook > label:has(input[type="radio"]:checked) {

                                
                                
                                
                            
                                
                                    
                                        
                                            853  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            854  
                                            x-notebook > label:has(input[type="radio"]) {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            855  
                                                transition: box-shadow 125ms ease;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        839 -
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                
                                
                                
                            
                                
                                    
                                        856 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/style.css

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

                                
                                
                                
                            
                                
                                    
                                        
                                            205  
                                                justify-content: center;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            206  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            207  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        208 -
                                        @media screen and (min-width: 481px) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        208 +
                                        @media screen and (min-width: 577px) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            209  
                                                #sidenav-trigger {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            210  
                                                    display: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            211  
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

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

                                
                                
                                
                            
                                
                                    
                                        
                                            214  
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            215  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            216  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        217 -
                                        @media screen and (max-width: 480px) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        217 +
                                        @media screen and (max-width: 576px) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            218  
                                                #main-nav-links-desktop {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            219  
                                                    display: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            220  
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -621,3 +621,15 @@ strong, em {

                                
                                
                                
                            
                                
                                    
                                        
                                            621  
                                            small {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            622  
                                                font-size: 1em;    /* more like LARGE :D, <small> has another semantic meaning which remains valid */
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            623  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        624 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        625 +
                                        #profile-avatar {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        626 +
                                            width: 128px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        627 +
                                            height: 128px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        628 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        629 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        630 +
                                        @media screen and (max-width: 640px) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        631 +
                                            #profile-avatar {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        632 +
                                                width: 96px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        633 +
                                                height: 96px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        634 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        635 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/user-profile-overview.html

@@ -5,7 +5,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            5  
                                                <x-frame style="--width: 768px; --padding: 1em;">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            6  
                                                    <x-vbox>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            7  
                                                        <x-hbox style="align-items: center;">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        8 -
                                                        <img src="/info/{{ user.username }}/avatar" class="avatar" style="width: 128px; height: 128px;">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        8 +
                                                        <img src="/info/{{ user.username }}/avatar" class="avatar" id="profile-avatar">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            9  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            10  
                                                            <x-vbox class="nopad">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            11  
                                                                {% if user.display_name and user.display_name != user.username %}