From e6913f7d3f3dafaba34e22ac0a4cb94d3ef9ab83 Mon Sep 17 00:00:00 2001 From: Dan Scott Date: Mon, 2 Apr 2018 09:56:14 -0400 Subject: [PATCH 1/6] Responsiveness: remove global font-size: 75% Use the default font size and allow users to adjust up or down if necessary. 75% can be quite hard to see on modern high-resolution screens, for example. Signed-off-by: Dan Scott --- docs/schemaorg.css | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/schemaorg.css b/docs/schemaorg.css index 40ebfd31e9..75800f8db6 100644 --- a/docs/schemaorg.css +++ b/docs/schemaorg.css @@ -38,7 +38,6 @@ font-size: x-small; body { color: #3A4956; -font-size: 75%; font-family: "Lucida Grande" , "Lucida Sans Unicode" , Verdana, Tahoma, Arial, sans-serif; line-height: 160%; margin: 0; From cf5eb4b64013aa615e938e41fa2a22182c6f5e9c Mon Sep 17 00:00:00 2001 From: Dan Scott Date: Mon, 2 Apr 2018 10:08:01 -0400 Subject: [PATCH 2/6] Responsiveness: set min-width and max-width only for large media If the width of the display media is greater than 960px, then we can set the min-width and max-width accordingly. Otherwise, let's leave that unspecified and let the content respond to the the device. Signed-off-by: Dan Scott --- docs/schemaorg.css | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/docs/schemaorg.css b/docs/schemaorg.css index 75800f8db6..fb3bf8d7ac 100644 --- a/docs/schemaorg.css +++ b/docs/schemaorg.css @@ -18,8 +18,6 @@ border-bottom: solid 1px #CCCCCC; text-align: left; } #mainContent, #footer { - max-width: 960px; - min-width: 350px; margin: 0 auto; } #footer @@ -28,8 +26,6 @@ text-align: right; font-size: x-small; } #mainContent, #footer, .wrapper { - max-width: 960px; - min-width: 350px; margin: 0 auto !important; padding: 0 40px; } @@ -343,12 +339,6 @@ padding-top: 1em; float: right; padding: 10px 0; } -#mainContent, #footer, .wrapper { - max-width: 960px; - min-width: 350px; - margin: 0 auto !important; - padding: 0 40px; -} #sitename { max-width: 500px; min-width: auto; @@ -542,3 +532,10 @@ a.ext.ext-attic:hover { .tag { color: #000; } /* div, span, etc */ .atn { color: #000; } /* href, datetime, */ .custom { color: #660003; } /* itemscope, itemtype, etc,. */ + + +@media (min-width: 960px) { + #mainContent, #footer, .wrapper { + max-width: 960px; + } +} From 925d4532761f38be8e6552dfdddc722391c58b55 Mon Sep 17 00:00:00 2001 From: Dan Scott Date: Mon, 2 Apr 2018 10:16:49 -0400 Subject: [PATCH 3/6] Responsiveness: specify padding in ems not px If we work with a relative unit like ems then the design can be more responsive. In this case, 40px was a huge amount of padding on smaller screens; use 0.5em padding and increase that on larger displays. Also, remove the CSS declarations that were made redundant by subsequent declarations. Signed-off-by: Dan Scott --- docs/schemaorg.css | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/docs/schemaorg.css b/docs/schemaorg.css index fb3bf8d7ac..ad72a3ca1e 100644 --- a/docs/schemaorg.css +++ b/docs/schemaorg.css @@ -12,22 +12,17 @@ position: relative; } #mainContent { -/* margin: 0 50px 15px 50px; */ -padding-bottom: 5px; border-bottom: solid 1px #CCCCCC; text-align: left; } -#mainContent, #footer { - margin: 0 auto; -} #footer { text-align: right; font-size: x-small; } #mainContent, #footer, .wrapper { - margin: 0 auto !important; - padding: 0 40px; + margin: 0 auto !important; + padding: 0 0.5em; } /* -- general -- */ @@ -537,5 +532,6 @@ a.ext.ext-attic:hover { @media (min-width: 960px) { #mainContent, #footer, .wrapper { max-width: 960px; + padding: 0 1em; } } From 1e7bfe6cfd31eb5f4f9c2777ffc6566e9688c8f1 Mon Sep 17 00:00:00 2001 From: Dan Scott Date: Mon, 2 Apr 2018 10:34:38 -0400 Subject: [PATCH 4/6] Responsiveness: property table display Allow table elements to display as inline-block elements on smaller screens. Definitely not perfect, but allows the content to be viewed without pinching and zooming or scrolling back and forth. Signed-off-by: Dan Scott --- docs/schemaorg.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/schemaorg.css b/docs/schemaorg.css index ad72a3ca1e..f9dfcd51cd 100644 --- a/docs/schemaorg.css +++ b/docs/schemaorg.css @@ -528,6 +528,14 @@ a.ext.ext-attic:hover { .atn { color: #000; } /* href, datetime, */ .custom { color: #660003; } /* itemscope, itemtype, etc,. */ +@media (max-width: 640px) { + table.definition-table th, table.definition-table td { + display: inline-block; + } + table.definition-table br { + display: none; + } +} @media (min-width: 960px) { #mainContent, #footer, .wrapper { From f4427b42248fcf4e6ab1495a01a482d2067915da Mon Sep 17 00:00:00 2001 From: Dan Scott Date: Mon, 2 Apr 2018 10:41:43 -0400 Subject: [PATCH 5/6] Responsiveness: less whitespace at page start 2em in an h1 is a lot of white space; cut that in half and it works reasonably well on small and big screens alike. Signed-off-by: Dan Scott --- docs/schemaorg.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/schemaorg.css b/docs/schemaorg.css index f9dfcd51cd..2cca9f4d99 100644 --- a/docs/schemaorg.css +++ b/docs/schemaorg.css @@ -44,7 +44,7 @@ h1 font: bold 24px Helvetica, Arial, sans-serif; color: #990000; letter-spacing: -1px; -margin: 2em 0 0 0; +margin: 1em 0 0 0; } h2 { From 7291516f3d96e1ebee6f38e2abda39e23114bc37 Mon Sep 17 00:00:00 2001 From: Dan Scott Date: Mon, 2 Apr 2018 10:56:52 -0400 Subject: [PATCH 6/6] Responsiveness: add a meta viewport Also use generally accepted HTML5 html and meta elements, instead of XHTML, to simplify and avoid potential quirks. Signed-off-by: Dan Scott --- templates/developers.tpl | 5 +++-- templates/full.tpl | 5 +++-- templates/fullReleasePage.tpl | 5 +++-- templates/genericTermPageHeader.tpl | 5 +++-- templates/homepage.tpl | 6 +++--- templates/schemas.tpl | 5 +++-- templates/siteDebug.tpl | 5 +++-- templates/tocVersionPage.tpl | 5 +++-- templates/wrongExt.tpl | 5 +++-- 9 files changed, 27 insertions(+), 19 deletions(-) diff --git a/templates/developers.tpl b/templates/developers.tpl index 084fdd6d82..c97d125337 100644 --- a/templates/developers.tpl +++ b/templates/developers.tpl @@ -1,8 +1,9 @@ - + - + Schemas - schema.org + diff --git a/templates/full.tpl b/templates/full.tpl index 9e3a203497..9a14945361 100644 --- a/templates/full.tpl +++ b/templates/full.tpl @@ -1,8 +1,9 @@ - + - + Full Hierarchy - {{ sitename }} + diff --git a/templates/fullReleasePage.tpl b/templates/fullReleasePage.tpl index 2236e3d4f3..ce0ddb0820 100644 --- a/templates/fullReleasePage.tpl +++ b/templates/fullReleasePage.tpl @@ -1,8 +1,9 @@ - + - + Full Release Summary: Schema.org - {{requested_version}} - {{ releasedate }} + diff --git a/templates/genericTermPageHeader.tpl b/templates/genericTermPageHeader.tpl index f2001f507e..493a2aee91 100644 --- a/templates/genericTermPageHeader.tpl +++ b/templates/genericTermPageHeader.tpl @@ -1,10 +1,11 @@ - + - + {% if noindexpage %}{% endif %} {{ entry }} - {{ sitename }} + diff --git a/templates/homepage.tpl b/templates/homepage.tpl index 791e0b5645..0a1ee6bb8d 100644 --- a/templates/homepage.tpl +++ b/templates/homepage.tpl @@ -1,12 +1,12 @@ - + - + Home - {{ sitename }} + - {% include 'basicPageHeader.tpl' with context %} diff --git a/templates/schemas.tpl b/templates/schemas.tpl index b6ea39039f..4afbc3b131 100644 --- a/templates/schemas.tpl +++ b/templates/schemas.tpl @@ -1,8 +1,9 @@ - + - + Schemas - schema.org + diff --git a/templates/siteDebug.tpl b/templates/siteDebug.tpl index f084ff676c..aae00950d3 100644 --- a/templates/siteDebug.tpl +++ b/templates/siteDebug.tpl @@ -1,8 +1,9 @@ - + - + - {{ sitename }} + diff --git a/templates/tocVersionPage.tpl b/templates/tocVersionPage.tpl index 378171fc34..81c3c87e37 100644 --- a/templates/tocVersionPage.tpl +++ b/templates/tocVersionPage.tpl @@ -1,8 +1,9 @@ - + - + Schema.org - Full Releases + diff --git a/templates/wrongExt.tpl b/templates/wrongExt.tpl index 3296b59795..f566c8f47f 100644 --- a/templates/wrongExt.tpl +++ b/templates/wrongExt.tpl @@ -1,8 +1,9 @@ - + - + - {{ sitename }} +