Used flex instead of floats for header layout

Fixed #1435
django · Jun 15, 2024 · 153d77a · 153d77a
1 parent f11c87e
commit 153d77a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 10 deletions.
diff --git a/djangoproject/scss/_dark-mode.scss b/djangoproject/scss/_dark-mode.scss
@@ -346,7 +346,6 @@ html[data-theme="light"] .theme-toggle .theme-label-when-light {
     line-height: 45px;
     text-align: center;
     margin: 4px 10px;
-    float: right;
 
     @include respond-min(768px) {
         display: none;

diff --git a/djangoproject/scss/_style.scss b/djangoproject/scss/_style.scss
@@ -482,22 +482,24 @@ blockquote {
     z-index: 0;
 
     .container {
+        display: flex;
+        flex-direction: row;
         @include respond-min(768px) {
             position: relative;
         }
     }
 
+    .mobile-toggle {margin-left: auto}
+
     .meta {
         @include font-size(13);
         color: var(--primary);
         font-weight: 700;
         width: auto;
-        float: left;
         margin: 8px 0 0 10px;
         display: none;
 
         @include respond-min(1150px) {
-            float: left;
             width: 200px;
             display: block;
         }
@@ -511,7 +513,6 @@ blockquote {
         background: url(../img/logo-django.png) 0 0 no-repeat;
         color: var(--white-color);
         display: block;
-        float: left;
         font-weight: 700;
         margin: 10px;
         overflow: hidden;
@@ -537,7 +538,6 @@ blockquote {
         color: var(--menu);
         cursor: pointer;
         display: block;
-        float: right;
         height: 45px;
         line-height: 48px;
         margin: 4px 10px;
@@ -571,7 +571,6 @@ blockquote {
 
         @include respond-min(768px) {
             width: auto;
-            float: right;
             max-height: none; // always show menu on a desktop width
         }
 

diff --git a/djangoproject/templates/includes/header.html b/djangoproject/templates/includes/header.html
@@ -1,14 +1,14 @@
 <div role="banner" id="top">
-  <div class="container">
+  <div class="container container--flex--wrap--mobile">
     <a class="logo" href="{% url 'homepage' %}">Django</a>
     <p class="meta">The web framework for perfectionists with deadlines.</p>
+    <div class="mobile-toggle">
+      {% include "includes/toggle_theme.html" %}
+    </div>
     <button class="menu-button">
       <i class="icon icon-reorder"></i>
       <span class="visuallyhidden">Menu</span>
     </button>
-    <div class="mobile-toggle">
-      {% include "includes/toggle_theme.html" %}
-    </div>
     <div role="navigation">
       <ul>
         <li{% if 'start' in request.path %} class="active"{% endif %}>