feat: move off google fonts

This commit is contained in:
trafficlunar 2025-12-13 23:09:58 +00:00
parent 4b97b62f22
commit a8d7fe5452
17 changed files with 87 additions and 90 deletions

View file

@ -104,6 +104,10 @@ func index(w http.ResponseWriter, req *http.Request) {
} }
} }
func styles(w http.ResponseWriter, req *http.Request) {
http.ServeFile(w, req, "www/styles.css")
}
func favicon(w http.ResponseWriter, req *http.Request) { func favicon(w http.ResponseWriter, req *http.Request) {
http.ServeFile(w, req, "www/favicon.ico") http.ServeFile(w, req, "www/favicon.ico")
} }
@ -132,8 +136,10 @@ func StartHttpServer() {
// http server // http server
http.HandleFunc("/", index) http.HandleFunc("/", index)
http.HandleFunc("/styles.css", styles)
http.HandleFunc("/favicon.ico", favicon) http.HandleFunc("/favicon.ico", favicon)
http.HandleFunc("/robots.txt", robots) http.HandleFunc("/robots.txt", robots)
http.Handle("/fonts/", http.StripPrefix("/fonts/", http.FileServer(http.Dir("www/fonts/"))))
if err := http.ListenAndServe(":8888", nil); err != nil { if err := http.ListenAndServe(":8888", nil); err != nil {
log.Fatalf("server failed: %v", err) log.Fatalf("server failed: %v", err)
} }

View file

@ -5,42 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>error - {{ .Title }}</title> <title>error - {{ .Title }}</title>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="stylesheet" href="/styles.css" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
rel="stylesheet"
/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style> <style>
body { body {
background-color: #fcfcfc;
font-family: "Inter", sans-serif;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center; align-items: center;
} }
body::before {
content: "";
position: fixed;
inset: 0;
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
background-size: 48px 48px;
background-position: center;
pointer-events: none;
}
main { main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 24rem; width: 24rem;
padding: 1rem 2rem; padding: 1rem 2rem;
background-color: white; background-color: white;
z-index: 1; z-index: 1;
@ -61,13 +36,6 @@
margin-top: 0.5rem; margin-top: 0.5rem;
line-height: 1.5rem; line-height: 1.5rem;
} }
a {
text-decoration: none;
background-color: black;
color: white;
padding: 0.05rem 0.2rem;
}
</style> </style>
</head> </head>
<body> <body>

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -5,39 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>status - {{ .Title }}</title> <title>status - {{ .Title }}</title>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="stylesheet" href="/styles.css" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
rel="stylesheet"
/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style> <style>
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
body {
background-color: #fcfcfc;
font-family: "Inter", sans-serif;
min-height: 100vh;
margin: 0;
display: flex;
justify-content: center;
}
body::before {
content: "";
position: fixed;
inset: 0;
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
background-size: 48px 48px;
background-position: center;
pointer-events: none;
}
main { main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -197,6 +171,9 @@
.bars > div:hover .status-bar { .bars > div:hover .status-bar {
transform: translateY(-3px); transform: translateY(-3px);
}
.bars > div:hover .status-bar.Online {
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
} }
@ -228,10 +205,6 @@
border: 0; border: 0;
} }
.bars > div:hover .status-bar.Unknown {
background-color: transparent;
}
.status-bar.Degraded { .status-bar.Degraded {
background-image: linear-gradient(to bottom, transparent 30%, white 30%), linear-gradient(to right, transparent 40%, white 40%); background-image: linear-gradient(to bottom, transparent 30%, white 30%), linear-gradient(to right, transparent 40%, white 40%);
background-size: 6px 7px; background-size: 6px 7px;

View file

@ -5,39 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>website offline</title> <title>website offline</title>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="stylesheet" href="/styles.css" />
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style> <style>
body { body {
background-color: #fcfcfc;
font-family: "Inter", sans-serif;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center; align-items: center;
} }
body::before {
content: "";
position: fixed;
inset: 0;
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
background-size: 48px 48px;
background-position: center;
pointer-events: none;
}
main { main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 24rem; width: 24rem;
padding: 1rem 2rem; padding: 1rem 2rem;
background-color: white; background-color: white;
z-index: 1; z-index: 1;

72
www/styles.css Normal file
View file

@ -0,0 +1,72 @@
/* inter-regular */
@font-face {
font-display: swap;
font-family: "Inter";
font-style: normal;
font-weight: 400;
src: url("/fonts/inter-v20-latin-regular.woff2") format("woff2"), url("/fonts/inter-v20-latin-regular.ttf") format("truetype");
}
/* inter-500 */
@font-face {
font-display: swap;
font-family: "Inter";
font-style: normal;
font-weight: 500;
src: url("/fonts/inter-v20-latin-500.woff2") format("woff2"), url("/fonts/inter-v20-latin-500.ttf") format("truetype");
}
/* inter-600 */
@font-face {
font-display: swap;
font-family: "Inter";
font-style: normal;
font-weight: 600;
src: url("/fonts/inter-v20-latin-600.woff2") format("woff2"), url("/fonts/inter-v20-latin-600.ttf") format("truetype");
}
/* inter-700 */
@font-face {
font-display: swap;
font-family: "Inter";
font-style: normal;
font-weight: 700;
src: url("/fonts/inter-v20-latin-700.woff2") format("woff2"), url("/fonts/inter-v20-latin-700.ttf") format("truetype");
}
/* inter-800 */
@font-face {
font-display: swap;
font-family: "Inter";
font-style: normal;
font-weight: 800;
src: url("/fonts/inter-v20-latin-800.woff2") format("woff2"), url("/fonts/inter-v20-latin-800.ttf") format("truetype");
}
/* jetbrains-mono-600 */
@font-face {
font-display: swap;
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 600;
src: url("/fonts/jetbrains-mono-v24-latin-600.woff2") format("woff2"), url("/fonts/jetbrains-mono-v24-latin-600.ttf") format("truetype");
}
body {
background-color: #fcfcfc;
font-family: "Inter", sans-serif;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
}
body::before {
content: "";
position: fixed;
inset: 0;
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
background-size: 48px 48px;
background-position: center;
pointer-events: none;
}