diff options
Diffstat (limited to 'resources/sass')
| -rw-r--r-- | resources/sass/style.scss | 49 |
1 files changed, 42 insertions, 7 deletions
diff --git a/resources/sass/style.scss b/resources/sass/style.scss index 227093c..e313315 100644 --- a/resources/sass/style.scss +++ b/resources/sass/style.scss @@ -28,22 +28,57 @@ body { padding-top: 1em; } +#sticky-nav li > a { + display: inline-block; +} + +@media (max-width: 1269px) { + /* Navigation in a sticky header */ + #sticky-nav { + background: rgba(255, 255, 255, 0.9); + border-bottom: 1px solid #eee; + padding-bottom: 1em; + position: sticky; + top: 0; + } + + /* Offset # links because of sticky header: + * https://stackoverflow.com/a/64998338 */ + :target:before { + content: ''; + display: block; + height: 150px; + margin: -150px 0 0; + } +} + @media (min-width: 1270px) { - /* 970px is width of .container; 200px is width of #sticky-nav. This places - * the nav buttons to the left of the content. */ + /* Navigation in a sticky sidebar. The sidebar is to the left of the + * content, below the profile image, but sticks to the top of the page when + * scrolling down. */ #sticky-nav { - left: calc(50% - 970px/2 - 150px); - position: fixed; + display: table-cell; + /* 970px is width of .container; 200px is width of #sticky-nav. This + * places the nav buttons to the left of the content. */ + left: calc(50% - 970px/2 - 160px); + /* 216px is the height of the profile image. */ + padding-top: calc(216px + 2em); text-align: right; - width: 150px; + width: 160px; + } + + #sticky-nav ul { + position: sticky; + top: 1em; } #sticky-nav li { float: none; } - #sticky-nav li > a { - display: inline-block; + #content { + display: table-cell; + vertical-align: top; } } |