Andrew71/hibiscus
Andrew71/hibiscus
1
0
Fork 0
Code Issues Pull requests Projects Releases 4 Packages Wiki Activity

Move to custom CSS

Browse source
This commit is contained in:
Andrew-71 2024-03-18 00:51:27 +03:00
parent ebdf272ec2
commit 41923158a3
2 changed files with 38 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
pages/index.html
View file

@ -2,29 +2,24 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <link rel="stylesheet" href="/public/css/main.css">-->
<link rel="stylesheet" href="/public/css/pico.red.min.css">
<link rel="stylesheet" href="/public/css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hibiscus.txt</title>
</head>
<body>
<header class="container">
<h1 style="margin-bottom:0;">🌺 Hibiscus.txt</h1>
<header>
<h1 style="margin-bottom:0;margin-top:0;">🌺 Hibiscus.txt</h1>
<p id="status" style="margin-top:0;">Today is <span id="today-date">14/03/2024</span></p>
</header>
<main class="container">
<main>
<h2 style="margin-bottom:0;"><label for="day">Your day so far:</label></h2>
<textarea id="day" name="Day entry" cols="40" rows="10" style="max-width: 640px; width: 100%"></textarea>
<div class="grid"><button onclick="saveToday()">Save</button></div>
<h2><label for="log">Log</label></h2>
<input type="text" id="log" name="log" style="max-width: 640px; width: 100%"/>
<div class="grid"><button onclick="saveLog()">Save</button></div>
<div class="grid"><button onclick="saveLog()">Send</button></div>
</main>
<footer class="container">
<p><a href="/page/sitemap" class="no-accent"></a> v0.0.1 | PoC using <a href="https://picocss.com">PicoCSS</a></p>
</footer>
</body>
<script defer>

52
public/css/main.css
View file

@ -1,9 +1,9 @@
body {
color: #454545;
background-color: #f5f0e1; /*f6f4ee*/
background-color: #f5f0e1;
font-size: 16px;
margin: 2em auto;
max-width: 950px;
max-width: 640px;
padding: 1em;
line-height: 1.4;
text-align: justify;
@ -13,14 +13,25 @@ body {
flex-direction: column;
}
/* Links can be blue or look like plaintext */
/* Red links! */
a, a:visited { color: #f85552; }
a:hover, a:visited:hover { color: #e66868; }
a.no-accent, a.no-accent:visited { color: #454545; }
a.no-accent:hover, a.no-accent:visited:hover { color: #656565; }
textarea, input {
background: #f5f2ee;
max-width: 640px;
width: 100%;
display: block;
resize: vertical;
outline: 0;
box-shadow: none;
border: 0.0625em solid #454545;
margin-bottom: 1em;
font-size: 18px
}
input {
height: 2.5em;
}
footer { margin-top: auto; }
@ -33,23 +44,26 @@ button {
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-size: 20px;
margin: 4px 2px;
border-radius: 12px;
max-width: 100px;
border-radius: 4px;
cursor: pointer;
max-width: 640px;
width: 100%;
}
button:hover { background-color: #e66868; }
/* Dark theme TODO*/
/*@media (prefers-color-scheme: dark) {*/
/* body {*/
/* color: #f5f0e1;*/
/* background-color: #2c2825;*/
/* }*/
/* a.no-accent, a.no-accent:visited { color: #f5f0e1; }*/
/* a.no-accent:hover, a.no-accent:visited:hover { color: #a9a8a4; }*/
/* a, a:visited { color: #24a5ea; }*/
/* a:hover, a:visited:hover { color: #1b74cc; }*/
/*}*/
/* Dark theme */
@media (prefers-color-scheme: dark) {
body {
color: #f5f0e1;
background-color: #2c2825;
}
textarea, input {
color: #f5f0e1;
background-color: #383030;
}
}