1
0
mirror of https://github.com/taigrr/wtf synced 2025-01-18 04:03:14 -08:00

Close #91. Site sidebar is now scrollable with main content.

This commit is contained in:
Chris Cummer 2018-05-31 21:49:10 -07:00
parent 70b56c314b
commit f86179b74e
31 changed files with 53 additions and 43 deletions

View File

@ -1,5 +1,5 @@
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<!--<a href="{{ .Site.BaseURL }}"><h1 class="brand">{{ .Site.Title }}</h1></a>--> <!--<a href="{{ .Site.BaseURL }}"><h1 class="brand">{{ .Site.Title }}</h1></a>-->
<a href="{{ .Site.BaseURL }}">{{ with .Site.Params.authorimage }} <img src="{{.}}" alt="WFT Logo" class="" width=""> {{ end }}</a> <a href="{{ .Site.BaseURL }}">{{ with .Site.Params.authorimage }} <img src="{{.}}" alt="WFT Logo" class="" width=""> {{ end }}</a>

View File

@ -1,5 +1,4 @@
html, html, body
body
{ {
font-family: 'Fira Sans', sans-serif; font-family: 'Fira Sans', sans-serif;
font-size: 18px; font-size: 18px;
@ -7,6 +6,10 @@ body
line-height: 1.5; line-height: 1.5;
} }
.clear {
clear: both;
}
.img-circle .img-circle
{ {
border-radius: 50%; border-radius: 50%;

View File

@ -34,13 +34,14 @@
html { html {
font-family: 'Fira Sans', 'Helvetica Neue', 'Arial', sans-serif; font-family: 'Fira Sans', 'Helvetica Neue', 'Arial', sans-serif;
font-weight:300; font-weight:300;
} }
@media (min-width: 48em) { @media (min-width: 48em) {
html { html {
font-size: 16px; font-size: 16px;
} }
} }
@media (min-width: 58em) { @media (min-width: 58em) {
html { html {
font-size: 20px; font-size: 20px;
@ -63,13 +64,14 @@ pre {
padding: 2rem 1rem; padding: 2rem 1rem;
color: rgba(255,255,255,.5); color: rgba(255,255,255,.5);
background-color: #300030; background-color: #300030;
height: 100%;
float: left;
} }
@media (min-width: 48em) { @media (min-width: 48em) {
.sidebar { .sidebar {
position: fixed; position: relative;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0;
width: 18rem; width: 18rem;
text-align: left; text-align: left;
} }

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -42,7 +42,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -1,5 +1,4 @@
html, html, body
body
{ {
font-family: 'Fira Sans', sans-serif; font-family: 'Fira Sans', sans-serif;
font-size: 18px; font-size: 18px;
@ -7,6 +6,10 @@ body
line-height: 1.5; line-height: 1.5;
} }
.clear {
clear: both;
}
.img-circle .img-circle
{ {
border-radius: 50%; border-radius: 50%;

View File

@ -34,13 +34,14 @@
html { html {
font-family: 'Fira Sans', 'Helvetica Neue', 'Arial', sans-serif; font-family: 'Fira Sans', 'Helvetica Neue', 'Arial', sans-serif;
font-weight:300; font-weight:300;
} }
@media (min-width: 48em) { @media (min-width: 48em) {
html { html {
font-size: 16px; font-size: 16px;
} }
} }
@media (min-width: 58em) { @media (min-width: 58em) {
html { html {
font-size: 20px; font-size: 20px;
@ -63,13 +64,14 @@ pre {
padding: 2rem 1rem; padding: 2rem 1rem;
color: rgba(255,255,255,.5); color: rgba(255,255,255,.5);
background-color: #300030; background-color: #300030;
height: 100%;
float: left;
} }
@media (min-width: 48em) { @media (min-width: 48em) {
.sidebar { .sidebar {
position: fixed; position: relative;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0;
width: 18rem; width: 18rem;
text-align: left; text-align: left;
} }

View File

@ -41,7 +41,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -42,7 +42,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -40,7 +40,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>

View File

@ -42,7 +42,7 @@
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="container sidebar-sticky"> <div class="container">
<div class="sidebar-about text-center"> <div class="sidebar-about text-center">
<a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a> <a href="https://wtfutil.com/"> <img src="/img/wtf.png" alt="WFT Logo" class="" width=""> </a>