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"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<!-- <link rel="stylesheet" href="/public/css/main.css">--> <link rel="stylesheet" href="/public/css/main.css">
<link rel="stylesheet" href="/public/css/pico.red.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hibiscus.txt</title> <title>Hibiscus.txt</title>
</head> </head>
<body> <body>
<header class="container"> <header>
<h1 style="margin-bottom:0;">🌺 Hibiscus.txt</h1> <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> <p id="status" style="margin-top:0;">Today is <span id="today-date">14/03/2024</span></p>
</header> </header>
<main class="container"> <main>
<h2 style="margin-bottom:0;"><label for="day">Your day so far:</label></h2> <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> <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> <div class="grid"><button onclick="saveToday()">Save</button></div>
<h2><label for="log">Log</label></h2> <h2><label for="log">Log</label></h2>
<input type="text" id="log" name="log" style="max-width: 640px; width: 100%"/> <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> </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> </body>
<script defer> <script defer>

52
public/css/main.css
View file

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