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

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

@ -2,7 +2,6 @@
metadata.layout = "default.html.ejs" metadata.layout = "default.html.ejs"
``` ```
<div class="main">
<article itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting"> <article itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
<meta itemprop="mainEntityOfPage" content="https://shadowfacts.net<%= metadata.permalink %>"> <meta itemprop="mainEntityOfPage" content="https://shadowfacts.net<%= metadata.permalink %>">
<h1 class="article-title" itemprop="name headline"><%= metadata.title %></h1> <h1 class="article-title" itemprop="name headline"><%= metadata.title %></h1>
@ -12,7 +11,6 @@ metadata.layout = "default.html.ejs"
</div> </div>
</article> </article>
<section id="comments-container"></section> <section id="comments-container"></section>
</div>
<script> <script>
const permalink = "<%= metadata.permalink %>"; const permalink = "<%= metadata.permalink %>";

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

@ -46,8 +46,10 @@
<body itemscope itemtype="https://schema.org/Blog"> <body itemscope itemtype="https://schema.org/Blog">
<header class="site-header"> <header class="site-header">
<div class="container"> <div class="container">
<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>
</div>
<nav class="site-nav" role="navigation"> <nav class="site-nav" role="navigation">
<ul> <ul>
<li><%- fancyLink("Tutorials", "/tutorials/") %></li> <li><%- fancyLink("Tutorials", "/tutorials/") %></li>