diff options
Diffstat (limited to 'assets/sass/main.scss')
| -rw-r--r-- | assets/sass/main.scss | 767 |
1 files changed, 767 insertions, 0 deletions
diff --git a/assets/sass/main.scss b/assets/sass/main.scss new file mode 100644 index 0000000..9a36146 --- /dev/null +++ b/assets/sass/main.scss @@ -0,0 +1,767 @@ +// Theme specific colors +{{ $theme := site.Params.theme }} + +$clr1: {{ $theme.clr1 | default "#7d1fa5" }}; +$clr2: {{ $theme.clr2 | default "#6d19fc" }}; +$nav: {{ $theme.nav | default "#ffffff" }}; //background +$antinav: {{ $theme.antinav | default "#000000" }}; // text +$mat: {{ $theme.mat | default "#f9f9f9" }}; +$clr1-light: mix($clr1, $nav, 5%); +$clr2-light: mix($clr2, $nav, 5%); +$nav-light: mix($nav, $antinav, 5%); // text +$antinav-light: mix($antinav, $nav, 2%); // background + +// Import partials from sass dir +@import + "bootstrap/bootstrap", + "fa" +; + +/*! for logo f41845, 1e3fe7 ; light colors-for dark theme ff5c7c, 617bff + * Custom CSS + */ + +html { +scroll-behavior: smooth; +} + +// specifying this at top, so that, it is overridden when need be +body { +font-family: '{{ default "Lato" site.Params.font.general.family }}', sans-serif !important; +background: $nav !important; +color: $antinav !important; +} + +.brand { +font-family: '{{ default "Lato" site.Params.font.brand.family }}', sans-serif !important; +} + +{{ if site.Params.brand.color }} +.brand-color { +color: {{ site.Params.brand.color }} !important; +} +{{ end }} + +{{ with site.Params.font.heading.list }} + {{- range . }} + {{- . }}, .{{ . }} { + font-family: '{{ site.Params.font.heading.family }}' !important; + } + {{- end }} +{{- end }} + +.description { +font-family: '{{ default "Lato" site.Params.font.description.family }}', sans-serif !important; +} + +.footer { +font-family: '{{ default "Lato" site.Params.font.footer.family }}', sans-serif !important; +} + +.copyright { +font-family: '{{ default "Lato" site.Params.font.copyright.family }}', sans-serif !important; +} + +.post-meta { +font-family: '{{ default "Lato" site.Params.font.postMeta.family }}', sans-serif !important; +} + +.softorage { +background: linear-gradient(36deg,#fc466b,#3f5efb); +background-clip: text; +color: transparent; +font-family: Roboto, sans-serif; +} +// especially, search bar +@media (min-width: 650px) { + .mobile-only { + display: none; + } +} + +@media (max-width: 650px) { + .desktop-only { + display: none; + } +} + +pre { +@extend .p-3; +{{ if ne site.Params.theme.borders "square" }} +@extend .rounded; +{{ end }} +} + +// Enable animation for navbar and font awesome +.navbar, a, .fas, .fab, .far, .type-search, tr { +transition: all 0.3s ease 0s; +} + +// +.nav-tabs .nav-link.active { +box-shadow: inset 0 2px 3px 1px #ddd; +} + +// +.btn { +@extend .shadow-sm; +cursor: pointer; +{{ if eq site.Params.theme.borders "square" }} +@extend .rounded-0; +{{ end }} +} + +input[type="search"]:hover, input[type="search"]:focus { +box-shadow: none; +} + +input[type="url"]:hover, input[type="url"]:focus, input[type="text"]:hover, input[type="text"]:focus, input[type="email"]:hover, input[type="email"]:focus, .type-search:hover, .type-search:focus-within, textarea:hover, textarea:focus, select:hover, select:focus, .btn:hover { +@extend .shadow; +transition: all 0.3s ease 0s; +} + +// * +.card { +@extend .shadow-sm, .border-0, .p-3; +background: $nav; +color: $antinav; +{{ if eq site.Params.theme.borders "square" }} +@extend .rounded-0; +{{ end }} +} + +// Styling popover to make it a little cozy +.popover { +border: 0; +@extend .shadow; +} + +.popover .popover-header { +background-color: $nav; +color: $antinav; +font-size: 1.1rem; +text-align: center; +font-family: 'Lato', sans-serif; +} + +.popover .popover-body { +background-color: $nav; +color: $antinav; +padding: 1.25rem; +font-family: 'Lato', sans-serif; +} + +// +.tooltip { +font-family: 'Lato', sans-serif; +} + + +// Styling table, so that class names are not necessary. Very handy for markdown rendered content! +table { +@extend .table, .table-bordered; +} +th { +@extend .text-center, .align-middle; +} +td { +@extend .align-middle; +} + + +.hero-gradient { +background: $clr1 !important; +background: linear-gradient(36deg, $clr1 0%, $clr2 80%) !important; +} + +.hero-gradient-light { +background: $clr1-light !important; +background: linear-gradient(36deg, $clr1-light 0%, $clr2-light 80%) !important; +} + + +.bg-clr1 { +background: mix($clr1, $clr2, 95%) !important; +} + +.bg-clr2 { +background: mix($clr1, $clr2, 5%) !important; +} + +.bg-clr1-light { +background: $clr1-light !important; +} + +.bg-clr2-light { +background: $clr2-light !important; +} + +.bg-nav { +background: $nav !important; +} + +.bg-antinav { +background: $antinav !important; +} + +.bg-nav-light { +background: $nav-light !important; +} + +.bg-antinav-light { +background: $antinav-light !important; +} + +.bg-mat { +background: $mat !important; +} + +.text-gradient { +background: linear-gradient(36deg, $clr1 0%, $clr1 80%) !important; +background-clip: text !important; +color: transparent !important; +} + +.text-clr1 { +color: $clr1 !important; +} + +.text-clr2 { +color: $clr2 !important; +} + +.text-clr1-light { +color: $clr1-light !important; +} + +.text-clr2-light { +color: $clr2-light !important; +} + +.text-nav { +color: $nav !important; +} + +.text-nav-light { +color: $nav-light !important; +} + +.text-antinav { +color: $antinav !important; +} + +.text-antinav-light { +color: $antinav-light !important; +} + +.btn-grad { +background-image: linear-gradient(90deg, $clr1 0%, $clr2 100%); +} + +// +button.close{ +outline: none; +} + +// * general icons to be shown in black, even when they are used in anchored tags +.fa-comments { +color: #000000; +} + +.fa-rss { +color: #f26522; +} + +// * brands +.fa-gitlab { +color: #fca326; +} + +.fa-github { +color: #333333; +} + +.fa-steam { +color: #00adee; +} + +.fa-twitter { +color: #1da1f2; +} + +.fa-facebook { +color: #3b5998; +} + +.fa-instagram { +color: #e1306c; +} + +.fa-youtube { +color: #ff0000; +} + +.fa-pinterest { +color: #bd081c; +} + +.fa-google-plus { +color: #dd4b39; +} + +.fa-linkedin { +color: #0077b5; +} + +.fa-reddit { +color: #ff4500; +} + +.fa-flickr { +color: #0063dc; +} + +.fa-deviantart { +color: #05cc47; +} + +.fa-vk { +color: #45668e; +} + +.fa-mastodon { +color: #2A8FDD; +} + +.fa-bandcamp { +color: #629aa9; +} + +.fa-tumblr { +color: #35465c; +} + +.fa-medium { +color: #000000; +} + +.fa-wikipedia-w { +color: #000000; +} + +.fa-telegram { +color: #0088cc; +} + +.fa-whatsapp { +color: #25d366; +} + +.fa-apple { +color: #666666; +} + +.fa-android { +color: #a4c639; +} + +.fa-linux { +color: #000000; +} + +.fa-windows { +color: #0078d7; +} + +{{ if eq site.Params.cookieConsent.switch "on" }} +/* purgecss start ignore */ +// Cookie Consent from Osano; url: https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css +// osano cookie consent customization +.cc-window { +box-shadow: 0 -0.5rem 1rem rgba(0,0,0,.045) !important; // @extend .shadow; just shadow drops above +font-size: 75% !important; +font-weight: 400; +} + +// osano cookie consent css - prettified; +.cc-window { + opacity: 1; + -webkit-transition: opacity 1s ease; + transition: opacity 1s ease +} + +.cc-window.cc-invisible { + opacity: 0 +} + +.cc-animate.cc-revoke { + -webkit-transition: transform 1s ease; + -webkit-transition: -webkit-transform 1s ease; + transition: -webkit-transform 1s ease; + transition: transform 1s ease; + transition: transform 1s ease, -webkit-transform 1s ease +} + +.cc-animate.cc-revoke.cc-top { + -webkit-transform: translateY(-2em); + transform: translateY(-2em) +} + +.cc-animate.cc-revoke.cc-bottom { + -webkit-transform: translateY(2em); + transform: translateY(2em) +} + +.cc-animate.cc-revoke.cc-active.cc-top { + -webkit-transform: translateY(0); + transform: translateY(0) +} + +.cc-animate.cc-revoke.cc-active.cc-bottom { + -webkit-transform: translateY(0); + transform: translateY(0) +} + +.cc-revoke:hover { + -webkit-transform: translateY(0); + transform: translateY(0) +} + +.cc-grower { + max-height: 0; + overflow: hidden; + -webkit-transition: max-height 1s; + transition: max-height 1s +} + +.cc-revoke, +.cc-window { + position: fixed; + overflow: hidden; + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-family: Helvetica, Calibri, Arial, sans-serif; + font-size: 16px; + line-height: 1.5em; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + z-index: 9999 +} + +.cc-window.cc-static { + position: static +} + +.cc-window.cc-floating { + padding: 2em; + max-width: 24em; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column +} + +.cc-window.cc-banner { + padding: 1em 1.8em; + width: 100%; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row +} + +.cc-revoke { + padding: .5em +} + +.cc-revoke:hover { + text-decoration: underline +} + +.cc-header { + font-size: 18px; + font-weight: 700 +} + +.cc-btn, +.cc-close, +.cc-link, +.cc-revoke { + cursor: pointer +} + +.cc-link { + opacity: .8; + display: inline-block; + padding: .2em; + text-decoration: underline +} + +.cc-link:hover { + opacity: 1 +} + +.cc-link:active, +.cc-link:visited { + color: initial +} + +.cc-btn { + display: block; + padding: .4em .8em; + font-size: .9em; + font-weight: 700; + border-width: 2px; + border-style: solid; + text-align: center; + white-space: nowrap +} + +.cc-highlight .cc-btn:first-child { + background-color: transparent; + border-color: transparent +} + +.cc-highlight .cc-btn:first-child:focus, +.cc-highlight .cc-btn:first-child:hover { + background-color: transparent; + text-decoration: underline +} + +.cc-close { + display: block; + position: absolute; + top: .5em; + right: .5em; + font-size: 1.6em; + opacity: .9; + line-height: .75 +} + +.cc-close:focus, +.cc-close:hover { + opacity: 1 +} + +.cc-revoke.cc-top { + top: 0; + left: 3em; + border-bottom-left-radius: .5em; + border-bottom-right-radius: .5em +} + +.cc-revoke.cc-bottom { + bottom: 0; + left: 3em; + border-top-left-radius: .5em; + border-top-right-radius: .5em +} + +.cc-revoke.cc-left { + left: 3em; + right: unset +} + +.cc-revoke.cc-right { + right: 3em; + left: unset +} + +.cc-top { + top: 1em +} + +.cc-left { + left: 1em +} + +.cc-right { + right: 1em +} + +.cc-bottom { + bottom: 1em +} + +.cc-floating>.cc-link { + margin-bottom: 1em +} + +.cc-floating .cc-message { + display: block; + margin-bottom: 1em +} + +.cc-window.cc-floating .cc-compliance { + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto +} + +.cc-window.cc-banner { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center +} + +.cc-banner.cc-top { + left: 0; + right: 0; + top: 0 +} + +.cc-banner.cc-bottom { + left: 0; + right: 0; + bottom: 0 +} + +.cc-banner .cc-message { + display: block; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + max-width: 100%; + margin-right: 1em +} + +.cc-compliance { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-line-pack: justify; + align-content: space-between +} + +.cc-floating .cc-compliance>.cc-btn { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1 +} + +.cc-btn+.cc-btn { + margin-left: .5em +} + +@media print { + .cc-revoke, + .cc-window { + display: none + } +} + +@media screen and (max-width:900px) { + // osano cookie consent customization + .cc-window { + box-shadow: 0 -0.5rem 1rem rgba(0,0,0,.045) !important; // @extend .shadow; just shadow drops above + font-size: 75% !important; + font-weight: 400; + } + .cc-btn { + white-space: normal + } +} + +@media screen and (max-width:414px) and (orientation:portrait), +screen and (max-width:736px) and (orientation:landscape) { + // osano cookie consent customization + .cc-window { + box-shadow: 0 -0.5rem 1rem rgba(0,0,0,.045) !important; // @extend .shadow; just shadow drops above + font-size: 75% !important; + font-weight: 400; + } + .cc-window.cc-top { + top: 0 + } + .cc-window.cc-bottom { + bottom: 0 + } + .cc-window.cc-banner, + .cc-window.cc-floating, + .cc-window.cc-left, + .cc-window.cc-right { + left: 0; + right: 0 + } + .cc-window.cc-banner { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column + } + .cc-window.cc-banner .cc-compliance { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto + } + .cc-window.cc-floating { + max-width: none + } + .cc-window .cc-message { + margin-bottom: 1em + } + .cc-window.cc-banner { + -webkit-box-align: unset; + -ms-flex-align: unset; + align-items: unset + } + .cc-window.cc-banner .cc-message { + margin-right: 0 + } +} + +.cc-floating.cc-theme-classic { + padding: 1.2em; + border-radius: 5px +} + +.cc-floating.cc-type-info.cc-theme-classic .cc-compliance { + text-align: center; + display: inline; + -webkit-box-flex: 0; + -ms-flex: none; + flex: none +} + +.cc-theme-classic .cc-btn { + border-radius: 5px +} + +.cc-theme-classic .cc-btn:last-child { + min-width: 140px +} + +.cc-floating.cc-type-info.cc-theme-classic .cc-btn { + display: inline-block +} + +.cc-theme-edgeless.cc-window { + padding: 0 +} + +.cc-floating.cc-theme-edgeless .cc-message { + margin: 2em; + margin-bottom: 1.5em +} + +.cc-banner.cc-theme-edgeless .cc-btn { + margin: 0; + padding: .8em 1.8em; + height: 100% +} + +.cc-banner.cc-theme-edgeless .cc-message { + margin-left: 1em +} + +.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn { + margin-left: 0 +} +/* purgecss end ignore */ +{{ end }} |