Commit e3e87860 authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Rework design to use white background and CSS grid

parent 3200d1b7
<footer class="site-footer">
<h2>A bit about me</h2>
<p>Hello! I&#8217;m a British designer, living in Ireland, and working as one half of <a href="https://ind.ie">Ind.ie</a>. We make an app called <a href="https://better.fyi">Better</a> that protects you while you’re browsing the web. My book <a href="https://abookapart.com/products/accessibility-for-everyone">Accessibility For Everyone</a> is available in paperback, ebook, and audiobook from A Book Apart.</p>
<small class="site-info">Copyright &copy; <a href="{{ .Site.BaseURL }}" >{{ .Site.Title }}</a>, {{ now.Format "2006" }}. <a href="/rss">RSS feeds</a></small>
<p><small class="site-info">Copyright &copy; <a href="{{ .Site.BaseURL }}" >{{ .Site.Title }}</a>, {{ now.Format "2006" }}. <a href="/rss">RSS feeds</a></small></p>
</footer>
......@@ -110,13 +110,13 @@ html {
@media screen and (min-width: 18em) {
html {
font-size: 110%; /* all font sizes and rems scale from here */
font-size: 105%; /* all font sizes and rems scale from here */
}
}
@media screen and (min-width: 30em) {
html {
font-size: 115%; /* all font sizes and rems scale from here */
font-size: 110%; /* all font sizes and rems scale from here */
}
}
......@@ -351,6 +351,70 @@ hr {
/* - - - - - - - - LAYOUT
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - Header */
header {
display: grid;
grid-auto-rows: auto;
/* on narrow views, collapse padding on left and right */
grid-template-columns: 0 minmax(10em, 40em) 0;
}
@media screen and (min-width: 35em) {
header {
grid-template-columns: auto minmax(10em, 40em) auto;
}
}
.site-title {
grid-column: 2 / span 1;
}
nav {
grid-column: 2 / span 1;
}
main {
display: grid;
grid-auto-rows: auto;
grid-template-columns: auto minmax(10em, 40em) auto;
}
article {
grid-column: 2 / span 1;
}
.entry-content {
display: grid;
grid-auto-rows: auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.entry-content h1, .entry-content h2 {
grid-column: 1 / span 6;
}
.entry-content p, .entry-content ul, .entry-content ol, .entry-content blockquote, .entry-content h3, .entry-content h4, .entry-content h5 {
grid-column: 1 / span 5;
}
.entry-content figure {
grid-column: 1 / span 6;
}
footer {
display: grid;
grid-auto-rows: auto;
grid-template-columns: auto minmax(10em, 40em) auto;
}
footer h2 {
grid-column: 2 / span 1;
}
footer p {
grid-column: 2 / span 1;
}
/* - - - - - - - - CLASSES AND IDs
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
......@@ -387,12 +451,14 @@ figcaption, .site-footer p, .site-footer small, .note {
margin-top: 0;
margin-bottom: 0.1em;
position: relative; /* allow absolute positioning inside */
text-align: center;
z-index: 1;
}
.site-title a {
background: hsl(var(--primary-bg));
color: hsl(var(--text));
font-size: 0.8em;
text-decoration: none;
}
......@@ -442,12 +508,9 @@ figcaption, .site-footer p, .site-footer small, .note {
.navigation-menu ul {
background: hsla(var(--tab-five), 0.1);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
display: grid;
grid-template-rows: auto;
grid-template-columns: auto auto auto auto auto auto auto;
list-style-type: none;
margin: 0;
padding: 0;
......@@ -459,20 +522,21 @@ figcaption, .site-footer p, .site-footer small, .note {
.navigation-menu ul a {
display: block;
padding: calc(var(--layout-unit)/2) var(--layout-unit);
padding: calc(var(--layout-unit)/3) var(--layout-unit);
text-align: center;
text-decoration: none;
}
@media screen and (min-width: 35em) {
.navigation-menu ul a {
padding: calc(var(--layout-unit)/2) var(--layout-unit);
padding: calc(var(--layout-unit)/3) var(--layout-unit);
}
}
/* set active navigation link background colour */
.navigation-menu li.active a, body.blog .navigation-menu a[href="/posts/"], body.latest .navigation-menu a[href="/latest/"] {
background: hsla(var(--primary-bg), 0.5);
background: rgba(255,255,255,0.85);
color: hsl(var(--text));
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment