Bundle CSS with Hugo's Sass feature (#705)
* migrate bootstrap and flags to bundle * migrated main.css * migrate navbar.css and plyr * migrated mulish font and darkreader * migrated static/css/sections stylesheets * migrated list page and sidebar styles * migrated search.html ( nothing to add ) * migration single page styles * remove duplicated style tags * migrate notes. Deleted unused css in static * migrate 404 css to bundle * migrate katex styles * migrate embedpdf styles * migrated katex css --------- Co-authored-by: Aaron Qian <aaron@yeet.io>
This commit is contained in:
Aaron Qian
GitHub
parent
cef76eb748
commit
d9eccf58f4
670 changed files with 4108 additions and 12000 deletions
10
assets/jsconfig.json
Normal file
10
assets/jsconfig.json
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"*": [
|
||||||
|
"*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,4 +1,12 @@
|
||||||
import hljs from 'highlight.js'
|
import hljs from 'highlight.js'
|
||||||
import * as params from '@params'
|
import * as params from '@params'
|
||||||
|
|
||||||
hljs.highlightAll(params.syntaxhighlight?.hljs)
|
const defaultOptions = {
|
||||||
|
ignoreUnescapedHTML: true
|
||||||
|
}
|
||||||
|
|
||||||
|
hljs.configure({
|
||||||
|
...defaultOptions,
|
||||||
|
...(params.syntaxhighlight?.hljs || {}),
|
||||||
|
});
|
||||||
|
hljs.highlightAll();
|
||||||
|
|
|
||||||
64
assets/styles/application.template.scss
Normal file
64
assets/styles/application.template.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
// loading bootstrap
|
||||||
|
// TODO: Refactor to use bootstrap sass variable for theming.
|
||||||
|
@import 'bootstrap/scss/bootstrap';
|
||||||
|
|
||||||
|
// The Mulish font, we use font-weight 300 - 700
|
||||||
|
@import '@fontsource/mulish/300';
|
||||||
|
@import '@fontsource/mulish/index'; // 400
|
||||||
|
@import '@fontsource/mulish/500';
|
||||||
|
@import '@fontsource/mulish/600';
|
||||||
|
@import '@fontsource/mulish/700';
|
||||||
|
|
||||||
|
// layouts
|
||||||
|
@import './layouts/main';
|
||||||
|
@import './layouts/list';
|
||||||
|
@import './layouts/single';
|
||||||
|
@import './layouts/notes';
|
||||||
|
@import './layouts/404';
|
||||||
|
|
||||||
|
// navigators
|
||||||
|
@import './navigators/navbar';
|
||||||
|
@import './navigators/sidebar';
|
||||||
|
|
||||||
|
|
||||||
|
// sections
|
||||||
|
@import './sections/home';
|
||||||
|
@import './sections/about';
|
||||||
|
@import './sections/skills';
|
||||||
|
@import './sections/experiences';
|
||||||
|
@import './sections/education';
|
||||||
|
@import './sections/projects';
|
||||||
|
@import './sections/recent-posts';
|
||||||
|
@import './sections/achievements';
|
||||||
|
@import './sections/accomplishments';
|
||||||
|
@import './sections/publications';
|
||||||
|
|
||||||
|
|
||||||
|
// override
|
||||||
|
@import './override';
|
||||||
|
|
||||||
|
// features and services, only imported if enabled.
|
||||||
|
{{ range $feature, $featureDef := site.Params.features }}
|
||||||
|
{{ with $featureDef }}
|
||||||
|
{{ $featureEnabled := or (not (isset . "enable")) .enable }}
|
||||||
|
{{ if $featureEnabled }}
|
||||||
|
{{ with (index site.Data.toha.styles $feature) }}
|
||||||
|
{{ range .styles }}
|
||||||
|
@import '{{.}}';
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ range $service, $config := .services }}
|
||||||
|
{{ with (index site.Data.toha.styles $feature) }}
|
||||||
|
{{ with .services }}
|
||||||
|
{{ with (index . $service) }}
|
||||||
|
{{ range .styles }}
|
||||||
|
@import '{{ . }}';
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
20
assets/styles/colortheme/colortheme.css
Normal file
20
assets/styles/colortheme/colortheme.css
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
/* Note: No need to invert when the screen is small because the navbar is
|
||||||
|
collapsed to a hamburger menu. */
|
||||||
|
@media only screen and (min-width: 1200px) {
|
||||||
|
.dynamic-navbar .navbar-icon-svg-dark {
|
||||||
|
filter: invert(1);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 1200px) {
|
||||||
|
.dropdown-menu-icons-only {
|
||||||
|
width: 25px;
|
||||||
|
min-width: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-icon-center {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
95
assets/styles/layouts/404.scss
Normal file
95
assets/styles/layouts/404.scss
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
body.kind-404 {
|
||||||
|
.navbar-toggler {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notFound {
|
||||||
|
padding-top: 5rem;
|
||||||
|
text-align: center;
|
||||||
|
padding-bottom: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notFound img {
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notFound h1 {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notFound .message {
|
||||||
|
position: absolute;
|
||||||
|
max-width: 20rem;
|
||||||
|
top: 40%;
|
||||||
|
left: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
|
/* Large screens such as TV */
|
||||||
|
@media only screen and (min-width: 1824px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra large devices (large desktops, 1200px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.notFound .message {
|
||||||
|
top: 50%;
|
||||||
|
left: 25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IPad Pro */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large devices (desktops, 992px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.notFound .message {
|
||||||
|
top: 46%;
|
||||||
|
left: 25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium devices (tablets, 768px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.notFound img {
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notFound .message {
|
||||||
|
top: 20rem;
|
||||||
|
left: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 576px) {
|
||||||
|
.notFound img {
|
||||||
|
height: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notFound .message {
|
||||||
|
top: 20rem;
|
||||||
|
left: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galaxy S5, Moto G4 */
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
}
|
||||||
|
}
|
||||||
251
assets/styles/layouts/list.scss
Normal file
251
assets/styles/layouts/list.scss
Normal file
|
|
@ -0,0 +1,251 @@
|
||||||
|
// in Hugo, Page kind can be either "section" or "page".
|
||||||
|
// if it is section, then it's a page with a list of items, for example /posts
|
||||||
|
// if it is page, then it is a single page.
|
||||||
|
body.kind-section {
|
||||||
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section {
|
||||||
|
flex: 80%;
|
||||||
|
order: 2;
|
||||||
|
/* background-color: lightseagreen; */
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 2rem;
|
||||||
|
min-height: 130vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card-holder {
|
||||||
|
margin-top: 32px;
|
||||||
|
margin-left: auto;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card-holder .post-card {
|
||||||
|
width: calc(100% / 3);
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card-holder .card {
|
||||||
|
margin: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card-holder .card .card-footer span {
|
||||||
|
font-size: 10pt;
|
||||||
|
color: #6c757d !important;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card-holder .card .card-footer {
|
||||||
|
background: #fff;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-summary {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
max-height: 144px;
|
||||||
|
/* fallback */
|
||||||
|
-webkit-line-clamp: 5;
|
||||||
|
/* number of lines to show */
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card-holder .post-card-link {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginator {
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginator .page-item > a {
|
||||||
|
color: #248aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginator .page-item.active > a {
|
||||||
|
background-color: #248aaa;
|
||||||
|
color: #f9fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggler {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
|
/* Large screens such as TV */
|
||||||
|
@media only screen and (min-width: 1824px) {
|
||||||
|
.content-section {
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
flex: 85%;
|
||||||
|
max-width: 85%;
|
||||||
|
}
|
||||||
|
.post-card-holder .post-card {
|
||||||
|
width: calc(100% / 5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra large devices (large desktops, 1200px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
.post-card-holder {
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
.post-card-holder .post-card {
|
||||||
|
width: calc(100% / 3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IPad Pro */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.wrapper {
|
||||||
|
padding-left: 0px;
|
||||||
|
padding-right: 0px;
|
||||||
|
}
|
||||||
|
.content-section {
|
||||||
|
padding: 0;
|
||||||
|
flex: 60%;
|
||||||
|
order: 2;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.navbar-toggler {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toc-toggler {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-collapse.lang-selector {
|
||||||
|
display: block !important;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card-holder {
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
position: relative;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card-holder .post-card {
|
||||||
|
width: calc(100% / 3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section.hide .post-card-holder .post-card {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large devices (desktops, 992px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.post-card-holder .post-card {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section.hide .post-card-holder .post-card {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium devices (tablets, 768px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 576px) {
|
||||||
|
.wrapper {
|
||||||
|
padding-left: 0px;
|
||||||
|
padding-right: 0px;
|
||||||
|
flex-flow: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.content-section {
|
||||||
|
flex: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
padding-left: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section.hide .content {
|
||||||
|
margin-top: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section.hide .post-card-holder {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card-holder .post-card {
|
||||||
|
margin-left: 1%;
|
||||||
|
margin-right: 1%;
|
||||||
|
width: 98%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galaxy S5, Moto G4 */
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
}
|
||||||
|
}
|
||||||
516
assets/styles/layouts/main.scss
Normal file
516
assets/styles/layouts/main.scss
Normal file
|
|
@ -0,0 +1,516 @@
|
||||||
|
/* ========= Colors ============
|
||||||
|
Heading: #1C2D41
|
||||||
|
Paragraph: #3C4858
|
||||||
|
Iconography: #8392A5
|
||||||
|
Secondary: #C0CCDA
|
||||||
|
Dirty Snow: #E5E9F2
|
||||||
|
Snow: #F9FAFC
|
||||||
|
|
||||||
|
Magenta: #7551E9
|
||||||
|
Orange: #FF7D51
|
||||||
|
Pink: #ED63D2
|
||||||
|
Green: #2DCA73
|
||||||
|
Yellow: #FFC212
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
Removed smooth scrolling implementation in main.js in favor of
|
||||||
|
simpler css approach.
|
||||||
|
See: https://css-tricks.com/snippets/jquery/smooth-scrolling/
|
||||||
|
*/
|
||||||
|
*, html {
|
||||||
|
scroll-behavior: smooth !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Fixes anchor overlapping with header.
|
||||||
|
See: https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors
|
||||||
|
*/
|
||||||
|
:target::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: 2em; /* fixed header height*/
|
||||||
|
margin: -2em 0 0; /* negative fixed header height */
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #f9fafc;
|
||||||
|
font-family: "Mulish";
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5 {
|
||||||
|
color: #1c2d41;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: #1c2d41 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #3c4858;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #248aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #207089;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
color: #8392a5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dark {
|
||||||
|
background-color: #3c4858!important;
|
||||||
|
border-color: #3c4858!important;
|
||||||
|
color: #e5e9f2!important;
|
||||||
|
transition: all 0.3s ease-out!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dark:hover,
|
||||||
|
.btn-dark:focus {
|
||||||
|
background-color: #248aaa!important;
|
||||||
|
border-color: #248aaa!important;
|
||||||
|
transition: all 0.3s ease-out!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-info {
|
||||||
|
color: #2098d1 !important;
|
||||||
|
border-color: #2098d1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-info:hover {
|
||||||
|
background-color: #2098d1 !important;
|
||||||
|
color: #e5e9f2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-info {
|
||||||
|
background-color: #248aaa !important;
|
||||||
|
color: #e5e9f2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-info:hover {
|
||||||
|
background-color: #2098d1 !important;
|
||||||
|
color: #e5e9f2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-link {
|
||||||
|
color: #248aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-link:hover {
|
||||||
|
color: #207089;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-white {
|
||||||
|
background-color: #f9fafc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-dimmed {
|
||||||
|
background-color: #e5e9f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anchor {
|
||||||
|
padding-top: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.center {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.left {
|
||||||
|
display: block;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.right {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
box-shadow: none;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-img-sm {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-img-xs {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover,
|
||||||
|
.card:focus {
|
||||||
|
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
||||||
|
border: 1px solid #fff;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-head {
|
||||||
|
height: 172px;
|
||||||
|
-o-object-fit: cover;
|
||||||
|
object-fit: cover;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-img-top {
|
||||||
|
transition: all 0.3s ease-out !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover .card-head .card-img-top,
|
||||||
|
.card:focus .card-head .card-img-top {
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-title {
|
||||||
|
color: #c0ccda;
|
||||||
|
font-size: 10pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flag-icon {
|
||||||
|
width: 16px !important;
|
||||||
|
margin-top: 3px;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ====== table ====== */
|
||||||
|
table {
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
background: #e5e9f2;
|
||||||
|
border: 1px solid #c0ccda;
|
||||||
|
padding: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
table tr {
|
||||||
|
height: 40px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
table th,
|
||||||
|
td {
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-left: 1px solid #8392a5;
|
||||||
|
border-bottom: 1px solid #8392a5;
|
||||||
|
}
|
||||||
|
|
||||||
|
table thead tr {
|
||||||
|
background: #248aaa;
|
||||||
|
color: #e5e9f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:nth-child(odd) {
|
||||||
|
background-color: #e5e9f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:hover {
|
||||||
|
background: #c0ccda;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ====== don't apply css to tables inside gist ====== */
|
||||||
|
.gist table {
|
||||||
|
border-radius: unset;
|
||||||
|
background: unset;
|
||||||
|
border: unset;
|
||||||
|
padding: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gist table tr {
|
||||||
|
height: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gist table th,
|
||||||
|
td {
|
||||||
|
padding: unset;
|
||||||
|
border-left: unset;
|
||||||
|
border-bottom: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gist table thead tr {
|
||||||
|
background: unset;
|
||||||
|
color: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gist tbody tr:nth-child(odd) {
|
||||||
|
background-color: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gist tbody tr:hover {
|
||||||
|
background: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gist table td, .gist table tc{
|
||||||
|
border-right: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
border: 1px solid #c0ccda;
|
||||||
|
height: -moz-fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
align-self: center;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
caption,
|
||||||
|
figcaption {
|
||||||
|
caption-side: bottom;
|
||||||
|
text-align: center;
|
||||||
|
color: #8392a5;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre > code {
|
||||||
|
padding: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.header-anchor {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #1c2d41;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.header-anchor i, a.header-anchor svg {
|
||||||
|
font-size: 10pt;
|
||||||
|
color: #3c4858;
|
||||||
|
display: none;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
a.header-anchor:hover i, a.header-anchor:hover svg {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
a.header-anchor code {
|
||||||
|
color: #e83e8c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content ul > ol,
|
||||||
|
.content ol > ul,
|
||||||
|
.content ul > ul,
|
||||||
|
.content ol > ol,
|
||||||
|
.content li > ol,
|
||||||
|
.content li > ul {
|
||||||
|
-webkit-padding-start: 1rem;
|
||||||
|
padding-inline-start: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
background-color: #248aaa !important;
|
||||||
|
color: #f9fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background-color: #ffc21280;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ======= Paginator ========= */
|
||||||
|
.paginator {
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
margin: auto;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginator .page-item > a {
|
||||||
|
color: #248aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginator .page-item.active > a {
|
||||||
|
background-color: #248aaa;
|
||||||
|
color: #f9fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- FOOTER START --- */
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
color: #8392a5 !important;
|
||||||
|
background-color: #1c2d41;
|
||||||
|
position: relative;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer h5 {
|
||||||
|
color: #c0ccda;
|
||||||
|
}
|
||||||
|
.footer a {
|
||||||
|
color: #8392a5;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a:hover {
|
||||||
|
margin-left: 5px;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer ul {
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer li {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer hr {
|
||||||
|
background-color: #8392a5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer p:first-child {
|
||||||
|
color: #c0ccda;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer input {
|
||||||
|
background-color: #c0ccda;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer input:focus {
|
||||||
|
background-color: #e5e9f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer #disclaimer{
|
||||||
|
color: #8392a5 !important;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.footer #disclaimer>strong{
|
||||||
|
color: #c0ccda!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer #theme {
|
||||||
|
color: #c0ccda;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer #theme img {
|
||||||
|
width: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer #hugo:hover {
|
||||||
|
margin-right: 5px;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- FOOTER END ---- */
|
||||||
|
|
||||||
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
|
/* Large screens such as TV */
|
||||||
|
@media only screen and (min-width: 1824px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra large devices (large desktops, 1200px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IPad Pro */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.content-section .languageSelector {
|
||||||
|
position: fixed;
|
||||||
|
right: 0.5rem;
|
||||||
|
bottom: 1rem;
|
||||||
|
z-index: 10000000;
|
||||||
|
background-color: #f9fafc;
|
||||||
|
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
code {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large devices (desktops, 992px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium devices (tablets, 768px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 576px) {
|
||||||
|
.skills-section .container,
|
||||||
|
.projects-section .container,
|
||||||
|
.publications-section .container {
|
||||||
|
padding-left: 0.3rem;
|
||||||
|
padding-right: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-holder {
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills-section,
|
||||||
|
.projects-section,
|
||||||
|
.recent-posts-section,
|
||||||
|
.achievements-section,
|
||||||
|
.publications-section {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
code {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galaxy S5, Moto G4 */
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
252
assets/styles/layouts/notes.scss
Normal file
252
assets/styles/layouts/notes.scss
Normal file
|
|
@ -0,0 +1,252 @@
|
||||||
|
body.type-notes {
|
||||||
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section {
|
||||||
|
flex: 80%;
|
||||||
|
max-width: 80%;
|
||||||
|
order: 2;
|
||||||
|
/* background-color: lightseagreen; */
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 2rem;
|
||||||
|
min-height: 130vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-card-holder{
|
||||||
|
padding-top: 2rem;
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 0.5rem;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(30rem,1fr));
|
||||||
|
grid-auto-rows: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .note-collection {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.note-card {
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-card .card{
|
||||||
|
margin: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-title{
|
||||||
|
padding-left: 1rem;
|
||||||
|
color: #248aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-title span{
|
||||||
|
background: #e5e9f2;
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-title:before{
|
||||||
|
content:'';
|
||||||
|
display:inline-block;
|
||||||
|
width:98%;
|
||||||
|
height:100%;
|
||||||
|
margin-bottom:-26px;
|
||||||
|
border-bottom: 1px solid #248aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-card .card-body{
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-card pre {
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .small-note{
|
||||||
|
max-width: 15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medium-note{
|
||||||
|
max-width: 25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large-note{
|
||||||
|
max-width: 40rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.huge-note{} */
|
||||||
|
|
||||||
|
.note-badge{
|
||||||
|
font-size: 10pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
|
/* Large screens such as TV */
|
||||||
|
@media only screen and (min-width: 1824px) {
|
||||||
|
.content-section {
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
flex: 85%;
|
||||||
|
max-width: 85%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Extra large devices (large desktops, 1200px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
.note-card-holder {
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IPad Pro */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.wrapper {
|
||||||
|
padding-left: 0px;
|
||||||
|
padding-right: 0px;
|
||||||
|
}
|
||||||
|
.content-section {
|
||||||
|
padding: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
order: 2;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section.hide {
|
||||||
|
max-width: 60%;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.navbar-toggler {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toc-toggler {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-collapse.lang-selector {
|
||||||
|
display: block !important;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-card-holder {
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
position: relative;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section.hide .note-card-holder{
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(30rem,1fr));
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large devices (desktops, 992px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.note-card-holder .note-card {
|
||||||
|
max-width: 100%;
|
||||||
|
min-width: 50%;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section.hide .note-card-holder .note-card {
|
||||||
|
max-width: 100%;
|
||||||
|
min-width: 100%;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium devices (tablets, 768px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 576px) {
|
||||||
|
.wrapper {
|
||||||
|
padding-left: 0px;
|
||||||
|
padding-right: 0px;
|
||||||
|
flex-flow: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.content-section, .content-section.hide {
|
||||||
|
flex: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
padding-left: 0;
|
||||||
|
width: 100%;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section.hide .content {
|
||||||
|
margin-top: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section.hide .note-card-holder {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-card-holder .note-card, .content-section.hide .note-card-holder .note-card {
|
||||||
|
margin-left: 1%;
|
||||||
|
margin-right: 1%;
|
||||||
|
max-width: 98%;
|
||||||
|
min-width: 98%;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galaxy S5, Moto G4 */
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
}
|
||||||
|
}
|
||||||
517
assets/styles/layouts/single.scss
Normal file
517
assets/styles/layouts/single.scss
Normal file
|
|
@ -0,0 +1,517 @@
|
||||||
|
body.kind-page {
|
||||||
|
background-color: #e5e9f2;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.read-area {
|
||||||
|
background-color: #f9fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section {
|
||||||
|
flex: 60%;
|
||||||
|
max-width: 60%;
|
||||||
|
order: 2;
|
||||||
|
/* background-color: lightseagreen; */
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
background: #e5e9f2;
|
||||||
|
}
|
||||||
|
.toc-section {
|
||||||
|
flex: 20%;
|
||||||
|
order: 3;
|
||||||
|
max-width: 20%;
|
||||||
|
/* background-color: lightpink; */
|
||||||
|
transition: all ease-out 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-holder {
|
||||||
|
position: sticky;
|
||||||
|
top: 4.5rem;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
background-color: #f9fafc;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
/* box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); */
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc {
|
||||||
|
position: relative;
|
||||||
|
padding-top: 0px;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc nav {
|
||||||
|
padding-top: 0px;
|
||||||
|
margin-top: 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc ul {
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
margin-bottom: 0rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc .nav-link {
|
||||||
|
padding: 0;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
color: #1c2d41;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc .nav-link:hover,
|
||||||
|
.toc .nav-link:focus,
|
||||||
|
.toc .nav-link.active {
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
background-color: #248aaa;
|
||||||
|
color: #f9f9f9;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-area {
|
||||||
|
margin-top: 3rem;
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
top: -4.5rem;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-profile {
|
||||||
|
position: relative;
|
||||||
|
align-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-name {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-profile img {
|
||||||
|
height: 120px;
|
||||||
|
width: 120px;
|
||||||
|
-o-object-fit: cover;
|
||||||
|
object-fit: cover;
|
||||||
|
background-color: #f9fafc;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.author-profile p {
|
||||||
|
color: #8392a5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content h1,
|
||||||
|
h2 {
|
||||||
|
margin-top: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
margin-top: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content blockquote {
|
||||||
|
border-left: 4px solid #248aaa;
|
||||||
|
background-color: #248baa15;
|
||||||
|
padding: 0.3rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content blockquote > p {
|
||||||
|
color: #3c4858;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-prev-navigator {
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-prev-navigator a {
|
||||||
|
color: #2098d1;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-prev-navigator a:hover {
|
||||||
|
color: #3c4858;
|
||||||
|
transition: all 0.3 ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-prev-navigator .next-article {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-prev-navigator .next-article a {
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-prev-navigator .previous-article a {
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-prev-navigator .btn-outline-info {
|
||||||
|
color: #f9fafc !important;
|
||||||
|
border-color: #e5e9f2 !important;
|
||||||
|
background-color: #248aaa !important;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-prev-navigator .next-prev-text {
|
||||||
|
white-space: break-spaces;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-prev-navigator .btn-outline-info:hover {
|
||||||
|
color: #3c4858 !important;
|
||||||
|
background-color: #e5e9f2 !important;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disquss {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-buttons .btn {
|
||||||
|
color: #e5e9f2 !important;
|
||||||
|
transition: all 0.3s ease-out !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-buttons .btn:hover,
|
||||||
|
.share-buttons .btn:focus {
|
||||||
|
background-color: #248aaa !important;
|
||||||
|
border-color: #248aaa !important;
|
||||||
|
transition: all 0.3s ease-out !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-buttons .facebook-btn {
|
||||||
|
background-color: #4267b2 !important;
|
||||||
|
border-color: #4267b2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-buttons .twitter-btn {
|
||||||
|
background-color: #1da1f2 !important;
|
||||||
|
border-color: #1da1f2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-buttons .reddit-btn {
|
||||||
|
background-color: #ff4500 !important;
|
||||||
|
border-color: #ff4500 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-buttons .tumblr-btn {
|
||||||
|
background-color: #34465d !important;
|
||||||
|
border-color: #34465d !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-buttons .pocket-btn {
|
||||||
|
background-color: #ef4056 !important;
|
||||||
|
border-color: #ef4056 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-buttons .linkedin-btn {
|
||||||
|
background-color: #2867b2 !important;
|
||||||
|
border-color: #2867b2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-buttons .diaspora-btn {
|
||||||
|
background-color: #3c4858 !important;
|
||||||
|
border-color: #3c4858 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-buttons .mastodon-btn {
|
||||||
|
background-color: #2791da !important;
|
||||||
|
border-color: #2791da !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-buttons .whatsapp-btn {
|
||||||
|
background-color: #4ac959 !important;
|
||||||
|
border-color: #4ac959 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-buttons .email-btn {
|
||||||
|
background-color: #3c4858 !important;
|
||||||
|
border-color: #3c4858 !important;
|
||||||
|
transition: all 0.3s ease-out !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-improve-page {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.languageSelector {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scroll-to-top {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0rem;
|
||||||
|
right: 1rem;
|
||||||
|
color: #248aaa;
|
||||||
|
font-size: 24pt;
|
||||||
|
z-index: 900000;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scroll-to-top i {
|
||||||
|
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scroll-to-top:hover {
|
||||||
|
color: #2098d1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scroll-to-top.show {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
.taxonomy-terms {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.taxonomy-terms li {
|
||||||
|
font-size: 0.8em;
|
||||||
|
list-style-type: none;
|
||||||
|
display: inline-block;
|
||||||
|
background: #248aaa;
|
||||||
|
margin-left: 0.2em;
|
||||||
|
margin-right: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.taxonomy-terms a {
|
||||||
|
color: #f9fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
|
/* Large screens such as TV */
|
||||||
|
@media only screen and (min-width: 1824px) {
|
||||||
|
.content-section {
|
||||||
|
flex: 65%;
|
||||||
|
max-width: 65%;
|
||||||
|
}
|
||||||
|
.content-section .container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra large devices (large desktops, 1200px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IPad Pro */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.wrapper {
|
||||||
|
padding-left: 0px;
|
||||||
|
padding-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section {
|
||||||
|
padding: 0;
|
||||||
|
flex: 60%;
|
||||||
|
max-width: 100%;
|
||||||
|
order: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-section {
|
||||||
|
order: 3;
|
||||||
|
flex: 0%;
|
||||||
|
max-width: 0%;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
.toc-section.hide {
|
||||||
|
flex: 40%;
|
||||||
|
max-width: 40%;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-holder {
|
||||||
|
top: 3rem;
|
||||||
|
max-height: calc(100vh - 3rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggler {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-collapse.lang-selector {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.languageSelector {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-area {
|
||||||
|
height: 300px;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-improve-page {
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#disqus_thread,
|
||||||
|
.dsq-brlink {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large devices (desktops, 992px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium devices (tablets, 768px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
#scroll-to-top {
|
||||||
|
right: 8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 576px) {
|
||||||
|
.wrapper {
|
||||||
|
padding: 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section {
|
||||||
|
padding: 0;
|
||||||
|
flex: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-section {
|
||||||
|
order: 2;
|
||||||
|
width: 100%;
|
||||||
|
height: -moz-fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
max-height: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
transition: all ease-out 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-section.hide {
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
position: relative;
|
||||||
|
/* height: fit-content; */
|
||||||
|
flex: 100%;
|
||||||
|
height: -moz-fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
max-height: 200vh;
|
||||||
|
max-width: 100%;
|
||||||
|
margin-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
||||||
|
transition: all ease-out 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-holder {
|
||||||
|
max-height: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all ease-out 0.5s;
|
||||||
|
}
|
||||||
|
.toc-section.hide .toc-holder {
|
||||||
|
max-height: 200vh;
|
||||||
|
transition: all ease-out 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggler {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-area {
|
||||||
|
height: 200px;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-prev-navigator .previous-article {
|
||||||
|
text-align: center;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
.next-prev-navigator .next-article {
|
||||||
|
text-align: center;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
.previous-article a,
|
||||||
|
.next-article a {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#disqus_thread,
|
||||||
|
.dsq-brlink {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galaxy S5, Moto G4 */
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
}
|
||||||
|
}
|
||||||
298
assets/styles/navigators/navbar.scss
Normal file
298
assets/styles/navigators/navbar.scss
Normal file
|
|
@ -0,0 +1,298 @@
|
||||||
|
.top-navbar {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
z-index: 99999;
|
||||||
|
transition: all 0.4s ease-out;
|
||||||
|
margin: 0px;
|
||||||
|
padding-top: 0.4rem;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
/* --- initial state start ------ */
|
||||||
|
&.initial-navbar {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.initial-navbar .navbar-brand {
|
||||||
|
color: #c0ccda;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.initial-navbar li a {
|
||||||
|
color: #c0ccda;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.initial-navbar .navbar-nav .active,
|
||||||
|
&.initial-navbar li a:hover {
|
||||||
|
color: #f9fafc;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-collapse {
|
||||||
|
margin-top: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-collapse.show,
|
||||||
|
.navbar-collapse.collapsing {
|
||||||
|
background-color: #f9fafc;
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- initial state end ------ */
|
||||||
|
|
||||||
|
/* --- state after scroll start --- */
|
||||||
|
|
||||||
|
&.final-navbar {
|
||||||
|
background-color: #f9fafc;
|
||||||
|
color: #1c2d41;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.final-navbar .navbar-brand {
|
||||||
|
color: #1c2d41;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.final-navbar li a {
|
||||||
|
color: #1c2d41;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
border-bottom: 2px solid#F9FAFC;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.final-navbar .navbar-nav .active,
|
||||||
|
&.final-navbar li a:hover {
|
||||||
|
color: #2098d1;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
border-bottom: 2px solid #2098d1;
|
||||||
|
background: rgb(2, 0, 36);
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(2, 0, 36, 1) 0%,
|
||||||
|
rgba(34, 136, 168, 0.1) 0%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-collapse.show li a,
|
||||||
|
.navbar-collapse.collapsing li a {
|
||||||
|
color: #1c2d41;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-collapse.show .navbar-nav .active,
|
||||||
|
.navbar-collapse.show .navbar-nav a:hover {
|
||||||
|
color: #2098d1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#top-navbar-divider {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- state after scroll end --- */
|
||||||
|
|
||||||
|
#top-navbar-divider {
|
||||||
|
background: rgba(192, 204, 218, 0.8);
|
||||||
|
height: 20px;
|
||||||
|
width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.final-navbar #top-navbar-divider {
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
#top-navbar-divider {
|
||||||
|
height: 20px;
|
||||||
|
width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand img {
|
||||||
|
width: 42px;
|
||||||
|
padding: 5px;
|
||||||
|
margin-left: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
||||||
|
border: 1px solid #fff;
|
||||||
|
max-height: 0vh;
|
||||||
|
overflow: hidden;
|
||||||
|
display: block;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu.show {
|
||||||
|
max-height: 100vh;
|
||||||
|
visibility: visible;
|
||||||
|
transition: all 0.3s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu a {
|
||||||
|
color: #1c2d41;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu a:hover {
|
||||||
|
color: #2098d1;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
border-bottom: none;
|
||||||
|
background: rgb(2, 0, 36);
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(2, 0, 36, 1) 0%,
|
||||||
|
rgba(34, 136, 168, 0.2) 0%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
|
/* Large screens such as TV */
|
||||||
|
@media only screen and (min-width: 1824px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra large devices (large desktops, 1200px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IPad Pro */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
height: -moz-fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
padding-top: 0px;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.initial-navbar .navbar-nav .active,
|
||||||
|
&.initial-navbar li a:hover {
|
||||||
|
color: #2098d1;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.final-navbar .navbar-nav .active,
|
||||||
|
&.final-navbar li a:hover {
|
||||||
|
color: #2098d1;
|
||||||
|
transition: none;
|
||||||
|
|
||||||
|
border-bottom: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.final-navbar li a {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-divider {
|
||||||
|
border-top: 1px solid #c0ccda;
|
||||||
|
}
|
||||||
|
#top-navbar-divider {
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
.dropdown-menu {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large devices (desktops, 992px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
&.initial-navbar .navbar-nav .active,
|
||||||
|
&.initial-navbar li a:hover {
|
||||||
|
color: #2098d1;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.final-navbar .navbar-nav .active,
|
||||||
|
&.final-navbar li a:hover {
|
||||||
|
color: #2098d1;
|
||||||
|
transition: none;
|
||||||
|
|
||||||
|
border-bottom: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.final-navbar li a {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-divider {
|
||||||
|
border-top: 1px solid #c0ccda;
|
||||||
|
}
|
||||||
|
#top-navbar-divider {
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium devices (tablets, 768px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
&.initial-navbar .navbar-nav .active,
|
||||||
|
&.initial-navbar li a:hover {
|
||||||
|
color: #2098d1;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.final-navbar .navbar-nav .active,
|
||||||
|
&.final-navbar li a:hover {
|
||||||
|
color: #2098d1;
|
||||||
|
transition: none;
|
||||||
|
|
||||||
|
border-bottom: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.final-navbar li a {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-divider {
|
||||||
|
border-top: 1px solid #c0ccda;
|
||||||
|
}
|
||||||
|
#top-navbar-divider {
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 576px) {
|
||||||
|
.dropdown-menu {
|
||||||
|
margin-left: -1rem;
|
||||||
|
margin-right: 0rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galaxy S5, Moto G4 */
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
}
|
||||||
|
}
|
||||||
299
assets/styles/navigators/sidebar.scss
Normal file
299
assets/styles/navigators/sidebar.scss
Normal file
|
|
@ -0,0 +1,299 @@
|
||||||
|
.sidebar-section {
|
||||||
|
order: 1;
|
||||||
|
flex: 20%;
|
||||||
|
max-width: 20%;
|
||||||
|
/* background-color: lightsalmon; */
|
||||||
|
transition: all ease-out 0.5s;
|
||||||
|
|
||||||
|
.sidebar-holder {
|
||||||
|
top: 2.5rem;
|
||||||
|
position: sticky;
|
||||||
|
background-color: #f9fafc;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: auto;
|
||||||
|
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
background: #f9fafc;
|
||||||
|
height: 100vh;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-tree {
|
||||||
|
padding-left: 1rem;
|
||||||
|
position: relative;
|
||||||
|
width: -moz-max-content;
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search-box {
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-right: 5%;
|
||||||
|
width: -webkit-fill-available;
|
||||||
|
height: 35px;
|
||||||
|
padding-left: 15px;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #e5e9f2;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
border: 1px solid #c0ccda;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search-box:focus {
|
||||||
|
border: 1pt solid #248aaa;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#list-heading {
|
||||||
|
padding-left: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree,
|
||||||
|
.tree ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree li {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 1em;
|
||||||
|
line-height: 2em;
|
||||||
|
color: #3c4858;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree li a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #131313;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree li a.active {
|
||||||
|
display: inline;
|
||||||
|
color: #2098d1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree li a:hover {
|
||||||
|
margin-left: 3px;
|
||||||
|
color: #2098d1;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree i {
|
||||||
|
color: #3c4858;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree .shift-right {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree .active,
|
||||||
|
.tree .active > ul {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtree {
|
||||||
|
padding-left: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtree:before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 2.5rem;
|
||||||
|
left: 1.5rem;
|
||||||
|
bottom: 0.9rem;
|
||||||
|
border-left: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtree ul,
|
||||||
|
ul > ul {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtree ul:before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
left: 0.3rem;
|
||||||
|
bottom: 0.9rem;
|
||||||
|
border-left: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtree li:before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
width: 20px;
|
||||||
|
height: 0;
|
||||||
|
border-top: 1px solid;
|
||||||
|
margin-top: -1px;
|
||||||
|
position: absolute;
|
||||||
|
top: 18px;
|
||||||
|
left: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtree li:last-child:before {
|
||||||
|
background: #f9fafc;
|
||||||
|
height: auto;
|
||||||
|
top: 1.1rem;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.focused {
|
||||||
|
color: #2098d1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
|
/* Large screens such as TV */
|
||||||
|
@media only screen and (min-width: 1824px) {
|
||||||
|
flex: 15%;
|
||||||
|
max-width: 15%;
|
||||||
|
|
||||||
|
.sidebar-holder {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* Extra large devices (large desktops, 1200px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
.sidebar-holder {
|
||||||
|
max-width: 20rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.sidebar-tree {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IPad Pro */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
flex: 0%;
|
||||||
|
max-width: 0%;
|
||||||
|
min-height: 100vh;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
|
||||||
|
.sidebar-holder {
|
||||||
|
position: sticky;
|
||||||
|
top: 2.5rem;
|
||||||
|
width: 100%;
|
||||||
|
max-height: calc(100vh - 2.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.hide {
|
||||||
|
flex: 30%;
|
||||||
|
max-width: 30%;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large devices (desktops, 992px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium devices (tablets, 768px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
flex: 0%;
|
||||||
|
max-width: 0%;
|
||||||
|
min-height: 100vh;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
|
||||||
|
.sidebar-holder {
|
||||||
|
position: sticky;
|
||||||
|
top: 2.5rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.hide {
|
||||||
|
flex: 40%;
|
||||||
|
max-width: 40%;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
transition: all ease-out 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 576px) {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 0;
|
||||||
|
max-height: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
transition: all ease-out 0.5s;
|
||||||
|
|
||||||
|
&.hide {
|
||||||
|
margin-top: 2rem;
|
||||||
|
position: relative;
|
||||||
|
height: -moz-fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
flex: none;
|
||||||
|
max-height: 300vh;
|
||||||
|
max-width: 100%;
|
||||||
|
transition: all ease-out 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-holder {
|
||||||
|
max-height: 0;
|
||||||
|
height: -moz-fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 100%;
|
||||||
|
transition: all ease-out 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.hide .sidebar-holder {
|
||||||
|
max-height: 200vh;
|
||||||
|
transition: all ease-out 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
position: relative;
|
||||||
|
height: -moz-fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
max-height: -moz-fit-content;
|
||||||
|
max-height: fit-content;
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all ease-out 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-tree {
|
||||||
|
margin-left: 0rem;
|
||||||
|
max-height: 0;
|
||||||
|
transition: all 0.5s ease-out;
|
||||||
|
}
|
||||||
|
&.hide .sidebar-tree {
|
||||||
|
max-height: 200vh;
|
||||||
|
transition: all 0.5s ease-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galaxy S5, Moto G4 */
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
}
|
||||||
|
}
|
||||||
15
assets/styles/override.scss
Normal file
15
assets/styles/override.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
/* override this file for custom css */
|
||||||
|
|
||||||
|
/* you can import boostrap mixins */
|
||||||
|
// @import 'bootstrap/scss/mixins';
|
||||||
|
// Example usage
|
||||||
|
// .some-class {
|
||||||
|
// @include media-breakpoint-up(sm) {
|
||||||
|
// // Larger than sm: 576px
|
||||||
|
// display: inline;
|
||||||
|
// }
|
||||||
|
// @include media-breakpoint-down(md) {
|
||||||
|
// // Smaller than md: 768px
|
||||||
|
// display: block;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
387
assets/styles/sections/about.scss
Normal file
387
assets/styles/sections/about.scss
Normal file
|
|
@ -0,0 +1,387 @@
|
||||||
|
#about {
|
||||||
|
.social-link {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link a {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #3c4858;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link a:hover {
|
||||||
|
color: #248aaa;
|
||||||
|
transition: all 0.3s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress {
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
line-height: 150px;
|
||||||
|
background: none;
|
||||||
|
margin: 0 auto;
|
||||||
|
box-shadow: none;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress:after {
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 12px solid #f9fafc;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress > span {
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress .circular-progress-left {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress .circular-progress-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: none;
|
||||||
|
border-width: 12px;
|
||||||
|
border-style: solid;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress .circular-progress-left .circular-progress-bar {
|
||||||
|
left: 100%;
|
||||||
|
border-top-right-radius: 80px;
|
||||||
|
border-bottom-right-radius: 80px;
|
||||||
|
border-left: 0;
|
||||||
|
transform-origin: center left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress .circular-progress-right {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress .circular-progress-right .circular-progress-bar {
|
||||||
|
left: -100%;
|
||||||
|
border-top-left-radius: 80px;
|
||||||
|
border-bottom-left-radius: 80px;
|
||||||
|
border-right: 0;
|
||||||
|
transform-origin: center right;
|
||||||
|
animation: circular-loading-1 1.8s linear forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress .circular-progress-value {
|
||||||
|
width: 90%;
|
||||||
|
height: 90%;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #3c4858;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #f9fafc;
|
||||||
|
line-height: initial;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 5%;
|
||||||
|
left: 5%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress.blue .circular-progress-bar {
|
||||||
|
border-color: #048dff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress.yellow .circular-progress-bar {
|
||||||
|
border-color: #eebb4d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress.pink .circular-progress-bar {
|
||||||
|
border-color: #ed63d2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress.green .circular-progress-bar {
|
||||||
|
border-color: #2dca73;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress.sky .circular-progress-bar {
|
||||||
|
border-color: #00c9e3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress.orange .circular-progress-bar {
|
||||||
|
border-color: #ff7c7c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress-percentage-50 {
|
||||||
|
animation: circular-loading-50 0s linear forwards 1.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress-percentage-55 {
|
||||||
|
animation: circular-loading-55 0.18s linear forwards 1.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress-percentage-60 {
|
||||||
|
animation: circular-loading-60 0.36s linear forwards 1.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress-percentage-65 {
|
||||||
|
animation: circular-loading-65 0.54s linear forwards 1.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress-percentage-70 {
|
||||||
|
animation: circular-loading-70 0.72s linear forwards 1.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress-percentage-75 {
|
||||||
|
animation: circular-loading-75 0.9s linear forwards 1.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress-percentage-80 {
|
||||||
|
animation: circular-loading-80 1.08s linear forwards 1.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress-percentage-85 {
|
||||||
|
animation: circular-loading-85 1.26s linear forwards 1.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress-percentage-90 {
|
||||||
|
animation: circular-loading-90 1.44s linear forwards 1.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress-percentage-95 {
|
||||||
|
animation: circular-loading-95 1.62s linear forwards 1.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress-percentage-100 {
|
||||||
|
animation: circular-loading-100 1.8s linear forwards 1.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circular-loading-50 {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circular-loading-55 {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(18deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circular-loading-60 {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(36deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circular-loading-65 {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(54deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circular-loading-70 {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(72deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circular-loading-75 {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circular-loading-80 {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(108deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circular-loading-85 {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(126deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circular-loading-90 {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(144deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circular-loading-95 {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(162deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circular-loading-100 {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circular-loading-1 {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circular-loading-2 {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(144deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circular-loading-3 {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circular-loading-4 {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(36deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circular-loading-5 {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(126deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 990px) {
|
||||||
|
.circular-progress {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
|
/* Large screens such as TV */
|
||||||
|
@media only screen and (min-width: 1824px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra large devices (large desktops, 1200px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IPad Pro */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large devices (desktops, 992px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium devices (tablets, 768px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.about-section.container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress {
|
||||||
|
width: 135px;
|
||||||
|
height: 135px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 576px) {
|
||||||
|
.circular-progress {
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress .circular-progress-value {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galaxy S5, Moto G4 */
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
.col-6 {
|
||||||
|
flex: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
97
assets/styles/sections/accomplishments.scss
Normal file
97
assets/styles/sections/accomplishments.scss
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
.accomplishments-section {
|
||||||
|
h1 > span{
|
||||||
|
margin-top: -55px; /* Size of fixed header */
|
||||||
|
padding-bottom:55px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: #fff;
|
||||||
|
border-top: 2px solid #248aaa;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.card .card-header {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-header .sub-title {
|
||||||
|
color: #8392a5;
|
||||||
|
margin-top: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .sub-title :nth-child(2) {
|
||||||
|
float: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-body {
|
||||||
|
padding: 0;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-footer {
|
||||||
|
background: #fff;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
padding-left: 0.7rem;
|
||||||
|
padding-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
|
/* Large screens such as TV */
|
||||||
|
@media only screen and (min-width: 1824px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra large devices (large desktops, 1200px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IPad Pro */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
padding-right: 0.2rem;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large devices (desktops, 992px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium devices (tablets, 768px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 576px) {
|
||||||
|
flex: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galaxy S5, Moto G4 */
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
}
|
||||||
|
}
|
||||||
180
assets/styles/sections/achievements.scss
Normal file
180
assets/styles/sections/achievements.scss
Normal file
|
|
@ -0,0 +1,180 @@
|
||||||
|
.achievements-section {
|
||||||
|
.container {
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 > span{
|
||||||
|
margin-top: -55px; /* Size of fixed header */
|
||||||
|
padding-bottom:55px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery .achievement-entry {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-left: 7px;
|
||||||
|
margin-right: 7px;
|
||||||
|
z-index: 1;
|
||||||
|
background-color: #e5e9f2;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery .achievement-entry:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1;
|
||||||
|
transform: scale(1.1);
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
z-index: 20000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery .achievement-details {
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 1 !important;
|
||||||
|
transition: none !important;
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery .img-type-1 {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
#gallery .img-type-2 {
|
||||||
|
height: 146px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery .svg-inline--fa {
|
||||||
|
color: #8392a5;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 0rem;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery .achievement-entry:hover .svg-inline--fa {
|
||||||
|
opacity: 1;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery .img-type-1 .svg-inline--fa {
|
||||||
|
margin-top: 135px;
|
||||||
|
}
|
||||||
|
#gallery .img-type-2 .svg-inline--fa {
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery .achievement-details.img-type-1 .svg-inline--fa,
|
||||||
|
.achievement-details.img-type-2 .svg-inline--fa {
|
||||||
|
margin-top: 0px !important;
|
||||||
|
transition: none !important;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery .achievement-entry .title {
|
||||||
|
color: #e5e9f2;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
opacity: 0;
|
||||||
|
padding: 5px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
bottom: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery .achievement-entry:hover .title {
|
||||||
|
opacity: 1;
|
||||||
|
bottom: 0px;
|
||||||
|
transition: bottom 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery .caption {
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
bottom: 1rem;
|
||||||
|
left: 1rem;
|
||||||
|
color: #e5e9f2;
|
||||||
|
padding: 15px;
|
||||||
|
position: absolute;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery .caption h4 {
|
||||||
|
color: #e5e9f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery .caption p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #e5e9f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery .achievement-details {
|
||||||
|
height: 75vh !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
|
/* Large screens such as TV */
|
||||||
|
@media only screen and (min-width: 1824px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra large devices (large desktops, 1200px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IPad Pro */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large devices (desktops, 992px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium devices (tablets, 768px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.col-md-6 {
|
||||||
|
flex: 50%;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 576px) {
|
||||||
|
#gallery .achievement-entry:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galaxy S5, Moto G4 */
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
}
|
||||||
|
}
|
||||||
199
assets/styles/sections/education.scss
Normal file
199
assets/styles/sections/education.scss
Normal file
|
|
@ -0,0 +1,199 @@
|
||||||
|
.education-section {
|
||||||
|
.education-info-table {
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.education-info-table tr:hover {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.education-info-table tr,
|
||||||
|
.education-info-table th,
|
||||||
|
.education-info-table td {
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeframe {
|
||||||
|
color: #8392a5;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 > span{
|
||||||
|
margin-top: -55px; /* Size of fixed header */
|
||||||
|
padding-bottom:55px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 2rem;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon .hline {
|
||||||
|
position: absolute;
|
||||||
|
left: 1rem;
|
||||||
|
top: 0;
|
||||||
|
background-color: #248aaa;
|
||||||
|
height: 100%;
|
||||||
|
width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.education-info-table tr:first-child .hline {
|
||||||
|
height: 65%;
|
||||||
|
top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.education-info-table tr:last-child .hline {
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-holder {
|
||||||
|
background-color: #248aaa;
|
||||||
|
border-radius: 50%;
|
||||||
|
height: 2rem;
|
||||||
|
width: 2rem;
|
||||||
|
padding: 0.2rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #e5e9f2;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 5%;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line div {
|
||||||
|
height: 2px;
|
||||||
|
/* width: 100%; */
|
||||||
|
margin-right: -1px;
|
||||||
|
background-color: #248aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.degree-info {
|
||||||
|
padding: 1rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
border-left: 2px solid #248aaa;
|
||||||
|
border-top: 1px solid #c0ccda;
|
||||||
|
border-bottom: 1px solid #c0ccda;
|
||||||
|
border-right: 1px solid #c0ccda;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.degree-info h5 {
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.taken-courses table {
|
||||||
|
margin-left: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.taken-courses tr {
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.taken-courses tr,
|
||||||
|
.taken-courses td,
|
||||||
|
.taken-courses th {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #212529;
|
||||||
|
}
|
||||||
|
.taken-courses th.course-name-header{
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.taken-courses .hidden-course {
|
||||||
|
display: none;
|
||||||
|
transition: all 1s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.taken-courses ul {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*============ Education Alter Template =============*/
|
||||||
|
.education-alt .degree-info {
|
||||||
|
border-right: 2px solid #248aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
|
/* Large screens such as TV */
|
||||||
|
|
||||||
|
@media only screen and (min-width: 1824px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra large devices (large desktops, 1200px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IPad Pro */
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.container {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large devices (desktops, 992px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium devices (tablets, 768px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 576px) {
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.timeframe {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galaxy S5, Moto G4 */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
}
|
||||||
|
}
|
||||||
171
assets/styles/sections/experiences.scss
Normal file
171
assets/styles/sections/experiences.scss
Normal file
|
|
@ -0,0 +1,171 @@
|
||||||
|
.experiences-section {
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
|
||||||
|
.timeline {
|
||||||
|
margin-top: 1.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 > span{
|
||||||
|
margin-top: -55px; /* Size of fixed header */
|
||||||
|
padding-bottom:55px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul > li {
|
||||||
|
margin-left: 0;
|
||||||
|
color: #3c4858;
|
||||||
|
}
|
||||||
|
|
||||||
|
.designation {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
padding: 13px 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #248aaa;
|
||||||
|
color: #f9fafc;
|
||||||
|
max-height: 50px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline .vertical-line {
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline .vertical-line::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
border-left: 3px solid #248aaa;
|
||||||
|
z-index: 1;
|
||||||
|
height: 100%;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline .vertical-line:nth-child(even)::after {
|
||||||
|
left: calc(50% - 3px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline .horizontal-line div {
|
||||||
|
padding: 0;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline .horizontal-line hr {
|
||||||
|
border-top: 3px solid #248aaa;
|
||||||
|
margin: 0;
|
||||||
|
top: 17px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline .horizontal-line .timeline-side-div {
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline .horizontal-line .corner {
|
||||||
|
border: 3px solid #248aaa;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline .row:nth-child(2n) div:nth-child(1) .corner {
|
||||||
|
left: 50%;
|
||||||
|
top: -50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline .row:nth-child(2n) div:nth-child(3) .corner {
|
||||||
|
left: -50%;
|
||||||
|
top: calc(50% - 3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline .row:nth-child(4n) div:nth-child(1) .corner {
|
||||||
|
left: 50%;
|
||||||
|
top: calc(50% - 3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline .row:nth-child(4n) div:nth-child(3) .corner {
|
||||||
|
left: -50%;
|
||||||
|
top: -50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
|
/* Large screens such as TV */
|
||||||
|
@media only screen and (min-width: 1824px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra large devices (large desktops, 1200px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IPad Pro */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large devices (desktops, 992px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium devices (tablets, 768px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 576px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
.timeline .row:nth-child(4n) div:nth-child(3) .corner {
|
||||||
|
left: -55%;
|
||||||
|
top: -50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline .row:nth-child(2n) div:nth-child(1) .corner {
|
||||||
|
left: 55%;
|
||||||
|
top: -50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galaxy S5, Moto G4 */
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
.timeline .row:nth-child(4n) div:nth-child(3) .corner {
|
||||||
|
left: -60%;
|
||||||
|
top: -50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline .row:nth-child(2n) div:nth-child(1) .corner {
|
||||||
|
left: 60%;
|
||||||
|
top: -50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
.timeline .row:nth-child(4n) div:nth-child(3) .corner {
|
||||||
|
left: -64%;
|
||||||
|
top: -50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline .row:nth-child(2n) div:nth-child(1) .corner {
|
||||||
|
left: 64%;
|
||||||
|
top: -50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
151
assets/styles/sections/home.scss
Normal file
151
assets/styles/sections/home.scss
Normal file
|
|
@ -0,0 +1,151 @@
|
||||||
|
.home {
|
||||||
|
height: 100vh;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
color: #f9fafc;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.background {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-position: center;
|
||||||
|
transform: scale(1.1);
|
||||||
|
filter: blur(3px);
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-center {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Resolves https://github.com/hugo-toha/toha/issues/70
|
||||||
|
|
||||||
|
fixed attached images use the whole <body> size. On mobile this can get really
|
||||||
|
tall which blows your image out. Setting the attachment back to scroll allows
|
||||||
|
your cover image to stretch within its own container
|
||||||
|
*/
|
||||||
|
@supports (-webkit-touch-callout: none) {
|
||||||
|
.background {
|
||||||
|
background-attachment: scroll;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
position: relative;
|
||||||
|
top: -65%;
|
||||||
|
height: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 148px;
|
||||||
|
height: 148px;
|
||||||
|
background-color: #e7e7ef;
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.greeting, .greeting-subtitle {
|
||||||
|
color: #f9fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-carousel {
|
||||||
|
font-size: 14pt;
|
||||||
|
color: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#typing-carousel-data {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
position: absolute;
|
||||||
|
color: #f9fafc;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bounce {
|
||||||
|
animation: bounce 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0%,
|
||||||
|
20%,
|
||||||
|
50%,
|
||||||
|
80%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
transform: translateY(-30px);
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
transform: translateY(-15px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
|
/* Large screens such as TV */
|
||||||
|
@media only screen and (min-width: 1824px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra large devices (large desktops, 1200px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IPad Pro */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large devices (desktops, 992px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium devices (tablets, 768px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 576px) {
|
||||||
|
.content {
|
||||||
|
position: relative;
|
||||||
|
top: -75%;
|
||||||
|
height: 65%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 140px;
|
||||||
|
max-width: 50%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.greeting {
|
||||||
|
font-size: 24pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galaxy S5, Moto G4 */
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
}
|
||||||
|
}
|
||||||
41
assets/styles/sections/pdf-viewer.scss
Normal file
41
assets/styles/sections/pdf-viewer.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
.pdf-viewer {
|
||||||
|
canvas {
|
||||||
|
border: 1px solid black;
|
||||||
|
direction: ltr;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginator {
|
||||||
|
display: none;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wrapper {
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
display: inline-block;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border: 3px solid #d2d0d0;;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-top-color: #383838;
|
||||||
|
animation: spin 1s ease-in-out infinite;
|
||||||
|
-webkit-animation: spin 1s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to { -webkit-transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
@-webkit-keyframes spin {
|
||||||
|
to { -webkit-transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
}
|
||||||
134
assets/styles/sections/projects.scss
Normal file
134
assets/styles/sections/projects.scss
Normal file
|
|
@ -0,0 +1,134 @@
|
||||||
|
.projects-section {
|
||||||
|
.card .card-header {
|
||||||
|
background-color: #f9fafc;
|
||||||
|
padding: 0.7rem;
|
||||||
|
padding-bottom: 0rem;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-img-xs {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-header .sub-title span:nth-child(1) {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.card .card-header .sub-title span:nth-child(2) {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-body {
|
||||||
|
padding: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-header .sub-title {
|
||||||
|
color: #8392a5;
|
||||||
|
margin-top: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filtr-projects {
|
||||||
|
padding: 1rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card-footer {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-tags-holder {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-btn-holder {
|
||||||
|
width: 30%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-btn-holder span {
|
||||||
|
justify-content: flex-end;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
|
/* Large screens such as TV */
|
||||||
|
@media only screen and (min-width: 1824px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra large devices (large desktops, 1200px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IPad Pro */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.filtr-projects {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.filtr-item {
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
padding-right: 0.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large devices (desktops, 992px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium devices (tablets, 768px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.filtr-projects {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.filtr-item {
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
padding-right: 0.2rem;
|
||||||
|
flex: 50%;
|
||||||
|
max-width: calc(100% / 2 - 0.2rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 576px) {
|
||||||
|
.btn {
|
||||||
|
margin-top: 0.3125rem;
|
||||||
|
}
|
||||||
|
.filtr-item {
|
||||||
|
flex: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galaxy S5, Moto G4 */
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
}
|
||||||
|
}
|
||||||
149
assets/styles/sections/publications.scss
Normal file
149
assets/styles/sections/publications.scss
Normal file
|
|
@ -0,0 +1,149 @@
|
||||||
|
.publications-section {
|
||||||
|
h1 > span{
|
||||||
|
margin-top: -55px; /* Size of fixed header */
|
||||||
|
padding-bottom:55px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: #fff;
|
||||||
|
border-top: 2px solid #248aaa;
|
||||||
|
}
|
||||||
|
.card .card-header {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-header .sub-title {
|
||||||
|
color: #8392a5;
|
||||||
|
margin-top: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .sub-title :nth-child(2) {
|
||||||
|
float: right !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-body {
|
||||||
|
padding: 0;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-footer {
|
||||||
|
background: #fff;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
padding-bottom: 0.3rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-footer .tags {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.card .card-footer .tags .badge {
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filtr-publications {
|
||||||
|
padding: 1rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group{
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
|
/* Large screens such as TV */
|
||||||
|
@media only screen and (min-width: 1824px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra large devices (large desktops, 1200px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IPad Pro */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filtr-publications {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pub-filtr-item {
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
padding-right: 0.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large devices (desktops, 992px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium devices (tablets, 768px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.filtr-publications {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.pub-filtr-item {
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
padding-right: 0.2rem;
|
||||||
|
flex: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 576px) {
|
||||||
|
.btn {
|
||||||
|
margin-top: 0.3125rem;
|
||||||
|
}
|
||||||
|
.pub-filtr-item {
|
||||||
|
flex: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.card .card-footer .tags {
|
||||||
|
flex: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galaxy S5, Moto G4 */
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
}
|
||||||
|
}
|
||||||
95
assets/styles/sections/recent-posts.scss
Normal file
95
assets/styles/sections/recent-posts.scss
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
.recent-posts-section {
|
||||||
|
.container {
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 > span{
|
||||||
|
margin-top: -55px; /* Size of fixed header */
|
||||||
|
padding-bottom:55px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
height: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-footer span {
|
||||||
|
font-size: 10pt;
|
||||||
|
color: #6c757d !important;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-footer {
|
||||||
|
background: #fff;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card-link {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-summary {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
/* line-height: 24px; fallback */
|
||||||
|
max-height: 144px; /* fallback */
|
||||||
|
-webkit-line-clamp: 5; /* number of lines to show */
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
|
/* Large screens such as TV */
|
||||||
|
@media only screen and (min-width: 1824px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra large devices (large desktops, 1200px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IPad Pro */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large devices (desktops, 992px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium devices (tablets, 768px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.post-card {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 576px) {
|
||||||
|
.post-card {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galaxy S5, Moto G4 */
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
}
|
||||||
|
}
|
||||||
86
assets/styles/sections/skills.scss
Normal file
86
assets/styles/sections/skills.scss
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
.skills-section {
|
||||||
|
.card .card-head {
|
||||||
|
background-color: #f9fafc;
|
||||||
|
height: -moz-fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
padding: 0.7rem;
|
||||||
|
padding-bottom: 0rem;
|
||||||
|
border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 > span{
|
||||||
|
margin-top: -55px; /* Size of fixed header */
|
||||||
|
padding-bottom:55px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-card-link {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-img-xs {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-body {
|
||||||
|
padding-top: 0.2rem;
|
||||||
|
padding-left: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
|
/* Large screens such as TV */
|
||||||
|
@media only screen and (min-width: 1824px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra large devices (large desktops, 1200px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IPad Pro */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large devices (desktops, 992px and up) */
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium devices (tablets, 768px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 95%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 576px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galaxy S5, Moto G4 */
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
}
|
||||||
|
}
|
||||||
22
config.yaml
Normal file
22
config.yaml
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
module:
|
||||||
|
mounts:
|
||||||
|
- source: content
|
||||||
|
target: content
|
||||||
|
- source: static
|
||||||
|
target: static
|
||||||
|
- source: layouts
|
||||||
|
target: layouts
|
||||||
|
- source: data
|
||||||
|
target: data
|
||||||
|
- source: assets
|
||||||
|
target: assets
|
||||||
|
- source: i18n
|
||||||
|
target: i18n
|
||||||
|
- source: archetypes
|
||||||
|
target: archetypes
|
||||||
|
- source: ../../node_modules/flag-icon-css/flags
|
||||||
|
target: static/flags
|
||||||
|
- source: ../../node_modules/@fontsource/mulish/files
|
||||||
|
target: static/files
|
||||||
|
- source: ../../node_modules/katex/dist/fonts
|
||||||
|
target: static/fonts
|
||||||
31
data/toha/styles.yml
Normal file
31
data/toha/styles.yml
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
flags:
|
||||||
|
styles:
|
||||||
|
- flag-icon-css/css/flag-icons
|
||||||
|
|
||||||
|
videoplayer:
|
||||||
|
services:
|
||||||
|
plyr:
|
||||||
|
styles:
|
||||||
|
- plyr/dist/plyr
|
||||||
|
|
||||||
|
darkmode:
|
||||||
|
services:
|
||||||
|
darkreader:
|
||||||
|
styles:
|
||||||
|
- ./colortheme/colortheme
|
||||||
|
|
||||||
|
syntaxhighlight:
|
||||||
|
services:
|
||||||
|
hljs:
|
||||||
|
styles:
|
||||||
|
- highlight.js/scss/atom-one-dark
|
||||||
|
|
||||||
|
math:
|
||||||
|
services:
|
||||||
|
katex:
|
||||||
|
styles:
|
||||||
|
- katex/dist/katex
|
||||||
|
|
||||||
|
embedpdf:
|
||||||
|
styles:
|
||||||
|
- ./sections/pdf-viewer
|
||||||
|
|
@ -1,7 +1,3 @@
|
||||||
{{ define "header" }}
|
|
||||||
<link rel="stylesheet" href="{{ "/css/404.css" | relURL }}">
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ define "navbar" }}
|
{{ define "navbar" }}
|
||||||
{{ partial "navigators/navbar-2.html" (dict "baseURL" site.BaseURL "title" site.Title "hasToggleButton" false) }}
|
{{ partial "navigators/navbar-2.html" (dict "baseURL" site.BaseURL "title" site.Title "hasToggleButton" false) }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="{{ .Site.Language.Lang }}">
|
||||||
<head>
|
<head>
|
||||||
<title>{{ .Page.Title }}</title>
|
<title>{{ .Page.Title }}</title>
|
||||||
<!------ ADD COMMON HEADERS -------->
|
<!------ ADD COMMON HEADERS -------->
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body data-spy="scroll" data-target="#TableOfContents" data-offset="80">
|
<body class="type-{{ .Page.Type }} kind-{{ .Page.Kind }}" data-spy="scroll" data-target="#TableOfContents" data-offset="80">
|
||||||
<div class="container-fluid bg-dimmed wrapper">
|
<div class="container-fluid bg-dimmed wrapper">
|
||||||
<!----- ADD NAVBAR --------------->
|
<!----- ADD NAVBAR --------------->
|
||||||
{{ block "navbar" . }} {{ end }}
|
{{ block "navbar" . }} {{ end }}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,3 @@
|
||||||
{{ define "header" }}
|
|
||||||
<link rel="stylesheet" href="{{ "/css/layouts/list.css" | relURL }}">
|
|
||||||
<link rel="stylesheet" href="{{ "/css/navigators/sidebar.css" | relURL}}">
|
|
||||||
<!--================= custom style overrides =========================-->
|
|
||||||
<link rel="stylesheet" href="{{ "/css/style.css" | relURL }}"/>
|
|
||||||
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ define "navbar" }}
|
{{ define "navbar" }}
|
||||||
{{ partial "navigators/navbar-2.html" . }}
|
{{ partial "navigators/navbar-2.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,3 @@
|
||||||
{{ define "header" }}
|
|
||||||
<link rel="stylesheet" href="{{ "/css/layouts/list.css" | relURL }}">
|
|
||||||
<link rel="stylesheet" href="{{ "/css/navigators/sidebar.css" | relURL}}">
|
|
||||||
<!--================= custom style overrides =========================-->
|
|
||||||
<link rel="stylesheet" href="{{ "/css/style.css" | relURL }}"/>
|
|
||||||
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ define "navbar" }}
|
{{ define "navbar" }}
|
||||||
{{ partial "navigators/navbar-2.html" . }}
|
{{ partial "navigators/navbar-2.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,5 @@
|
||||||
{{ define "header" }}
|
{{ define "header" }}
|
||||||
<meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Title }}{{ end }}" />
|
<meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Title }}{{ end }}" />
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css"
|
|
||||||
/>
|
|
||||||
<link rel="stylesheet" href="{{ "/css/layouts/single.css" | relURL }}"/>
|
|
||||||
<link rel="stylesheet" href="{{ "/css/navigators/sidebar.css" | relURL }}">
|
|
||||||
<!--================= custom style overrides =========================-->
|
|
||||||
<link rel="stylesheet" href="{{ "/css/style.css" | relURL }}"/>
|
|
||||||
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "navbar" }}
|
{{ define "navbar" }}
|
||||||
|
|
@ -190,11 +181,3 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</section>
|
</section>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "scripts" }}
|
|
||||||
<!-------------- Enable Math support for this page ---------------->
|
|
||||||
{{ if site.Params.features.math.enable }}
|
|
||||||
{{ partial "math.html" . }}
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ end }}
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,3 @@
|
||||||
{{ define "header" }}
|
|
||||||
<link rel="stylesheet" href="{{ "/css/layouts/list.css" | relURL }}">
|
|
||||||
<link rel="stylesheet" href="{{ "/css/navigators/sidebar.css" | relURL}}">
|
|
||||||
<!--================= custom style overrides =========================-->
|
|
||||||
<link rel="stylesheet" href="{{ "/css/style.css" | relURL }}"/>
|
|
||||||
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ define "navbar" }}
|
{{ define "navbar" }}
|
||||||
{{ partial "navigators/navbar-2.html" . }}
|
{{ partial "navigators/navbar-2.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -14,21 +14,6 @@
|
||||||
<!-- import common headers -->
|
<!-- import common headers -->
|
||||||
{{- partial "header.html" . -}}
|
{{- partial "header.html" . -}}
|
||||||
{{- partial "opengraph.html" . -}}
|
{{- partial "opengraph.html" . -}}
|
||||||
|
|
||||||
<!-- import index page specific headers -->
|
|
||||||
<link rel="stylesheet" href="{{ "/css/sections/home.css" | relURL }}"/>
|
|
||||||
<link rel="stylesheet" href="{{ "/css/sections/about.css" | relURL }}"/>
|
|
||||||
<link rel="stylesheet" href="{{ "/css/sections/skills.css" | relURL }}"/>
|
|
||||||
<link rel="stylesheet" href="{{ "/css/sections/experiences.css" | relURL }}"/>
|
|
||||||
<link rel="stylesheet" href="{{ "/css/sections/education.css" | relURL }}"/>
|
|
||||||
<link rel="stylesheet" href="{{ "/css/sections/projects.css" | relURL }}"/>
|
|
||||||
<link rel="stylesheet" href="{{ "/css/sections/recent-posts.css" | relURL }}"/>
|
|
||||||
<link rel="stylesheet" href="{{ "/css/sections/achievements.css" | relURL }}"/>
|
|
||||||
<link rel="stylesheet" href="{{ "/css/sections/accomplishments.css" | relURL }}"/>
|
|
||||||
<link rel="stylesheet" href="{{ "/css/sections/publications.css" | relURL }}"/>
|
|
||||||
|
|
||||||
<!--================= custom style overrides =========================-->
|
|
||||||
<link rel="stylesheet" href="{{ "/css/style.css" | relURL }}"/>
|
|
||||||
|
|
||||||
<!--================= add analytics if enabled =========================-->
|
<!--================= add analytics if enabled =========================-->
|
||||||
{{- partial "analytics.html" . -}}
|
{{- partial "analytics.html" . -}}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,3 @@
|
||||||
{{ define "header" }}
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css"
|
|
||||||
/>
|
|
||||||
<link rel="stylesheet" href="{{ "/css/layouts/notes.css" | relURL}}">
|
|
||||||
<link rel="stylesheet" href="{{ "/css/navigators/sidebar.css" | relURL}}">
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ define "navbar" }}
|
{{ define "navbar" }}
|
||||||
{{ partial "navigators/navbar-2.html" . }}
|
{{ partial "navigators/navbar-2.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
@ -55,9 +46,3 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "scripts" }}
|
|
||||||
{{ if site.Params.features.math.enable }}
|
|
||||||
{{ partial "math.html" . }}
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,3 @@
|
||||||
{{ define "header" }}
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css"
|
|
||||||
/>
|
|
||||||
<link rel="stylesheet" href="{{ "/css/layouts/notes.css" | relURL}}">
|
|
||||||
<link rel="stylesheet" href="{{ "/css/navigators/sidebar.css" | relURL}}">
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ define "navbar" }}
|
{{ define "navbar" }}
|
||||||
{{ partial "navigators/navbar-2.html" . }}
|
{{ partial "navigators/navbar-2.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
@ -45,9 +36,3 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "scripts" }}
|
|
||||||
{{ if site.Params.features.math.enable }}
|
|
||||||
{{ partial "math.html" . }}
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
|
|
|
||||||
|
|
@ -2,21 +2,7 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||||
|
|
||||||
<!-- ============ import common css ========== -->
|
{{ partial "helpers/style-bundle.html" . }}
|
||||||
<link rel="stylesheet" href="{{ "/css/bootstrap.min.css" | relURL }}"/>
|
|
||||||
<link rel="stylesheet" href="{{ "/css/layouts/main.css" | relURL }}"/>
|
|
||||||
<link rel="stylesheet" href="{{ "/css/navigators/navbar.css" | relURL }}"/>
|
|
||||||
<link rel="stylesheet" href="{{ "/css/plyr.css" | relURL }}"/>
|
|
||||||
{{ if ne site.Params.features.flags.enable false }}
|
|
||||||
<link rel="stylesheet" href="{{ "/css/flag-icon.min.css" | relURL }}"/>
|
|
||||||
{{ end }}
|
|
||||||
<!--=================== fonts ==============================-->
|
|
||||||
<link rel="stylesheet" href="{{ "/google-fonts/Mulish/mulish.css" | relURL }}"/>
|
|
||||||
|
|
||||||
<!--=================== dark mode ==========================-->
|
|
||||||
{{ if site.Params.features.darkMode.enable }}
|
|
||||||
<link rel="stylesheet" href="{{ "/css/colortheme/colortheme.css" | relURL }}"/>
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
<!--================= fab-icon =========================-->
|
<!--================= fab-icon =========================-->
|
||||||
{{/* add favicon only if the site author has provided the the favicon */}}
|
{{/* add favicon only if the site author has provided the the favicon */}}
|
||||||
|
|
|
||||||
5
layouts/partials/helpers/get-sass-options.html
Normal file
5
layouts/partials/helpers/get-sass-options.html
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{{ return (dict
|
||||||
|
"outputStyle" "compressed"
|
||||||
|
"enableSourceMap" (not hugo.IsProduction)
|
||||||
|
"includePaths" "node_modules"
|
||||||
|
) }}
|
||||||
11
layouts/partials/helpers/style-bundle.html
Normal file
11
layouts/partials/helpers/style-bundle.html
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
{{/* setup Sass options */}}
|
||||||
|
{{- $options := partial "helpers/get-sass-options.html" -}}
|
||||||
|
{{- $options = $options | merge (dict "targetPath" "application.css") -}}
|
||||||
|
|
||||||
|
{{/* Compile hugo template `application.template.scss` into `application.scss`. */}}
|
||||||
|
{{- $template := resources.Get "styles/application.template.scss" -}}
|
||||||
|
{{- $scss := $template | resources.ExecuteAsTemplate "styles/application.scss" . -}}
|
||||||
|
|
||||||
|
{{/* Bundle application.scss */}}
|
||||||
|
{{- $bundle := $scss | resources.ToCSS $options | fingerprint -}}
|
||||||
|
<link rel="stylesheet" href="{{ $bundle.RelPermalink }}" integrity="{{ $bundle.Data.Integrity }}" />
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<link rel="stylesheet" href="{{ "/katex/katex.min.css" | relURL }}">
|
|
||||||
|
|
@ -23,46 +23,3 @@
|
||||||
<canvas class="pdf-canvas"></canvas>
|
<canvas class="pdf-canvas"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Finally, make the canvas more beautiful -->
|
|
||||||
<style>
|
|
||||||
.pdf-viewer canvas {
|
|
||||||
border: 1px solid black;
|
|
||||||
direction: ltr;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pdf-viewer .paginator {
|
|
||||||
display: none;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pdf-viewer .loading-wrapper {
|
|
||||||
display: none;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pdf-viewer .loading {
|
|
||||||
display: inline-block;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border: 3px solid #d2d0d0;;
|
|
||||||
border-radius: 50%;
|
|
||||||
border-top-color: #383838;
|
|
||||||
animation: spin 1s ease-in-out infinite;
|
|
||||||
-webkit-animation: spin 1s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to { -webkit-transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
@-webkit-keyframes spin {
|
|
||||||
to { -webkit-transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,3 @@
|
||||||
{{ define "header" }}
|
|
||||||
<link rel="stylesheet" href="{{ "/css/layouts/list.css" | relURL }}">
|
|
||||||
<link rel="stylesheet" href="{{ "/css/navigators/sidebar.css" | relURL}}">
|
|
||||||
<!--================= custom style overrides =========================-->
|
|
||||||
<link rel="stylesheet" href="{{ "/css/style.css" | relURL }}"/>
|
|
||||||
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ define "navbar" }}
|
{{ define "navbar" }}
|
||||||
{{ partial "navigators/navbar-2.html" . }}
|
{{ partial "navigators/navbar-2.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -1,93 +0,0 @@
|
||||||
.navbar-toggler {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notFound {
|
|
||||||
padding-top: 5rem;
|
|
||||||
text-align: center;
|
|
||||||
padding-bottom: 8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notFound img {
|
|
||||||
height: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notFound h1 {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notFound .message {
|
|
||||||
position: absolute;
|
|
||||||
max-width: 20rem;
|
|
||||||
top: 40%;
|
|
||||||
left: 30%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
|
||||||
|
|
||||||
/* Large screens such as TV */
|
|
||||||
@media only screen and (min-width: 1824px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
.notFound .message {
|
|
||||||
top: 50%;
|
|
||||||
left: 25%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IPad Pro */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
.notFound .message {
|
|
||||||
top: 46%;
|
|
||||||
left: 25%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium devices (tablets, 768px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
.notFound img {
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notFound .message {
|
|
||||||
top: 20rem;
|
|
||||||
left: 4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
.notFound img {
|
|
||||||
height: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notFound .message {
|
|
||||||
top: 20rem;
|
|
||||||
left: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
}
|
|
||||||
6
static/css/bootstrap.min.css
vendored
6
static/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,20 +0,0 @@
|
||||||
/* Note: No need to invert when the screen is small because the navbar is
|
|
||||||
collapsed to a hamburger menu. */
|
|
||||||
@media only screen and (min-width: 1200px) {
|
|
||||||
.dynamic-navbar .navbar-icon-svg-dark {
|
|
||||||
filter: invert(1);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 1200px) {
|
|
||||||
.dropdown-menu-icons-only {
|
|
||||||
width: 25px;
|
|
||||||
min-width: 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-icon-center {
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
1
static/css/flag-icon.min.css
vendored
1
static/css/flag-icon.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,246 +0,0 @@
|
||||||
.wrapper {
|
|
||||||
display: flex;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section {
|
|
||||||
flex: 80%;
|
|
||||||
order: 2;
|
|
||||||
/* background-color: lightseagreen; */
|
|
||||||
padding: 0;
|
|
||||||
position: relative;
|
|
||||||
padding-left: 0.5rem;
|
|
||||||
padding-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding: 0;
|
|
||||||
position: relative;
|
|
||||||
padding-top: 2rem;
|
|
||||||
min-height: 130vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-holder {
|
|
||||||
margin-top: 32px;
|
|
||||||
margin-left: auto;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-holder .post-card {
|
|
||||||
width: calc(100% / 3);
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-holder .card {
|
|
||||||
margin: 5px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-holder .card .card-footer span {
|
|
||||||
font-size: 10pt;
|
|
||||||
color: #6c757d !important;
|
|
||||||
padding-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-holder .card .card-footer {
|
|
||||||
background: #fff;
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-summary {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box;
|
|
||||||
max-height: 144px;
|
|
||||||
/* fallback */
|
|
||||||
-webkit-line-clamp: 5;
|
|
||||||
/* number of lines to show */
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-holder .post-card-link {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.paginator {
|
|
||||||
width: -moz-fit-content;
|
|
||||||
width: fit-content;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.paginator .page-item > a {
|
|
||||||
color: #248aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.paginator .page-item.active > a {
|
|
||||||
background-color: #248aaa;
|
|
||||||
color: #f9fafc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-toggler {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
width: -moz-fit-content;
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
|
||||||
|
|
||||||
/* Large screens such as TV */
|
|
||||||
@media only screen and (min-width: 1824px) {
|
|
||||||
.content-section {
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
flex: 85%;
|
|
||||||
max-width: 85%;
|
|
||||||
}
|
|
||||||
.post-card-holder .post-card {
|
|
||||||
width: calc(100% / 5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
.post-card-holder {
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
.post-card-holder .post-card {
|
|
||||||
width: calc(100% / 3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IPad Pro */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.wrapper {
|
|
||||||
padding-left: 0px;
|
|
||||||
padding-right: 0px;
|
|
||||||
}
|
|
||||||
.content-section {
|
|
||||||
padding: 0;
|
|
||||||
flex: 60%;
|
|
||||||
order: 2;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.navbar-toggler {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#toc-toggler {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-collapse.lang-selector {
|
|
||||||
display: block !important;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-holder {
|
|
||||||
margin: 0;
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
padding-left: 0.5rem;
|
|
||||||
padding-right: 0.5rem;
|
|
||||||
position: relative;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-holder .post-card {
|
|
||||||
width: calc(100% / 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section.hide .post-card-holder .post-card {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
.post-card-holder .post-card {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section.hide .post-card-holder .post-card {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium devices (tablets, 768px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
.wrapper {
|
|
||||||
padding-left: 0px;
|
|
||||||
padding-right: 0px;
|
|
||||||
flex-flow: column;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.content-section {
|
|
||||||
flex: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
padding-left: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
width: 100%;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section.hide .content {
|
|
||||||
margin-top: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section.hide .post-card-holder {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-holder .post-card {
|
|
||||||
margin-left: 1%;
|
|
||||||
margin-right: 1%;
|
|
||||||
width: 98%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
}
|
|
||||||
|
|
@ -1,515 +0,0 @@
|
||||||
/* ========= Colors ============
|
|
||||||
Heading: #1C2D41
|
|
||||||
Paragraph: #3C4858
|
|
||||||
Iconography: #8392A5
|
|
||||||
Secondary: #C0CCDA
|
|
||||||
Dirty Snow: #E5E9F2
|
|
||||||
Snow: #F9FAFC
|
|
||||||
|
|
||||||
Magenta: #7551E9
|
|
||||||
Orange: #FF7D51
|
|
||||||
Pink: #ED63D2
|
|
||||||
Green: #2DCA73
|
|
||||||
Yellow: #FFC212
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
Removed smooth scrolling implementation in main.js in favor of
|
|
||||||
simpler css approach.
|
|
||||||
See: https://css-tricks.com/snippets/jquery/smooth-scrolling/
|
|
||||||
*/
|
|
||||||
*, html {
|
|
||||||
scroll-behavior: smooth !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Fixes anchor overlapping with header.
|
|
||||||
See: https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors
|
|
||||||
*/
|
|
||||||
:target::before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
height: 2em; /* fixed header height*/
|
|
||||||
margin: -2em 0 0; /* negative fixed header height */
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #f9fafc;
|
|
||||||
font-family: "Muli";
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5 {
|
|
||||||
color: #1c2d41;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
color: #1c2d41 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: #3c4858;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #248aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: #207089;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-button {
|
|
||||||
background-color: transparent;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
color: #8392a5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-dark {
|
|
||||||
background-color: #3c4858!important;
|
|
||||||
border-color: #3c4858!important;
|
|
||||||
color: #e5e9f2!important;
|
|
||||||
transition: all 0.3s ease-out!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-dark:hover,
|
|
||||||
.btn-dark:focus {
|
|
||||||
background-color: #248aaa!important;
|
|
||||||
border-color: #248aaa!important;
|
|
||||||
transition: all 0.3s ease-out!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-outline-info {
|
|
||||||
color: #2098d1 !important;
|
|
||||||
border-color: #2098d1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-outline-info:hover {
|
|
||||||
background-color: #2098d1 !important;
|
|
||||||
color: #e5e9f2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-info {
|
|
||||||
background-color: #248aaa !important;
|
|
||||||
color: #e5e9f2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-info:hover {
|
|
||||||
background-color: #2098d1 !important;
|
|
||||||
color: #e5e9f2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-link {
|
|
||||||
color: #248aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-link:hover {
|
|
||||||
color: #207089;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-white {
|
|
||||||
background-color: #f9fafc !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-dimmed {
|
|
||||||
background-color: #e5e9f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anchor {
|
|
||||||
padding-top: 3.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.center {
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.left {
|
|
||||||
display: block;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.right {
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
box-shadow: none;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-img-sm {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-img-xs {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover,
|
|
||||||
.card:focus {
|
|
||||||
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
|
||||||
border: 1px solid #fff;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card .card-head {
|
|
||||||
height: 172px;
|
|
||||||
-o-object-fit: cover;
|
|
||||||
object-fit: cover;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-img-top {
|
|
||||||
transition: all 0.3s ease-out !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover .card-head .card-img-top,
|
|
||||||
.card:focus .card-head .card-img-top {
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-body {
|
|
||||||
text-align: justify;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-title {
|
|
||||||
color: #c0ccda;
|
|
||||||
font-size: 10pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flag-icon {
|
|
||||||
width: 16px !important;
|
|
||||||
margin-top: 3px;
|
|
||||||
margin-right: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ====== table ====== */
|
|
||||||
table {
|
|
||||||
border-radius: 0.1rem;
|
|
||||||
background: #e5e9f2;
|
|
||||||
border: 1px solid #c0ccda;
|
|
||||||
padding: 0.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
table tr {
|
|
||||||
height: 40px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
table th,
|
|
||||||
td {
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-left: 1px solid #8392a5;
|
|
||||||
border-bottom: 1px solid #8392a5;
|
|
||||||
}
|
|
||||||
|
|
||||||
table thead tr {
|
|
||||||
background: #248aaa;
|
|
||||||
color: #e5e9f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:nth-child(odd) {
|
|
||||||
background-color: #e5e9f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:hover {
|
|
||||||
background: #c0ccda;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ====== don't apply css to tables inside gist ====== */
|
|
||||||
.gist table {
|
|
||||||
border-radius: unset;
|
|
||||||
background: unset;
|
|
||||||
border: unset;
|
|
||||||
padding: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gist table tr {
|
|
||||||
height: unset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gist table th,
|
|
||||||
td {
|
|
||||||
padding: unset;
|
|
||||||
border-left: unset;
|
|
||||||
border-bottom: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gist table thead tr {
|
|
||||||
background: unset;
|
|
||||||
color: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gist tbody tr:nth-child(odd) {
|
|
||||||
background-color: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gist tbody tr:hover {
|
|
||||||
background: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gist table td, .gist table tc{
|
|
||||||
border-right: 1px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure {
|
|
||||||
border: 1px solid #c0ccda;
|
|
||||||
height: -moz-fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
width: -moz-fit-content;
|
|
||||||
width: fit-content;
|
|
||||||
align-self: center;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
caption,
|
|
||||||
figcaption {
|
|
||||||
caption-side: bottom;
|
|
||||||
text-align: center;
|
|
||||||
color: #8392a5;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre > code {
|
|
||||||
padding: 10px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.header-anchor {
|
|
||||||
text-decoration: none;
|
|
||||||
color: #1c2d41;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.header-anchor i, a.header-anchor svg {
|
|
||||||
font-size: 10pt;
|
|
||||||
color: #3c4858;
|
|
||||||
display: none;
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
}
|
|
||||||
a.header-anchor:hover i, a.header-anchor:hover svg {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
a.header-anchor code {
|
|
||||||
color: #e83e8c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content ul > ol,
|
|
||||||
.content ol > ul,
|
|
||||||
.content ul > ul,
|
|
||||||
.content ol > ol,
|
|
||||||
.content li > ol,
|
|
||||||
.content li > ul {
|
|
||||||
-webkit-padding-start: 1rem;
|
|
||||||
padding-inline-start: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
kbd {
|
|
||||||
background-color: #248aaa !important;
|
|
||||||
color: #f9fafc;
|
|
||||||
}
|
|
||||||
|
|
||||||
mark {
|
|
||||||
background-color: #ffc21280;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ======= Paginator ========= */
|
|
||||||
.paginator {
|
|
||||||
width: -moz-fit-content;
|
|
||||||
width: fit-content;
|
|
||||||
margin: auto;
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
.paginator .page-item > a {
|
|
||||||
color: #248aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.paginator .page-item.active > a {
|
|
||||||
background-color: #248aaa;
|
|
||||||
color: #f9fafc;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- FOOTER START --- */
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
color: #8392a5 !important;
|
|
||||||
background-color: #1c2d41;
|
|
||||||
position: relative;
|
|
||||||
z-index: 9999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer h5 {
|
|
||||||
color: #c0ccda;
|
|
||||||
}
|
|
||||||
.footer a {
|
|
||||||
color: #8392a5;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer a:hover {
|
|
||||||
margin-left: 5px;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer ul {
|
|
||||||
list-style: none;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer li {
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer hr {
|
|
||||||
background-color: #8392a5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer p:first-child {
|
|
||||||
color: #c0ccda;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer input {
|
|
||||||
background-color: #c0ccda;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer input:focus {
|
|
||||||
background-color: #e5e9f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer #disclaimer{
|
|
||||||
color: #8392a5 !important;
|
|
||||||
text-align: justify;
|
|
||||||
}
|
|
||||||
.footer #disclaimer>strong{
|
|
||||||
color: #c0ccda!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer #theme {
|
|
||||||
color: #c0ccda;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer #theme img {
|
|
||||||
width: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer #hugo:hover {
|
|
||||||
margin-right: 5px;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- FOOTER END ---- */
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
|
||||||
|
|
||||||
/* Large screens such as TV */
|
|
||||||
@media only screen and (min-width: 1824px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IPad Pro */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.content-section .languageSelector {
|
|
||||||
position: fixed;
|
|
||||||
right: 0.5rem;
|
|
||||||
bottom: 1rem;
|
|
||||||
z-index: 10000000;
|
|
||||||
background-color: #f9fafc;
|
|
||||||
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium devices (tablets, 768px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
.skills-section .container,
|
|
||||||
.projects-section .container,
|
|
||||||
.publications-section .container {
|
|
||||||
padding-left: 0.3rem;
|
|
||||||
padding-right: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-holder {
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills-section,
|
|
||||||
.projects-section,
|
|
||||||
.recent-posts-section,
|
|
||||||
.achievements-section,
|
|
||||||
.publications-section {
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,250 +0,0 @@
|
||||||
.wrapper {
|
|
||||||
display: flex;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section {
|
|
||||||
flex: 80%;
|
|
||||||
max-width: 80%;
|
|
||||||
order: 2;
|
|
||||||
/* background-color: lightseagreen; */
|
|
||||||
padding: 0;
|
|
||||||
position: relative;
|
|
||||||
padding-left: 0.5rem;
|
|
||||||
padding-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding: 0;
|
|
||||||
position: relative;
|
|
||||||
padding-top: 2rem;
|
|
||||||
min-height: 130vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.note-card-holder{
|
|
||||||
padding-top: 2rem;
|
|
||||||
display: grid;
|
|
||||||
grid-gap: 0.5rem;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(30rem,1fr));
|
|
||||||
grid-auto-rows: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .note-collection {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
} */
|
|
||||||
|
|
||||||
.note-card {
|
|
||||||
align-self: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.note-card .card{
|
|
||||||
margin: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.note-title{
|
|
||||||
padding-left: 1rem;
|
|
||||||
color: #248aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.note-title span{
|
|
||||||
background: #e5e9f2;
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.note-title:before{
|
|
||||||
content:'';
|
|
||||||
display:inline-block;
|
|
||||||
width:98%;
|
|
||||||
height:100%;
|
|
||||||
margin-bottom:-26px;
|
|
||||||
border-bottom: 1px solid #248aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.note-card .card-body{
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.note-card pre {
|
|
||||||
margin: 0;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .small-note{
|
|
||||||
max-width: 15rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.medium-note{
|
|
||||||
max-width: 25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.large-note{
|
|
||||||
max-width: 40rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.huge-note{} */
|
|
||||||
|
|
||||||
.note-badge{
|
|
||||||
font-size: 10pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
|
||||||
|
|
||||||
/* Large screens such as TV */
|
|
||||||
@media only screen and (min-width: 1824px) {
|
|
||||||
.content-section {
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
flex: 85%;
|
|
||||||
max-width: 85%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
.note-card-holder {
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IPad Pro */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.wrapper {
|
|
||||||
padding-left: 0px;
|
|
||||||
padding-right: 0px;
|
|
||||||
}
|
|
||||||
.content-section {
|
|
||||||
padding: 0;
|
|
||||||
max-width: 100%;
|
|
||||||
order: 2;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section.hide {
|
|
||||||
max-width: 60%;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.navbar-toggler {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#toc-toggler {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-collapse.lang-selector {
|
|
||||||
display: block !important;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.note-card-holder {
|
|
||||||
margin: 0;
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
padding-left: 0.5rem;
|
|
||||||
padding-right: 0.5rem;
|
|
||||||
position: relative;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section.hide .note-card-holder{
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(30rem,1fr));
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
.note-card-holder .note-card {
|
|
||||||
max-width: 100%;
|
|
||||||
min-width: 50%;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section.hide .note-card-holder .note-card {
|
|
||||||
max-width: 100%;
|
|
||||||
min-width: 100%;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium devices (tablets, 768px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
.wrapper {
|
|
||||||
padding-left: 0px;
|
|
||||||
padding-right: 0px;
|
|
||||||
flex-flow: column;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.content-section, .content-section.hide {
|
|
||||||
flex: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
padding-left: 0;
|
|
||||||
width: 100%;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
width: 100%;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section.hide .content {
|
|
||||||
margin-top: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section.hide .note-card-holder {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.note-card-holder .note-card, .content-section.hide .note-card-holder .note-card {
|
|
||||||
margin-left: 1%;
|
|
||||||
margin-right: 1%;
|
|
||||||
max-width: 98%;
|
|
||||||
min-width: 98%;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
}
|
|
||||||
|
|
@ -1,516 +0,0 @@
|
||||||
body {
|
|
||||||
background-color: #e5e9f2;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.read-area {
|
|
||||||
background-color: #f9fafc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
display: flex;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: space-between;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section {
|
|
||||||
flex: 60%;
|
|
||||||
max-width: 60%;
|
|
||||||
order: 2;
|
|
||||||
/* background-color: lightseagreen; */
|
|
||||||
padding: 0;
|
|
||||||
position: relative;
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
background: #e5e9f2;
|
|
||||||
}
|
|
||||||
.toc-section {
|
|
||||||
flex: 20%;
|
|
||||||
order: 3;
|
|
||||||
max-width: 20%;
|
|
||||||
/* background-color: lightpink; */
|
|
||||||
transition: all ease-out 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-holder {
|
|
||||||
position: sticky;
|
|
||||||
top: 4.5rem;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
background-color: #f9fafc;
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
/* box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); */
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc {
|
|
||||||
position: relative;
|
|
||||||
padding-top: 0px;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc nav {
|
|
||||||
padding-top: 0px;
|
|
||||||
margin-top: 0px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc ul {
|
|
||||||
list-style: none;
|
|
||||||
padding-left: 0.5rem;
|
|
||||||
margin-bottom: 0rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc .nav-link {
|
|
||||||
padding: 0;
|
|
||||||
padding-left: 0.5rem;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
color: #1c2d41;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc .nav-link:hover,
|
|
||||||
.toc .nav-link:focus,
|
|
||||||
.toc .nav-link.active {
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 0.5rem;
|
|
||||||
background-color: #248aaa;
|
|
||||||
color: #f9f9f9;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-area {
|
|
||||||
margin-top: 3rem;
|
|
||||||
width: 100%;
|
|
||||||
height: 400px;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-content {
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
top: -4.5rem;
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.author-profile {
|
|
||||||
position: relative;
|
|
||||||
align-content: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.author-name {
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.author-profile img {
|
|
||||||
height: 120px;
|
|
||||||
width: 120px;
|
|
||||||
-o-object-fit: cover;
|
|
||||||
object-fit: cover;
|
|
||||||
background-color: #f9fafc;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
.author-profile p {
|
|
||||||
color: #8392a5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-content {
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-content h1,
|
|
||||||
h2 {
|
|
||||||
margin-top: 1.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-content h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
margin-top: 1.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-content blockquote {
|
|
||||||
border-left: 4px solid #248aaa;
|
|
||||||
background-color: #248baa15;
|
|
||||||
padding: 0.3rem;
|
|
||||||
padding-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-content blockquote > p {
|
|
||||||
color: #3c4858;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.next-prev-navigator {
|
|
||||||
padding-left: 10px;
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.next-prev-navigator a {
|
|
||||||
color: #2098d1;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.next-prev-navigator a:hover {
|
|
||||||
color: #3c4858;
|
|
||||||
transition: all 0.3 ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.next-prev-navigator .next-article {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.next-prev-navigator .next-article a {
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.next-prev-navigator .previous-article a {
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.next-prev-navigator .btn-outline-info {
|
|
||||||
color: #f9fafc !important;
|
|
||||||
border-color: #e5e9f2 !important;
|
|
||||||
background-color: #248aaa !important;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.next-prev-navigator .next-prev-text {
|
|
||||||
white-space: break-spaces;
|
|
||||||
}
|
|
||||||
|
|
||||||
.next-prev-navigator .btn-outline-info:hover {
|
|
||||||
color: #3c4858 !important;
|
|
||||||
background-color: #e5e9f2 !important;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.disquss {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-buttons .btn {
|
|
||||||
color: #e5e9f2 !important;
|
|
||||||
transition: all 0.3s ease-out !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-buttons .btn:hover,
|
|
||||||
.share-buttons .btn:focus {
|
|
||||||
background-color: #248aaa !important;
|
|
||||||
border-color: #248aaa !important;
|
|
||||||
transition: all 0.3s ease-out !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-buttons .facebook-btn {
|
|
||||||
background-color: #4267b2 !important;
|
|
||||||
border-color: #4267b2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-buttons .twitter-btn {
|
|
||||||
background-color: #1da1f2 !important;
|
|
||||||
border-color: #1da1f2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-buttons .reddit-btn {
|
|
||||||
background-color: #ff4500 !important;
|
|
||||||
border-color: #ff4500 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-buttons .tumblr-btn {
|
|
||||||
background-color: #34465d !important;
|
|
||||||
border-color: #34465d !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-buttons .pocket-btn {
|
|
||||||
background-color: #ef4056 !important;
|
|
||||||
border-color: #ef4056 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-buttons .linkedin-btn {
|
|
||||||
background-color: #2867b2 !important;
|
|
||||||
border-color: #2867b2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-buttons .diaspora-btn {
|
|
||||||
background-color: #3c4858 !important;
|
|
||||||
border-color: #3c4858 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-buttons .mastodon-btn {
|
|
||||||
background-color: #2791da !important;
|
|
||||||
border-color: #2791da !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-buttons .whatsapp-btn {
|
|
||||||
background-color: #4ac959 !important;
|
|
||||||
border-color: #4ac959 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-buttons .email-btn {
|
|
||||||
background-color: #3c4858 !important;
|
|
||||||
border-color: #3c4858 !important;
|
|
||||||
transition: all 0.3s ease-out !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-improve-page {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.languageSelector {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#scroll-to-top {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0rem;
|
|
||||||
right: 1rem;
|
|
||||||
color: #248aaa;
|
|
||||||
font-size: 24pt;
|
|
||||||
z-index: 900000;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#scroll-to-top i {
|
|
||||||
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#scroll-to-top:hover {
|
|
||||||
color: #2098d1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#scroll-to-top.show {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
.taxonomy-terms {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.taxonomy-terms li {
|
|
||||||
font-size: 0.8em;
|
|
||||||
list-style-type: none;
|
|
||||||
display: inline-block;
|
|
||||||
background: #248aaa;
|
|
||||||
margin-left: 0.2em;
|
|
||||||
margin-right: 0.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.taxonomy-terms a {
|
|
||||||
color: #f9fafc;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
|
||||||
|
|
||||||
/* Large screens such as TV */
|
|
||||||
@media only screen and (min-width: 1824px) {
|
|
||||||
.content-section {
|
|
||||||
flex: 65%;
|
|
||||||
max-width: 65%;
|
|
||||||
}
|
|
||||||
.content-section .container {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IPad Pro */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.wrapper {
|
|
||||||
padding-left: 0px;
|
|
||||||
padding-right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section {
|
|
||||||
padding: 0;
|
|
||||||
flex: 60%;
|
|
||||||
max-width: 100%;
|
|
||||||
order: 2;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-section {
|
|
||||||
order: 3;
|
|
||||||
flex: 0%;
|
|
||||||
max-width: 0%;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
.toc-section.hide {
|
|
||||||
flex: 40%;
|
|
||||||
max-width: 40%;
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-holder {
|
|
||||||
top: 3rem;
|
|
||||||
max-height: calc(100vh - 3rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-toggler {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-collapse.lang-selector {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.languageSelector {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-area {
|
|
||||||
height: 300px;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-content {
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-improve-page {
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#disqus_thread,
|
|
||||||
.dsq-brlink {
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium devices (tablets, 768px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
#scroll-to-top {
|
|
||||||
right: 8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
.wrapper {
|
|
||||||
padding: 0px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section {
|
|
||||||
padding: 0;
|
|
||||||
flex: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
order: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-section {
|
|
||||||
order: 2;
|
|
||||||
width: 100%;
|
|
||||||
height: -moz-fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
max-height: 0;
|
|
||||||
max-width: 100%;
|
|
||||||
transition: all ease-out 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-section.hide {
|
|
||||||
margin-top: 2.5rem;
|
|
||||||
position: relative;
|
|
||||||
/* height: fit-content; */
|
|
||||||
flex: 100%;
|
|
||||||
height: -moz-fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
max-height: 200vh;
|
|
||||||
max-width: 100%;
|
|
||||||
margin-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
|
||||||
transition: all ease-out 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-holder {
|
|
||||||
max-height: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: all ease-out 0.5s;
|
|
||||||
}
|
|
||||||
.toc-section.hide .toc-holder {
|
|
||||||
max-height: 200vh;
|
|
||||||
transition: all ease-out 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-toggler {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-area {
|
|
||||||
height: 200px;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-content {
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.next-prev-navigator .previous-article {
|
|
||||||
text-align: center;
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
.next-prev-navigator .next-article {
|
|
||||||
text-align: center;
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
.previous-article a,
|
|
||||||
.next-article a {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#disqus_thread,
|
|
||||||
.dsq-brlink {
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
}
|
|
||||||
|
|
@ -1,301 +0,0 @@
|
||||||
.top-navbar {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 50px;
|
|
||||||
z-index: 99999;
|
|
||||||
transition: all 0.4s ease-out;
|
|
||||||
margin: 0px;
|
|
||||||
padding-top: 0.4rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- initial state start ------ */
|
|
||||||
|
|
||||||
.initial-navbar {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.initial-navbar .navbar-brand {
|
|
||||||
color: #c0ccda;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.initial-navbar li a {
|
|
||||||
color: #c0ccda;
|
|
||||||
}
|
|
||||||
|
|
||||||
.initial-navbar .navbar-nav .active,
|
|
||||||
.initial-navbar li a:hover {
|
|
||||||
color: #f9fafc;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-collapse {
|
|
||||||
margin-top: -5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-collapse.show,
|
|
||||||
.navbar-collapse.collapsing {
|
|
||||||
background-color: #f9fafc;
|
|
||||||
padding-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- initial state end ------ */
|
|
||||||
|
|
||||||
/* --- state after scroll start --- */
|
|
||||||
|
|
||||||
.final-navbar {
|
|
||||||
background-color: #f9fafc;
|
|
||||||
color: #1c2d41;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.final-navbar .navbar-brand {
|
|
||||||
color: #1c2d41;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.final-navbar li a {
|
|
||||||
color: #1c2d41;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
border-bottom: 2px solid#F9FAFC;
|
|
||||||
}
|
|
||||||
|
|
||||||
.final-navbar .navbar-nav .active,
|
|
||||||
.final-navbar li a:hover {
|
|
||||||
color: #2098d1;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
border-bottom: 2px solid #2098d1;
|
|
||||||
background: rgb(2, 0, 36);
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
rgba(2, 0, 36, 1) 0%,
|
|
||||||
rgba(34, 136, 168, 0.1) 0%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-collapse.show li a,
|
|
||||||
.navbar-collapse.collapsing li a {
|
|
||||||
color: #1c2d41;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-collapse.show .navbar-nav .active,
|
|
||||||
.navbar-collapse.show .navbar-nav a:hover {
|
|
||||||
color: #2098d1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#top-navbar-divider {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- state after scroll end --- */
|
|
||||||
|
|
||||||
#top-navbar-divider {
|
|
||||||
background: rgba(192, 204, 218, 0.8);
|
|
||||||
height: 20px;
|
|
||||||
width: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.final-navbar #top-navbar-divider {
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
#top-navbar-divider {
|
|
||||||
height: 20px;
|
|
||||||
width: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-brand img {
|
|
||||||
width: 42px;
|
|
||||||
padding: 5px;
|
|
||||||
margin-left: -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-navbar .dropdown-menu {
|
|
||||||
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
|
||||||
border: 1px solid #fff;
|
|
||||||
max-height: 0vh;
|
|
||||||
overflow: hidden;
|
|
||||||
display: block;
|
|
||||||
visibility: hidden;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-navbar .dropdown-menu.show {
|
|
||||||
max-height: 100vh;
|
|
||||||
visibility: visible;
|
|
||||||
transition: all 0.3s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-navbar .dropdown-menu a {
|
|
||||||
color: #1c2d41;
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-navbar .dropdown-menu a:hover {
|
|
||||||
color: #2098d1;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
border-bottom: none;
|
|
||||||
background: rgb(2, 0, 36);
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
rgba(2, 0, 36, 1) 0%,
|
|
||||||
rgba(34, 136, 168, 0.2) 0%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
|
||||||
|
|
||||||
/* Large screens such as TV */
|
|
||||||
@media only screen and (min-width: 1824px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IPad Pro */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.top-navbar {
|
|
||||||
height: -moz-fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
padding-bottom: 0px;
|
|
||||||
padding-top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-navbar .container {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.initial-navbar .navbar-nav .active,
|
|
||||||
.initial-navbar li a:hover {
|
|
||||||
color: #2098d1;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.final-navbar .navbar-nav .active,
|
|
||||||
.final-navbar li a:hover {
|
|
||||||
color: #2098d1;
|
|
||||||
transition: none;
|
|
||||||
|
|
||||||
border-bottom: none;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.final-navbar li a {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-divider {
|
|
||||||
border-top: 1px solid #c0ccda;
|
|
||||||
}
|
|
||||||
#top-navbar-divider {
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
height: auto;
|
|
||||||
width: auto;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
.top-navbar .dropdown-menu {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
margin-right: 1rem;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
.initial-navbar .navbar-nav .active,
|
|
||||||
.initial-navbar li a:hover {
|
|
||||||
color: #2098d1;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.final-navbar .navbar-nav .active,
|
|
||||||
.final-navbar li a:hover {
|
|
||||||
color: #2098d1;
|
|
||||||
transition: none;
|
|
||||||
|
|
||||||
border-bottom: none;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.final-navbar li a {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-divider {
|
|
||||||
border-top: 1px solid #c0ccda;
|
|
||||||
}
|
|
||||||
#top-navbar-divider {
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
height: auto;
|
|
||||||
width: auto;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium devices (tablets, 768px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
.initial-navbar .navbar-nav .active,
|
|
||||||
.initial-navbar li a:hover {
|
|
||||||
color: #2098d1;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.final-navbar .navbar-nav .active,
|
|
||||||
.final-navbar li a:hover {
|
|
||||||
color: #2098d1;
|
|
||||||
transition: none;
|
|
||||||
|
|
||||||
border-bottom: none;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.final-navbar li a {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-divider {
|
|
||||||
border-top: 1px solid #c0ccda;
|
|
||||||
}
|
|
||||||
#top-navbar-divider {
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
height: auto;
|
|
||||||
width: auto;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
.top-navbar .dropdown-menu {
|
|
||||||
margin-left: -1rem;
|
|
||||||
margin-right: 0rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
}
|
|
||||||
|
|
@ -1,304 +0,0 @@
|
||||||
.sidebar-section {
|
|
||||||
order: 1;
|
|
||||||
flex: 20%;
|
|
||||||
max-width: 20%;
|
|
||||||
/* background-color: lightsalmon; */
|
|
||||||
transition: all ease-out 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-holder {
|
|
||||||
top: 2.5rem;
|
|
||||||
position: sticky;
|
|
||||||
background-color: #f9fafc;
|
|
||||||
height: 100vh;
|
|
||||||
overflow: auto;
|
|
||||||
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
background: #f9fafc;
|
|
||||||
height: 100vh;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-tree {
|
|
||||||
padding-left: 1rem;
|
|
||||||
position: relative;
|
|
||||||
width: -moz-max-content;
|
|
||||||
width: max-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
#search-box {
|
|
||||||
margin-left: 5%;
|
|
||||||
margin-right: 5%;
|
|
||||||
width: -webkit-fill-available;
|
|
||||||
height: 35px;
|
|
||||||
padding-left: 15px;
|
|
||||||
margin-top: 30px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: #e5e9f2;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
border: 1px solid #c0ccda;
|
|
||||||
}
|
|
||||||
|
|
||||||
#search-box:focus {
|
|
||||||
border: 1pt solid #248aaa;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#list-heading {
|
|
||||||
padding-left: 0px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree,
|
|
||||||
.tree ul {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree li {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0 1em;
|
|
||||||
line-height: 2em;
|
|
||||||
color: #3c4858;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree li a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: #131313;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree li a.active {
|
|
||||||
display: inline;
|
|
||||||
color: #2098d1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree li a:hover {
|
|
||||||
margin-left: 3px;
|
|
||||||
color: #2098d1;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree i {
|
|
||||||
color: #3c4858;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree .shift-right {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree .active,
|
|
||||||
.tree .active > ul {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtree {
|
|
||||||
padding-left: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtree:before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
width: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 2.5rem;
|
|
||||||
left: 1.5rem;
|
|
||||||
bottom: 0.9rem;
|
|
||||||
border-left: 1px solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtree ul,
|
|
||||||
ul > ul {
|
|
||||||
position: relative;
|
|
||||||
padding-left: 0.5rem;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtree ul:before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
width: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: -10px;
|
|
||||||
left: 0.3rem;
|
|
||||||
bottom: 0.9rem;
|
|
||||||
border-left: 1px solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtree li:before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
width: 20px;
|
|
||||||
height: 0;
|
|
||||||
border-top: 1px solid;
|
|
||||||
margin-top: -1px;
|
|
||||||
position: absolute;
|
|
||||||
top: 18px;
|
|
||||||
left: -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtree li:last-child:before {
|
|
||||||
background: #f9fafc;
|
|
||||||
height: auto;
|
|
||||||
top: 1.1rem;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.focused {
|
|
||||||
color: #2098d1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
|
||||||
|
|
||||||
/* Large screens such as TV */
|
|
||||||
@media only screen and (min-width: 1824px) {
|
|
||||||
.sidebar-section {
|
|
||||||
flex: 15%;
|
|
||||||
max-width: 15%;
|
|
||||||
}
|
|
||||||
.sidebar-holder {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
.sidebar-holder {
|
|
||||||
max-width: 20rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
.sidebar-tree {
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IPad Pro */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.sidebar-section {
|
|
||||||
flex: 0%;
|
|
||||||
max-width: 0%;
|
|
||||||
min-height: 100vh;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
.sidebar-holder {
|
|
||||||
position: sticky;
|
|
||||||
top: 2.5rem;
|
|
||||||
width: 100%;
|
|
||||||
max-height: calc(100vh - 2.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section.hide {
|
|
||||||
flex: 30%;
|
|
||||||
max-width: 30%;
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium devices (tablets, 768px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
.sidebar-section {
|
|
||||||
flex: 0%;
|
|
||||||
max-width: 0%;
|
|
||||||
min-height: 100vh;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
.sidebar-holder {
|
|
||||||
position: sticky;
|
|
||||||
top: 2.5rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section.hide {
|
|
||||||
flex: 40%;
|
|
||||||
max-width: 40%;
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
transition: all ease-out 0.3s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
.sidebar-section {
|
|
||||||
width: 100%;
|
|
||||||
min-height: 0;
|
|
||||||
max-height: 0;
|
|
||||||
max-width: 100%;
|
|
||||||
transition: all ease-out 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section.hide {
|
|
||||||
margin-top: 2rem;
|
|
||||||
position: relative;
|
|
||||||
height: -moz-fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
flex: none;
|
|
||||||
max-height: 300vh;
|
|
||||||
max-width: 100%;
|
|
||||||
transition: all ease-out 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-holder {
|
|
||||||
max-height: 0;
|
|
||||||
height: -moz-fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
overflow: hidden;
|
|
||||||
max-width: 100%;
|
|
||||||
transition: all ease-out 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section.hide .sidebar-holder {
|
|
||||||
max-height: 200vh;
|
|
||||||
transition: all ease-out 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
position: relative;
|
|
||||||
height: -moz-fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
max-height: -moz-fit-content;
|
|
||||||
max-height: fit-content;
|
|
||||||
width: 100vw;
|
|
||||||
min-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: all ease-out 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-tree {
|
|
||||||
margin-left: 0rem;
|
|
||||||
max-height: 0;
|
|
||||||
transition: all 0.5s ease-out;
|
|
||||||
}
|
|
||||||
.sidebar-section.hide .sidebar-tree {
|
|
||||||
max-height: 200vh;
|
|
||||||
transition: all 0.5s ease-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
}
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,385 +0,0 @@
|
||||||
.social-link {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-link a {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
color: #3c4858;
|
|
||||||
padding: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-link a:hover {
|
|
||||||
color: #248aaa;
|
|
||||||
transition: all 0.3s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
line-height: 150px;
|
|
||||||
background: none;
|
|
||||||
margin: 0 auto;
|
|
||||||
box-shadow: none;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress:after {
|
|
||||||
content: "";
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 12px solid #f9fafc;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress > span {
|
|
||||||
width: 50%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress .circular-progress-left {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress .circular-progress-bar {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: none;
|
|
||||||
border-width: 12px;
|
|
||||||
border-style: solid;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress .circular-progress-left .circular-progress-bar {
|
|
||||||
left: 100%;
|
|
||||||
border-top-right-radius: 80px;
|
|
||||||
border-bottom-right-radius: 80px;
|
|
||||||
border-left: 0;
|
|
||||||
transform-origin: center left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress .circular-progress-right {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress .circular-progress-right .circular-progress-bar {
|
|
||||||
left: -100%;
|
|
||||||
border-top-left-radius: 80px;
|
|
||||||
border-bottom-left-radius: 80px;
|
|
||||||
border-right: 0;
|
|
||||||
transform-origin: center right;
|
|
||||||
animation: circular-loading-1 1.8s linear forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress .circular-progress-value {
|
|
||||||
width: 90%;
|
|
||||||
height: 90%;
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #3c4858;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #f9fafc;
|
|
||||||
line-height: initial;
|
|
||||||
text-align: center;
|
|
||||||
position: absolute;
|
|
||||||
top: 5%;
|
|
||||||
left: 5%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress.blue .circular-progress-bar {
|
|
||||||
border-color: #048dff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress.yellow .circular-progress-bar {
|
|
||||||
border-color: #eebb4d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress.pink .circular-progress-bar {
|
|
||||||
border-color: #ed63d2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress.green .circular-progress-bar {
|
|
||||||
border-color: #2dca73;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress.sky .circular-progress-bar {
|
|
||||||
border-color: #00c9e3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress.orange .circular-progress-bar {
|
|
||||||
border-color: #ff7c7c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress-percentage-50 {
|
|
||||||
animation: circular-loading-50 0s linear forwards 1.8s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress-percentage-55 {
|
|
||||||
animation: circular-loading-55 0.18s linear forwards 1.8s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress-percentage-60 {
|
|
||||||
animation: circular-loading-60 0.36s linear forwards 1.8s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress-percentage-65 {
|
|
||||||
animation: circular-loading-65 0.54s linear forwards 1.8s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress-percentage-70 {
|
|
||||||
animation: circular-loading-70 0.72s linear forwards 1.8s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress-percentage-75 {
|
|
||||||
animation: circular-loading-75 0.9s linear forwards 1.8s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress-percentage-80 {
|
|
||||||
animation: circular-loading-80 1.08s linear forwards 1.8s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress-percentage-85 {
|
|
||||||
animation: circular-loading-85 1.26s linear forwards 1.8s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress-percentage-90 {
|
|
||||||
animation: circular-loading-90 1.44s linear forwards 1.8s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress-percentage-95 {
|
|
||||||
animation: circular-loading-95 1.62s linear forwards 1.8s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress-percentage-100 {
|
|
||||||
animation: circular-loading-100 1.8s linear forwards 1.8s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes circular-loading-50 {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes circular-loading-55 {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(18deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes circular-loading-60 {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(36deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes circular-loading-65 {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(54deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes circular-loading-70 {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(72deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes circular-loading-75 {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes circular-loading-80 {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(108deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes circular-loading-85 {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(126deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes circular-loading-90 {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(144deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes circular-loading-95 {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(162deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes circular-loading-100 {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes circular-loading-1 {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes circular-loading-2 {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(144deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes circular-loading-3 {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes circular-loading-4 {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(36deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes circular-loading-5 {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(126deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 990px) {
|
|
||||||
.circular-progress {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
|
||||||
|
|
||||||
/* Large screens such as TV */
|
|
||||||
@media only screen and (min-width: 1824px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IPad Pro */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium devices (tablets, 768px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
.about-section.container {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress {
|
|
||||||
width: 135px;
|
|
||||||
height: 135px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
.circular-progress {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circular-progress .circular-progress-value {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
.col-6 {
|
|
||||||
flex: auto;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-link {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,104 +0,0 @@
|
||||||
.accomplishments-section h1 > span{
|
|
||||||
margin-top: -55px; /* Size of fixed header */
|
|
||||||
padding-bottom:55px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accomplishments-section .card {
|
|
||||||
background: #fff;
|
|
||||||
border-top: 2px solid #248aaa;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.accomplishments-section .card .card-header {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accomplishments-section .card .card-header .sub-title {
|
|
||||||
color: #8392a5;
|
|
||||||
margin-top: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accomplishments-section .card .sub-title :nth-child(2) {
|
|
||||||
float: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accomplishments-section .card .card-body {
|
|
||||||
padding: 0;
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accomplishments-section .card .card-footer {
|
|
||||||
background: #fff;
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
padding-left: 0.7rem;
|
|
||||||
padding-bottom: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
|
||||||
|
|
||||||
/* Large screens such as TV */
|
|
||||||
@media only screen and (min-width: 1824px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IPad Pro */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.accomplishments-section {
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.accomplishments-section .container {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.accomplishments-section {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.accomplishments-section {
|
|
||||||
padding-left: 0.2rem;
|
|
||||||
padding-right: 0.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium devices (tablets, 768px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
.accomplishments-section {
|
|
||||||
flex: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
}
|
|
||||||
|
|
@ -1,178 +0,0 @@
|
||||||
.achievements-section .container {
|
|
||||||
padding-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.achievements-section h1 > span{
|
|
||||||
margin-top: -55px; /* Size of fixed header */
|
|
||||||
padding-bottom:55px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gallery .achievement-entry {
|
|
||||||
cursor: pointer;
|
|
||||||
margin-top: 5px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
margin-left: 7px;
|
|
||||||
margin-right: 7px;
|
|
||||||
z-index: 1;
|
|
||||||
background-color: #e5e9f2;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gallery .achievement-entry:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 1;
|
|
||||||
transform: scale(1.1);
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
z-index: 20000;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gallery .achievement-details {
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 1;
|
|
||||||
opacity: 1 !important;
|
|
||||||
transition: none !important;
|
|
||||||
transform: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gallery .img-type-1 {
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
#gallery .img-type-2 {
|
|
||||||
height: 146px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gallery .svg-inline--fa {
|
|
||||||
color: #8392a5;
|
|
||||||
background-color: rgba(0, 0, 0, 0.7);
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 0rem;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gallery .achievement-entry:hover .svg-inline--fa {
|
|
||||||
opacity: 1;
|
|
||||||
font-size: 1rem;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gallery .img-type-1 .svg-inline--fa {
|
|
||||||
margin-top: 135px;
|
|
||||||
}
|
|
||||||
#gallery .img-type-2 .svg-inline--fa {
|
|
||||||
margin-top: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gallery .achievement-details.img-type-1 .svg-inline--fa,
|
|
||||||
.achievement-details.img-type-2 .svg-inline--fa {
|
|
||||||
margin-top: 0px !important;
|
|
||||||
transition: none !important;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gallery .achievement-entry .title {
|
|
||||||
color: #e5e9f2;
|
|
||||||
background-color: rgba(0, 0, 0, 0.7);
|
|
||||||
opacity: 0;
|
|
||||||
padding: 5px;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 0px;
|
|
||||||
bottom: -5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gallery .achievement-entry:hover .title {
|
|
||||||
opacity: 1;
|
|
||||||
bottom: 0px;
|
|
||||||
transition: bottom 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gallery .caption {
|
|
||||||
background-color: rgba(0, 0, 0, 0.7);
|
|
||||||
bottom: 1rem;
|
|
||||||
left: 1rem;
|
|
||||||
color: #e5e9f2;
|
|
||||||
padding: 15px;
|
|
||||||
position: absolute;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gallery .caption h4 {
|
|
||||||
color: #e5e9f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gallery .caption p {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 300;
|
|
||||||
color: #e5e9f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gallery .achievement-details {
|
|
||||||
height: 75vh !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
|
||||||
|
|
||||||
/* Large screens such as TV */
|
|
||||||
@media only screen and (min-width: 1824px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IPad Pro */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium devices (tablets, 768px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
.achievements-section .container {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.achievements-section .col-md-6 {
|
|
||||||
flex: 50%;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
#gallery .achievement-entry:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
}
|
|
||||||
|
|
@ -1,198 +0,0 @@
|
||||||
.education-section .education-info-table {
|
|
||||||
width: 100%;
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-section .education-info-table tr:hover {
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-section .education-info-table tr,
|
|
||||||
.education-section .education-info-table th,
|
|
||||||
.education-section .education-info-table td {
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-section .timeframe {
|
|
||||||
color: #8392a5;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-section h1 > span{
|
|
||||||
margin-top: -55px; /* Size of fixed header */
|
|
||||||
padding-bottom:55px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-section .icon {
|
|
||||||
width: 2rem;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-section .icon .hline {
|
|
||||||
position: absolute;
|
|
||||||
left: 1rem;
|
|
||||||
top: 0;
|
|
||||||
background-color: #248aaa;
|
|
||||||
height: 100%;
|
|
||||||
width: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-section .education-info-table tr:first-child .hline {
|
|
||||||
height: 65%;
|
|
||||||
top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-section .education-info-table tr:last-child .hline {
|
|
||||||
height: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-section .icon-holder {
|
|
||||||
background-color: #248aaa;
|
|
||||||
border-radius: 50%;
|
|
||||||
height: 2rem;
|
|
||||||
width: 2rem;
|
|
||||||
padding: 0.2rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #e5e9f2;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-section .line {
|
|
||||||
width: 5%;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-section .line div {
|
|
||||||
height: 2px;
|
|
||||||
/* width: 100%; */
|
|
||||||
margin-right: -1px;
|
|
||||||
background-color: #248aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-section .degree-info {
|
|
||||||
padding: 1rem;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
border-left: 2px solid #248aaa;
|
|
||||||
border-top: 1px solid #c0ccda;
|
|
||||||
border-bottom: 1px solid #c0ccda;
|
|
||||||
border-right: 1px solid #c0ccda;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-section .degree-info h5 {
|
|
||||||
margin-bottom: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-section .taken-courses table {
|
|
||||||
margin-left: 1rem;
|
|
||||||
width: 100%;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-section .taken-courses tr {
|
|
||||||
height: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-section .taken-courses tr,
|
|
||||||
.education-section .taken-courses td,
|
|
||||||
.education-section .taken-courses th {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: #212529;
|
|
||||||
}
|
|
||||||
.education-section .taken-courses th.course-name-header{
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
.education-section .taken-courses .hidden-course {
|
|
||||||
display: none;
|
|
||||||
transition: all 1s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-section .taken-courses ul {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*============ Education Alter Template =============*/
|
|
||||||
.education-alt .degree-info {
|
|
||||||
border-right: 2px solid #248aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
|
||||||
|
|
||||||
/* Large screens such as TV */
|
|
||||||
|
|
||||||
@media only screen and (min-width: 1824px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IPad Pro */
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.education-section .container {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium devices (tablets, 768px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
.education-section {
|
|
||||||
padding-left: 0.5rem;
|
|
||||||
padding-right: 0.5rem;
|
|
||||||
}
|
|
||||||
.education-section .container {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-section .icon {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.education-section .line {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.education-section .timeframe {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
}
|
|
||||||
|
|
@ -1,171 +0,0 @@
|
||||||
.experiences-section {
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.experiences-section .timeline {
|
|
||||||
margin-top: 1.5rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.experiences-section h1 > span{
|
|
||||||
margin-top: -55px; /* Size of fixed header */
|
|
||||||
padding-bottom:55px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.experiences-section ul {
|
|
||||||
padding-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.experiences-section ul > li {
|
|
||||||
margin-left: 0;
|
|
||||||
color: #3c4858;
|
|
||||||
}
|
|
||||||
|
|
||||||
.experiences-section .designation {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circle {
|
|
||||||
padding: 13px 20px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #248aaa;
|
|
||||||
color: #f9fafc;
|
|
||||||
max-height: 50px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline .vertical-line {
|
|
||||||
align-self: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline .vertical-line::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
border-left: 3px solid #248aaa;
|
|
||||||
z-index: 1;
|
|
||||||
height: 100%;
|
|
||||||
left: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline .vertical-line:nth-child(even)::after {
|
|
||||||
left: calc(50% - 3px) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline .horizontal-line div {
|
|
||||||
padding: 0;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline .horizontal-line hr {
|
|
||||||
border-top: 3px solid #248aaa;
|
|
||||||
margin: 0;
|
|
||||||
top: 17px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline .horizontal-line .timeline-side-div {
|
|
||||||
display: flex;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline .horizontal-line .corner {
|
|
||||||
border: 3px solid #248aaa;
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
border-radius: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline .row:nth-child(2n) div:nth-child(1) .corner {
|
|
||||||
left: 50%;
|
|
||||||
top: -50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline .row:nth-child(2n) div:nth-child(3) .corner {
|
|
||||||
left: -50%;
|
|
||||||
top: calc(50% - 3px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline .row:nth-child(4n) div:nth-child(1) .corner {
|
|
||||||
left: 50%;
|
|
||||||
top: calc(50% - 3px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline .row:nth-child(4n) div:nth-child(3) .corner {
|
|
||||||
left: -50%;
|
|
||||||
top: -50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
|
||||||
|
|
||||||
/* Large screens such as TV */
|
|
||||||
@media only screen and (min-width: 1824px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IPad Pro */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium devices (tablets, 768px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
.experiences-section .container {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
.top-left {
|
|
||||||
left: -52%;
|
|
||||||
top: -50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-right {
|
|
||||||
left: 52%;
|
|
||||||
top: -50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
.top-left {
|
|
||||||
left: -56%;
|
|
||||||
top: -50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-right {
|
|
||||||
left: 56%;
|
|
||||||
top: -50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
.top-left {
|
|
||||||
left: -64%;
|
|
||||||
top: -50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-right {
|
|
||||||
left: 64%;
|
|
||||||
top: -50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,151 +0,0 @@
|
||||||
.home {
|
|
||||||
height: 100vh;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
color: #f9fafc;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
background-attachment: fixed;
|
|
||||||
background-position: center;
|
|
||||||
transform: scale(1.1);
|
|
||||||
filter: blur(3px);
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow-center {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Resolves https://github.com/hugo-toha/toha/issues/70
|
|
||||||
|
|
||||||
fixed attached images use the whole <body> size. On mobile this can get really
|
|
||||||
tall which blows your image out. Setting the attachment back to scroll allows
|
|
||||||
your cover image to stretch within its own container
|
|
||||||
*/
|
|
||||||
@supports (-webkit-touch-callout: none) {
|
|
||||||
.background {
|
|
||||||
background-attachment: scroll;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
position: relative;
|
|
||||||
top: -65%;
|
|
||||||
height: 60%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home img {
|
|
||||||
width: 148px;
|
|
||||||
height: 148px;
|
|
||||||
background-color: #e7e7ef;
|
|
||||||
padding: 5px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home .greeting, .home .greeting-subtitle {
|
|
||||||
color: #f9fafc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home .typing-carousel {
|
|
||||||
font-size: 14pt;
|
|
||||||
color: #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#typing-carousel-data {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow {
|
|
||||||
position: absolute;
|
|
||||||
color: #f9fafc;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounce {
|
|
||||||
animation: bounce 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes bounce {
|
|
||||||
0%,
|
|
||||||
20%,
|
|
||||||
50%,
|
|
||||||
80%,
|
|
||||||
100% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
40% {
|
|
||||||
transform: translateY(-30px);
|
|
||||||
}
|
|
||||||
60% {
|
|
||||||
transform: translateY(-15px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
|
||||||
|
|
||||||
/* Large screens such as TV */
|
|
||||||
@media only screen and (min-width: 1824px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IPad Pro */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium devices (tablets, 768px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
.content {
|
|
||||||
position: relative;
|
|
||||||
top: -75%;
|
|
||||||
height: 65%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home img {
|
|
||||||
width: 140px;
|
|
||||||
max-width: 50%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home .greeting {
|
|
||||||
font-size: 24pt;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
}
|
|
||||||
|
|
@ -1,134 +0,0 @@
|
||||||
.projects-section .card .card-header {
|
|
||||||
background-color: #f9fafc;
|
|
||||||
padding: 0.7rem;
|
|
||||||
padding-bottom: 0rem;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.projects-section .card .card-img-xs {
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card .card-header .sub-title span:nth-child(1) {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.card .card-header .sub-title span:nth-child(2) {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.projects-section .card .card-body {
|
|
||||||
padding: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.projects-section .card .card-header .sub-title {
|
|
||||||
color: #8392a5;
|
|
||||||
margin-top: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filtr-projects {
|
|
||||||
padding: 1rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-card-footer {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-tags-holder {
|
|
||||||
width: 70%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-btn-holder {
|
|
||||||
width: 30%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-btn-holder span {
|
|
||||||
justify-content: flex-end;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
|
||||||
|
|
||||||
/* Large screens such as TV */
|
|
||||||
@media only screen and (min-width: 1824px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IPad Pro */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.projects-section {
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.projects-section .container {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.projects-section .filtr-projects {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.projects-section .filtr-item {
|
|
||||||
padding-left: 0.2rem;
|
|
||||||
padding-right: 0.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium devices (tablets, 768px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
.projects-section {
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.projects-section .container {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.projects-section .filtr-projects {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.projects-section .filtr-item {
|
|
||||||
padding-left: 0.2rem;
|
|
||||||
padding-right: 0.2rem;
|
|
||||||
flex: 50%;
|
|
||||||
max-width: calc(100% / 2 - 0.2rem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
.projects-section .btn {
|
|
||||||
margin-top: 0.3125rem;
|
|
||||||
}
|
|
||||||
.projects-section .filtr-item {
|
|
||||||
flex: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
}
|
|
||||||
|
|
@ -1,147 +0,0 @@
|
||||||
.publications-section h1 > span{
|
|
||||||
margin-top: -55px; /* Size of fixed header */
|
|
||||||
padding-bottom:55px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.publications-section .card {
|
|
||||||
background: #fff;
|
|
||||||
border-top: 2px solid #248aaa;
|
|
||||||
}
|
|
||||||
.publications-section .card .card-header {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.publications-section .card .card-header .sub-title {
|
|
||||||
color: #8392a5;
|
|
||||||
margin-top: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.publications-section .card .sub-title :nth-child(2) {
|
|
||||||
float: right !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.publications-section .card .card-body {
|
|
||||||
padding: 0;
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.publications-section .card .card-footer {
|
|
||||||
background: #fff;
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
padding-bottom: 0.3rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.publications-section .card .card-footer .tags {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
.publications-section .card .card-footer .tags .badge {
|
|
||||||
cursor: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filtr-publications {
|
|
||||||
padding: 1rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.publications-section .btn-group{
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
|
||||||
|
|
||||||
/* Large screens such as TV */
|
|
||||||
@media only screen and (min-width: 1824px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IPad Pro */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.publications-section {
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.publications-section .container {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.publicationss-section .filtr-publications {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.publicationss-section .pub-filtr-item {
|
|
||||||
padding-left: 0.2rem;
|
|
||||||
padding-right: 0.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium devices (tablets, 768px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
.publications-section {
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.publications-section .container {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.publications-section .filtr-publications {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.publications-section .pub-filtr-item {
|
|
||||||
padding-left: 0.2rem;
|
|
||||||
padding-right: 0.2rem;
|
|
||||||
flex: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
.publications-section .btn {
|
|
||||||
margin-top: 0.3125rem;
|
|
||||||
}
|
|
||||||
.publications-section .pub-filtr-item {
|
|
||||||
flex: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.publications-section .card .card-footer .tags {
|
|
||||||
flex: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
}
|
|
||||||
|
|
@ -1,93 +0,0 @@
|
||||||
.recent-posts-section .container {
|
|
||||||
padding-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recent-posts-section h1 > span{
|
|
||||||
margin-top: -55px; /* Size of fixed header */
|
|
||||||
padding-bottom:55px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recent-posts-section .card {
|
|
||||||
height: 100%;
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recent-posts-section .card .card-footer span {
|
|
||||||
font-size: 10pt;
|
|
||||||
color: #6c757d !important;
|
|
||||||
padding-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recent-posts-section .card .card-footer {
|
|
||||||
background: #fff;
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recent-posts-section .post-card-link {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-summary {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box;
|
|
||||||
/* line-height: 24px; fallback */
|
|
||||||
max-height: 144px; /* fallback */
|
|
||||||
-webkit-line-clamp: 5; /* number of lines to show */
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
|
||||||
|
|
||||||
/* Large screens such as TV */
|
|
||||||
@media only screen and (min-width: 1824px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IPad Pro */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium devices (tablets, 768px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
.recent-posts-section .container {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.recent-posts-section .post-card {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
.recent-posts-section .post-card {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
}
|
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
.skills-section .card .card-head {
|
|
||||||
background-color: #f9fafc;
|
|
||||||
height: -moz-fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
padding: 0.7rem;
|
|
||||||
padding-bottom: 0rem;
|
|
||||||
border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills-section h1 > span{
|
|
||||||
margin-top: -55px; /* Size of fixed header */
|
|
||||||
padding-bottom:55px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills-section .skill-card-link {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills-section .card .card-img-xs {
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills-section .card {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills-section .card .card-body {
|
|
||||||
padding-top: 0.2rem;
|
|
||||||
padding-left: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
|
||||||
|
|
||||||
/* Large screens such as TV */
|
|
||||||
@media only screen and (min-width: 1824px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IPad Pro */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium devices (tablets, 768px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
.skills-section {
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
.skills-section .container {
|
|
||||||
max-width: 95%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
}
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
/* This is empty CSS file intended to be overwritten by user's custom CSS file */
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
|
||||||
|
|
||||||
/* Large screens such as TV */
|
|
||||||
@media only screen and (min-width: 1824px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IPad Pro */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium devices (tablets, 768px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
}
|
|
||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 30 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 31 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ae" viewBox="0 0 512 512"><path fill="#00732f" d="M0 0h512v170.7H0z"/><path fill="#fff" d="M0 170.7h512v170.6H0z"/><path d="M0 341.3h512V512H0z"/><path fill="red" d="M0 0h180v512H0z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 245 B |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 20 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ag" viewBox="0 0 512 512"><defs><clipPath id="a"><path fill="#25ff01" d="M109 47.6h464.8v464.9H109z"/></clipPath></defs><g fill-rule="evenodd" clip-path="url(#a)" transform="translate(-120 -52.4) scale(1.1014)"><path fill="#fff" d="M0 47.6h693V512H0z"/><path d="M1.5 48.2h690.9v196.2H1.5z"/><path fill="#0061ff" d="M128.3 232.1h458.5v103.4H128.3z"/><path fill="#e20000" d="M692.5 49.2v463.3H347L692.5 49.2zm-691.3 0v463.3h345.7L1.2 49.2z"/><path fill="#ffd600" d="m508.8 232.2-69.3-17.6 59-44.4-72.5 10.3 37.3-63-64.1 37.2 11.3-73.5-43.4 58-17.6-67.3-19.6 69.3-43.4-59 12.4 75.6-64.1-39.3 37.2 63-70.3-11.3 57.9 43.4-72.4 18.6h321.6z"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 701 B |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 34 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-al" viewBox="0 0 512 512"><path fill="red" d="M0 0h512v512H0z"/><path id="a" d="M204.9 99.5c-5 0-13.2 1.6-13 5.4-14-2.3-15.4 3.4-14.6 8.5 1.4-2 3-3.1 4.2-3.3 1.9-.3 3.8.3 5.8 1.5a23 23 0 0 1 5 4.4c-4.8 1.1-8.6.4-12.4-.3a17.6 17.6 0 0 1-6.1-2.5c-1.6-1.1-2.1-2.1-4.6-4.7-2.9-3-6-2.1-5 2.5 2.2 4.3 6 6.3 10.7 7 2.2.4 5.6 1.2 9.4 1.2 3.8 0 8.1-.5 10.5 0-1.4.8-3 2.4-6.2 3-3.2.6-8-2-11-2.6.4 2.5 3.5 4.8 9.7 6 10.2 2.2 18.7 4 24.3 7 5.6 3 9.1 6.8 11.6 9.8 5 6 5.3 10.5 5.6 11.5 1 9.5-2.2 14.8-8.4 16.4-3 .8-8.5-.7-10.5-3-2-2.4-4-6.4-3.4-12.7.5-2.5 3.4-9 1-10.3a291.6 291.6 0 0 0-34.4-16c-2.7-1.1-5 2.5-5.8 4A53.5 53.5 0 0 1 129 107c-4.6-8.1-12.1 0-10.9 7.7 2.1 8.6 8.6 14.8 16.5 19.2 8 4.5 18.1 8.8 28.3 8.6 5.5 1 5.5 8.2-1.1 9.5-13 0-23.2-.2-32.9-9.6-7.4-6.7-11.5 1.3-9.4 5.8 3.6 14 23.6 18 43.8 13.4 7.8-1.3 3.1 7 .9 7.2-8.4 6-23.5 12-36.8-.1-6.1-4.7-10.2-.7-8 6 6 17.5 28.5 13.8 44 5.2 4-2.2 7.6 3 2.7 6.9-19.2 13.4-28.9 13.6-37.6 8.4-10.8-4.3-11.8 7.8-5.3 11.8 7.2 4.4 25.4 1 38.9-7.4 5.7-4.2 6 2.4 2.3 5-15.9 13.8-22.2 17.5-38.8 15.2-8.2-.6-8 9.5-1.6 13.5 8.8 5.4 26.1-3.6 39.5-14.7 5.6-3 6.6 2 3.8 7.8a57.4 57.4 0 0 1-23.3 19.2 29.1 29.1 0 0 1-19.5.7c-6.2-2.2-7 4.2-3.6 10 2 3.5 10.6 4.7 19.7 1.4 9.2-3.2 19-10.8 25.7-19.8 6-5.1 5.2 1.8 2.5 6.7-13.5 21.3-25.9 29.2-42.1 27.9-7.3-1.2-8.9 4.4-4.3 9.6 8 6.7 18.2 6.4 27-.2a751 751 0 0 0 30.8-32.6c5.5-4.4 7.3 0 5.7 9-1.5 5.1-5.2 10.5-15.3 14.5-7 4-1.8 9.4 3.4 9.5 2.9 0 8.7-3.3 13-8.3 5.9-6.5 6.2-11 9.5-21.1 3-5 8.4-2.7 8.4 2.5-2.6 10.2-4.8 12-10 16.2-5.1 4.7 3.4 6.3 6.3 4.4 8.3-5.6 11.3-12.8 14.1-19.4 2-4.8 7.8-2.5 5.1 5.3-6.4 18.5-17 25.8-35.5 29.6-1.9.3-3 1.4-2.4 3.6l7.5 7.5c-11.5 3.3-20.8 5.2-32.2 8.5L142 300.6c-1.5-3.4-2.2-8.7-10.4-5-5.7-2.6-8.2-1.6-11.4 1 4.5.1 6.5 1.3 8.3 3.4 2.3 6 7.6 6.6 13 5 3.5 2.9 5.4 5.2 9 8.2l-17.8-.6c-6.3-6.7-11.3-6.3-15.8-1-3.5.5-5 .5-7.3 4.7 3.7-1.5 6-2 7.7-.3 6.6 3.9 11 3 14.3 0l18.7 1.1c-2.3 2-5.6 3.1-8 5.2-9.7-2.8-14.7 1-16.4 8.8a18.2 18.2 0 0 0-1.4 10c1-3.2 2.5-5.9 5.3-7.6 8.6 2.2 11.8-1.3 12.3-6.5 4.2-3.4 10.5-4.1 14.6-7.6 4.9 1.6 7.2 2.6 12.1 4.1 1.7 5.3 5.7 7.4 12 6 7.7.3 6.3 3.4 7 5.9 2-3.6 2-7-2.8-10.3-1.7-4.6-5.5-6.7-10.4-4-4.7-1.3-5.9-3.2-10.5-4.6 11.7-3.7 20-4.5 31.8-8.3 3 2.8 5.2 4.8 8.2 7.2 1.6 1 3 1.2 4 0 7.3-10.6 10.6-20 17.4-27 2.6-2.9 6-6.8 9.6-7.8 1.8-.4 4-.2 5.5 1.4 1.4 1.6 2.6 4.4 2 8.7-.6 6.2-2 8.2-3.8 11.8-1.7 3.7-3.9 6-6 8.8-4.4 5.7-10.1 9-13.5 11.2-6.8 4.4-9.7 2.5-15 2.2-6.7.8-8.5 4.1-3 8.7a21 21 0 0 0 13.7 2.3c3.3-.6 7-4.8 9.8-7 3-3.6 8.1.6 4.7 4.7-6.3 7.5-12.6 12.4-20.3 12.3-8.2 1-6.7 5.7-1.3 7.9 9.8 4 18.6-3.5 23-8.5 3.5-3.7 6-3.9 5.3 2-3.4 10.5-8.1 14.6-15.7 15.1-6.2-.5-6.3 4.2-1.7 7.5 10.3 7 17.7-5 21.2-12.4 2.5-6.6 6.3-3.5 6.7 2 0 7.3-3.2 13.2-12 20.7 6.7 10.7 14.5 21.7 21.3 32.5l20.5-228.2-20.5-36c-2.1-2-9.3-10.5-11.2-11.7-.7-.7-1.1-1.2-.1-1.6 1-.4 3.2-.8 4.8-1-4.4-4.4-8-5.8-16.3-8.2 2-.8 4-.3 9.9-.6a32.3 32.3 0 0 0-14.4-11c4.5-3 5.3-3.3 9.8-7-7.7-.6-14.3-2-20.8-4a41 41 0 0 0-12.8-3.7zm.7 9c4 0 6.6 1.4 6.6 3 0 1.7-2.5 3.1-6.6 3.1-4 0-6.6-1.5-6.6-3.2 0-1.7 2.6-3 6.6-3z"/><use width="100%" height="100%" transform="matrix(-1 0 0 1 512 0)" xlink:href="#a"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 3.1 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-am" viewBox="0 0 512 512"><path fill="#d90012" d="M0 0h512v170.7H0z"/><path fill="#0033a0" d="M0 170.7h512v170.6H0z"/><path fill="#f2a800" d="M0 341.3h512V512H0z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 225 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ao" viewBox="0 0 512 512"><g fill-rule="evenodd" stroke-width="1pt"><path fill="red" d="M0 0h512v259.8H0z"/><path d="M0 252.2h512V512H0z"/></g><path fill="#ffec00" fill-rule="evenodd" d="M228.7 148.2c165.2 43.3 59 255.6-71.3 167.2l-8.8 13.6c76.7 54.6 152.6 10.6 174-46.4 22.2-58.8-7.6-141.5-92.6-150l-1.3 15.6z"/><path fill="#ffec00" fill-rule="evenodd" d="m170 330.8 21.7 10.1-10.2 21.8-21.7-10.2zm149-99.5h24v24h-24zm-11.7-38.9 22.3-8.6 8.7 22.3-22.3 8.7zm-26-29.1 17.1-16.9 16.9 17-17 16.9zm-26.2-39.8 22.4 8.4-8.5 22.4-22.4-8.4zM316 270l22.3 8.9-9 22.2-22.2-8.9zm-69.9 70 22-9.3 9.5 22-22 9.4zm-39.5 2.8h24v24h-24zm41.3-116-20.3-15-20.3 14.6 8-23-20.3-15h24.5l8.5-22.6 7.8 22.7 24.7-.3-19.6 15.3 7 23.4z"/><path fill="#fe0" fill-rule="evenodd" d="M336 346.4c-1.2.4-6.2 12.4-9.7 18.2l3.7 1c13.6 4.8 20.4 9.2 26.2 17.5a7.9 7.9 0 0 0 10.2.7s2.8-1 6.4-5c3-4.5 2.2-8-1.4-11.1-11-8-22.9-14-35.4-21.3z"/><path fill-rule="evenodd" d="M365.3 372.8a4.3 4.3 0 1 1-8.7 0 4.3 4.3 0 0 1 8.6 0zm-21.4-13.6a4.3 4.3 0 1 1-8.7 0 4.3 4.3 0 0 1 8.7 0zm10.9 7a4.3 4.3 0 1 1-8.7 0 4.3 4.3 0 0 1 8.7 0z"/><path fill="#fe0" fill-rule="evenodd" d="M324.5 363.7c-42.6-24.3-87.3-50.5-130-74.8-18.7-11.7-19.6-33.4-7-49.9 1.2-2.3 2.8-1.8 3.4-.5 1.5 8 6 16.3 11.4 21.5A5288 5288 0 0 1 334 345.6c-3.4 5.8-6 12.3-9.5 18z"/><path fill="#ffec00" fill-rule="evenodd" d="m297.2 305.5 17.8 16-16 17.8-17.8-16z"/><path fill="none" stroke="#000" stroke-width="3" d="m331.5 348.8-125-75.5m109.6 58.1L274 304.1m18.2 42.7L249.3 322"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-aq" viewBox="0 0 512 512"><path fill="#3a7dce" d="M0 0h512v512H0z"/><path fill="#fff" d="M107.7 240.9c-3.5-7.9-3.5-7.9-3.5-15.7-1.8 0-2.1.4-3.1 0-1-.3-1.4 7.3-4.7 5.8-.5-.7 2.4-6.2-.8-8.4-1-.8.3-5.3-.2-7.2 0 0-4 2.3-7-5.9-1.4-2.1-3.4 2-3.4 2s.9 2.5-.7 3c-2.3-1.8-3.9-.8-6.7-3.3-2.9-2.5.6-5.4-4.8-7.6 3.5-9.8 3.5-7.8 12.2-11.8-5.2-3.9-5.2-3.9-8.7-9.8-5.3-2-7-3.9-12.2-7.8-7-9.8-10.5-29.4-10.5-43.2 4.4-4.6 10.5 15.7 19.2 21.6l12.2 5.9c7 4 8.7 7.8 14 11.8l15.6 5.9c7 5.8 10.5 13.7 15.7 15.6 5.7 0 6.8-3.6 8.6-3.9 10.2-.5 15.5-2 17.5-5.5 2-2.8 7 1.6 21-4.3l-1.8-7.8s3.8-3.5 8.8-2c-.2-3.6-.5-13.1 4.4-17.5-3-3.5-1-6-1-6s2.8-3 3.2-4.6c-1.5-8.7 1.2-8.8 1.9-11.3.6-2.6-2.4-1.7-1.6-5.2.9-3.5 6-4.4 6.6-7.3.7-2.8-1.5-4.3-1.3-5 1-2.7.1-9.2 0-11.7 9.3-2.9 12.4-11.4 15.7-7.9 1.7-11.8 3.5-15.7 14-15.7 1.4-3.6-3.9-6.7-1.8-7.8 3.5-.5 6.1-.3 10.2 5.7 1.3 1.9 1.5-2.8 2.8-3.3 1.4-.5 4.5-.5 5-2.8.4-2.4 1.1-5.5 2.9-9.4 1.5-3.2 2.6 1.2 4 7.4 7.3.3 23.9 2.2 30.9 4.3 5.2 1.6 8.7-1.5 13.7-2.1 3.7 4.2 7.2 1 9.1 10 2.8 4.7 7.3.3 8.3 1.8 5.9 18 26 5.8 27.4 6.1 2.6 0 5.7 8.1 7.7 8 3.3-.7 2.4-3.2 5.2-2.2-.7 6.8 5.7 14.7 5.7 19.7 0 0 1.5.9 3-.6 1.4-1.5 2.7-5.4 4-5.3 3 .5 4.3 1 7.8 1.6 9.4 3.7 14.3 4.5 18 6.3 1.6 3.6 3.3 5.4 6.8 4.7 2.8 2.2.7 5 2.4 5.2 3.5-2 4.7-4.1 8.1-2.2 3.5 2 7 6 8.8 9.8 0 2-1.8 9.8 0 21.6.8 4 1.3 7 5 13.8-1 6.9 4.7 18.5 4.7 21.5 0 3.9-2.8 6-4.5 9.8 7 6 0 15.7-3.5 21.6 26.2 5.9 14 17.7 34.9 11.8-5.3 13.7-3.4 12.6 1.8 26.3-10.4 7.9-.2 10.3-7.2 20-.4.7 4.2 8.6 10.6 8.6-1.7 15.7-7 9.8-5.2 33.3-13.8-.3-8.2 17.6-17.5 15.7.6 11.3 5.3 12.2 3.5 23.6-7 2-7 2-10.4 7.8l-5.3-2c-1.7 9.9-5.2 11.8 0 21.6 0 0-6.7.3-8.7 0-.1 3.4 3 4.3 3.5 7.9-.3 1.4-10 7.6-17.4 7.8-2 4.9 5.2 10 4.8 12.5-8.2 1.7-11.8 13-11.8 13s4.2 2 3.5 4c-2.3-1.9-3.5-2-7-2-1.7.5-6-.1-10 7.6-4.5 1.7-6.6 1-10 6.1-1.5-4.8-3.7 0-6.3 2-2.7 1.8-6.2 6.4-6.7 6.2.1-1.3 1.6-6.2 1.6-6.2l-8.7 2h-1c-.8.1-.6-5.7-2.2-5.5-1.7.3-6.4 7.3-8 7.6-1.6.2-2.1-2.3-3.5-2-1.4.1-4.1 7.4-5 7.6-1 .2-5-4.4-8.3-3.8-17.2 6.8-19.9-13.4-22.6-2-3.6-2.1-3-.9-6.6.2-2.3.7-2.5-3.5-4.6-3.4-4.2.1-4 4.5-6.2 3.2-1.8-9.2-13-7.5-14.1-11.5-.9-4 4.8-4 6.7-6.8 1.4-4-1.5-5.5 4.3-9.4 7.4-5.7 3.1-7.8 4.4-12.1 2.4-6.2 2.4-7.7.4-13.2 0 0-5.8-17.6-7-17.6-3.4-1.1-3.4 6.5-8.5 8.6-10.5 3.9-29-10-32.2-10-3 .1-16.5 3.7-16-4-2 7.5-9.6 1.8-10 1.8-7 0-4.3 6-9 5.8-2.1-.8-23.6-2.2-23.6-2.2v4l-14-8-12.2-3.9c-10.4-3.9-5.2-13.7-22.6-7.8v-11.8h-8.7c3.4-23.5 0-11.7-1.8-33.3l-7 2c-7-10.7 9.7-8.6-5.2-15.8 0 0 .3-11.7-3.5-7.8-.7.5 1.8 5.9 1.8 5.9-14-2-17.5-5.9-17.5-21.6 0 0 11.5 1.9 10.5 0-1.6-3-3.8-22-3.4-23.3-.2-2.6 10.7-9.1 8.6-15.3 1.3-.6 5.3-.6 5.3-.6"/><path fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="2.5" d="M595.5 297.6c-.6 1.3-.5 2.6.1 3.6 1.1-1.7.2-2.4 0-3.6zm-476-149.4s-3-.4-2.4 2.3c1-2 2.3-2.2 2.4-2.3zm-.3-6.4c-1.7 0-3.8-.2-3 2.5 1-2.1 3-2.4 3-2.5zm12.7 36.3s2.6-.2 2 2.5c-1-2-2-2.4-2-2.5z" transform="matrix(.86021 0 0 .96774 -50 10)"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.9 KiB |
|
|
@ -1,32 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-ar" viewBox="0 0 512 512">
|
|
||||||
<path fill="#74acdf" d="M0 0h512v512H0z"/>
|
|
||||||
<path fill="#fff" d="M0 170.7h512v170.7H0z"/>
|
|
||||||
<g id="c" transform="translate(-153.6) scale(1.024)">
|
|
||||||
<path id="a" fill="#f6b40e" stroke="#85340a" stroke-width="1.1" d="m396.8 251.3 28.5 62s.5 1.2 1.3.9c.8-.4.3-1.6.3-1.6l-23.7-64m-.7 24.2c-.4 9.4 5.4 14.6 4.7 23-.8 8.5 3.8 13.2 5 16.5 1 3.3-1.2 5.2-.3 5.7 1 .5 3-2.1 2.4-6.8-.7-4.6-4.2-6-3.4-16.3.8-10.3-4.2-12.7-3-22"/>
|
|
||||||
<use xlink:href="#a" width="100%" height="100%" transform="rotate(22.5 400 250)"/>
|
|
||||||
<use xlink:href="#a" width="100%" height="100%" transform="rotate(45 400 250)"/>
|
|
||||||
<use xlink:href="#a" width="100%" height="100%" transform="rotate(67.5 400 250)"/>
|
|
||||||
<path id="b" fill="#85340a" d="M404.3 274.4c.5 9 5.6 13 4.6 21.3 2.2-6.5-3.1-11.6-2.8-21.2m-7.7-23.8 19.5 42.6-16.3-43.9"/>
|
|
||||||
<use xlink:href="#b" width="100%" height="100%" transform="rotate(22.5 400 250)"/>
|
|
||||||
<use xlink:href="#b" width="100%" height="100%" transform="rotate(45 400 250)"/>
|
|
||||||
<use xlink:href="#b" width="100%" height="100%" transform="rotate(67.5 400 250)"/>
|
|
||||||
</g>
|
|
||||||
<use xlink:href="#c" width="100%" height="100%" transform="rotate(90 256 256)"/>
|
|
||||||
<use xlink:href="#c" width="100%" height="100%" transform="rotate(180 256 256)"/>
|
|
||||||
<use xlink:href="#c" width="100%" height="100%" transform="rotate(-90 256 256)"/>
|
|
||||||
<circle cx="256" cy="256" r="28.4" fill="#f6b40e" stroke="#85340a" stroke-width="1.5"/>
|
|
||||||
<path id="h" fill="#843511" stroke-width="1" d="M265.7 250c-2 0-3.8.8-4.9 2.5 2.2 2 7 2.2 10.3-.2a7.5 7.5 0 0 0-5.4-2.4zm0 .4c1.9 0 3.6.8 3.9 1.7-2.2 2.4-5.7 2.2-7.9.4 1-1.5 2.5-2.1 4-2.1z"/>
|
|
||||||
<use xlink:href="#d" width="100%" height="100%" transform="matrix(-1 0 0 1 512.3 0)"/>
|
|
||||||
<use xlink:href="#e" width="100%" height="100%" transform="matrix(-1 0 0 1 512.3 0)"/>
|
|
||||||
<use xlink:href="#f" width="100%" height="100%" transform="translate(19.3)"/>
|
|
||||||
<use xlink:href="#g" width="100%" height="100%" transform="matrix(-1 0 0 1 512.3 0)"/>
|
|
||||||
<path fill="#85340a" d="M251.6 260a2 2 0 1 0 2 3c.8.6 1.8.6 2.4.6h.3c.5 0 1.6 0 2.3-.6.4.5 1 .8 1.6.8a2 2 0 0 0 .4-3.9c.5.2.9.7.9 1.3a1.3 1.3 0 0 1-2.7 0 3 3 0 0 1-2.7 1.8 3.3 3.3 0 0 1-2.7-1.8c0 .7-.6 1.3-1.3 1.3a1.3 1.3 0 0 1-.4-2.6zM253.8 265.8c-2.2 0-3 2-5 3.3 1-.5 2-1.3 3.5-2.2 1.5-.9 2.8.2 3.7.2.9 0 2.2-1.1 3.7-.2 1.5.9 2.4 1.7 3.5 2.2-2-1.4-2.8-3.3-5-3.3a6 6 0 0 0-2.2.6c-1-.4-1.8-.6-2.2-.6z"/>
|
|
||||||
<path fill="#85340a" d="M253 268.3c-.8 0-2 .3-3.6.8 4-1 4.8.4 6.6.4 1.7 0 2.6-1.3 6.6-.4-4.4-1.4-5.3-.5-6.6-.5-.9 0-1.5-.3-3-.3z"/>
|
|
||||||
<path fill="#85340a" d="M249.6 269h-.8c4.6.5 2.4 3.1 7.2 3.1 4.8 0 2.6-2.6 7.2-3-4.8-.5-3.3 2.4-7.2 2.4-3.7 0-2.6-2.5-6.4-2.5z"/>
|
|
||||||
<path fill="#85340a" d="M260 276.1a4 4 0 0 0-8 0 4 4 0 0 1 8 0z"/>
|
|
||||||
<path id="e" fill="#85340a" stroke-width="1" d="M238.3 249.9c5-4.4 11.4-5 14.9-1.8a8.6 8.6 0 0 1 1.6 3.7c.5 2.5-.3 5.2-2.3 8 .3 0 .7.1 1 .4 1.7-3.4 2.3-6.8 1.7-10l-.7-2.5c-4.8-4-11.4-4.4-16.2 2.2z"/>
|
|
||||||
<path id="d" fill="#85340a" stroke-width="1" d="M246.2 248.6c2.8 0 3.5.6 4.8 1.7 1.3 1.1 2 .9 2.2 1.1.2.2 0 .9-.4.7-.5-.3-1.4-.7-2.7-1.8-1.3-1-2.6-1-4-1-3.8 0-6 3.2-6.5 3-.4-.2 2.2-3.7 6.6-3.7z"/>
|
|
||||||
<use xlink:href="#h" width="100%" height="100%" transform="translate(-19.6)"/>
|
|
||||||
<circle id="f" cx="246.3" cy="252.1" r="2" fill="#85340a" stroke-width="1"/>
|
|
||||||
<path id="g" fill="#85340a" stroke-width="1" d="M241 253.4c3.7 2.8 7.4 2.6 9.6 1.3 2.2-1.3 2.2-1.8 1.7-1.8-.4 0-.9.5-2.6 1.4-1.8.8-4.4.8-8.8-1z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 3.5 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 32 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-at" viewBox="0 0 512 512"><g fill-rule="evenodd"><path fill="#fff" d="M512 512H0V0h512z"/><path fill="#c8102e" d="M512 512H0V341.3h512zm0-341.2H0V.1h512z"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 221 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-au" viewBox="0 0 512 512"><path fill="#00008B" d="M0 0h512v512H0z"/><path fill="#fff" d="M256 0v32l-95 96 95 93.5V256h-33.5L127 162l-93 94H0v-34l93-93.5L0 37V0h31l96 94 93-94z"/><path fill="red" d="m92 162 5.5 17L21 256H0v-1.5zm62-6 27 4 75 73.5V256zM256 0l-96 98-2-22 75-76zM0 .5 96.5 95 67 91 0 24.5z"/><path fill="#fff" d="M88 0v256h80V0zM0 88v80h256V88z"/><path fill="red" d="M0 104v48h256v-48zM104 0v256h48V0z"/><path fill="#fff" d="m202 402.8-45.8 5.4 4.6 45.9-32.8-32.4-33 32.2 4.9-45.9-45.8-5.8L93 377.4 69 338l43.6 15 15.8-43.4 15.5 43.5 43.7-14.7-24.3 39.2 38.8 25.1Zm222.7 8-20.5 2.6 2.2 20.5-14.8-14.4-14.7 14.5 2-20.5-20.5-2.4 17.3-11.2-10.9-17.5 19.6 6.5 6.9-19.5 7.1 19.4 19.5-6.7-10.7 17.6 17.5 11.1ZM415 293.6l2.7-13-9.8-9 13.2-1.5 5.5-12.1 5.5 12.1 13.2 1.5-9.8 9 2.7 13-11.6-6.6-11.6 6.6Zm-84.1-60-20.3 2.2 1.8 20.3-14.4-14.5-14.8 14.1 2.4-20.3-20.2-2.7 17.3-10.8-10.5-17.5 19.3 6.8 7.2-19.1 6.7 19.3 19.4-6.3-10.9 17.3 17 11.2Zm175.8-32.8-20.9 2.7 2.3 20.9-15.1-14.7-15 14.8 2.1-21-20.9-2.4 17.7-11.5-11.1-17.9 20 6.7 7-19.8 7.2 19.8 19.9-6.9-11 18 17.8 11.3Zm-82.1-83.5-20.7 2.3 1.9 20.8-14.7-14.8L376 140l2.4-20.7-20.7-2.8 17.7-11-10.7-17.9 19.7 6.9 7.3-19.5 6.8 19.7 19.8-6.5-11.1 17.6 17.4 11.5Z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 11 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ax" viewBox="0 0 512 512"><defs><clipPath id="a"><path fill-opacity=".7" d="M166 0h850v850H166z"/></clipPath></defs><g clip-path="url(#a)" transform="translate(-100) scale(.6024)"><path fill="#0053a5" d="M0 0h1300v850H0z"/><g fill="#ffce00"><path d="M400 0h250v850H400z"/><path d="M0 300h1300v250H0z"/></g><g fill="#d21034"><path d="M475 0h100v850H475z"/><path d="M0 375h1300v100H0z"/></g></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 454 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-az" viewBox="0 0 512 512"><path fill="#3f9c35" d="M0 0h512v512H0z"/><path fill="#ed2939" d="M0 0h512v341.3H0z"/><path fill="#00b9e4" d="M0 0h512v170.7H0z"/><circle cx="238.8" cy="256" r="76.8" fill="#fff"/><circle cx="255.9" cy="256" r="64" fill="#ed2939"/><path fill="#fff" d="m324.2 213.3 8.1 23 22-10.5-10.4 22 23 8.2-23 8.2 10.4 22-22-10.5-8.1 23-8.2-23-22 10.5 10.5-22-23-8.2 23-8.2-10.5-22 22 10.5 8.2-23z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 475 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ba" viewBox="0 0 512 512"><defs><clipPath id="a"><path fill-opacity=".7" d="M0 0h512v512H0z"/></clipPath></defs><g fill-rule="evenodd" clip-path="url(#a)"><path fill="#009" d="M0 0h512v512H0z"/><path fill="#fc0" d="m77 0 437 437V0H77z"/><path fill="#FFF" d="m461.4 470.4-26.1-19.1-26.9 19 10.2-31.2-26.4-19.2h32.7l10.2-31 10 31.1 32.8.1-26.2 19.4 9.7 30.9zm76.7 10.4h-32.7l-10-31.2-10.2 31.1h-32.8l26.4 19.2-10.1 31.2 26.8-19 26.2 19-9.8-30.9 26.2-19.4zM391.8 379.6l26.2-19.4h-32.7L375.2 329 365 360h-32.7l26.4 19.3-10.1 31.1 26.8-19 26.1 19.1-9.7-31zm-60.3-60.4 26.2-19.4-32.8-.1-10-31.2-10.2 31.2-32.7-.1 26.4 19.2-10.2 31.2 26.9-19 26.1 19.1-9.7-31zm-59.7-59.7 26.2-19.4h-32.7l-10.1-31.2L245 240h-32.7l26.4 19.2-10.1 31.2 26.8-19 26.1 19-9.7-30.9zm-60.4-60.3 26.2-19.3-32.8-.1-10-31.2-10.2 31.2-32.7-.1 26.4 19.2-10.2 31.2 26.9-19 26.1 19-9.7-30.8zm-59.7-59.9L178 120l-32.7-.1-10-31.2-10.3 31.1H92.2l26.4 19.2-10.1 31.2 26.8-19 26.1 19-9.7-30.9zm-60-60L118 60l-32.7-.1-10-31.2L65 59.8H32.2L58.6 79l-10.1 31.2 26.8-19 26.2 19-9.8-30.9zm-60-60L58 0 25.2-.1l-10-31.2L4.8-.2h-32.7L-1.4 19l-10.1 31.2 26.8-19 26.1 19-9.7-30.9z"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.2 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-bb" viewBox="0 0 512 512"><path fill="#00267f" d="M0-.2h512V512H0z"/><path fill="#ffc726" d="M170.7-.2h170.6V512H170.7z"/><path id="a" d="M256 173.3c-5.5 15.1-11.2 30.9-23.3 43a51.7 51.7 0 0 1 14.6-2.3v63.6l-18 2.7c-.7 0-.9-1-.9-2.4a243.6 243.6 0 0 0-11.7-53.6c-.4-2.3-7.2-11.3-2-9.7.7 0 7.7 3 6.6 1.6a68 68 0 0 0-37.1-19.2c-1.2-.3-2 .3-.9 1.7 18 27.7 33.1 60.4 33 99.2 7 0 24-4.1 31-4.1v44.9h8.8l2-125.4z"/><use width="100%" height="100%" transform="matrix(-1 0 0 1 512 0)" xlink:href="#a"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 596 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-bd" viewBox="0 0 512 512"><path fill="#006a4e" d="M0 0h512v512H0z"/><circle cx="230" cy="256" r="170.7" fill="#f42a41"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 181 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-be" viewBox="0 0 512 512"><g fill-rule="evenodd" stroke-width="1pt"><path d="M0 0h170.7v512H0z"/><path fill="#ffd90c" d="M170.7 0h170.6v512H170.7z"/><path fill="#f31830" d="M341.3 0H512v512H341.3z"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 264 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-bf" viewBox="0 0 512 512"><g fill-rule="evenodd"><path fill="#de0000" d="M512 511.6H.5V0H512z"/><path fill="#35a100" d="M511.8 512H0V256.2h511.7z"/></g><path fill="#fff300" fill-rule="evenodd" d="m389 223.8-82.9 56.5 31.7 91.6-82.7-56.7-82.8 56.7 31.7-91.6-82.8-56.6 102.3.2 31.6-91.7 31.5 91.6"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 358 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-bg" viewBox="0 0 512 512"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#d62612" d="M0 341.3h512V512H0z"/><path fill="#fff" d="M0 0h512v170.7H0z"/><path fill="#00966e" d="M0 170.7h512v170.6H0z"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 268 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-bh" viewBox="0 0 512 512"><path fill="#fff" d="M0 0h512v512H0"/><path fill="#ce1126" d="M512 0H102.4l83.4 51.2-83.4 51.2 83.4 51.2-83.4 51.2 83.4 51.2-83.4 51.2 83.4 51.2-83.4 51.2 83.4 51.2-83.4 51.2H512"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 268 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-bi" viewBox="0 0 512 512"><defs><clipPath id="a"><path fill="gray" d="M60.8 337h175v175h-175z"/></clipPath></defs><g fill-rule="evenodd" clip-path="url(#a)" transform="translate(-178 -986) scale(2.9257)"><path fill="#18b637" d="m0 337 146.6 87.5L0 512zm293.1 0-146.5 87.5L293 512z"/><path fill="#cf0921" d="m0 337 146.6 87.5L293 337zm0 175 146.6-87.5L293 512z"/><path fill="#fff" d="M293.1 337h-27.3L0 495.7V512h27.3l265.8-158.7z"/><path fill="#fff" d="M197.2 424.5a50.6 50.6 0 1 1-101.2 0 50.6 50.6 0 0 1 101.2 0z"/><path fill="#fff" d="M0 337v16.3L265.8 512h27.3v-16.3L27.3 337z"/><path fill="#cf0921" stroke="#18b637" stroke-width="1pt" d="m156.5 405.4-6.6.1-3.4 5.6-3.4-5.6-6.5-.1 3.2-5.8-3.2-5.7 6.6-.2 3.4-5.6 3.4 5.7h6.5l-3.1 5.8zm-22 38.2h-6.6l-3.4 5.7-3.4-5.6-6.6-.2 3.2-5.7-3.1-5.8 6.5-.1 3.4-5.6 3.4 5.6 6.6.2-3.2 5.7zm44.6 0h-6.6l-3.4 5.7-3.4-5.6-6.5-.2 3.1-5.7-3.1-5.8 6.6-.1 3.4-5.6 3.4 5.6 6.5.2-3.2 5.7z"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 987 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-bj" viewBox="0 0 512 512"><defs><clipPath id="a"><path fill="gray" d="M67.6-154h666v666h-666z"/></clipPath></defs><g clip-path="url(#a)" transform="translate(-52 118.4) scale(.7688)"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#319400" d="M0-154h333v666H0z"/><path fill="#ffd600" d="M333-154h666v333H333z"/><path fill="#de2110" d="M333 179h666v333H333z"/></g></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 434 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-bl" viewBox="0 0 512 512"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#fff" d="M0 0h512v512H0z"/><path fill="#00267f" d="M0 0h170.7v512H0z"/><path fill="#f31830" d="M341.3 0H512v512H341.3z"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 266 B |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 22 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 14 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 111 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-bq" viewBox="0 0 512 512"><path fill="#21468b" d="M0 0h512v512H0z"/><path fill="#fff" d="M0 0h512v341.3H0z"/><path fill="#ae1c28" d="M0 0h512v170.7H0z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 214 B |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.4 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-bs" viewBox="0 0 512 512"><defs><clipPath id="a"><path fill-opacity=".7" d="M56.6 26.4H537v480.3H56.6z"/></clipPath></defs><g fill-rule="evenodd" clip-path="url(#a)" transform="matrix(1.066 0 0 1.067 -60.4 -28.1)"><path fill="#fff" d="M990 506.2H9.4V27.6H990z"/><path fill="#ffe900" d="M990 370.6H9.4V169.2H990z"/><path fill="#08ced6" d="M990 506.2H9.4V346.7H990zm0-319H9.4V27.9H990z"/><path d="M9 25.9c2.1 0 392.3 237 392.3 237L7.8 505.3 9 25.9z"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 514 B |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 24 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-bv" viewBox="0 0 512 512"><defs><clipPath id="a"><path fill-opacity=".7" d="M0 0h512v512H0z"/></clipPath></defs><g fill-rule="evenodd" stroke-width="1pt" clip-path="url(#a)"><path fill="#fff" d="M-68 0h699.7v512H-68z"/><path fill="#d72828" d="M-93-77.8h218.7v276.2H-93zM249.4-.6h381v199h-381zM-67.6 320h190.4v190.3H-67.5zm319.6 2.1h378.3v188.2H252z"/><path fill="#003897" d="M156.7-25.4H221v535.7h-64.5z"/><path fill="#003897" d="M-67.5 224.8h697.8v63.5H-67.5z"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 528 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-bw" viewBox="0 0 512 512"><g fill-rule="evenodd"><path fill="#00cbff" d="M0 0h512v512H0z"/><path fill="#fff" d="M0 192h512v128H0z"/><path d="M0 212.7h512V299H0z"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 228 B |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 5.8 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 45 KiB |
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue