diff options
| author | gurusabarish <gurusabarisha@gmail.com> | 2022-03-03 20:03:40 +0300 |
|---|---|---|
| committer | gurusabarish <gurusabarisha@gmail.com> | 2022-03-03 20:03:40 +0300 |
| commit | 47f9d64515dccaded68b0e0c711a03667be6ab3c (patch) | |
| tree | 86387e922ac945958280386bfa2babf1c4d9e77a | |
| parent | 7e3632490bb66a7d1a2da74408279de5b4cf3e41 (diff) | |
single page
28 files changed, 526 insertions, 71 deletions
@@ -1 +1,55 @@ -# Hugo Profile
\ No newline at end of file +# Hugo Profile
+
+# Navy Variant
+#### Demo: [here](./docs/demos/navyVariant/gif.gif)
+```yaml
+color:
+ textColor: "#F5F5F5"
+ secondaryTextColor: "#F5F5F5"
+ backgroundColor: "#313552"
+ primaryColor: "#F1E0AC"
+ secondaryColor: "#30475E"
+```
+
+# Blue Variant
+#### Demo: [here](./docs/demos/blueVariant/gif.gif)
+```yaml
+color:
+ textColor: "#2C3333"
+ secondaryTextColor: "#F5F5F5"
+ backgroundColor: "#54BAB9"
+ primaryColor: "#F0F0F0"
+ secondaryColor: "#78C2C3"
+```
+
+# Red Variant
+#### Demo: [here](./docs/demos/redVariant/gif.gif)
+```yaml
+color:
+ textColor: "#121212"
+ secondaryTextColor: "#311D3F"
+ backgroundColor: "#FF6363"
+ primaryColor: "#30475E"
+ secondaryColor: "#F05454"
+```
+
+# Green Variant
+#### Demo: [here](./docs/demos/greenVariant/gif.gif)
+```yaml
+color:
+ textColor: "#161616"
+ secondaryTextColor: "#311D3F"
+ backgroundColor: "#34BE82"
+ primaryColor: "#194350"
+ secondaryColor: "#2FDD92"
+```
+# Pink Variant
+#### Demo: [here](./docs/demos/pinkVariant/gif.gif)
+```yaml
+color:
+ textColor: "#D1D1D1"
+ secondaryTextColor: "#C1A3A3"
+ backgroundColor: "#470D21"
+ primaryColor: "#F3F0D7"
+ secondaryColor: "#781D42"
+```
\ No newline at end of file diff --git a/docs/demos/blueVariant/gif.gif b/docs/demos/blueVariant/gif.gif Binary files differnew file mode 100644 index 0000000..665ec09 --- /dev/null +++ b/docs/demos/blueVariant/gif.gif diff --git a/docs/demos/blueVariant/screenshot.png b/docs/demos/blueVariant/screenshot.png Binary files differnew file mode 100644 index 0000000..032f6e0 --- /dev/null +++ b/docs/demos/blueVariant/screenshot.png diff --git a/docs/demos/greenVariant/gif.gif b/docs/demos/greenVariant/gif.gif Binary files differnew file mode 100644 index 0000000..9e39186 --- /dev/null +++ b/docs/demos/greenVariant/gif.gif diff --git a/docs/demos/greenVariant/screenshot.png b/docs/demos/greenVariant/screenshot.png Binary files differnew file mode 100644 index 0000000..7b9bc95 --- /dev/null +++ b/docs/demos/greenVariant/screenshot.png diff --git a/docs/demos/greyVariant/gif.gif b/docs/demos/greyVariant/gif.gif Binary files differnew file mode 100644 index 0000000..9d6913f --- /dev/null +++ b/docs/demos/greyVariant/gif.gif diff --git a/docs/demos/greyVariant/screenshot.png b/docs/demos/greyVariant/screenshot.png Binary files differnew file mode 100644 index 0000000..0d287a7 --- /dev/null +++ b/docs/demos/greyVariant/screenshot.png diff --git a/docs/demos/navyVariant/gif.gif b/docs/demos/navyVariant/gif.gif Binary files differnew file mode 100644 index 0000000..5b82182 --- /dev/null +++ b/docs/demos/navyVariant/gif.gif diff --git a/docs/demos/navyVariant/screenshot.png b/docs/demos/navyVariant/screenshot.png Binary files differnew file mode 100644 index 0000000..cf79fe1 --- /dev/null +++ b/docs/demos/navyVariant/screenshot.png diff --git a/docs/demos/pinkVariant/gif.gif b/docs/demos/pinkVariant/gif.gif Binary files differnew file mode 100644 index 0000000..7e4bdb8 --- /dev/null +++ b/docs/demos/pinkVariant/gif.gif diff --git a/docs/demos/pinkVariant/screenshot.png b/docs/demos/pinkVariant/screenshot.png Binary files differnew file mode 100644 index 0000000..ba26e82 --- /dev/null +++ b/docs/demos/pinkVariant/screenshot.png diff --git a/docs/demos/redVariant/gif.gif b/docs/demos/redVariant/gif.gif Binary files differnew file mode 100644 index 0000000..eaab5a1 --- /dev/null +++ b/docs/demos/redVariant/gif.gif diff --git a/docs/demos/redVariant/screenshot.png b/docs/demos/redVariant/screenshot.png Binary files differnew file mode 100644 index 0000000..de0dd17 --- /dev/null +++ b/docs/demos/redVariant/screenshot.png diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 5c4b914..77bc398 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -4,6 +4,11 @@ title: "Hugo Profile" Paginate: 3
+markup:
+ goldmark:
+ renderer:
+ unsafe: true
+
Menus:
main:
- identifier: blog
@@ -47,11 +52,11 @@ params: # color preference
# color:
# textColor:
- # secondaryTextColor:
- # backgroundColor:
- # secondaryBackgroundColor:
- # primaryColor:
- # secondaryColor:
+ # secondaryTextColor:
+ # backgroundColor:
+ # secondaryBackgroundColor:
+ # primaryColor:
+ # secondaryColor:
# darkmode:
# textColor:
@@ -251,10 +256,10 @@ params: featured:
name: Demo
link: https://hugo-profile.netlify.app
- badges:
- - "Hugo"
- - "Bootstrap"
- - "Javascript"
+ # badges:
+ # - "Hugo"
+ # - "Bootstrap"
+ # - "Javascript"
links:
- icon: fa fa-envelope
url: mailto:?subject=Hugo%20Profile%20Template&body=Check%20it%20out:%20https%3a%2f%2fhugo-profile.netlify.app%2fblog%2fmarkdown-syntax%2f
@@ -269,9 +274,9 @@ params: featured:
name: Demo
link: https://django-converter.herokuapp.com
- badges:
- - "Django"
- - "Bootstrap"
+ # badges:
+ # - "Django"
+ # - "Bootstrap"
links:
- icon: fab fa-github
url: https://github.com/gurusabarish/converter
@@ -282,10 +287,10 @@ params: featured:
name: Demo V2
link: https://hugo-profile-2.netlify.app
- badges:
- - "Hugo"
- - "Bootstrap"
- - "Javascript"
+ # badges:
+ # - "Hugo"
+ # - "Bootstrap"
+ # - "Javascript"
links:
- icon: fab fa-github
url: https://github.com/gurusabarish/HugoProfileV2
@@ -305,5 +310,3 @@ params: twitter: https://twitter.com
instagram: https://instagram.com
facebook: https://facebook.com
-
-
diff --git a/exampleSite/content/blogs/emoji-support.md b/exampleSite/content/blogs/emoji-support.md index f305bae..6a021b4 100644 --- a/exampleSite/content/blogs/emoji-support.md +++ b/exampleSite/content/blogs/emoji-support.md @@ -6,12 +6,14 @@ github_link: "https://github.com/gurusabarish/hugo-profile" author: "Gurusabarish" tags: - Emoji support -bg_image: "" + - Sample + - example +image: /images/post.jpg description: "" toc: --- -Emoji can be enabled in a Hugo project in a number of ways. +Emoji can be enabled in a Hugo project in a number of ways. :zap: The [emojify](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes). @@ -27,8 +29,4 @@ The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference .emoji { font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols; } -``` - -<br> - -[Markdown format for emoji](https://gist.github.com/rxaviers/7360908) +```
\ No newline at end of file diff --git a/exampleSite/content/blogs/markdown-syntax.md b/exampleSite/content/blogs/markdown-syntax.md index d2746c1..f6fd883 100644 --- a/exampleSite/content/blogs/markdown-syntax.md +++ b/exampleSite/content/blogs/markdown-syntax.md @@ -6,7 +6,9 @@ github_link: "https://github.com/gurusabarish/hugo-profile" author: "Gurusabarish" tags: - Markdown syntax -bg_image: "" + - Sample + - example +image: /images/post.jpg description: "" toc: --- @@ -14,17 +16,6 @@ toc: This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme. <!--more--> -## Headings - -The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest. - -# H1 -## H2 -### H3 -#### H4 -##### H5 -###### H6 - ## Paragraph Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat. @@ -36,14 +27,14 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations. -#### Blockquote without attribution +### Blockquote without attribution > Tiam, ad mint andaepu dandae nostion secatur sequo quae. > **Note** that you can use *Markdown syntax* within a blockquote. -#### Blockquote with attribution +### Blockquote with attribution > Don't communicate by sharing memory, share memory by communicating.</p> @@ -61,7 +52,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou | Bob | 27 | | Alice | 23 | -#### Inline Markdown within tables +### Inline Markdown within tables | Inline | Markdown | In | Table | | ------------------------ | -------------------------- | ----------------------------------- | ------ | @@ -69,7 +60,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou ## Code Blocks -#### Code block with backticks +### Code block with backticks ``` html <!DOCTYPE html> @@ -83,7 +74,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou </body> </html> ``` -#### Code block indented with four spaces +### Code block indented with four spaces <!DOCTYPE html> <html lang="en"> @@ -96,7 +87,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou </body> </html> -#### Code block with Hugo's internal highlight shortcode +### Code block with Hugo's internal highlight shortcode {{< highlight html >}} <!DOCTYPE html> <html lang="en"> @@ -112,23 +103,34 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou ## List Types -#### Ordered List +### Ordered List 1. First item 2. Second item 3. Third item -#### Unordered List +### Unordered List * List item * Another item * And another item -#### Nested list +### Nested list * Item -1. First Sub-item -2. Second Sub-item + 1. First Sub-item + 2. Second Sub-item + +## Headings + +The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest. + +# H1 +## H2 +### H3 +#### H4 +##### H5 +###### H6 ## Other Elements — abbr, sub, sup, kbd, mark diff --git a/exampleSite/content/blogs/placeholder-text.md b/exampleSite/content/blogs/placeholder-text.md index 19012bf..93f03d6 100644 --- a/exampleSite/content/blogs/placeholder-text.md +++ b/exampleSite/content/blogs/placeholder-text.md @@ -6,7 +6,9 @@ github_link: "https://github.com/gurusabarish/hugo-profile" author: "Gurusabarish" tags: - Placeholder text -bg_image: "" + - Sample + - example +image: /images/post.jpg description: "" toc: --- diff --git a/exampleSite/content/blogs/rich-content.md b/exampleSite/content/blogs/rich-content.md index ac5aba7..2810685 100644 --- a/exampleSite/content/blogs/rich-content.md +++ b/exampleSite/content/blogs/rich-content.md @@ -5,7 +5,9 @@ draft: false author: "Gurusabarish" tags: - Rich content -bg_image: "" + - Sample + - example +image: /images/post.jpg description: "" toc: --- diff --git a/exampleSite/static/images/post.jpg b/exampleSite/static/images/post.jpg Binary files differnew file mode 100644 index 0000000..fb04d67 --- /dev/null +++ b/exampleSite/static/images/post.jpg diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 9cdd2a0..eef7aa1 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,5 +1,9 @@ {{ define "head" }}
<meta name="description" content="{{ .Title }}">
+<link rel="stylesheet" href="/css/single.css">
+
+<!-- fontawesome -->
+<script defer src="/fontawesome-5/all-5.15.4.js"></script>
{{ end }}
{{ define "title" }}
@@ -7,4 +11,80 @@ {{ end }}
{{ define "main" }}
+<section id="single">
+ <div class="container">
+ <div class="row justify-content-center">
+ <div class="col-sm-12 col-md-12 col-lg-9">
+ <div class="pr-lg-4">
+ <div class="title mb-5">
+ <h1 class="text-center mb-4">{{ .Title }}</h1>
+ <div class="text-center">
+ {{ .Params.author }}
+ <small>|</small>
+ {{ .Date.Format "Jan 2, 2006" }}
+ </div>
+ </div>
+ {{ if .Params.image }}
+ <div class="featured-image">
+ <img class="img-fluid" src="{{ .Params.image }}" alt="{{ .Title }}">
+ </div>
+ {{ end }}
+ <article class="page-content">
+ {{ .Content | emojify }}
+ </article>
+ </div>
+ </div>
+ <div class="col-sm-12 col-md-12 col-lg-3">
+ <div class="sticky-sidebar">
+ {{ if .Params.toc | default true}}
+ <aside class="toc">
+ <h5>
+ Table Of Contents
+ </h5>
+ <div class="toc-content">
+ {{.TableOfContents}}
+ </div>
+ </aside>
+ {{ end }}
+
+ {{ if .Params.tags }}
+ <aside class="tags">
+ <h5>Tags</h5>
+ <ul class="tags-ul list-unstyled list-inline">
+ {{range .Params.tags}}
+ <li class="list-inline-item"><a href="{{`tags` | absURL}}/{{.| urlize}}" target="_blank">{{.}}</a></li>
+ {{end}}
+ </ul>
+ </aside>
+ {{end}}
+
+ {{ if .Params.socialShare | default true }}
+ <aside class="social">
+ <h5>Social</h5>
+ <div class="social-content">
+ <ul class="list-inline">
+ <li class="list-inline-item text-center">
+ <a target="_blank" href="https://twitter.com/share?text={{ .Title }}&url={{ .Site.Params.hostName }}{{ .Permalink | absURL }}">
+ <i class="fab fa-twitter"></i>
+ </a>
+ </li>
+ <li class="list-inline-item text-center">
+ <a target="_blank" href="https://api.whatsapp.com/send?text={{ .Title }}: {{ .Site.Params.hostName }}{{ .Permalink | absURL }}">
+ <i class="fab fa-whatsapp"></i>
+ </a>
+ </li>
+ <li class="list-inline-item text-center">
+ <a target="_blank" href="mailto:?subject={{ .Title }}&body=Check out this site {{ .Site.Params.hostName }}{{ .Permalink | absURL }}">
+ <i class="fa fa-envelope"></i>
+ </a>
+ </li>
+ </ul>
+ </div>
+ </aside>
+ {{ end }}
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
{{ end }}
\ No newline at end of file diff --git a/layouts/blogs/single.html b/layouts/blogs/single.html deleted file mode 100644 index 9cdd2a0..0000000 --- a/layouts/blogs/single.html +++ /dev/null @@ -1,10 +0,0 @@ -{{ define "head" }}
-<meta name="description" content="{{ .Title }}">
-{{ end }}
-
-{{ define "title" }}
-{{.Title }} | {{ .Site.Title }}
-{{ end }}
-
-{{ define "main" }}
-{{ end }}
\ No newline at end of file diff --git a/static/css/footer.css b/static/css/footer.css index 294c163..7655881 100644 --- a/static/css/footer.css +++ b/static/css/footer.css @@ -1,3 +1,6 @@ +footer a h5 {
+ color: var(--text-color) !important;
+}
footer a {
text-decoration: none;
@@ -24,14 +27,21 @@ footer .card-text * { background-color: var(--secondary-color) !important;
}
+footer .card-footer {
+ background-color: var(--background-color) !important;
+ padding: .8em .7em;
+}
+
footer .card-footer a {
color: var(--text-secondary-color) !important;
border-color: var(--primary-color) !important;
transition: none;
+ background-color: var(--background-color) !important;
}
footer .card-footer a:hover {
color: var(--primary-color) !important;
+ opacity: 0.8;
}
footer .card-footer a:focus {
diff --git a/static/css/header.css b/static/css/header.css index 0c266ad..db3eafa 100644 --- a/static/css/header.css +++ b/static/css/header.css @@ -1,3 +1,12 @@ +header .navbar .navbar-nav a {
+ color: var(--text-color) !important;
+}
+
+#theme-toggle {
+ background-color: var(--background-color) !important;
+ color: var(--text-color) !important;
+}
+
.navbar-toggler {
border: none;
outline: none;
@@ -22,9 +31,20 @@ header .nav-link{ .navbar .nav-link:hover {
color: var(--primary-color) !important;
}
-li> .dropdown-toggle:focus{
+
+li > .dropdown-toggle:focus{
color: var(--primary-color) !important;
}
+
+.dropdown-menu {
+ background-color: var(--background-color) !important;
+ border-color: var(--text-secondary-color) !important;
+}
+
.dropdown-item:hover {
background-color: var(--secondary-color) !important;
+}
+
+.dropdown-item:focus, .dropdown-item:active {
+ background-color: var(--secondary-color) !important;
}
\ No newline at end of file diff --git a/static/css/index.css b/static/css/index.css index bc9e43e..7360d91 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -55,9 +55,9 @@ }
#hero a.btn.social-icon {
- color: var(--primary-color);
+ color: var(--primary-color) !important;
line-height: 0%;
- border-radius: 50% ;
+ border-radius: 50%;
margin-top: 50px;
padding: 0.7rem;
border: 1px solid var(--primary-color);
@@ -76,6 +76,7 @@ margin-top: 50px;
padding: 0.7rem 1.75rem;
border: 1px solid var(--primary-color);
+ color: var(--text-color) !important;
border-radius: .75rem;
transition: none;
}
@@ -157,7 +158,8 @@ }
#about .content {
- opacity: 0.95 !important;
+ font-weight: 500;
+ opacity: 0.9 !important;
line-height: 1.7rem !important;
}
@@ -193,7 +195,7 @@ }
#experience .tab-pane > * {
- opacity: 0.95;
+ opacity: 0.9;
}
#experience .tab-pane small {
@@ -217,12 +219,14 @@ }
#experience .nav-item .nav-link {
+ color: var(--text-color) !important;
border-bottom: 2px solid transparent;
border-radius: 0%;
transition: none;
}
-#experience .nav-item .nav-link.active {
+#experience .nav-item .nav-link.active {
+ color: var(--text-color) !important;
border-bottom: 2px solid var(--primary-color);
opacity: 0.8;
}
@@ -231,7 +235,7 @@ transition: none !important;
}
-#experience .nav-item .nav-link:hover {
+#experience .nav-item .nav-link:hover {
border-bottom: 2px solid var(--primary-color);
opacity: 0.8;
}
@@ -349,6 +353,12 @@ border: 2px solid var(--primary-color) !important;
}
+#education .card .card-body .education-content a {
+ color: var(--primary-color) !important;
+ text-decoration: none;
+ opacity: 0.9;
+}
+
#education .card .card-body > a h6 {
display: inline-block;
text-decoration: none;
@@ -373,6 +383,7 @@ #education .card .card-body a.btn {
opacity: 0.9;
border: 1px solid var(--primary-color) !important;
+ color: var(--text-color) !important;
border-radius: .75rem;
box-shadow: none;
transition: none;
@@ -405,6 +416,11 @@ cursor: alias;
}
+#achievements .card h5 {
+ color: var(--text-color) !important;
+ opacity: 0.9;
+}
+
#achievements .card:hover {
border: 2px solid var(--text-color);
transition: .3s;
@@ -425,13 +441,13 @@ color: var(--text-secondary-color) !important;
}
-
#contact .btn {
transition: none;
transition: opacity 0.3s;
border-radius: .5rem !important;
border-color: var(--primary-color) !important;
background-color: var(--secondary-color) !important;
+ color: var(--text-color) !important;
}
#contact .btn:hover {
diff --git a/static/css/list.css b/static/css/list.css index 5e3806a..583ef90 100644 --- a/static/css/list.css +++ b/static/css/list.css @@ -10,6 +10,10 @@ text-decoration: none;
}
+#list-page .card a h5 {
+ color: var(--text-color) !important;
+}
+
#list-page .card:hover {
border: 1px solid var(--secondary-color);
transition: all 0.3s ease-out;
@@ -23,8 +27,9 @@ #list-page .post-footer {
padding: .5rem 1rem;
background-color: var(--secondary-color) !important;
- color: var(--text-secondary-color) !important;
+ color: var(--text-color) !important;
border-top: 1px solid rgba(15, 80, 100, 0.16);
+ opacity: 0.9;
}
#list-page .post-footer a {
@@ -47,6 +52,8 @@ #list-page ul li a {
transition: none;
border-color: var(--secondary-color);
+ background-color: var(--secondary-color) !important;
+ color: var(--text-color) !important;
}
#list-page ul li a:focus {
@@ -55,4 +62,6 @@ #list-page .page-item.active .page-link {
border-color: var(--primary-color);
+ background-color: var(--primary-color) !important;
+ color: var(--secondary-color) !important;
}
diff --git a/static/css/projects.css b/static/css/projects.css index 9c10da8..7c9e267 100644 --- a/static/css/projects.css +++ b/static/css/projects.css @@ -6,6 +6,13 @@ #projects a {
text-decoration: none;
+ color: var(--text-color) !important;
+}
+
+#projects .badge {
+ background-color: var(--background-color) !important;
+ color: var(--text-color) !important;
+ margin: 0 1%;
}
#projects .card {
@@ -14,6 +21,7 @@ min-height: 400px;
overflow: hidden;
border-radius: 1rem;
+ border: none !important;
}
#projects .card:hover {
@@ -28,6 +36,7 @@ overflow: hidden;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
+ border: none !important;
}
#projects .card .card-footer {
diff --git a/static/css/single.css b/static/css/single.css new file mode 100644 index 0000000..fb05a12 --- /dev/null +++ b/static/css/single.css @@ -0,0 +1,260 @@ +#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: 50px;
+}
+
+/* Tags */
+#single aside.tags h5 {
+ margin: .7em 0;
+ margin-bottom: 1em;
+}
+
+
+#single aside.tags ul.tags-ul li a {
+ padding: 10px 15px;
+ margin-bottom: 2px;
+ border-radius: 8px;
+ background-color: var(--background-color);
+ text-decoration: none;
+ color: var(--text-color);
+}
+
+#single aside.tags ul.tags-ul li {
+ margin-bottom: 1.2rem;
+}
+
+#single aside.tags ul.tags-ul li:hover {
+ opacity: 0.8;
+}
+
+
+/*TOC*/
+#single aside.toc {
+ padding: .7rem 1rem;
+}
+
+#single aside.toc h5 {
+ margin: .7em 0;
+ margin-bottom: 1em;
+ color: var(--text-color);
+}
+
+#single aside.toc .toc-content ol, #single aside.toc .toc-content ul {
+ margin-bottom: 1em;
+ padding-left: .5em;
+ list-style: none;
+ opacity: 0.9;
+}
+
+#single aside.toc .toc-content ol li a, #single aside.toc .toc-content ul li a {
+ font-size: 16px;
+ text-decoration: none;
+ color: var(--text-color);
+ opacity: 0.9;
+}
+
+#single aside.toc .toc-content ol li a:hover, #single aside.toc .toc-content ul li a:hover {
+ color: var(--primary-color);
+ opacity: 1.2;
+}
+
+#single aside.toc .toc-content ol li li, #single aside.toc .toc-content ul li li {
+ padding-left: .7em;
+}
+
+/* Social */
+
+#single aside.social {
+ padding: .7rem 1rem;
+}
+
+#single aside.social h5 {
+ margin: .7em 0;
+ margin-bottom: 1em;
+ color: var(--text-color);
+}
+
+#single aside.social .social-content {
+ margin-bottom: 1em;
+ opacity: 0.9;
+}
+
+#single aside.social .social-content ul {
+ margin-bottom: 1em;
+ opacity: 0.9;
+}
+
+#single aside.social .social-content ul li a {
+ border: 1px solid var(--primary-color);
+ padding: .7rem;
+ color: var(--text-color);
+ border-radius: 10px;
+ overflow: hidden;
+}
+
+#single aside.social .social-content ul li {
+ margin: .7rem .5rem;
+ margin-left: 0;
+}
+
+#single aside.social .social-content ul li:hover a {
+ opacity: .8;
+ color: var(--primary-color);
+}
\ No newline at end of file diff --git a/static/css/theme.css b/static/css/theme.css index a1be949..18abbae 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -1,5 +1,5 @@ /* light mode */
-.light, *{
+.light > *{
background-color: var(--background-color) !important;
color: var(--text-color) !important;
}
|
