shadowfacts
/
shadowfacts.net
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/generate/css.ts
View File

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

22
site/css/main.scss
View File

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

8
site/layouts/default.html.ejs
View File

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