commit 1a2943bf6781286ec76ee718c283fa876898c6d4
parent b409ba3700ef91014075077795587e8cf235a432
Author: Peter <peter@minskio.co.uk>
Date: Wed, 20 Apr 2022 13:57:09 +0100
Reorder CSS rules, add focus effect
Diffstat:
1 file changed, 5 insertions(+), 6 deletions(-)
diff --git a/index.html b/index.html
@@ -7,18 +7,17 @@
:root{--main-bg-color:#2e3440;--prompt-bg-color:#151515;--input-color:#6c99bb;--text-color:#d6dce8}
*{margin:0;padding:0;border:0;outline:0;font-family:monospace;font-size:1rem}
body{width:100vw;height:100vh;align-items:center;justify-content:center;overflow:hidden;background-color:var(--main-bg-color)}
+ div#introduction p{width:56vw;margin:auto;color:var(--text-color);margin-top:10%}
#screen{width:56vw;box-shadow:1px 1px 10px;border-radius:4px;padding:1.5em 0;background-color:var(--prompt-bg-color);margin:auto;margin-top:2rem;margin-bottom:2rem}
- input{background-color:var(--prompt-bg-color);color:var(--input-color);width:90%}
#input{padding-left:20px;padding-right:10px;color:var(--input-color)}
#input p{display:inline-block}
- div.container{width:calc(100% - 6rem);max-width:1000px;margin:0 auto;color:var(--text-color);background-color:#373e4d;border-radius:0;box-shadow:#2c4948 12px 12px 0,#2a4549 24px 24px 0,#29414a 36px 36px 0,#273d4b 48px 48px 0,#25394c 60px 60px 0;border:.125rem solid #579190;overflow:hidden}
+ input{background-color:var(--prompt-bg-color);color:var(--input-color);width:90%}
+ #bookmark-filter{width:56vw;margin:auto;position:relative;max-height:16rem;overflow:hidden;position:relative}
+ #bookmark-filter:before{content:'';width:100%;height:16rem;position:absolute;background:linear-gradient(to bottom,transparent,var(--main-bg-color));pointer-events:none;}
#bookmarks{list-style-type:none;padding:0;margin:0}
#bookmarks li{margin:5px 15px 5px 0;float:left}
#bookmarks li a{color:var(--text-color);padding:6px;text-decoration:none}
- #bookmarks li a:hover:not(.header):hover{text-decoration:underline}
- div#bookmark-filter{width:56vw;margin:auto;position:relative;max-height:16rem;overflow:hidden;position:relative}
- div#bookmark-filter:before{content:'';width:100%;height:16rem;position:absolute;background:linear-gradient(to bottom,transparent,var(--main-bg-color));pointer-events:none;}
- div#introduction p{width:56vw;margin:auto;color:var(--text-color);margin-top:10%}
+ #bookmarks li a:focus, #bookmarks li a:hover{text-shadow: 2px 2px 8px #fff; text-decoration:underline}
</style>
</head>
<body>
