Clean up the "maintenance page" component in Bartik

i'm working at this at drupalcon barcelona sprint. my mentor is jp.stacey. i'm working on a patch as per https://www.drupal.org/contributor-tasks/create-patch

I've added file description and remove an un used selector and changed the page title class and id to follow the format of other templates.

Regarding problem and proposed resolution, i have changed id's into classes and selectors that lean on it. Also reformat css declaration by formating guide.

Looks like the font is missing.

#header {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

@mgifford You are right, mistake by my side, sorry about it.
Fixed in this patch and reduced class for main container.

<div class="main" class="clearfix"> -> <div class="main clearfix">

You don't want a space between I assume:

+use Symfony\Component\Routing\Exception\ResourceNotFoundException;
+
 use \Drupal\Core\Database\Connection;

Are there going to be performance issues with this patch? It's a lot bigger than I expected.

Visually it looks identical now.

While creating a patch i have created a mistake.
This one fix it.

So this just removes the space from your previous patch?

I'm really close to RTBC'ing this, but really would like to have someone do a code review given the size of the patch.

@mgifford difference between patch #8 and #10 is in merging dev and 8.0.x branch, that's the reason why patch #8 have that size.

Created interdiffs between #6 #8 and #8 #10.

Thanks for the patch, @simply021. The version in #10 applies and there's no visual difference, so that's really good. (I don't think we need to worry about the interdiffs: the patch in #10 is small and only touches what it needs to.)

While we're here though, I wonder if it's worth having a go at some of the markup, too? I notice that we still have a wrapper div with class main, even though we have a main element, for example. Perhaps there's one or two things like that we could sort out?

In this patch i'v done following:
-Since there is no site-branding printing variable in maintenance-page.html.twig i have removed in maintenance-page.css 37-51 following for .site-branding-text selector:

.maintenance-page .site-branding-text {
  margin-bottom: 50px;
  margin-left: 0; /* LTR */
  padding-top: 20px;
  font-size: 90%;
}
[dir="rtl"] .maintenance-page .site-branding-text {
  margin-right: 0;
}
.maintenance-page .site-branding-text,
.maintenance-page .site-branding-text a,
.maintenance-page .site-branding-text a:hover,
.maintenance-page .site-branding-text a:focus {
  color: #777;
}

-Converting padding properties for selector [dir="rtl"] .maintenance-page #content .section {
from

padding-left: 0;
padding-right: 10px;

into
padding: 0 10px 0 0;
-Leaving id="header" because inside sites name and site slogan inherit font from
core/themes/bartik/css/components/header.css following:

#header {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

-Should decide how to handle font from selector #header since it still lives inside page.html.twig
my proposal would be to change class selector from .header into .maintenance-header not to overlap with other styles since we have in colors.css

#header {
  background-color: #1d84c3;
  background-image: -webkit-linear-gradient(top, #055a8e 0%, #1d84c3 100%);
  background-image: linear-gradient(to bottom, #055a8e 0%, #1d84c3 100%);
}

-Removing <div class="main clearfix"> ,formating markup and changing selector to maintain style

-Changing id="page-title" into class="page-title" is causing problem because
<h1 class="title" id="page-title"> inherit from
core/themes/bartik/css/components/page-title.css following:

.page-title {
  font-size: 2em;
  line-height: 1em;
}

My proposal would be same as for header to change class selector from #page-title into .maintenance-title

-Reverting usage of selector .header into #header for @media query before it's decided

-Proposal to change css properties for selector .maintenance-page #header
from:

background-color: #fff;
background-image: none;

into:
background: #fff none;

Tested manually and verified maintenance page working fine as mentioned in comment #18. screen shot attached of test.

+++ b/core/themes/bartik/css/maintenance-page.css
@@ -2,68 +2,52 @@ body.maintenance-page {
+.maintenance-page #content .section {
...
+[dir="rtl"] .maintenance-page #content .section {

Why do we have usage of the #content here?

@lauriii I applied #18 but patch doesn't apply so i rerolled the patch and made the changes.

Because of the changes made as a part of #3024527: Add and configure stylelint-order, this patch needed to be rerolled by hand (so I can't provide an interdiff).

Using the notes from #18, I included the font family for the .header in the css, otherwise it's overwritten. I also used the #maintenance id so that the background colors from Bartik's main theme don't apply to it.

Since bartik has been removed in D10 moving this ticket over to the contrib module.