suzanne.soy/lexi-lambda.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve design on small screens (with a tiny bit of responsiveness)

Browse Source
This commit is contained in:
Alexis King 2015-07-18 22:06:43 -07:00
parent 30e3778a19
commit 13ec3108e6
3 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_src/page-template.html
View File

@ -32,7 +32,7 @@
<header> <header>
<nav role="navigation" class="navigation-bar"> <nav role="navigation" class="navigation-bar">
<ul class="navigation-items left"> <ul class="navigation-items left">
<li><a href="/"><h1>Alexis King</h1></a></li> <li id="blog-title-header"><a href="/"><h1>Alexis King</h1></a></li>
</ul> </ul>
<ul class="navigation-items center"></ul> <ul class="navigation-items center"></ul>
<ul class="navigation-items right"> <ul class="navigation-items right">

4
scss/_code.scss
View File

@ -19,7 +19,11 @@ pre code, table.sourcetable pre {
pre code { pre code {
display: block; display: block;
}
pre code, div[class^='brush: '] {
width: 100%; width: 100%;
overflow: auto;
} }
table.sourcetable { table.sourcetable {

8
scss/application.scss
View File

@ -28,6 +28,7 @@ html, body {
#page-content > section[role=main] { #page-content > section[role=main] {
flex: 1; flex: 1;
padding: 0 30px;
& > .content { & > .content {
margin: 0 auto; margin: 0 auto;
@ -49,6 +50,13 @@ html, body {
} }
} }
// hide the blog title in the navbar on small screen sizes
@media (max-width: 550px) {
#blog-title-header {
display: none;
}
}
#page-content > footer { #page-content > footer {
background-color: $color-primary; background-color: $color-primary;
color: $text-color-light; color: $text-color-light;