copilot suggestions and remove inline css

Author: Gagan-Ram

app/eventyay/cfp/templates/cfp/event/user_profile.html

@@ -14,7 +14,6 @@
     {% endcompress %}
 {% endblock cfp_header %}
 
-
 {% block content %}
     {% html_signal "eventyay.cfp.signals.html_above_profile_page" sender=request.event request=request %}
 

app/eventyay/common/templates/common/base.html

@@ -81,13 +81,13 @@
                 {% endblocktranslate %}
             </div>
         {% endif %}
-        <div class="container{% block container_width %}{% endblock container_width %}" id="main-container" style="margin-top: 3.8rem">
+        <div class="container{% block container_width %}{% endblock container_width %}" id="main-container">
             <header>
                 <h1 class="public-event-header">
                     <div class="event-logo">
                         <a href="{% block nav_link %}{% endblock nav_link %}">
                             {% if request.event and request.event.logo %}
-                                <img loading="lazy" src="{{ request.event.logo.url }}" id="event-logo" alt="{% translate "The event’s logo" %}" style="border-radius: 10px;">
+                                <img loading="lazy" src="{{ request.event.logo.url }}" id="event-logo" alt="{% translate "The event’s logo" %}">
                             {% endif %}
                         </a>
                     </div>

app/eventyay/presale/templates/pretixpresale/base.html

@@ -13,6 +13,9 @@
     <title>{% block thetitle %}{% endblock %}</title>
     {% if css_file %}
         <link rel="stylesheet" type="text/css" href="{{ css_file }}" />
+        {% compress css %}
+            <link rel="stylesheet" type="text/css" href="{% static "pretixpresale/scss/custom.css" %}" />
+        {% endcompress %}
     {% else %}
         {% compress css %}
             <link rel="stylesheet" type="text/x-scss" href="{% static "pretixpresale/scss/main.scss" %}"/>
@@ -59,7 +62,7 @@
             <img id="header-image" src="{{ MEDIA_PREFIX }}{{ event_logo }}" alt="{{ event.name }}" class="event-logo" />
         {% endif %}
 </div>
-<header {% if event_logo %} class="custom-header" {% endif %} style="margin-top: -3.8rem;">
+<header {% if event_logo %} class="custom-header" {% endif %} >
 {% block above %}
 {% endblock %}
 </header>

app/eventyay/presale/templates/pretixpresale/event/fragment_nav.html

@@ -3,9 +3,9 @@
 {% load eventurl %}
 {% load event_tags %}
 
-<nav style="margin-top: 10px; margin-bottom: 3rem; overflow: scroll;">
-    <div class="navigation" style="font-size: 1.65rem; display: flex; gap: 2rem;">
-        <a class="header-tab underline">
+<nav id='header-nav-bar'>
+    <div class="navigation">
+        <a href="#" class="header-tab underline">
             <i class="fa fa-ticket"></i> {% translate "Tickets" %}
         </a>
 
@@ -36,52 +36,11 @@
             {% endif %}
         {% endwith %}
 
-        <div class="video-link" >
+        <div class="video-link">
             <a join-event-link class="header-tab join-event {% if request.path_info == '/onlinevideo' %}underline{% endif %}"
                 href='{% eventurl request.event "presale:event.onlinevideo.join" %}'>
                 <i class="fa fa-video-camera"></i> {% translate "Join online video" %}
             </a>
         </div>
     </div>
 </nav>
-
-<style>
-.navigation a {
-    cursor: pointer;
-    position: relative;
-    text-decoration: none;
-    padding-bottom: 4px;
-}
-
-.navigation a.underline::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: -10px;
-    width: calc(100% + 20px);
-    height: 2px;
-    background-color: currentColor;
-}
-
-.navigation a:not(.underline):hover {
-    border-bottom: 2px dotted currentColor;
-}
-
-@media (min-width: 375px) {
-    .video-link {
-        margin-left: 0;
-    }
-}
-
-@media (min-width: 1000px) {
-    .video-link {
-        margin-left: 20rem;
-    }
-}
-
-@media (min-width: 1200px) {
-    .video-link {
-        margin-left: 40rem;
-    }
-}
-</style>

