From a1e633362eeef3c53fe5e2ef1ec9b2688d75563f Mon Sep 17 00:00:00 2001 From: wileybaba Date: Sun, 27 Jan 2019 19:53:38 -0700 Subject: css changes and blog support --- .DS_Store | Bin 0 -> 6148 bytes exampleSite/config.toml | 29 ++++---- layouts/_default/baseof.html | 5 +- layouts/_default/section.html | 28 ++++++++ layouts/blog/single.html | 2 +- layouts/partials/footer.html | 9 ++- layouts/partials/header.html | 12 +++- layouts/partials/list.html | 4 ++ static/css/main.css | 38 +++++++++- static/css/toggle.css | 157 ++++++++++++++++++++++++++++++++++++++++++ theme.toml | 2 - 11 files changed, 262 insertions(+), 24 deletions(-) create mode 100644 .DS_Store create mode 100644 layouts/_default/section.html create mode 100644 layouts/partials/list.html create mode 100644 static/css/toggle.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/.DS_Store differ diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 315f30e..eda12e4 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -14,9 +14,10 @@ twitter = "wiley_baba" instagram = "wileybaba" fork = "github.com/wileybaba/Robotico_hugo_theme" progressively = true - defaultContentLanguage = 'en' +# Menus + [languages] [languages.en] languageCode = "en-us" @@ -82,17 +83,17 @@ defaultContentLanguage = 'en' url = "https://www.buymeacoffee.com/gokmen" weight = 120 -# Gallery +# Gallery - [[params.portfolio]] - link = "https://picsum.photos/1200/768.jpg?image=251" - [[params.portfolio]] - link = "https://picsum.photos/1200/768.jpg?image=252" - [[params.portfolio]] - link = "https://picsum.photos/1200/768.jpg?image=253" - [[params.portfolio]] - link = "https://picsum.photos/1200/768.jpg?image=254" - [[params.portfolio]] - link = "https://picsum.photos/1200/768.jpg?image=255" - [[params.portfolio]] - link = "https://picsum.photos/1200/768.jpg?image=256" + [[params.portfolio]] + link = "https://picsum.photos/1200/768.jpg?image=251" + [[params.portfolio]] + link = "https://picsum.photos/1200/768.jpg?image=252" + [[params.portfolio]] + link = "https://picsum.photos/1200/768.jpg?image=253" + [[params.portfolio]] + link = "https://picsum.photos/1200/768.jpg?image=254" + [[params.portfolio]] + link = "https://picsum.photos/1200/768.jpg?image=255" + [[params.portfolio]] + link = "https://picsum.photos/1200/768.jpg?image=256" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 547c29f..7cede5d 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -31,8 +31,11 @@ + + + {{ if .Site.Params.highlightjs }} - + {{ end }} {{ if .Site.Params.progressively }} diff --git a/layouts/_default/section.html b/layouts/_default/section.html new file mode 100644 index 0000000..9d19f41 --- /dev/null +++ b/layouts/_default/section.html @@ -0,0 +1,28 @@ +{{ define "main" }} + {{ partial "header" . }} + +
+
+
+
+
+ {{ partial "content" . }} +
+ +
+

{{ i18n "sections" }}

+
    + {{ range sort .Pages "Title" "asc" }} +
  • + {{ .Title }} +
    • + {{ end }} +
+
+
+
+
+
+ + {{ partial "footer" . }} +{{ end }} diff --git a/layouts/blog/single.html b/layouts/blog/single.html index 774cb38..9dae847 100644 --- a/layouts/blog/single.html +++ b/layouts/blog/single.html @@ -21,7 +21,7 @@ {{ end }} - {{ .ReadingTime }} minute read + ⏱️ {{ .ReadingTime }} minute read
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 4751017..1afd117 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -45,13 +45,13 @@ {{ end }} {{ if .Site.Params.email }} - + email {{ end }} {{ if .Site.Params.fork}} - + fork this page {{ end }} @@ -65,6 +65,11 @@ {{ end }} {{ end }}
+ + diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 1b982ea..39d0056 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -12,7 +12,6 @@

