Minor redesign (mostly a new font)

This replaces Vollkorn with Roboto, a more modern-looking font. Also, a new background, which tiles properly and has less contrast.

Tables of contents now float to the right on desktop layouts and some more minor readability changes.

10 files changed, 21 insertions, 94 deletions

diff --git a/styles/VollkornBold.ttf b/styles/VollkornBold.ttf
deleted file mode 100644
index 04109c8..0000000
--- a/styles/VollkornBold.ttf
+++ /dev/null
diff --git a/styles/VollkornBoldItalic.ttf b/styles/VollkornBoldItalic.ttf
deleted file mode 100644
index 472b5de..0000000
--- a/styles/VollkornBoldItalic.ttf
+++ /dev/null
diff --git a/styles/VollkornItalic.ttf b/styles/VollkornItalic.ttf
deleted file mode 100644
index 17e98fe..0000000
--- a/styles/VollkornItalic.ttf
+++ /dev/null
diff --git a/styles/VollkornMedium.ttf b/styles/VollkornMedium.ttf
deleted file mode 100644
index 0236c13..0000000
--- a/styles/VollkornMedium.ttf
+++ /dev/null
diff --git a/styles/VollkornMediumItalic.ttf b/styles/VollkornMediumItalic.ttf
deleted file mode 100644
index 5f5dd3e..0000000
--- a/styles/VollkornMediumItalic.ttf
+++ /dev/null
diff --git a/styles/VollkornRegular.ttf b/styles/VollkornRegular.ttf
deleted file mode 100644
index b663cfd..0000000
--- a/styles/VollkornRegular.ttf
+++ /dev/null
diff --git a/styles/VollkornSemibold.ttf b/styles/VollkornSemibold.ttf
deleted file mode 100644
index b44373c..0000000
--- a/styles/VollkornSemibold.ttf
+++ /dev/null
diff --git a/styles/VollkornSemiboldItalic.ttf b/styles/VollkornSemiboldItalic.ttf
deleted file mode 100644
index 4e7d4ab..0000000
--- a/styles/VollkornSemiboldItalic.ttf
+++ /dev/null
diff --git a/styles/opticks.css b/styles/opticks.css
index 0ebd549..41da4c7 100644
--- a/styles/opticks.css
+++ b/styles/opticks.css
@@ -23,16 +23,14 @@ body {
 	margin-right: auto;
 	margin-top: 2em;
 
-	border: 0.1em solid rgb(50, 50, 50);
-	box-shadow: 0 0 1em black;
+	box-shadow: 0 0 1em #909090;
 
 	/* This, along with the html block, sets the background of
 	   the entire window, not just the contents. Use #page to style
 	   the contents. */
-	background-color: #272727;
-	background-image: url("/lib/tpl/opticks/images/opticks.jpg");
+	background-color: #202020;
+	background-image: url("/lib/tpl/opticks/images/background.jpg");
 	background-size: cover;
-	background-position: center;
 }
 
 /* Compact layout for small screens */
@@ -42,6 +40,10 @@ body {
 		width: 100%;
 		background: none;
 	}
+
+	#dw__toc {
+		float: none !important;
+	}
 }
 
 /* Hide the search bar on mobile */
