Add responsive view for better cross-device support.

This commit is contained in:
inference 2022-12-20 04:53:45 +00:00
parent a001ed5c2c
commit 03cfddc4cd
Signed by: inference
SSH Key Fingerprint: SHA256:9Pl0nZ2UJacgm+IeEtLSZ4FOESgP1eKCtRflfPfdX9M
14 changed files with 39 additions and 2 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

28
inf.css
View File

@ -45,8 +45,8 @@ h6 {
body { body {
padding-top: 40px; padding-top: 40px;
margin-left: 400px; margin-left: min(400px, 45vw);
margin-right: 150px; margin-right: min(150px, 12vw);
font-family: Roboto, sans-serif; font-family: Roboto, sans-serif;
font-size: 20px; font-size: 20px;
background-color: #262626; background-color: #262626;
@ -135,3 +135,27 @@ table, th, td {
.logo-small { .logo-small {
transform: translate(0px, 13px); 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> <head>
<title>Inferencium - Source</title> <title>Inferencium - Source</title>
<link rel="stylesheet" href=inf.css> <link rel="stylesheet" href=inf.css>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<!-- Navigation bar. --> <!-- Navigation bar. -->