Improve docs scaling on mobile and small screens

Closes #1757.
ago%!(EXTRA string=5 years) · bb1d917c2f
parent 59196f9ad8
commit bb1d917c2f
3 changed files with 28 additions and 11 deletions
--- a/docs/extra.css
+++ b/docs/extra.css
--- a/docs/extra.less
+++ b/docs/extra.less
@ -159,11 +159,17 @@ h3 {

 .glfwheader {
 	font-size:16px;
-	height:64px;
+	min-height:64px;
 	max-width:920px;
-	min-width:800px;
 	padding:0 32px;
 	margin:0 auto;
+
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	align-items: center;
+	align-content: stretch;
 }

 #glfwhome {
@ -176,7 +182,7 @@ h3 {

 .glfwnavbar {
 	list-style-type:none;
-	margin:0 auto;
+	margin:0 0 0 auto;
 	float:right;
 }

@ -191,6 +197,10 @@ h3 {
 	color:@header-footer-link-color;
 }

+.glfwnavbar {
+	padding-left: 0;
+}
+
 #glfwhome,.glfwnavbar a,.glfwnavbar a:visited {
 	transition:.35s ease;
 }
@ -211,14 +221,12 @@ address.footer {

 #main-nav {
 	max-width:960px;
-	min-width:800px;
 	margin:0 auto;
 	font-size:13px;
 }

 #main-menu {
 	max-width:920px;
-	min-width:800px;
 	margin:0 auto;
 	font-size:13px;
 }
@ -233,9 +241,13 @@ address.footer {
 }

 #main-menu {
-	height:36px;
-	display:block;
-	position:relative;
+	min-height:36px;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	align-items: center;
+	align-content: stretch;
 }

 #main-menu a,#main-menu a:visited,#main-menu a:hover,#main-menu li {
@ -250,6 +262,10 @@ address.footer {
 	color:@default-link-color;
 }

+#main-menu > li:last-child {
+	margin: 0 0 0 auto;
+}
+
 .contents {
 	min-height:590px;
 }
--- a/docs/header.html
+++ b/docs/header.html
@ -1,7 +1,8 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="IE=9"/>
 <meta name="generator" content="Doxygen $doxygenversion"/>
 <!--BEGIN PROJECT_NAME--><title>$projectname: $title</title><!--END PROJECT_NAME-->