Changeset - d32a175eb665
[Not reviewed]
0 2 0
x - 15 months ago 2024-01-05 02:36:38
xbr@c3l.lu
fix: properly size the flexbox for logs
2 files changed with 2 insertions and 3 deletions:
0 comments (0 inline, 0 general)
frontend/index.html
Show inline comments
 
<!DOCTYPE html>
 
<html>
 
	<head>
 
		<meta charset="UTF-8">
 
		<title>TLS Outage Tracker</title>
 
		<link rel="stylesheet" type="text/css" href="style.css">
 
        <script src="script.js"></script>
 
        <meta name="viewport" content="width=device-width,initial-scale=1" />
 
	</head>
 
	<body>
 
    <div class="countup">
 
			<p class="countup__item countup__tls"><span id="time__tls">0</span> days</p>
 
			<p class="countup__item countup__tls"><span id="time__tls">?</span> days</p>
 
			<p class="countup__item countup__text">since last outage caused by TLS expiry</p>
 
    </div>
 

	
 
    <div class="logs" id="logs">
 
        <p class="logs__title">Last incidents</p>
 
    </div>
 
	</body>
 
</html>
frontend/style.css
Show inline comments
 
@@ -9,96 +9,95 @@ a {
 
	text-decoration: none;
 
	color: inherit;
 
}
 

	
 
/* General */
 
body {
 
	background-color: #393939;
 
	color: #d2d2d2;
 

	
 
    font-family: "Helvetica", "Arial", sans-serif;
 
    font-size: 20px;
 
}
 

	
 
/*
 
   COUNT UP
 
*/
 

	
 
/* Links (block) on home page*/
 
.countup {
 
	font-size: 48px;
 
	line-height: 52px;
 
    text-align: center;
 

	
 
	margin-top: 15vh;
 

	
 
	display: flex;
 
    flex-direction: column;
 
    
 
	justify-content: center;
 
	align-items: center;
 
}
 

	
 
/* Text on home page */
 
.countup__item {
 
	display: block;
 
}
 

	
 
.countup__tls {
 
	font-size: 100px;
 
	line-height: 150px;
 
}
 

	
 
/*
 
   LOGS
 
*/
 

	
 
.logs {
 
    margin:auto;
 
    max-width: 50vw;
 
    min-width: 50vw;
 
    width: max-content;
 

	
 
    margin-top: 3vh;
 
    border-radius: 0.1rem;
 
    border-style: solid;
 
    border-color: #454545;
 

	
 
    display: flex;
 
    flex-direction: column;
 
    align-items: center;
 
    justify-content: center;
 

	
 
    background-image: repeating-linear-gradient(135deg, #393939, #393939 5px, #454545 5px, #454545 9px);
 
}
 

	
 
.logs__title {
 
    display: block;
 
    margin-top: 1vh;
 
    margin-bottom: 2vh;
 
    font-size: 30px;
 
    text-decoration: underline;
 
}
 

	
 
.logs__item {
 
    display: flex;
 
    flex-direction: row;
 
    justify-content: space-evenly;
 
    width: 95vh;
 
    margin-bottom: 1vh;
 
}
 

	
 
table {
 
    margin-left: auto;
 
    margin-right: auto;
 
}
 

	
 
td {
 
    padding: 5px 20px;
 
}
 

	
 
.logs__item__name {
 
    text-align: start;
 
}
 

	
 
.logs__item__date {
 
    text-align: end;
 
}
0 comments (0 inline, 0 general)