{{ .Site.Title }}

 - diff --git a/layouts/partials/list.html b/layouts/partials/list.html new file mode 100644 index 0000000..142130c --- /dev/null +++ b/layouts/partials/list.html @@ -0,0 +1,4 @@ +
  • + {{ .Date.Format "Jan 02, 2006" }} + {{ .Title }} +
    • diff --git a/static/css/main.css b/static/css/main.css index 79e95bb..f7d4a8e 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,6 +1,7 @@ /* Global styles */ body { font-family: "Raleway"; + /* background-color: #3a3d3c; */ } a { @@ -29,6 +30,10 @@ a:hover { color: #5188ef !important; } +.text-bmc:hover { + color: #5179ea !important; +} + /* Partial: Header */ .header a:hover { text-decoration: none; @@ -55,6 +60,10 @@ a:hover { color: #f4b642; } +.langToggle a:hover { + color: #51ef7e !important; +} + .header ul.nav li:first-child a { padding-left: 2px; } @@ -138,14 +147,39 @@ a:hover { .content .markdown pre { font-family: "Menlo", monospace; font-size: 0.98rem; - background-color: #f7f7f7; + border-radius: 1rem; } .content .markdown code { /* enclosed by single backtick (`) */ padding: 0.15em 0.5em; border-radius: 2px; - color: #7adbbc; + background-color: #000645; +} + +.content .markdown .js code { + color: #FFFF33 !important; + background-color: #cccaca !important; +} + +.content .markdown .go code { + color: #426ab9 !important; + background-color: #cccaca !important; +} + +.content .markdown .python code { + color: #54aabd !important; + background-color: #cccaca !important; +} + +.content .markdown .ruby code { + color: #9c1e1f !important; + background-color: #cccaca !important; +} + +.content .markdown .php code { + color: #5566aa !important; + background-color: #cccaca !important; } .content .markdown pre { diff --git a/static/css/toggle.css b/static/css/toggle.css new file mode 100644 index 0000000..c91cf43 --- /dev/null +++ b/static/css/toggle.css @@ -0,0 +1,157 @@ +.toggle { + display: block; + text-align: center; + margin-top: 40px; + user-select: none; +} + +.toggle--checkbox { + display: none; +} + +.toggle--btn { + display: block; + margin: 0 auto; + font-size: 1.4em; + transition: all 350ms ease-in; +} +.toggle--btn:hover { + cursor: pointer; +} + +.toggle--btn, .toggle--btn:before, .toggle--btn:after, +.toggle--checkbox, +.toggle--checkbox:before, +.toggle--checkbox:after, +.toggle--feature, +.toggle--feature:before, +.toggle--feature:after { + transition: all 250ms ease-in; +} +.toggle--btn:before, .toggle--btn:after, +.toggle--checkbox:before, +.toggle--checkbox:after, +.toggle--feature:before, +.toggle--feature:after { + content: ''; + display: block; +} + +/* =================================================== + Day/Night and Gender toggle buttons + =================================================== */ +.toggle--daynight .toggle--btn, +.toggle--like .toggle--btn { + position: relative; + height: 70px; + width: 125px; + border-radius: 70px; +} +.toggle--daynight .toggle--btn:before, +.toggle--like .toggle--btn:before { + position: absolute; + top: 2px; + left: 4px; + width: 56px; + height: 56px; + border-radius: 50%; +} + +.toggle--daynight .toggle--btn { + border: 5px solid #1c1c1c; + background-color: #3c4145; +} +.toggle--daynight .toggle--btn:before { + background-color: #fff; + border: 5px solid #e3e3c7; +} +.toggle--daynight .toggle--btn:after { + position: absolute; + top: 62%; + left: 39px; + z-index: 10; + width: 11.2px; + height: 11.2px; + opacity: 0; + background-color: #fff; + border-radius: 50%; + box-shadow: #fff 0 0, #fff 3px 0, #fff 6px 0, #fff 9px 0, #fff 11px 0, #fff 14px 0, #fff 16px 0, #fff 21px -1px 0 1px, #fff 16px -7px 0 -2px, #fff 7px -7px 0 1px, #d3d3d3 0 0 0 4px, #d3d3d3 6px 0 0 4px, #d3d3d3 11px 0 0 4px, #d3d3d3 16px 0 0 4px, #d3d3d3 21px -1px 0 5px, #d3d3d3 16px -7px 0 1px, #d3d3d3 7px -7px 0 5px; + transition: opacity 100ms ease-in; +} +@keyframes starry_star { + 50% { + background-color: rgba(255, 255, 255, 0.1); + box-shadow: #fff 30px -3px 0 0, #fff 12px 10px 0 -1px, rgba(255, 255, 255, 0.1) 38px 18px 0 1px, #fff 32px 34px 0 0, rgba(255, 255, 255, 0.1) 20px 24px 0 -1.5px, #fff 5px 38px 0 1px; + } +} +@keyframes bounceIn { + 0% { + opacity: 0; + transform: scale(0.3); + } + 50% { + opacity: 100; + transform: scale(1.1); + } + 55% { + transform: scale(1.1); + } + 75% { + transform: scale(0.9); + } + 100% { + opacity: 100; + transform: scale(1); + } +} +.toggle--daynight .toggle--feature { + display: block; + position: absolute; + top: 9px; + left: 52.5%; + z-index: 20; + width: 4px; + height: 4px; + border-radius: 50%; + background-color: #fff; + box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 0, rgba(255, 255, 255, 0.1) 12px 10px 0 -1px, #fff 38px 18px 0 1px, rgba(255, 255, 255, 0.1) 32px 34px 0 0, #fff 20px 24px 0 -1.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 1px; + animation: starry_star 5s ease-in-out infinite; +} +.toggle--daynight .toggle--feature:before { + position: absolute; + top: -2px; + left: -25px; + width: 18px; + height: 18px; + background-color: #fff; + border-radius: 50%; + border: 5px solid #e3e3c7; + box-shadow: #e3e3c7 -28px 0 0 -3px, #e3e3c7 -8px 24px 0 -2px; + transform-origin: -6px 130%; +} +.toggle--daynight .toggle--checkbox:checked + .toggle--btn { + background-color: #9ee3fb; + border: 5px solid #86c3d7; +} +.toggle--daynight .toggle--checkbox:checked + .toggle--btn:before { + left: 55px; + background-color: #ffdf6d; + border: 5px solid #e1c348; +} +.toggle--daynight .toggle--checkbox:checked + .toggle--btn:after { + opacity: 100; + animation-name: bounceIn; + animation-duration: 0.60s; + animation-delay: 0.10s; + animation-fill-mode: backwards; + animation-timing-function: ease-in-out; +} +.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature { + opacity: 0; + box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 -4px, rgba(255, 255, 255, 0.1) 12px 10px 0 -5px, #fff 38px 18px 0 -3px, rgba(255, 255, 255, 0.1) 32px 34px 0 -4px, #fff 20px 24px 0 -5.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 -3px; + animation: none; +} +.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature:before { + left: 25px; + transform: rotate(70deg); +} diff --git a/theme.toml b/theme.toml index 2817f82..d9c1ca8 100644 --- a/theme.toml +++ b/theme.toml @@ -1,11 +1,9 @@ name = "Robotico" license = "MIT" -licenselink = "https://github.com/wileybaba/hugo-theme-robotico/blob/master/LICENSE.md" description = "A lightweight and blazing fast personal website theme" homepage = "https://github.com/wileybaba/hugo-theme-robotico" features = ["responsive", "gallery", "multilingual"] tags = ["fast", "responsive", "bootstrap", "personal"] -min_version = "0.41" [author] name = "Wiley McKay Conte" -- cgit v1.2.3