diff --git a/assets/css/screen.css b/assets/css/screen.css index c390b1f..173aee1 100755 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -143,6 +143,7 @@ main { } .mind-content_main { + padding: 0 20px; max-width: 1260px; width: 1260px; margin: auto; @@ -153,6 +154,17 @@ main { -------------------------------------------------- Used to style the navigation bars. */ + +ul { + display: block; + list-style-type: disc; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0; + margin-inline-end: 0; + padding-inline-start: 40px; +} + .nav { width: 100%; padding: 0; @@ -356,9 +368,10 @@ Used to style the index/homepage. } .mind-index-header_main h1 { - margin-top: 100px; + margin: 100px 40px 0; padding: 0; font-size: 90px; + line-height: 17vw; } /* 3. Feeds @@ -403,6 +416,7 @@ Used to style the tag feed, seen in the custom-tags page. flex-direction: column; height: 100%; width: 100%; + max-width: 400px; box-sizing: border-box; /* Style */ @@ -949,11 +963,15 @@ if an image has a description, class ".kg-card-hascaption" is applied to the con } #mind-post_sidebar-left a { - color: white; + color: rgb(230, 230, 230); font-family: 'Open Sans', sans-serif; font-weight: 300; - transition: 0.3s; } + +#mind-post_sidebar-left a.current { + font-weight: 700; +} + #mind-post_sidebar-left a:hover { color: paleturquoise; } @@ -1018,7 +1036,7 @@ if an image has a description, class ".kg-card-hascaption" is applied to the con .mind-policy-popup p { font-family: 'Montserrat', sans-serif; font-weight: 200; - color: white; + color: rgb(220, 220, 220); font-size: 16px; } @@ -1089,3 +1107,68 @@ div.mind-policy-popup { background-position: 100% } } + + +@media only screen and (max-width: 1300px) { + + .mind-content_main { + min-width: calc(100% - 40px); + width: calc(100% - 40px); + padding: 20px; + } + + .mind-post-card-big_main { + margin: auto; + } +} + +@media only screen and (max-width: 1000px) { + + h4 { + font-size: 18px; + } + + .mind-feed-content_main { + grid-template-columns: 1fr 1fr; + } + + .mind-policy-popup { + width: 50vw; + bottom: 10px; + left: 10px; + } + + .mind-policy-popup button { + padding: 10px 20px; + } +} + +@media only screen and (max-width: 650px) { + + ul { + padding: 0; + } + + .mind-feed-content_main { + grid-template-columns: 1fr; + } + + .mind-policy-popup { + width: 90vw; + } + + .mind-policy-popup p { + font-size: 12px; + } + + .mind-policy-popup button { + font-size: 12px; + } + +} + +@media only screen and (max-width: 550px) { + .mind-index-header_main h1 { + font-size: 16vw; + } +} \ No newline at end of file diff --git a/assets/js/get-headers-list.js b/assets/js/get-headers-list.js index 6de7f89..00570a8 100644 --- a/assets/js/get-headers-list.js +++ b/assets/js/get-headers-list.js @@ -1,5 +1,8 @@ +let headers; +let sidebarLinks; + $(document).ready(function () { - const headers = $(".mind-post_content h2, .mind-post_content h3").toArray(); + headers = $(".mind-post_content h2, .mind-post_content h3").toArray(); const sidebar = $("#mind-post_sidebar-left"); for (let i = 0; i < headers.length; i++) { @@ -12,5 +15,25 @@ $(document).ready(function () { const newLine = "<" + headerType + "> " + headerText + " "; sidebar.append(newLine); } -}); + sidebarLinks = $("#mind-post_sidebar-left a").toArray(); +}); +$(function () { + $(window).scroll(function () { + let bottomScroll = $(window).scrollTop() + ($(window).height() / 2); + let found = false; + + for (let i = headers.length - 1; i >= 0; i--) { + const currentHeader = headers[i]; + const currentSidebarLink = sidebarLinks[i]; + $(currentSidebarLink).removeClass("current"); + + const headerVPPosition = $(currentHeader).offset().top; + + if (!found && bottomScroll > headerVPPosition) { + $(currentSidebarLink).addClass("current"); + found = true; + } + } + }); +});