Twenty Twenty, Logótipo e Título em simultâneo

Ao personalizar o tema Twenty Twenty do blog, deparei-me que não é possível visualizar o logótipo e o título ao mesmo tempo. Se colocar-mos um logótipo e de seguida preencher o título ele não vai estar visível, ou se têm um ou se têm outro, com os dois o tema da preferência a mostrar o logótipo.

Se analisar-mos o código fonte, vamos ver:

<h1 class="site-logo">
    <a href="http://yhdeetc.cluster030.hosting.ovh.net/" class="custom-logo-link" rel="home">...</a>
    <span class="screen-reader-text">Ivo Vargas</span></h1>

Podemos ver que o titulo se encontra no html com apenas uma classe CSS “screen-reader-text”:

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    word-break: normal;
}

O código que está a fazer com que o título fique escondido é :

clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
overflow: hidden;

Podemos começar por colocar o seguinte código em: overflow: Apresentação > Personalizar > CSS Adicional

.screen-reader-text {
     clip: auto;
     -webkit-clip-path: none;
     clip-path: none;
     overflow: visible;
 }

O titulo deste modo já é visível, mas torna-mos outras coisas visíveis que não se queria. Temos de ser mais específicos:

.site-logo > .screen-reader-text {
     clip: auto;
     -webkit-clip-path: none;
     clip-path: none;
     overflow: visible;
 }

Agora que já tornamos apenas o titulo visível, já o podemos colocar na posição que se pretende. No meu caso quero que ele se situe por cima da descrição.
E temos de considerar como vai ficar nas outras resoluções:

@media (min-width: 700px) {
	.site-logo {
		font-size: 30px;
	}
	
	.site-logo > .screen-reader-text {
			clip: auto;
			-webkit-clip-path: none;
			clip-path: none;
			overflow: visible;
			font-size: 1.8rem;
			font-weight: 500;
			letter-spacing: -0.0311em;
			color: #fe7c0d;
			width: auto;
		  text-align: center;
		  position: relative !important;
	}
}

@media (min-width: 1000px) {
	.site-logo img {
		float: left;
	}
	
	.site-logo > .screen-reader-text {
		top: 40px;
		margin-left: 24px;
		position: absolute !important;
	}
}