forked from shadowfacts/shadowfacts.net
Make header/footer same width as article and use flexbox for layout
This commit is contained in:
parent
b8305989b6
commit
c26aeb8f99
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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 %>";
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue