generic font family fixed

2025-03-29 15:18:55 +01:00
parent 689c2aace3
commit aa16a64bf4
2 changed files with 26 additions and 25 deletions
--- a/src/main/webapp/css/main.css
+++ b/src/main/webapp/css/main.css
@@ -11,17 +11,17 @@
@import url("https://fonts.googleapis.com/css?family=Asap:300,400,500");

@font-face {
-    font-family: BunueloLight;
+    font-family: BunueloLight, sans-serif;
    src: url("/fonts/BunueloCleanPro-Light.woff");
 }

@font-face {
-    font-family: BunueloSemiBold;
+    font-family: BunueloSemiBold, sans-serif;
    src: url("/fonts/BunueloCleanPro-SemiBold.woff");
 }

 body{
-    font-family:Asap;
+    font-family:Asap, sans-serif;
    font-size: 16px;
    color:#24243b;
    background-color: white;
@@ -32,7 +32,6 @@ section {
    padding-top: 55px;
    padding-left: 8%;
    padding-right: 8%;
-    /* font-weight: 400; */
    letter-spacing:0;
    text-align:left;
 }
@@ -61,7 +60,7 @@ p {
    margin-top: 0px;
 }
 h1 {
-    font-family:BunueloSemiBold;
+    font-family:BunueloSemiBold, sans-serif;
    font-size: 40px;
    font-weight: 400;
    letter-spacing:0;
@@ -90,7 +89,7 @@ a {
 }

 #appTitle {
-    font-family:BunueloLight;
+    font-family:BunueloLight, sans-serif;
    font-size:55px;
 }

@@ -107,14 +106,20 @@ a {
 .collapsibleRow {
    transition: border 400ms ease-out, box-shadow 200ms linear;
    cursor: pointer;
+    box-shadow: none;
+    border-bottom: 4px solid;
 }
 .collapsibleRow:hover .headerTitle {
    background-color: #f4f4f4;
    transition: background-color 0.1s;
 }
-.collapsed .collapsibleRow {
+.collapsed {
    box-shadow: none;
    border-bottom: 4px solid;
+    transition: all 400ms ease-out, opacity 300ms ease-in;
+    opacity: 0;
+    max-height: 0;
+    visibility: hidden;
 }
 .collapsed#healthSection > .headerRow {
    border-bottom-color: #D6D9E4;
@@ -125,24 +130,18 @@ a {
 .collapsed#metricsSection > .headerRow {
    border-bottom-color: #EEF3C3;
 }
-
-.collapsed .collapsibleContent { /* collapsing animation */
-    transition: all 400ms ease-out, opacity 300ms ease-in;
-}
-.expanded .collapsibleContent { /* expanding animation */
-    transition: all 400ms ease-out, opacity 450ms ease-out;
-}
-.collapsed .collapsibleContent {
+.collapsibleContent { /* collapsing animation */
    opacity: 0;
    max-height: 0;
    visibility: hidden;
+    transition: all 400ms ease-out, opacity 300ms ease-in;
 }
-.expanded .collapsibleContent {
+.expanded { /* expanding animation */
+    transition: all 400ms ease-out, opacity 450ms ease-out;
    opacity: 1;
    max-height: 1000px;
    visibility: visible;
 }
-
 .headerIcon {
    width: 160px;
    height: 100%;
@@ -155,7 +154,7 @@ a {
    margin-top: 20px;
 }

-#healthSection .headerIcon {
+#healthSection {
    background-color: #E8EAEF;
 }
 #configSection .headerIcon {
@@ -189,7 +188,7 @@ a {
 }

 .headerTitle > h2 {
-    font-family: BunueloLight;
+    font-family: BunueloLight, sans-serif;
    font-size:40px;
    margin: 0;
 }
@@ -226,7 +225,7 @@ button {
    height:44px;
    color:#24253a;
    text-align:center;
-    font-family: Asap;
+    font-family: Asap, sans-serif;
    margin-top: 25px;
    margin-bottom: 70px;
    cursor: pointer;
@@ -297,7 +296,7 @@ section#openLibertyAndMp {

 #serviceStatus {
    font-size: 50px;
-    font-family:BunueloLight;
+    font-family:BunueloLight, sans-serif;
    margin-top: 30px;
 }

@@ -332,7 +331,7 @@ td {
    background: #D6D9E4;
 }
 #configTable tr:first-child {
-    background: #F8D7C1;;
+    background: #F8D7C1;
 }
 #metricsTable tr:first-child {
    background: #EEF3C3;
@@ -392,7 +391,7 @@ td {
 }

 .bodyFooterLink {
-  font-family: Asap;
+  font-family: Asap, sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0;
--- a/src/main/webapp/index.html
+++ b/src/main/webapp/index.html
@@ -1,5 +1,7 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
    <head>
+        <title>olproperties</title>
        <script src="js/mpData.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
@@ -7,7 +9,7 @@
    <body>
        <section id="appIntro">
            <div id="titleSection">
-                <h1 id="appTitle">Java-PitStop Openliberty/Java17 voorbeeld 3.0</h1>
+                <h1 id="appTitle">Java-PitStop Openliberty/Java17 voorbeeld 2.1</h1>
                <div class="line"></div>
                <div class="headerImage"></div>
                <h2>Open Liberty Java17 applicatie op Container Hosting Platform!</h2>