Header/footer style tweaks
This commit is contained in:
parent
c26aeb8f99
commit
59e7fe74ec
|
@ -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);
|
||||
}
|
|
@ -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 {
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue