Made title centered + some small fixes

FNF-CNE-Devs · Oct 1, 2024 · d1f2943 · d1f2943
1 parent 96852bf
commit d1f2943
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 11 deletions.
diff --git a/api-generator/theme/templates/topbar.mtt b/api-generator/theme/templates/topbar.mtt
@@ -1,10 +1,9 @@
 <header>
 	<a href="/">
-		<img src="/img/logo-header.png" style="width: 50px;" alt="Codename Logo" />
-		<h2 class="mobile">CNE</h2>
-		<h2 class="desktop">Codename Engine</h2>
+		<img src="/img/logo-banner.png" alt="Codename Logo" class="desktop"/>
+        <img src="/img/logo-banner-mini.png" alt="Codename Logo" class="mobile"/>
 	</a>
-	<h2>::api.currentPageName::</h2>
+	<h2 class="header-title">::api.currentPageName::</h2>
 	<div>
 		<a href="/api-docs/">API</a><a href="/wiki/">Wiki</a>
 	</div>

diff --git a/src/pages/index.html b/src/pages/index.html
@@ -36,7 +36,7 @@
 		{{ header }}
 	</div>
 	<div class="container">
-		<div class="content">
+		<div class="content main-content">
 			<img src="root/img/codename-animated.gif" style="margin-top: 1em"><br>
 
 			<a href="/api-docs/" class="default-button">API</a>

diff --git a/src/pages/index.scss b/src/pages/index.scss
@@ -122,10 +122,14 @@ div.compact {
 .content {
     flex-grow: 1;
 
+    &.main-content {
+        width: 60%;
+    }
+
     &.mods {
         flex-grow: 0;
         width: 565px;
-        display: table;
+        //display: table;
         padding: 0;
     }
 }
@@ -222,9 +226,9 @@ div.compact {
     display: none;
 }
 
-.sort-button:not(.selected) {
-    filter: brightness(70%);
-}
+// .sort-button:not(.selected) {
+//     filter: brightness(70%);
+// }
 
 .sort-button.selected {
     background: var(--primary-color);
@@ -242,7 +246,7 @@ div.compact {
     margin: 0 !important;
 }
 
-.category-button {
+.category-button, .order-button {
     margin-bottom: 0;
     border: solid rgba(0, 0, 0, 0.1) 2px;
     border-bottom: none;

diff --git a/src/pages/templates/header.html b/src/pages/templates/header.html
@@ -3,7 +3,7 @@
         <img src="root/img/logo-banner.png" alt="Codename Logo" class="desktop"/>
         <img src="root/img/logo-banner-mini.png" alt="Codename Logo" class="mobile"/>
     </a>
-    <h2>{{ title }}</h2>
+    <h2 class="header-title">{{ title }}</h2>
     <div>
         <a href="root/api-docs/">API</a><a href="root/wiki/">Wiki</a>
     </div>

diff --git a/src/style.scss b/src/style.scss
@@ -249,6 +249,16 @@ img {
   max-width: 100%;
 }
 
+header {
+  position: relative;
+}
+
+.header-title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
 @media screen and (max-width: 35.5em) {
   .container {
     width: 100%;