updated website

This commit is contained in:
Sebastian Hildebrandt 2021-02-06 21:41:25 +01:00
parent 98143c9dc0
commit 6f3c0d947b
4 changed files with 39 additions and 20 deletions

View File

@ -165,7 +165,7 @@
<body> <body>
<header class="bg-image-full"> <header class="bg-image-full">
<div class="container"> <div class="top-container">
<a href="security.html" class="recommendation">Security advisory:<br>Update to v4.31.1</a> <a href="security.html" class="recommendation">Security advisory:<br>Update to v4.31.1</a>
<img class="logo" src="assets/logo.png"> <img class="logo" src="assets/logo.png">
<div class="title">systeminformation</div> <div class="title">systeminformation</div>
@ -209,7 +209,7 @@
<div class="title">Downloads last month</div> <div class="title">Downloads last month</div>
</div> </div>
<div class="col-xl-4 col-lg-4 col-md-4 col-12"> <div class="col-xl-4 col-lg-4 col-md-4 col-12">
<div class="numbers">380</div> <div class="numbers">382</div>
<div class="title">Dependents</div> <div class="title">Dependents</div>
</div> </div>
</div> </div>

View File

@ -47,13 +47,14 @@ h1, h2, h3, h4 {
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
width: 100% !important;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-box-direction: normal; -webkit-box-direction: normal;
-ms-flex-direction: column; -ms-flex-direction: column;
flex-direction: column; flex-direction: column;
} }
.bg-image-full .container { .bg-image-full .top-container {
text-align: center; text-align: center;
-ms-flex-item-align: center; -ms-flex-item-align: center;
align-self: center; align-self: center;
@ -73,15 +74,19 @@ h1, h2, h3, h4 {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-ms-flex-positive: 1; -ms-flex-positive: 1;
flex-grow: 1; flex-grow: 1;
overflow: hidden;
position: relative;
width: 100% !important;
} }
.bg-image-full .recommendation { .bg-image-full .recommendation {
position: absolute; position: absolute;
top: 40px; top: 30px;
right: -95px; right: 0px;
margin-right: -85px;
z-index: 10; z-index: 10;
display: inline-block; display: inline-block;
width: 330px; width: 280px;
text-align: center; text-align: center;
padding: .25em 0; padding: .25em 0;
color: white; color: white;
@ -97,16 +102,21 @@ h1, h2, h3, h4 {
} }
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 767px) {
.bg-image-full .recommendation { .bg-image-full .recommendation {
font-size: 1.1rem; font-size: 1.1rem;
top: 40px;
margin-right: -95px;
width: 330px;
} }
} }
@media only screen and (min-width: 1024px) { @media only screen and (min-width: 1024px) {
.bg-image-full .recommendation { .bg-image-full .recommendation {
top: 50px; width: 330px;
right: -75px; top: 60px;
right: 0px;
margin-right: -71px;
font-size: 1.2rem; font-size: 1.2rem;
} }
} }

File diff suppressed because one or more lines are too long

View File

@ -41,10 +41,10 @@ h1, h2, h3, h4 {
display: flex; display: flex;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
width: 100% !important;
// align-items: center; // align-items: center;
flex-direction: column; flex-direction: column;
.container { .top-container {
text-align: center; text-align: center;
align-self: center; align-self: center;
display: flex; display: flex;
@ -52,14 +52,18 @@ h1, h2, h3, h4 {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;
overflow: hidden;
position: relative;
width: 100% !important;
} }
.recommendation { .recommendation {
position: absolute; position: absolute;
top: 40px; top: 30px;
right: -95px; right: 0px;
margin-right:-85px;
z-index: 10; z-index: 10;
display: inline-block; display: inline-block;
width: 330px; width: 280px;
text-align: center; text-align: center;
padding: .25em 0; padding: .25em 0;
color: white; color: white;
@ -67,14 +71,19 @@ h1, h2, h3, h4 {
background: rgb(151, 29, 29); background: rgb(151, 29, 29);
font-size: 0.9rem; font-size: 0.9rem;
@media only screen and (min-width: 420px) { @media only screen and (min-width: 420px) {
font-size: 1.0rem; font-size: 1.0rem;
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 767px) {
font-size: 1.1rem; font-size: 1.1rem;
top: 40px;
margin-right:-95px;
width: 330px;
} }
@media only screen and (min-width: 1024px) { @media only screen and (min-width: 1024px) {
top: 50px; width: 330px;
right: -75px; top: 60px;
right: 0px;
margin-right:-71px;
font-size: 1.2rem; font-size: 1.2rem;
} }
&:hover { &:hover {