diff options
author | Guru Sabarish <gurusabarisha@gmail.com> | 2022-06-02 13:08:21 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-06-02 13:08:21 +0300 |
commit | fe073530a66099b267b2fbb4a403ff09657e0e8b (patch) | |
tree | b684a78ea076955ff0ffb87c998a0a39719f9949 | |
parent | a9c44f9ead93060186ce1f17d485e45fe89ef88e (diff) | |
parent | f89a131319fb42645c89efd3decb531eb72c491c (diff) |
Merge pull request #59 from gurusabarish/multipage
Added about page and dropdowm z-index fixed
-rw-r--r-- | layouts/_default/about.html | 86 | ||||
-rw-r--r-- | layouts/_default/single.html | 4 | ||||
-rw-r--r-- | static/css/about.css | 252 | ||||
-rw-r--r-- | static/css/header.css | 7 | ||||
-rw-r--r-- | static/css/single.css | 4 |
5 files changed, 349 insertions, 4 deletions
diff --git a/layouts/_default/about.html b/layouts/_default/about.html new file mode 100644 index 0000000..0994f8f --- /dev/null +++ b/layouts/_default/about.html @@ -0,0 +1,86 @@ +{{ define "head" }} +<meta name="description" content="{{ .Params.description }}"> +<link rel="stylesheet" href="{{.Site.Params.staticPath}}/css/about.css"> + +<!-- fontawesome --> +<script defer src="{{.Site.Params.staticPath}}/fontawesome-5/all-5.15.4.js"></script> +{{ end }} + +{{ define "title" }} +{{.Title }} | {{ .Site.Title }} +{{ end }} + +{{ define "main" }} +<section id="single"> + <div class="container"> + <div class="title mb-3"> + <h1 class="text-center mb-4">{{ .Title }}</h1> + </div> + <div class="row justify-content-center"> + {{ if .Params.image }} + <div class="col-sm-12 col-md-12 col-lg-3 px-3"> + <div class="sticky-sidebar"> + <aside class="aboutImg"> + <div class="text-center"> + <img src="{{ .Params.image }}" class="mx-auto rounded" alt=""> + </div> + <h2 class="text-center pt-3"> + {{ .Params.name }} + </h2> + <div class="aboutImg-content"> + <ul class="list-inline pt-3 text-center"> + {{ range .Params.socialLinks.fontAwesomeIcons }} + <li class="list-inline-item text-center"> + <a href="{{ .url }}" target="_blank"> + <i class="{{ .icon }}"></i> + </a> + </li> + {{ end }} + + {{ range .Params.socialLinks.customIcons }} + <li class="list-inline-item text-center"> + <a href="{{ .url }}" target="_blank" class="img-icon"> + <img src="{{ .icon }}"> + </a> + </li> + {{ end }} + </ul> + </div> + </aside> + </div> + </div> + {{ end }} + + <div class="col-sm-12 col-md-12 col-lg-6 pt-4 p-2"> + <div class="pr-lg-4"> + <article class="page-content p-2"> + {{ .Content | emojify }} + </article> + </div> + </div> + </div> + </div> + <button class="p-2 px-3" onclick="topFunction()" id="topScroll"> + <i class="fas fa-angle-up"></i> + </button> +</section> + +<script> + var topScroll = document.getElementById("topScroll"); + window.onscroll = function () { scrollFunction() }; + + function scrollFunction() { + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + topScroll.style.display = "block"; + } else { + topScroll.style.display = "none"; + } + } + + function topFunction() { + document.body.scrollTop = 0; + document.documentElement.scrollTop = 0; + } +</script> + +{{ end }}
\ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 9b9e51b..85f11cd 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -29,7 +29,7 @@ <img class="img-fluid" src="{{ .Params.image }}" alt="{{ .Title }}">
</div>
{{ end }}
- <article class="page-content">
+ <article class="page-content p-2">
{{ .Content | emojify }}
</article>
</div>
@@ -86,7 +86,7 @@ </div>
</div>
<div class="row">
- <div class="col-sm-12 col-md-12 col-lg-9 p-2">
+ <div class="col-sm-12 col-md-12 col-lg-9 p-4">
{{ template "_internal/disqus.html" . }}
</div>
</div>
diff --git a/static/css/about.css b/static/css/about.css new file mode 100644 index 0000000..b2aa0ef --- /dev/null +++ b/static/css/about.css @@ -0,0 +1,252 @@ +#single { + padding: 60px 0; + line-height: 1.7em; + font-size: 17px; +} + +#single .title>h1 { + opacity: 0.8; + color: var(--text-color) !important; +} + +#single .title small { + opacity: 0.7; +} + +#single .featured-image { + padding: 1rem; + padding-top: 0; +} + +#single .featured-image img { + border-radius: 1rem; + box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); + margin-bottom: 1rem; +} + +#single .page-content a { + display: inline-block; + text-decoration: none; + color: var(--primary-color) !important; +} + +#single .page-content a::after { + content: ""; + display: block; + width: 0px; + height: 2px; + bottom: 0.37em; + background-color: var(--primary-color); + transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); + opacity: 0.5; +} + +#single .page-content a:hover::after, +#single .page-content a:focus::after, +#single .page-content a:active::after { + width: 100%; +} + +#single .page-content h1, +#single .page-content h2, +#single .page-content h3, +#single .page-content h4, +#single .page-content h5, +#single .page-content h6 { + color: var(--primary-color) !important; + margin-bottom: 0.7em; + opacity: 0.9; +} + +#single .page-content blockquote { + padding: 20px 30px; + border-left: 6px solid var(--primary-color) !important; + color: var(--text-secondary-color) !important; + font-weight: 600; + font-size: 20px; + margin: 30px 0; + border-radius: 5px; +} + +#single .page-content blockquote, +#single .page-content blockquote * { + background-color: var(--secondary-color) !important; +} + +/* table */ +#single .page-content table { + width: auto; + border-radius: 5px; + padding: 0.1rem; + margin-bottom: 1.2em; + max-width: 100%; + display: block; + overflow-x: auto; + opacity: 0.8; +} + +#single .page-content table>tr { + height: 40px !important; +} + +#single .page-content table>thead>tr>th { + padding: 0.5rem !important; + background-color: var(--primary-color) !important; + color: var(--secondary-color) !important; + border: 1px solid var(--secondary-color); + opacity: 0.9; +} + +#single .page-content table>tbody>tr>td { + padding: 0.5rem !important; + border: 1px solid var(--secondary-color); + background-color: var(--secondary-color) !important; + opacity: 0.9; +} + +#single .page-content table>thead>tr { + background-color: var(--secondary-color) !important; + color: var(--secondary-color) !important; +} + +/* code */ + +#single .page-content pre { + border-radius: 0.7em !important; + margin: 5px; + margin-bottom: 2em; + padding: 2em; + background-color: var(--secondary-color) !important; + color: var(--text-secondary-color) !important; + max-height: 450px; +} + +#single .page-content pre>code { + color: var(--text-secondary-color) !important; +} + +#single .page-content code { + color: var(--primary-color) !important; +} + +/* kbd and mark */ + +#single .page-content kbd { + color: var(--primary-color) !important; + background-color: var(--secondary-color) !important; +} + +#single .page-content mark { + color: var(--primary-color) !important; + background-color: var(--secondary-color) !important; +} + +/* list */ + +#single .page-content ol, +#single .page-content ul { + margin-bottom: 1.2em; + padding-left: 1.5em; + list-style-position: inside; + opacity: 0.9; +} + +#single .page-content ol li li, +#single .page-content ul li li { + margin-bottom: 0.5em; + padding-left: 1.5em; +} + +/* sidebar */ + +#single aside { + /* background-color: var(--secondary-color); */ + border-radius: .7rem; + padding: .7rem 1rem; + margin-bottom: 1em; +} + +#single .sticky-sidebar { + position: sticky; + top: 150px; +} + +/* aboutImg */ + +#single aside.aboutImg { + padding: .7rem 1rem; +} + +#single aside.aboutImg img { + border-radius: 1.5rem !important; + position: relative; + /* box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.2); */ + max-width: 100%; +} +@media (min-width: 768px) and (max-width: 1024px) { + #single aside.aboutImg img { + width: 60%; + } + } + + +#single aside.aboutImg h5 { + margin: .7em 0; + margin-bottom: 1em; + color: var(--text-color); +} + +#single aside.aboutImg .img-icon img { + width: 1em; +} + +#single aside.aboutImg .aboutImg-content { + margin-bottom: 1em; + opacity: 0.9; +} + +#single aside.aboutImg .aboutImg-content ul { + margin-bottom: 1em; + opacity: 0.9; +} + +#single aside.aboutImg .aboutImg-content ul li a { + border: 1px solid var(--primary-color); + padding: .7rem; + color: var(--text-color); + border-radius: 10px; + overflow: hidden; +} + +#single aside.aboutImg .aboutImg-content ul li { + margin: .7rem .5rem; + margin-left: 0; +} + +#single aside.aboutImg .aboutImg-content ul li:hover a { + opacity: .8; + color: var(--primary-color); +} + +/* Top scroll */ + +#single #topScroll { + display: none; + position: fixed; + bottom: 20px; + right: 20px; + z-index: 99; + border: none; + outline: none; + background-color: var(--secondary-color); + color: var(--primary-color); + cursor: pointer; + border-radius: 10px; +} + +#single #topScroll:hover { + background-color: var(--primary-color); + color: var(--secondary-color); + transition: .5s; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); +}
\ No newline at end of file diff --git a/static/css/header.css b/static/css/header.css index 3a0f2f3..7cc57e6 100644 --- a/static/css/header.css +++ b/static/css/header.css @@ -1,3 +1,8 @@ +header {
+ z-index: 10;
+ position: relative;
+}
+
header .navbar .navbar-nav a {
color: var(--text-color) !important;
}
@@ -39,6 +44,8 @@ li > .dropdown-toggle:focus{ }
.dropdown-menu {
+ overflow: auto;
+ /* z-index: 100; */
background-color: var(--background-color) !important;
border-color: var(--text-secondary-color) !important;
}
diff --git a/static/css/single.css b/static/css/single.css index acfcd53..56aae88 100644 --- a/static/css/single.css +++ b/static/css/single.css @@ -264,8 +264,8 @@ #single #topScroll {
display: none;
position: fixed;
- bottom: 10px;
- right: 10px;
+ bottom: 20px;
+ right: 20px;
z-index: 99;
border: none;
outline: none;
|