Start responsive design implementation
This commit brings a big update to the screen.css file, making the homepage + policy popup almost 100% responsive. Another added feature is in the left sidebar: the currently viewed paragraph's title is now highlighted.
This commit is contained in:
parent
83302f7cc3
commit
fe27137016
@ -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;
|
||||
}
|
||||
}
|
@ -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 + "> <a href=\"#" + headerId + "\">" + headerText + "</a> </" + headerType + ">";
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user