Commit 6d4a2069 authored by effulgentsia's avatar effulgentsia

Issue #3085212 by komalkolekar, lauriii, saschaeggi, DyanneNova, ckrina,...

Issue #3085212 by komalkolekar, lauriii, saschaeggi, DyanneNova, ckrina, Jongruk Timmanee: Redesign maintenance page
parent 0d3f8d2e
......@@ -864,6 +864,7 @@ libyaml
licious
lified
lightbulb
lightdiamond
lightninggreen
linebreak
linebreaks
......
......@@ -22,6 +22,9 @@
/*
* Common.
*/
/**
* Shadows.
*/
/*
* Inputs.
*/ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
......
......@@ -10,6 +10,7 @@
--color-whitesmoke-light: #fafbfd;
--color-whitesmoke-o-40: rgba(243, 244, 249, 0.4);
/* Secondary. */
--color-lightdiamond: #dedfe4;
--color-lightgray: #d4d4d8;
--color-lightgray-o-80: rgba(212, 212, 218, 0.8);
--color-grayblue: #8e929c;
......@@ -77,6 +78,10 @@
--outline-size: 2px;
--focus-outline: var(--outline-size) dotted transparent;
--focus-box-shadow: 0 0 0 var(--focus-border-offset-size) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size)) var(--color-focus);
/**
* Shadows.
*/
--shadow-z3: 0 14px 30px rgba(0, 0, 0, 0.1);
/*
* Inputs.
*/
......
......@@ -12,21 +12,30 @@
.maintenance-page {
min-height: 100%;
background-color: #e0e0d8;
background-image: radial-gradient(hsl(203, 2%, 90%), hsl(203, 2%, 95%));
background-repeat: repeat;
background-position: left top, 50% 50%; /* LTR */
background-color: #dedfe4;
}
[dir="rtl"] .maintenance-page {
background-position: right top, 50% 50%;
.site-name {
margin-top: 1rem;
word-wrap: break-word;
color: #545560;
font-size: 1.424rem;
}
.page-title {
word-wrap: break-word;
color: #0074bd;
font-size: 2em;
line-height: 1.2em;
.site-name,
.title {
margin-bottom: 1.5rem;
}
.content {
margin-bottom: 1rem;
color: #545560;
}
.site-name,
.title,
.content {
max-width: 512px;
}
/**
......@@ -112,7 +121,10 @@
width: auto;
margin-right: 1.25em;
margin-left: 1.25em;
padding: 3rem;
border-radius: 8px;
background: #fff;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
}
.layout-container:after { /* no reason for a clearfix in the markup */
......@@ -124,15 +136,7 @@
@media all and (max-width: 48em) { /* 768px */
.layout-container {
margin: 1.25em;
padding: 10px 20px;
}
.page-title {
margin-right: 2em; /* LTR */
margin-bottom: 0.725em;
}
[dir="rtl"] .page-title {
margin-right: 0;
margin-left: 2em;
padding: 1rem 1.5rem;
}
}
......@@ -153,26 +157,13 @@
height: 100%;
margin: 0;
}
.layout-container {
/**
* Needed to override rules from system-admin--layout.pcss.
*/
.layout-container.layout-container.layout-container {
width: 75%;
max-width: 770px;
max-width: 940px;
margin: 0 auto;
padding: 20px 0 40px 0;
border-radius: 5px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* Positioning sidebar & content */
main {
float: left; /* LTR */
clear: none;
box-sizing: border-box;
width: 65%;
padding-right: 3.85em;
padding-left: 3.85em;
}
[dir="rtl"] main {
float: right;
}
ul {
margin: 0.25em 0;
......@@ -188,11 +179,6 @@
[dir="rtl"] .layout-sidebar-first {
float: right;
}
/* Margins for sitename */
.page-title {
margin: 0.75em 1.9em;
}
}
/**
......
......@@ -3,23 +3,34 @@
* Maintenance theming.
*/
@import "../base/variables.pcss.css";
.maintenance-page {
min-height: 100%;
background-color: #e0e0d8;
background-image: -webkit-radial-gradient(hsl(203, 2%, 90%), hsl(203, 2%, 95%));
background-image: radial-gradient(hsl(203, 2%, 90%), hsl(203, 2%, 95%));
background-repeat: repeat;
background-position: left top, 50% 50%; /* LTR */
}
[dir="rtl"] .maintenance-page {
background-position: right top, 50% 50%;
background-color: var(--color-lightdiamond);
}
.page-title {
.site-name {
margin-top: var(--space-m);
word-wrap: break-word;
color: #0074bd;
font-size: 2em;
line-height: 1.2em;
color: var(--color-davysgray);
font-size: var(--font-size-h4);
}
.site-name,
.title {
margin-bottom: var(--space-l);
}
.content {
margin-bottom: var(--space-m);
color: var(--color-davysgray);
}
.site-name,
.title,
.content {
max-width: 512px;
}
/**
......@@ -103,7 +114,10 @@
width: auto;
margin-right: 1.25em;
margin-left: 1.25em;
padding: var(--space-xl);
border-radius: 8px;
background: #fff;
box-shadow: var(--shadow-z3);
}
.layout-container:after { /* no reason for a clearfix in the markup */
display: table;
......@@ -114,15 +128,7 @@
@media all and (max-width: 48em) { /* 768px */
.layout-container {
margin: 1.25em;
padding: 10px 20px;
}
.page-title {
margin-right: 2em; /* LTR */
margin-bottom: 0.725em;
}
[dir="rtl"] .page-title {
margin-right: 0;
margin-left: 2em;
padding: var(--space-m) var(--space-l);
}
}
......@@ -143,26 +149,13 @@
height: 100%;
margin: 0;
}
.layout-container {
/**
* Needed to override rules from system-admin--layout.pcss.
*/
.layout-container.layout-container.layout-container {
width: 75%;
max-width: 770px;
max-width: 940px;
margin: 0 auto;
padding: 20px 0 40px 0;
border-radius: 5px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* Positioning sidebar & content */
main {
float: left; /* LTR */
clear: none;
box-sizing: border-box;
width: 65%;
padding-right: 3.85em;
padding-left: 3.85em;
}
[dir="rtl"] main {
float: right;
}
ul {
margin: 0.25em 0;
......@@ -178,11 +171,6 @@
[dir="rtl"] .layout-sidebar-first {
float: right;
}
/* Margins for sitename */
.page-title {
margin: 0.75em 1.9em;
}
}
/**
......
......@@ -13,7 +13,7 @@
<header role="banner">
{% if site_name %}
<h1 class="page-title">{{ site_name }}</h1>
<h2 class="site-name">{{ site_name }}</h2>
{% endif %}
</header>
......@@ -25,10 +25,12 @@
<main role="main">
{% if title %}
<h1>{{ title }}</h1>
<h1 class="title">{{ title }}</h1>
{% endif %}
{{ page.highlighted }}
{{ page.content }}
<div class="content">
{{ page.content }}
</div>
</main>
{% if page.page_bottom %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment