mirror of
https://github.com/uqbar-dao/nectar.git
synced 2024-11-22 11:22:59 +03:00
little styling
This commit is contained in:
parent
366c74728a
commit
62bac1e59f
@ -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 */
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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 />
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user