css: Fix some minor warnings
All checks were successful
Deploy Lecture site / build (push) Successful in 3s

landing: optimize for mobile view
This commit is contained in:
Schallbert 2024-09-09 21:47:57 +02:00
parent 01a652c7f1
commit 5524e8bc4a
2 changed files with 90 additions and 92 deletions

View File

@ -24,7 +24,7 @@
position:fixed; position:fixed;
background:#000; background:#000;
opacity:.8; opacity:.8;
filter:alpha(opacity=80) filter:alpha(opacity=80);
} }
.mfp-wrap { .mfp-wrap {
top:0; top:0;
@ -163,7 +163,7 @@ button::-moz-focus-inner {
.mfp-close:hover, .mfp-close:hover,
.mfp-close:focus { .mfp-close:focus {
opacity:1; opacity:1;
filter:alpha(opacity=100) filter:alpha(opacity=100);
} }
.mfp-close:active { .mfp-close:active {
top:1px top:1px
@ -205,7 +205,7 @@ button::-moz-focus-inner {
.mfp-arrow:hover, .mfp-arrow:hover,
.mfp-arrow:focus { .mfp-arrow:focus {
opacity:1; opacity:1;
filter:alpha(opacity=100) filter:alpha(opacity=100);
} }
.mfp-arrow:before, .mfp-arrow:before,
.mfp-arrow:after, .mfp-arrow:after,
@ -625,7 +625,7 @@ h6 {
} }
small, small,
.small { .small {
font-size:.75em font-size:0.75em;
} }
p { p {
margin-bottom:1.3em margin-bottom:1.3em
@ -775,7 +775,7 @@ figcaption {
margin-bottom:0.5em; margin-bottom:0.5em;
color:#eee; color:#eee;
font-family:Georgia,Times,serif; font-family:Georgia,Times,serif;
font-size:.75em font-size:0.75em;
} }
figcaption a { figcaption a {
-webkit-transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out;
@ -883,7 +883,7 @@ label {
cursor:pointer cursor:pointer
} }
label small { label small {
font-size:.75em font-size:0.75em;
} }
label input, label input,
label textarea, label textarea,
@ -1113,7 +1113,7 @@ table {
margin-bottom:1em; margin-bottom:1em;
width:100%; width:100%;
font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif; font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
font-size:.75em; font-size:0.75em;;
border-collapse:collapse; border-collapse:collapse;
overflow-x:auto overflow-x:auto
} }
@ -1159,7 +1159,7 @@ th {
margin-bottom:0.25em; margin-bottom:0.25em;
padding:0.5em 1em; padding:0.5em 1em;
font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif; font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
font-size:.75em; font-size:0.75em;;
font-weight:bold; font-weight:bold;
text-align:center; text-align:center;
text-decoration:none; text-decoration:none;
@ -1305,9 +1305,9 @@ th {
.btn--disabled { .btn--disabled {
pointer-events:none; pointer-events:none;
cursor:not-allowed; cursor:not-allowed;
opacity:0.65;
filter:alpha(opacity=65); filter:alpha(opacity=65);
box-shadow:none; box-shadow:none;
opacity:0.65
} }
.btn--x-large { .btn--x-large {
font-size:1.25em font-size:1.25em
@ -1323,7 +1323,7 @@ th {
padding:1em; padding:1em;
color:#eaeaea; color:#eaeaea;
font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif; font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
font-size:.75em !important; font-size:0.75em;;
text-indent:initial; text-indent:initial;
background-color:#434851; background-color:#434851;
border-radius:4px; border-radius:4px;
@ -1365,7 +1365,7 @@ th {
padding:1em; padding:1em;
color:#eaeaea; color:#eaeaea;
font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif; font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
font-size:.75em !important; font-size:0.75em;;
text-indent:initial; text-indent:initial;
background-color:#1e4341; background-color:#1e4341;
border-radius:4px; border-radius:4px;
@ -1407,7 +1407,7 @@ th {
padding:1em; padding:1em;
color:#eaeaea; color:#eaeaea;
font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif; font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
font-size:.75em !important; font-size:0.75em;;
text-indent:initial; text-indent:initial;
background-color:#29414f; background-color:#29414f;
border-radius:4px; border-radius:4px;
@ -1449,7 +1449,7 @@ th {
padding:1em; padding:1em;
color:#eaeaea; color:#eaeaea;
font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif; font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
font-size:.75em !important; font-size:0.75em;;
text-indent:initial; text-indent:initial;
background-color:#483b2b; background-color:#483b2b;
border-radius:4px; border-radius:4px;
@ -1491,7 +1491,7 @@ th {
padding:1em; padding:1em;
color:#eaeaea; color:#eaeaea;
font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif; font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
font-size:.75em !important; font-size:0.75em;
text-indent:initial; text-indent:initial;
background-color:#2a4336; background-color:#2a4336;
border-radius:4px; border-radius:4px;
@ -1533,7 +1533,7 @@ th {
padding:1em; padding:1em;
color:#eaeaea; color:#eaeaea;
font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif; font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
font-size:.75em !important; font-size:0.75em;;
text-indent:initial; text-indent:initial;
background-color:#4d353c; background-color:#4d353c;
border-radius:4px; border-radius:4px;
@ -1680,7 +1680,7 @@ th {
.breadcrumbs ol { .breadcrumbs ol {
padding:0; padding:0;
list-style:none; list-style:none;
font-size:.75em font-size:0.75em;
} }
@media (min-width: 64em) { @media (min-width: 64em) {
.breadcrumbs ol { .breadcrumbs ol {
@ -1954,7 +1954,7 @@ th {
display:inline-block; display:inline-block;
padding:0.5em 2.5em 0.5em 1em; padding:0.5em 2.5em 0.5em 1em;
color:#7a8288; color:#7a8288;
font-size:.75em; font-size:0.75em;;
font-weight:bold; font-weight:bold;
border:1px solid #bdc1c4; border:1px solid #bdc1c4;
border-radius:4px; border-radius:4px;
@ -2079,7 +2079,7 @@ th {
margin:0.5rem 0; margin:0.5rem 0;
padding:0.25rem 0; padding:0.25rem 0;
font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif; font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
font-size:.75em; font-size:0.75em;;
font-weight:bold; font-weight:bold;
text-transform:uppercase; text-transform:uppercase;
border-bottom:1px solid #51555d border-bottom:1px solid #51555d
@ -2095,7 +2095,7 @@ th {
} }
.toc .nav__title { .toc .nav__title {
color:#fff; color:#fff;
font-size:.75em; font-size:0.75em;;
background:#00a877; background:#00a877;
border-top-left-radius:4px; border-top-left-radius:4px;
border-top-right-radius:4px border-top-right-radius:4px
@ -2109,7 +2109,7 @@ th {
padding:0; padding:0;
width:100%; width:100%;
list-style:none; list-style:none;
font-size:.75em font-size:0.75em;
} }
@media (min-width: 64em) { @media (min-width: 64em) {
.toc__menu { .toc__menu {
@ -2207,7 +2207,7 @@ th {
padding-top:5px; padding-top:5px;
padding-bottom:5px; padding-bottom:5px;
font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif; font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
font-size:.75em; font-size:0.75em;;
text-transform:uppercase text-transform:uppercase
} }
.page__footer-follow li+li:before { .page__footer-follow li+li:before {
@ -2298,7 +2298,7 @@ th {
} }
.search-content .results__found { .search-content .results__found {
margin-top:0.5em; margin-top:0.5em;
font-size:.75em font-size:0.75em;
} }
.search-content .archive__item { .search-content .archive__item {
margin-bottom:2em margin-bottom:2em
@ -2340,7 +2340,7 @@ figure.highlight {
background:#263238; background:#263238;
color:#eff; color:#eff;
font-family:Monaco,Consolas,"Lucida Console",monospace; font-family:Monaco,Consolas,"Lucida Console",monospace;
font-size:.75em; font-size:0.75em;;
line-height:1.8; line-height:1.8;
border-radius:4px border-radius:4px
} }
@ -2958,7 +2958,7 @@ body:hover .visually-hidden button {
.footnotes li, .footnotes li,
.footnotes p { .footnotes p {
margin-bottom:0; margin-bottom:0;
font-size:.75em font-size:0.75em;
} }
a.reversefootnote { a.reversefootnote {
color:#7a8288; color:#7a8288;
@ -3126,10 +3126,10 @@ body {
.page__content dd { .page__content dd {
margin-left:1em; margin-left:1em;
font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif; font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
font-size:.75em font-size:0.75em;
} }
.page__content .small { .page__content .small {
font-size:.75em font-size:0.75em;
} }
.page__content blockquote+.small { .page__content blockquote+.small {
margin-top:-1.5em; margin-top:-1.5em;
@ -3246,7 +3246,7 @@ body {
} }
.page__share-title { .page__share-title {
margin-bottom:10px; margin-bottom:10px;
font-size:.75em; font-size:0.75em;;
text-transform:uppercase text-transform:uppercase
} }
.page__meta, .page__meta,
@ -3254,7 +3254,7 @@ body {
margin-top:2em; margin-top:2em;
color:#eee; color:#eee;
font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif; font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
font-size:.75em font-size:0.75em;
} }
.page__meta p, .page__meta p,
.comment__date p { .comment__date p {
@ -3266,7 +3266,7 @@ body {
} }
.page__meta-title { .page__meta-title {
margin-bottom:10px; margin-bottom:10px;
font-size:.75em; font-size:0.75em;;
text-transform:uppercase text-transform:uppercase
} }
.page__meta-sep::before { .page__meta-sep::before {
@ -3323,7 +3323,7 @@ body {
grid-template-columns:repeat(2, 1fr); grid-template-columns:repeat(2, 1fr);
margin:1.414em 0; margin:1.414em 0;
padding:0; padding:0;
font-size:0.75em; font-size:0.75em;;
list-style:none list-style:none
} }
@media (min-width: 64em) { @media (min-width: 64em) {
@ -3363,7 +3363,7 @@ body {
margin-top:2rem; margin-top:2rem;
margin-bottom:10px; margin-bottom:10px;
padding-top:2rem; padding-top:2rem;
font-size:.75em; font-size:0.75em;;
border-top:1px solid #51555d; border-top:1px solid #51555d;
text-transform:uppercase text-transform:uppercase
} }
@ -3467,7 +3467,7 @@ body {
} }
.page__related-title { .page__related-title {
margin-bottom:10px; margin-bottom:10px;
font-size:.75em; font-size:0.75em;;
text-transform:uppercase text-transform:uppercase
} }
@media (min-width: 64em) { @media (min-width: 64em) {
@ -3551,7 +3551,7 @@ body {
} }
.archive__item-excerpt { .archive__item-excerpt {
margin-top:0; margin-top:0;
font-size:.75em font-size:0.75em;
} }
.archive__item-excerpt+p { .archive__item-excerpt+p {
text-indent:0 text-indent:0
@ -3669,7 +3669,7 @@ body {
@media (min-width: 48em) { @media (min-width: 48em) {
.grid__item .archive__item-excerpt { .grid__item .archive__item-excerpt {
display:block; display:block;
font-size:.75em font-size:0.75em;
} }
} }
@media (min-width: 37.5em) { @media (min-width: 37.5em) {
@ -4495,16 +4495,15 @@ h2 {
border:none; border:none;
text-decoration:underline text-decoration:underline
} }
@media (max-width: 768px) { @media (max-width: 1200px) {
.flex-post-child h2 { .flex-post-child h2 {
margin-top:1em margin-top:1em;
} }
} }
.flex-post-child p { .flex-post-child p {
text-decoration:none text-decoration:none
} }
.flex-post-child .fp-meta { .flex-post-child .fp-meta {
font-size:.75em;
margin-top:3px margin-top:3px
} }
.flex-post-parent { .flex-post-parent {
@ -4512,7 +4511,7 @@ h2 {
gap:3% gap:3%
} }
@media (max-width: 768px) { @media (max-width: 1200px) {
.flex-post-parent { .flex-post-parent {
flex-direction:column; flex-direction:column;
gap:20px; gap:20px;
@ -4521,7 +4520,7 @@ h2 {
.fp-section { .fp-section {
margin:1em 3em margin:1em 3em
} }
@media (max-width: 768px) { @media (max-width: 1200px) {
.fp-section { .fp-section {
margin:1em .5em; margin:1em .5em;
font-size:1.25em; font-size:1.25em;

View File

@ -31,62 +31,61 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
</head> </head>
<body class="layout--single wide"> <body class="layout--single">
<div class="fp-section"> <div id="main" role="main">
<div class="author__avatar"> <div class="page__inner-wrap">
<a href="https://schallbert.de"><img src="./_assets/images/favicon/android-chrome-192x192.png" alt="Image: Schallbert" itemprop="image" style="vertical-align: middle;"/></a> <div class="author__avatar">
<span style="vertical-align: middle; padding-left:10px; font-size:2.0rem; font-weight:bold">Vorträge</span> <a href="https://schallbert.de"><img src="./_assets/images/favicon/android-chrome-192x192.png" alt="Image: Schallbert" itemprop="image" style="vertical-align: middle;"/></a>
<span style="vertical-align: middle; padding-left:10px; font-size:2.0rem; font-weight:bold">Vorträge</span>
</div>
<p>Die meisten meiner Vorträge sind nicht öffentlich. So habe ich z.B. schon über Systems Engineering, <a href="https://blog.schallbert.de/projects-software/platformio_gtestgmock/" target="_blank" rel="noopener noreferrer"
rel="nofollow">die Arbeit mit gtest/gmock</a>,
<a href="https://en.cppreference.com/w/cpp/memory" target="blank" rel="noopener noreferrer">Smart Pointers</a> in
<code class="language-plaintext highlighter-rouge">C++</code>, das
<a href="https://en.wikipedia.org/wiki/Inner_source" target="blank" rel="noopener noreferrer">Innersource Konzept</a>
und viele andere Themen referiert. Hier lege ich die Vorträge ab, welche ich als Privatperson erstellt habe und für verbreitenswert halte.
</p>
<p>Den Quellcode für diese Vorträge hinterlege ich öffentlich verfügbar auf meiner <a href="https://git.schallbert.de/schallbert/lectures" target="blank" rel="noopener noreferrer">Gitea-Instanz</a>.</p>
<h3>Navigation</h3>
<p>Die Vorträge habe ich mit <a href="https://revealjs.com/" target="_blank" rel="noopener noreferrer"
rel="nofollow">Reveal.js</a> erstellt, wovon ich ein großer Fan bin. Beim Anklicken der Vorschau landet man auf der Titelseite des Vortrags. Die Navigation erfolgt per Pfeiltaste, Leertaste oder durch Anklicken eines <font color="#e7ad52">Links</font>.</p>
<h2>Die Vorträge</h2>
<div class="fp-latest-post-container">
<a class="container-link" href="./agiles-arbeiten-nach-scrum/">
<div class="flex-post-parent">
<div class="flex-post-child"><img src="./_assets/images/agiles-arbeiten-nach-scrum/title-thumb.jpg" alt="Image: Title slide of lecture 'Agiles Arbeiten nach Scrum'" width="1200">
</div>
<div class="flex-post-child">
<h2>Agiles Arbeiten nach Scrum</h2>
<p>Agiles Arbeiten wird zumeist von der Leitungsebene über die Mitarbeitenden gestülpt in der Hoffnung, dass hiermit komplexe Probleme besser gelöst werden können, als es mit einer starren Weisungskette möglich sei.</p>
<p>Im Vortrag gehen wir folgenden Fragen nach: Was ist agiles Arbeiten? Was zeichnet Scrum aus? Was sind die Voraussetzungen für die Einführung von Scrum? Welche Fehler werden dabei oft gemacht?</p>
</div>
</div>
</a>
</div>
<!-- ADD NEW ENTRIES HERE BY COPYING-->
</div> </div>
<div id="footer" class="page__footer">
<p>Die meisten meiner Vorträge sind nicht öffentlich. So habe ich z.B. schon über Systems Engineering, <a href="https://blog.schallbert.de/projects-software/platformio_gtestgmock/" target="_blank" rel="noopener noreferrer" <div class="fp-section">
rel="nofollow">die Arbeit mit gtest/gmock</a>, <div class="page_footer-legal" style="font-size:24px;">&#167;
<a href="https://en.cppreference.com/w/cpp/memory" target="blank" rel="noopener noreferrer">Smart Pointers</a> in <a href="https://blog.schallbert.de/legal/" target="_blank" rel="noopener noreferrer"
<code class="language-plaintext highlighter-rouge">C++</code>, das rel="nofollow">Impressum</a> |
<a href="https://en.wikipedia.org/wiki/Inner_source" target="blank" rel="noopener noreferrer">Innersource Konzept</a> <a href="https://blog.schallbert.de/privacy/" target="_blank" rel="noopener noreferrer"
und viele andere Themen referiert. Hier lege ich die Vorträge ab, welche ich als Privatperson erstellt habe und für verbreitenswert halte. rel="nofollow">Datenschutz</a>
</p> </div>
<p>Den Quellcode für diese Vorträge hinterlege ich öffentlich verfügbar auf meiner <a href="https://git.schallbert.de/schallbert/lectures" target="blank" rel="noopener noreferrer">Gitea-Instanz</a>.</p> <div class="page__footer-copyright" style="font-size:16px;">&copy; 2024 <a href="https://schallbert.de" target="_blank" rel="noopener noreferrer"
rel="nofollow">Schallbert</a>.</div>
<h3>Navigation</h3>
<p>Die Vorträge habe ich mit <a href="https://revealjs.com/" target="_blank" rel="noopener noreferrer"
rel="nofollow">Reveal.js</a> erstellt, wovon ich ein großer Fan bin. Beim Anklicken der Vorschau landet man auf der Titelseite des Vortrags. Die Navigation erfolgt per Pfeiltaste, Leertaste oder durch Anklicken eines <font color="#e7ad52">Links</font>.</p>
<h2>Die Vorträge</h2>
<div class="fp-section-latest">
<div class="fp-latest-post-container">
<a class="container-link" href="./agiles-arbeiten-nach-scrum/">
<div class="flex-post-parent">
<div class="flex-post-child"><img src="./_assets/images/agiles-arbeiten-nach-scrum/title-thumb.jpg" alt="Image: Title slide of lecture 'Agiles Arbeiten nach Scrum'" width="1200">
</div>
<div class="flex-post-child">
<h2>Agiles Arbeiten nach Scrum</h2>
<p>Agiles Arbeiten wird zumeist von der Leitungsebene über die Mitarbeitenden gestülpt in der Hoffnung, dass hiermit komplexe Probleme besser gelöst werden können, als es mit einer starren Weisungskette möglich sei.</p>
<p>Im Vortrag gehen wir folgenden Fragen nach: Was ist agiles Arbeiten? Was zeichnet Scrum aus? Was sind die Voraussetzungen für die Einführung von Scrum? Welche Fehler werden dabei oft gemacht?</p>
</div>
</div> </div>
</a> </div>
</div>
</div>
<!-- ADD NEW ENTRIES HERE BY COPYING-->
</div> </div>
<footer class="page__meta">
<div id="footer" class="page__footer">
<div class="fp-section">
<div class="page_footer-legal" style="font-size:24px;">&#167;
<a href="https://blog.schallbert.de/legal/" target="_blank" rel="noopener noreferrer"
rel="nofollow">Impressum</a> |
<a href="https://blog.schallbert.de/privacy/" target="_blank" rel="noopener noreferrer"
rel="nofollow">Datenschutz</a>
</div>
<div class="page__footer-copyright" style="font-size:16px;">&copy; 2024 <a href="https://schallbert.de" target="_blank" rel="noopener noreferrer"
rel="nofollow">Schallbert</a>.</div>
</div>
</div>
</footer>
</body> </body>
</html> </html>