From b2df5d68a71662f83c27edace4c828ccb5ea07e1 Mon Sep 17 00:00:00 2001
From: Paweł Redman <pawel.redman@gmail.com>
Date: Wed, 27 May 2020 17:37:39 +0200
Subject: 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.
---
 styles/opticks.css | 60 +++++++++++++++++++-----------------------------------
 1 file changed, 21 insertions(+), 39 deletions(-)

(limited to 'styles/opticks.css')

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;
-}
-- 
cgit