Add responsive view for better cross-device support.

This commit is contained in:
inference 2022-12-20 04:53:45 +00:00
parent 15dc3b034b
commit 5b8fa3cc98
14 changed files with 39 additions and 2 deletions

View File

@ -13,6 +13,7 @@
<head>
<title>Inferencium - About</title>
<link rel="stylesheet" href=inf.css>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Navigation bar. -->

View File

@ -13,6 +13,7 @@
<head>
<title>Inferencium - Blog</title>
<link rel="stylesheet" href="inf.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Navigation bar. -->

View File

@ -13,6 +13,7 @@
<head>
<title>Inferencium - Blog - FOSS is Working Against Itself</title>
<link rel="stylesheet" href="../inf.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Navigation bar. -->

View File

@ -13,6 +13,7 @@
<head>
<title>Inferencium - Blog - systemd Insecurity</title>
<link rel="stylesheet" href="../inf.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Navigation bar. -->

View File

@ -13,6 +13,7 @@
<head>
<title>Inferencium - Blog - The Chromium Monopoly</title>
<link rel="stylesheet" href="../inf.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Navigation bar. -->

View File

@ -13,6 +13,7 @@
<head>
<title>Inferencium - Blog - Untrusted: The Issue with Decentralisation</title>
<link rel="stylesheet" href="../inf.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Navigation bar. -->

View File

@ -13,6 +13,7 @@
<head>
<title>Inferencium - Contact</title>
<link rel="stylesheet" href="inf.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Navigation bar. -->

View File

@ -13,6 +13,7 @@
<head>
<title>Inferencium - Contact - Briar</title>
<link rel="stylesheet" href="../inf.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Navigation bar. -->

View File

@ -13,6 +13,7 @@
<head>
<title>Inferencium - Contact - Session</title>
<link rel="stylesheet" href="../inf.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Navigation bar. -->

View File

@ -13,6 +13,7 @@
<head>
<title>Inferencium - Contact - Signal</title>
<link rel="stylesheet" href="../inf.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Navigation bar. -->

View File

@ -13,6 +13,7 @@
<head>
<title>Inferencium - Contact - XMPP</title>
<link rel="stylesheet" href="../inf.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Navigation bar. -->

View File

@ -13,6 +13,7 @@
<head>
<title>Inferencium</title>
<link rel="stylesheet" href=inf.css>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Navigation bar. -->

28
inf.css
View File

@ -45,8 +45,8 @@ h6 {
body {
padding-top: 40px;
margin-left: 400px;
margin-right: 150px;
margin-left: min(400px, 45vw);
margin-right: min(150px, 12vw);
font-family: Roboto, sans-serif;
font-size: 20px;
background-color: #262626;
@ -135,3 +135,27 @@ table, th, td {
.logo-small {
transform: translate(0px, 13px);
}
@media (max-width: 600px) {
.sidebar {
width: 100vw;
height: auto;
font-size: 0px;
padding-top: 5px;
}
.sidebar div {
font-size: min(max(7vw, 20px), 30px);
display: inline-block;
}
.sidebar img, .sidebar .title {
display: none;
}
body {
margin: 15px;
}
}
@media (max-width: 300px) {
body {
padding-top: 80px;
}
}

View File

@ -13,6 +13,7 @@
<head>
<title>Inferencium - Source</title>
<link rel="stylesheet" href=inf.css>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Navigation bar. -->