app/eventyay/static/cfp/css/_layout.css

@@ -37,6 +37,7 @@ header {
 
   #event-logo {
     max-height: 140px;
+    border-radius: 10px;
   }
 
   .header-wrapper {
@@ -136,6 +137,10 @@ header {
   }
 }
 
+#join-event-link {
+  margin-left: auto;
+}
+
 .public-event-header {
   display: flex;
   margin-bottom: 14px;
@@ -184,6 +189,7 @@ footer {
   margin-right: auto;
   margin-left: auto;
   max-width: 1140px;
+  margin-top: 3.8rem !important;
 }
 
 .url-links {
@@ -217,46 +223,36 @@ footer {
   }
 }
 
-.video-link {
-  margin-left: 24rem;
-}
-
 @media (max-width: 1200px) {
   .user-logs {
     display: none;
   }
-  .video-link {
-    margin-left: 20rem;
-  }
 }
 
 @media (max-width: 992px) {
   #main-container {
     max-width: 960px;
-  }
-  .video-link {
-    margin-left: 10rem;
+    margin-top: 3.8rem !important;
   }
 }
 
 @media (max-width: 768px) {
   #main-container {
     max-width: 720px;
+    margin-top: 3.8rem !important;
     header .header-wrapper {
       flex-direction: column-reverse;
       align-items: flex-start;
     }
   }
-  .video-link {
-    margin-left: 0rem;
-  }
 }
 
 @media (max-width: 576px) {
   #main-container {
     padding: 0;
     padding-top: 20px;
     width: 100%;
+    margin-top: 3.8rem !important;
 
     main {
       width: 100%;
@@ -267,6 +263,7 @@ footer {
       padding: 0;
       #event-logo {
         max-height: 120px;
+        border-radius: 10px;
       }
     }
 
@@ -338,7 +335,4 @@ footer {
       }
     }
   }
-  .video-link {
-    margin-left: 0;
-  }
 }

app/eventyay/static/pretixpresale/scss/custom.css

@@ -17,6 +17,44 @@
     height: 220px;
     align-items: flex-end;
     display: flex;
+    margin-top: -3.8rem;
+}
+
+.video-link {
+    margin-left: auto;
+}
+
+#header-nav-bar {
+    margin-top: 10px;
+    margin-bottom: 3rem;
+    overflow: auto;
+    
+    div {
+        font-size: 1.65rem;
+        display: flex;
+        gap: 2rem;
+    }
+    
+    a {
+        cursor: pointer;
+        position: relative;
+        text-decoration: none;
+        padding-bottom: 4px;
+    }
+
+    a.underline::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: -10px;
+        width: calc(100% + 20px);
+        height: 2px;
+        background-color: currentColor;
+    }
+
+    a:not(.underline):hover {
+        border-bottom: 2px dotted currentColor;
+    }
 }
 
 #schedule-nav {

app/eventyay/static/pretixpresale/scss/custom.scss

@@ -17,6 +17,44 @@
     height: 220px;
     align-items: flex-end;
     display: flex;
+    margin-top: -3.8rem;
+}
+
+.video-link {
+    margin-left: auto;
+}
+
+#header-nav-bar {
+    margin-top: 10px;
+    margin-bottom: 3rem;
+    overflow: auto;
+    
+    div {
+        font-size: 1.65rem;
+        display: flex;
+        gap: 2rem;
+    }
+    
+    a {
+        cursor: pointer;
+        position: relative;
+        text-decoration: none;
+        padding-bottom: 4px;
+    }
+
+    a.underline::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: -10px;
+        width: calc(100% + 20px);
+        height: 2px;
+        background-color: currentColor;
+    }
+
+    a:not(.underline):hover {
+        border-bottom: 2px dotted currentColor;
+    }
 }
 
 #schedule-nav {