| File was renamed from assets/scss/main.scss |
| | |
| | | @charset "UTF-8"; |
| | | |
| | | /* Desktop screen configs */ |
| | | $body_max_width: {{ .Site.Params.body_max_width | default "1920px" }};/*SET THIS VALUE ON MEDIA QUERY FOR BEST PRFMANCE*/ |
| | | $content_ratio: {{ .Site.Params.content_ratio | default 0.1 }}; |
| | | |
| | | /* automated values */ |
| | | $sidebar-ratio: 1 - $content-ratio; |
| | | $content-max-width: $body_max_width * $content_ratio; |
| | | $sidebar-max-width: $body_max_width - $content-max-width; |
| | | $content-width: $content_ratio * 100%; |
| | | $sidebar-width: $sidebar-ratio * 100%; |
| | | |
| | | :root { |
| | | --bg-color: #fff; |
| | | --secondary-bg-color: #eeeeee; |
| | |
| | | --blockquote-text-color: #858585; |
| | | --blockquote-border-color: #dfe2e5; |
| | | scroll-padding-top: 100px; |
| | | |
| | | |
| | | |
| | | |
| | | } |
| | | |
| | | html[data-theme='dark'] { |
| | |
| | | font-family: 'Verdana', sans-serif; |
| | | font-size: 15px; |
| | | width: 100%; |
| | | max-width: $body_max_width; |
| | | margin: 0 auto; |
| | | margin: 0 auto 30px auto; |
| | | background-color: var(--bg-color); |
| | | } |
| | | |
| | |
| | | .content { |
| | | height: auto; |
| | | float: right; |
| | | width: $content-width; |
| | | width: 60%; |
| | | margin-top: 60px; |
| | | } |
| | | |
| | | .page-top { |
| | | width: $content-width; |
| | | width: 60%; |
| | | position: fixed; |
| | | right: 0; |
| | | z-index: 3; |
| | |
| | | } |
| | | |
| | | .sidebar { |
| | | width: $sidebar-width; |
| | | width: 40%; |
| | | -webkit-background-size: cover; |
| | | background-size: cover; |
| | | background-color: var(--bg-color); |
| | | height: 100%; |
| | | top: 0; |
| | | left: 0; |
| | | float: left; |
| | | position: fixed; |
| | | z-index: 4; |
| | | border-right: 1px solid var(--border-color); |
| | |
| | | |
| | | .post .post-footer .meta .info .date { |
| | | margin-right: 10px; |
| | | margin-left: 5px |
| | | } |
| | | |
| | | .info { |
| | |
| | | print { |
| | | .sidebar { |
| | | width: 100%; |
| | | max-width: 100%; |
| | | position: absolute; |
| | | border-right: none; |
| | | z-index: 1; |
| | |
| | | |
| | | .page-top { |
| | | width: 100%; |
| | | max-width: 100%; |
| | | left: 0; |
| | | margin-left: 0; |
| | | |
| | | } |
| | | |
| | | .post-title h3 { |
| | |
| | | } |
| | | } |
| | | |
| | | /* USE $body_max_width VALUE FOR SEAMLESS TRANSITION */ |
| | | @media (min-width: $body_max_width) { |
| | | @media (min-width: 1921px){ |
| | | .content { |
| | | width: $content-max-width; |
| | | padding-right: 25%; |
| | | width: 35%; |
| | | } |
| | | |
| | | .sidebar { |
| | | width: $sidebar-max-width; |
| | | left: 50%; |
| | | margin-left: calc( -1 * $body_max_width/2); |
| | | padding-left: 15%; |
| | | width: 25%; |
| | | } |
| | | |
| | | .page-top { |
| | | width: $content-max-width; |
| | | position: fixed; |
| | | left: 50%; |
| | | margin-left: calc(-1* ($body_max_width/2 - $sidebar-max-width )); |
| | | z-index: 3; |
| | | background-color: var(--bg-color); |
| | | height: 60px; |
| | | border-bottom: 1px solid var(--border-color); |
| | | } |
| | | <<<<<<< HEAD:assets/scss/main.scss |
| | | |
| | | } |
| | | ======= |
| | | } |
| | | |
| | | |
| | |
| | | } |
| | | |
| | | /* (CONTACT) FORM END */ |
| | | >>>>>>> upstream/master:assets/css/style.css |