Header/footer style tweaks

This commit is contained in:
Shadowfacts 2019-06-28 15:28:00 -04:00
parent c26aeb8f99
commit 59e7fe74ec
Signed by: shadowfacts
GPG Key ID: 94A5AB95422746E5
3 changed files with 20 additions and 12 deletions

View File

@ -28,4 +28,6 @@ async function generate(theme: string) {
export default async function css() {
await generate("light");
await generate("dark");
require("fs").watch("site/css/", css);
}

View File

@ -236,17 +236,20 @@ figure {
// Header
.site-header {
padding: 20px 0;
padding-top: 20px;
padding-bottom: 20px;
background-color: var(--ui-background-color);
font-size: 16px;
box-shadow: 0 10px 15px var(--shadow-color);
.container {
> div {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
padding-bottom: 10px;
border-bottom: 3px solid var(--accent-color);
}
.site-title {
@ -278,7 +281,7 @@ figure {
}
a.dropdown-link {
color: black;
color: var(--ui-text-color);
text-decoration: none;
.arrow-down {
@ -302,7 +305,7 @@ figure {
right: -1em;
display: none;
padding: 1em;
background-color: white;
background-color: var(--ui-background-color);
box-shadow: 0 10px 15px -5px var(--shadow-color), // bottom
10px 0 15px -5px var(--shadow-color), // right
-10px 0 15px -5px var(--shadow-color); // left
@ -334,17 +337,20 @@ figure {
// Footer
.site-footer {
padding: 20px 0;
padding-top: 20px;
padding-bottom: 20px;
background-color: var(--ui-background-color);
font-size: 16px;
box-shadow: 0 -10px 15px var(--shadow-color);
.container {
> div {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
padding-top: 10px;
border-top: 3px solid var(--accent-color);
}
.site-title {

View File

@ -44,8 +44,8 @@
</noscript>
</head>
<body itemscope itemtype="https://schema.org/Blog">
<header class="site-header">
<div class="container">
<header class="site-header container">
<div>
<div>
<h1 class="site-title"><%- fancyLink("Shadowfacts", "/") %></h1>
<p class="site-description">The outper part of a shadow is called the penumbra.</p>
@ -72,8 +72,8 @@
<%- content %>
</div>
<footer class="site-footer">
<div class="container">
<footer class="site-footer container">
<div>
<div>
<h2 class="site-title">Shadowfacts</h2>
<p class="ui-controls">