little styling

This commit is contained in:
dr-frmr 2024-07-29 21:44:01 +03:00
parent 366c74728a
commit 62bac1e59f
No known key found for this signature in database
7 changed files with 65 additions and 21 deletions

View File

@ -93,6 +93,9 @@ body {
line-height: 1.6;
-webkit-font-smoothing: antialiased;
background-color: light-dark(var(--tan), var(--tasteful-dark));
background-image: radial-gradient(circle at -1% -47%, #4700002b 7%, transparent 58.05%), radial-gradient(circle at 81% 210%, #d6430550 17%, transparent 77.05%);
min-width: 100vw;
min-height: 100vh;
}
/* Sections */

View File

@ -59,20 +59,18 @@ fn make_widget() -> String {
return r#"<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/kinode.css">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
font-family: 'Kode Mono', monospace;
}
body {
overflow: hidden;
background: transparent;
}
#latest-apps {
@ -81,7 +79,6 @@ fn make_widget() -> String {
padding: 0.5rem;
gap: 0.5rem;
align-items: center;
backdrop-filter: saturate(1.25);
border-radius: 1rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
height: 100vh;

View File

@ -13,6 +13,37 @@
<title>Chess</title>
<script type="module" crossorigin src="/chess:chess:sys/assets/index-237df385.js"></script>
<link rel="stylesheet" href="/kinode.css">
<style>
#root {
max-width: 960px;
margin: 20px auto;
}
h4.m-4 {
display: none;
}
div.games {
float: left;
}
div.game {
float: right;
}
div.game-entry {
text-decoration: underline wavy;
margin-top: 20px;
}
div.game-entry:hover {
color: var(--blue);
}
button.small {
margin: 10px;
}
</style>
</head>
<body>

View File

@ -9,6 +9,7 @@
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover" />
<link rel="stylesheet" href="/kinode.css">
<link href="https://fonts.googleapis.com/css2?family=Kode+Mono:wght@700&display=swap" rel="stylesheet">
</head>
<body>

View File

@ -1,6 +1,12 @@
body {
width: 90vw;
margin: 0 auto;
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
font-family: 'Kode Mono', monospace;
}
#homepage {
@ -13,12 +19,17 @@ header {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-items: flex-end;
padding-bottom: 2px;
justify-content: space-between;
}
header h1 {
font-style: italic;
header h2 {
flex-grow: 100;
}
header button {
margin-left: 4px;
}
@media (prefers-color-scheme: light) {
@ -35,7 +46,7 @@ header h1 {
flex-wrap: wrap;
gap: 10px;
justify-content: center;
background-color: #4f000085;
background-color: #4f000055;
padding: 10px;
border-radius: 10px;
margin: 0 auto;

View File

@ -52,13 +52,13 @@ function Homepage() {
<div id="homepage">
<header>
<KinodeBird />
<h1>{new Date().getHours() < 4
<h2>{new Date().getHours() < 4
? 'Good evening'
: new Date().getHours() < 12
? 'Good morning'
: new Date().getHours() < 18
? 'Good afternoon'
: 'Good evening'}, {our}</h1>
: 'Good evening'}, {our}</h2>
<a href="https://github.com/kinode-dao/kinode/releases" target="_blank">[v{version}]</a>
<button onClick={() => setShowWidgetsSettings(true)}>
<FaScrewdriverWrench />

View File

@ -50,22 +50,23 @@ fn create_widget(posts: Vec<KinodeBlogPost>) -> String {
r#"<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/kinode.css">
<style>
* {{
box-sizing: border-box;
margin: 0;
padding: 0;
}}
a {{
text-decoration: none;
color: inherit;
font-family: 'Kode Mono', monospace;
}}
h2 {{
font-size: medium;
}}
p {{
font-size: small;
}}
body {{
overflow: hidden;
height: 100vh;
@ -73,6 +74,7 @@ fn create_widget(posts: Vec<KinodeBlogPost>) -> String {
display: flex;
flex-direction: column;
gap: 0.5rem;
background: transparent;
}}
#latest-blog-posts {{
@ -80,7 +82,6 @@ fn create_widget(posts: Vec<KinodeBlogPost>) -> String {
flex-direction: column;
padding: 0.5rem;
gap: 0.5rem;
backdrop-filter: brightness(1.25);
border-radius: 0.75rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
height: 100vh;