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

Make header/footer same width as article and use flexbox for layout

This commit is contained in:
Shadowfacts 2019-06-19 09:29:56 -04:00
parent b8305989b6
commit c26aeb8f99
Signed by: shadowfacts
GPG Key ID: 83FB3304046BADA4
3 changed files with 30 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
site/css/main.scss
View File

@ -46,7 +46,6 @@ article {
&::after {
content: "";
width: calc(100% - 2 * 30px); // account for .container padding, don't overflow
max-width: 720px;
height: 1px;
background-image: linear-gradient(to right, var(--secondary-ui-text-color), var(--shadow-color));
position: absolute;
@ -243,7 +242,11 @@ figure {
box-shadow: 0 10px 15px var(--shadow-color);
.container {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
}
.site-title {
@ -255,7 +258,7 @@ figure {
.site-description {
color: var(--secondary-ui-text-color);
font-variant: small-caps;
margin-top: 0;
margin: 0;
}
.site-nav ul {
@ -327,14 +330,6 @@ figure {
}
}
}
@media (min-width: 992px) {
.site-nav {
position: absolute;
right: 0;
bottom: 0;
}
}
}
// Footer
@ -345,7 +340,11 @@ figure {
box-shadow: 0 -10px 15px var(--shadow-color);
.container {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.site-title {
@ -369,14 +368,6 @@ figure {
}
}
}
@media (min-width: 992px) {
.social-links {
position: absolute;
right: 0;
top: 0;
}
}
}
// Pagination
@ -420,22 +411,19 @@ figure {
.container {
max-width: 540px;
}
article::after {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
article::after {
max-width: 720px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}

20
site/layouts/article.html.ejs
View File

@ -2,17 +2,15 @@
metadata.layout = "default.html.ejs"
```
<div class="main">
<article itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
<meta itemprop="mainEntityOfPage" content="https://shadowfacts.net<%= metadata.permalink %>">
<h1 class="article-title" itemprop="name headline"><%= metadata.title %></h1>
<%- include("../includes/article-meta.html.ejs", { metadata }) %>
<div class="article-content" itemprop="articleBody">
<%- content %>
</div>
</article>
<section id="comments-container"></section>
</div>
<article itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
<meta itemprop="mainEntityOfPage" content="https://shadowfacts.net<%= metadata.permalink %>">
<h1 class="article-title" itemprop="name headline"><%= metadata.title %></h1>
<%- include("../includes/article-meta.html.ejs", { metadata }) %>
<div class="article-content" itemprop="articleBody">
<%- content %>
</div>
</article>
<section id="comments-container"></section>
<script>
const permalink = "<%= metadata.permalink %>";

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

@ -46,8 +46,10 @@
<body itemscope itemtype="https://schema.org/Blog">
<header class="site-header">
<div class="container">
<h1 class="site-title"><%- fancyLink("Shadowfacts", "/") %></h1>
<p class="site-description">The outper part of a shadow is called the penumbra.</p>
<div>
<h1 class="site-title"><%- fancyLink("Shadowfacts", "/") %></h1>
<p class="site-description">The outper part of a shadow is called the penumbra.</p>
</div>
<nav class="site-nav" role="navigation">
<ul>
<li><%- fancyLink("Tutorials", "/tutorials/") %></li>