@@ -60,14 +62,15 @@ body {
 * {
 	margin: 0;
 	padding: 0;
-	font-family: 'Vollkorn', serif;
+	font-family: 'Roboto', serif;
 }
 
 /* The area between the header and the footer */
 #content {
-	padding-bottom: 0.6em;
 	overflow: auto;
-	padding: 2em;
+	padding: 3em;
+	padding-bottom: 0.6em;
+	padding-top: 0.5em;
 	min-height: 10em;
 
 	background-color: white;
@@ -89,11 +92,12 @@ p {
 
 /* Headers */
 h1, h2, h3, h4, h5, h6 {
-	margin-top: 0.5em;
+	margin-top: 1.5em;
 	margin-bottom: 0.5em;
+}
 
+h1, h2 {
 	border-bottom: 0.05em solid rgb(128, 128, 128);
-	font-variant: small-caps;
 }
 
 /* #content already has a large padding */
@@ -209,7 +213,6 @@ input[type="text"], input[type="password"], input[type="email"] {
 }
 
 input::placeholder {
-	font-variant: small-caps;
 	color: rgb(128, 128, 128);
 }
 
@@ -224,7 +227,8 @@ input[type="password"]:hover, input[type="password"]:active {
 	padding-left: 0.7em;
 	padding-right: 0.7em;
 	color: white;
-	font-variant: small-caps;
+	font-size: 85%;
+
 	text-align: center;
 	text-shadow: 0 0 0.1em black;
 	border: 0.1em solid rgb(95, 95, 95);
@@ -342,7 +346,6 @@ fieldset {
 	padding: 0.3em;
 
 	color: white;
-	font-variant: small-caps;
 	border: 0.1em solid #b2b2b2;
 	box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
 	background: rgb(0,0,0); /* Old browsers */
@@ -402,7 +405,6 @@ li.action {
 #footer-buttons > span {
 	padding: 0.2em;
 
-	font-variant: small-caps;
 	font-size: 80%;
 }
 
@@ -437,8 +439,10 @@ li.action {
 /* Table of contents */
 #dw__toc {
 	display: inline-block; /* Fit the width to contents */
-	margin: 0.5em;
+	float: right;
+	margin: 1em;
 	padding: 0.5em;
+	font-size: 80%;
 
 	border: 0.1em solid rgb(150, 150, 150);
 	border-radius: 0.3em;
@@ -465,14 +469,13 @@ li.action {
 ul.toc {
 	margin-top: 0;
 	margin-bottom: 0;
-
-	font-variant: small-caps;
 }
 
 /* The box around "Create this page," "edit this page," or "show page," defined
    in this template */
 #content-edit {
-	float: right;
+	/*float: right;*/
+	text-align: right;
 	margin: 0.5em;
 	margin-right: 0;
 	padding: 0.2em;
@@ -533,24 +536,3 @@ fieldset, div.input, div.selection, div.other {
 .toolbutton {
 	background: white;
 }
-
-/*
- FRONT PAGE LINK GALLERIES
-*/
-
-div.link-gallery {
-	text-align: center;
-}
-
-div.link-gallery > div {
-	display: inline-block;  
-	margin-left: 1em;
-	margin-right: 1em;
-}
-
-div.link-gallery > div > span {
-	display: block;
-
-	font-size: 130%;
-	font-variant: small-caps;
-}
diff --git a/styles/vollkorn.css b/styles/vollkorn.css
deleted file mode 100644
index 79144cf..0000000
--- a/styles/vollkorn.css
+++ /dev/null
@@ -1,55 +0,0 @@
-@font-face {
-	font-family: 'Vollkorn';
-	src: url('VollkornRegular.ttf') format('truetype');
-	font-weight: 400;
-	font-style: normal;
-}
-
-@font-face {
-	font-family: 'Vollkorn';
-	src: url('VollkornItalic.ttf') format('truetype');
-	font-weight: 400;
-	font-style: italic;
-}
-
-@font-face {
-	font-family: 'Vollkorn';
-	src: url('VollkornMedium.ttf') format('truetype');
-	font-weight: 500;
-	font-style: normal;
-}
-
-@font-face {
-	font-family: 'Vollkorn';
-	src: url('VollkornMediumItalic.ttf') format('truetype');
-	font-weight: 500;
-	font-style: italic;
-}
-
-@font-face {
-	font-family: 'Vollkorn';
-	src: url('VollkornSemibold.ttf') format('truetype');
-	font-weight: 700;
-	font-style: normal;
-}
-
-@font-face {
-	font-family: 'Vollkorn';
-	src: url('VollkornSemiboldItalic.ttf') format('truetype');
-	font-weight: 700;
-	font-style: italic;
-}
-
-@font-face {
-	font-family: 'Vollkorn';
-	src: url('VollkornBold.ttf') format('truetype');
-	font-weight: 900;
-	font-style: normal;
-}
-
-@font-face {
-	font-family: 'Vollkorn';
-	src: url('VollkornBoldItalic.ttf') format('truetype');
-	font-weight: 900;
-	font-style: italic;
-}