/************************ BODY: Start **************************//************************ BODY: Start **************************/
/************************ BODY: Start **************************//************************ BODY: Start **************************/
/************************ BODY: Start **************************//************************ BODY: Start **************************/
body {
margin: 0.5rem;
font-family: "Ubuntu", serif;
background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.889), #071f32); /* Default Dark with a tint indigo */
color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Light theme colors */
body.light {
background: linear-gradient(to bottom right, rgb(18, 133, 199, 0.2), rgba(203, 119, 201, 0.2));
color: black;
}
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24
}
footer {
padding-top: 5rem;
padding-bottom: 2rem;
text-align: center;
transition: color 0.2s;
}
/************************ BODY: End **************************//************************ BODY: End **************************/
/************************ BODY: End **************************//************************ BODY: End **************************/
/************************ BODY: End **************************//************************ BODY: End **************************/
/******************** NAV: Start **********************//******************** NAV: Start **********************/
/******************** NAV: Start **********************//******************** NAV: Start **********************/
/******************** NAV: Start **********************//******************** NAV: Start **********************/
/* Section: Nav *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
nav {
display: flex;
align-items: center;
margin-bottom: 1rem; /* Added margin to create space below the navbar */
}
.nav-title {
font-size: 1em;
margin-right: auto;
padding-left: 1.6em;
font-weight: bold;
transition: color 0.2s;
}
/* Nav controls (container) *//**//**//**//**//**//**//**//**//**//**/
.nav-controls { /**/
margin: 0 auto; /* Center the links */ /**/
display: inline;
padding-right: 1.6rem; /**/
font-size: 1.5em; /**/
} /**/
.nav-controls ul { /**/
list-style: none; /**/
} /**/
.nav-controls li { /**/
display: inline; /**/
padding: 1em; /**/
} /**/
.nav-controls a { /**/
color: #cccccc8a; /**/
text-decoration: none; /**/
margin: 0 20px; /**/
transition: color 0.2s;
} /**/
body.light .nav-controls a { /**/
color: rgb(91, 91, 91); /**/
} /**/
/* Effects & states */ /**/
.nav-controls a:hover, .nav-controls a.active { /**/
color: white; /**/
} /**/
body.light .nav-controls a:hover, body.light .nav-controls a.active { /**/
color: coral; /**/
} /**/
/**/
/* Objects: mobile menu *//**//**//**//**//**//**//**//**/ /**/
.mobile-menu { /**/ /**/
display: none; /**/ /**/
cursor: pointer; /**/ /**/
padding: 0.5rem; /**/ /**/
justify-self: end; /**/ /**/
border-radius: 10px; /**/ /**/
transition: color 0.2s;
transition: background 0.2s;
} /**/ /**/
/* Effects & states */ /**/ /**/
.mobile-menu:hover { /**/ /**/
background-color: rgba(166, 174, 184, 0.3); /**/ /**/
} /**/ /**/
body.light .mobile-menu:hover { /**/ /**/
background-color: rgba(166, 174, 184, 0.3); /**/ /**/
} /**/ /**/
.nav-controls.active li { /**/ /**/
display: block; /**/ /**/
} /**/ /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /**/
/**/
/* Objects: theme toggle *//**//**//**//**//**//**//**/ /**/
/* - The switch - the box around the slider */ /**/ /**/
.switch { /**/ /**/
margin-left: 1.2em; /**/ /**/
position: relative; /**/ /**/
display: inline-block; /**/ /**/
width: 40px; /**/ /**/
height: 24px; /**/ /**/
} /**/ /**/
/* Hide default HTML checkbox */ /**/ /**/
.switch input { /**/ /**/
opacity: 0; /**/ /**/
width: 0; /**/ /**/
height: 0; /**/ /**/
} /**/ /**/
/* Effects & states */ /**/ /**/
input:checked + .slider { /**/ /**/
background-color: coral; /**/ /**/
} /**/ /**/
input:focus + .slider { /**/ /**/
box-shadow: 0 0 1px coral; /**/ /**/
} /**/ /**/
input:checked + .slider:before { /**/ /**/
-webkit-transform: translateX(26px); /**/ /**/
-ms-transform: translateX(26px); /**/ /**/
transform: translateX(16px); /**/ /**/
} /**/ /**/
/* - The slider - the moving part */ /**/ /**/
.slider { /**/ /**/
position: absolute; /**/ /**/
cursor: pointer; /**/ /**/
top: 0; /**/ /**/
left: 0; /**/ /**/
right: 0; /**/ /**/
bottom: 0; /**/ /**/
background-color: #114671; /**/ /**/
-webkit-transition: .4s; /**/ /**/
transition: .4s; /**/ /**/
} /**/ /**/
/* Effects & states */ /**/ /**/
.slider:before { /**/ /**/
position: absolute; /**/ /**/
content: ""; /**/ /**/
height: 16px; /**/ /**/
width: 16px; /**/ /**/
left: 4px; /**/ /**/
bottom: 4px; /**/ /**/
background-color: white; /**/ /**/
-webkit-transition: .4s; /**/ /**/
transition: .4s; /**/ /**/
} /**/ /**/
/* - Rounded sliders */ /**/ /**/
.slider.round { /**/ /**/
border-radius: 34px; /**/ /**/
} /**/ /**/
/* Effects & states */ /**/ /**/
.slider.round:before { /**/ /**/
border-radius: 50%; /**/ /**/
} /**/ /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/******************** NAV: End **********************//******************** NAV: End **********************/
/******************** NAV: End **********************//******************** NAV: End **********************/
/******************** NAV: End **********************//******************** NAV: End **********************/
/******************** MAIN: START **********************//******************** MAIN: START **********************/
/******************** MAIN: START **********************//******************** MAIN: START **********************/
/******************** MAIN: START **********************//******************** MAIN: START **********************/
.container {
display: flex;
flex: 1;
margin-top: 10px;
}
/* Sections: Sidebar *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.sidebar { /**/
max-width: min-content; /**/
max-height: fit-content; /**/
padding: 10px; /**/
margin: 3em;
box-sizing: border-box;
border-radius: 15px;
background-color: rgba(166, 174, 184, 0.1);
transition: background 0.2s;
}
body.light .sidebar {
background-color: rgba(17, 1, 66, 0.05);
}
.sidebar-header{
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 0.5rem;
padding-bottom: 1rem;
transition: color 0.2s;
}
/* Objects: categories *//**//**//**//**//**//**//**//**//**//**//**/
.tag-category h3 { /**/
margin-bottom: 10px; /**/
padding-left: 0.5rem; /**/
font-size: 1.5rem; /**/
transition: color 0.2s;
} /**/
.tag-category ul { /**/
list-style: none; /**/
padding: 0; /**/
display: grid; /* Added for grid layout */ /**/
grid-template-columns: repeat(3, 1fr); /* 3 columns */ /**/
grid-gap: 5px; /* Space between grid items */ /**/
} /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/* Objects: sidebar tags *//**//**//**//**//**//**//**//**//**//**//**//**//**/
.tag-category li { /**/
margin-bottom: 0px; /* Resetting the margins for the li elements */ /**/
} /**/
.post-tag { /**/
color: rgb(113, 111, 111);
cursor: pointer;
text-decoration: none; /**/
display: block; /**/
padding: 8px; /**/
backdrop-filter: blur(3px); /**/
border-radius: 15px; /**/
text-align: center; /**/
transition: color 0.2s; /**/
transition: background 0.2s;
} /**/
body.light .post-tag { /**/
color: rgb(44, 44, 44); /**/
} /**/
/* Effects & states */ /**/
.post-tag:hover {
background-color: rgba(101, 104, 107, 0.2);
box-shadow: 0 0 15px rgba(101, 104, 107, 0.2);
backdrop-filter: blur(3px); /**/
}
.post-tag.active {
color: inherit;
background-color: rgba(166, 174, 184, 0.2);
box-shadow: 0 0 15px rgba(166, 174, 184, 0.2);
}
body.light .post-tag:hover {
background-color: rgba(255, 127, 80, 0.522); /**/
box-shadow: 0 0 15px rgba(255, 127, 80, 0.522); /**/
}
body.light .post-tag.active { /**/
color: inherit; /**/
background-color: coral; /**/
box-shadow: 0 0 15px coral; /**/
backdrop-filter: blur(3px); /**/
} /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/* Mobile only */
/* BUG: Currently I have to click twice on the 'filter-button' for the 'display' change to take place. */
.filter-button {
display: none;
}
/* Objects: clear tags button *//**//**//**//**//**//**/
#clear-tags { /**/
color: rgb(113, 111, 111); /**/
text-decoration: none; /**/
display: block; /**/
padding: 8px; /**/
border-radius: 15px; /**/
text-align: center; /**/
background: none; /**/
border: none; /**/
cursor: pointer; /**/
} /**/
/* Effects & states */ /**/
#clear-tags:hover { /**/
color: inherit; /**/
background-color: rgba(255,255,255,0.1); /**/
} /**/
body.light #clear-tags:hover { /**/
color: inherit; /**/
background-color: rgba(0,0,0,0.1); /**/
} /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/* Post board *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.main-content { /**/
flex: 1; /* Ensure content takes up remaining space */ /**/
display: flex; /**/
flex-direction: column; /* Arrange title above the grid */ /**/
padding-right: 3em; /**/
}
.post-board {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 columns */
grid-gap: 10px; /*spacing between the grid items*/
}
/* Effects & states */
.post-board.change {
display: flex;
grid-template-columns: auto;
align-self: center;
justify-content: center;
max-width: 100%;
}
/* Objects: post board header *//**//**//**//**//**//**//**//**//**//**/
.post-board-header{ /**/
display: flex; /**/
justify-content: space-between; /**/
align-items: center; /**/
margin-top: 2rem;
} /**/
.post-board-title {
font-size: 3em;
transition: color 0.2s;
max-width: 70%;
} /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/* Objects: search *//**//**//**//**//**//**//**//**//**//**//**//**//**/
#search-input { /**/
padding: 15px; /**/
border: 2px solid #ccc;
color: inherit;
background: none;
justify-self: end;
padding-left: 2.5em; /* Space for the icon */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left 0.5em center;
background-size: 1.7em;
border-radius: 15px;
font-size: 1rem;
cursor: pointer;
transition: color 0.2s;
transition: background 0.2s;
transition: border 0.2s;
}
body.light #search-input {
border: 2px solid rgba(0,0,0,0.2);
/* Image with darker color */
background-image: url('data:image/svg+xml;utf8,');
}
/* Effects & sates */
#search-input:hover, #search-input:focus {
border: 2px solid #2272b3;
}
body.light #search-input:hover, body.light #search-input:focus {
border: 2px solid coral;
}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/* Mobile only */
.clear-search {
display: none;
}
/* Objects: post body *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.post { /**/
background: rgba(255, 255, 255, 0.1); /* Semi-transparent post background */ /**/
border-radius: 8px; /**/
transition: background 0.2s; /**/
backdrop-filter: blur(5px); /**/
display: flex; /**/
flex-direction: column; /**/
} /**/
body.light .post { /**/
background: rgba(0, 0, 0, 0.1); /* Change the color of the posts during Light Mode *//**/
} /**/
/* Effects & states */ /**/
.post:hover { /**/
box-shadow: 0 0 15px rgba(166, 174, 184, 0.4); /**/
} /**/
body.light .post:hover { /**/
box-shadow: 0 0 15px #1d1d1dd0; /**/
} /**/
.post.active {
min-width: 50vw;
max-width: 50vw;
}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/* Objects: back arrow *//**//**//**//**//**//**//**//**/
.back-button { /**/
display: none; /**/
cursor: pointer; /**/
justify-self: center; /**/
align-items: center; /**/
padding-left: 2rem; /**/
padding-right: 2rem; /**/
padding-top: 1rem; /**/
border-radius: 25px; /**/
background-color: rgba(125, 125, 125, 0.1); /**/
transition: color 0.2s;
transition: background 0.2s;
} /**/
body.light .back-button { /**/
background-color: rgba(255, 127, 80, 0.522); /**/
} /**/
/* Effects & states */ /**/
.back-button:hover { /**/
background-color: rgba(166, 174, 184, 0.3); /**/
} /**/
body.light .back-button:hover { /**/
background-color: coral; /**/
} /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/* Objects: post details *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.post-details { /**/
padding: 0px 10px 20px 10px;
} /**/
/* Effects & states */ /**/
.post.active:has(.youtube-lite) .post-details {
padding-right: 20px;
padding-left: 20px;
}
/**/
/* Objects: post tags *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /**/
.post-tag.inline { /**/ /**/
margin-right: 0.5rem; /**/ /**/
line-height: 2.5rem; /**/ /**/
white-space: nowrap; /**/ /**/
padding: 0.3rem 0.5rem 0.3rem 0.5rem; /* sets the dimensions of the pill */ /**/ /**/
background-color: #071f325b; /**/ /**/
box-shadow: 0 0 15px #071f325b; /**/ /**/
border-radius: 10px; /**/ /**/
text-align: center; /**/ /**/
display: inline; /**/ /**/
transition: color 0.2s;
} /**/ /**/
body.light .post-tag.inline { /**/ /**/
background-color: rgba(255, 127, 80, 0.522); /**/ /**/
box-shadow: 0 0 5px rgba(255, 127, 80, 0.522); /**/ /**/
} /**/ /**/
/* Effects & states */ /**/ /**/
.post-tag.inline.active { /**/ /**/
background-color: rgba(166, 174, 184, 0.2); /**/ /**/
box-shadow: 0 0 15px rgba(166, 174, 184, 0.2); /**/ /**/
} /**/ /**/
.post-tag.inline:hover {
background-color: rgba(101, 104, 107, 0.2);
box-shadow: 0 0 15px rgba(101, 104, 107, 0.2);
}
body.light .post-tag.inline.active, body.light .post-tag.inline:hover { /**/ /**/
background-color: coral; /**/ /**/
box-shadow: 0 0 15px coral; /**/ /**/
} /**/ /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /**/
/**/
/* Objects: post paragraphs *//**//**//**//**//**//**//**//**/ /**/
.post p { /**/ /**/
display: none; /**/ /**/
} /**/ /**/
/* Effects & states */ /**/ /**/
.post.active p{ /**/ /**/
display: flex; /**/ /**/
} /**/ /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/* Objects: post title *//**//**//**//**//**//**//**//**//**/
.post h3 { /**/
font-size: 1.3rem; /**/
transition: color 0.2s;
} /**/
/* Effects & states */ /**/
.post h3:hover { /**/
text-decoration: underline; /**/
cursor: pointer; /**/
} /**/
.post.active h3 { /**/
font-size: 2rem; /**/
} /**/
/* Reremove hover effects when post is 'active' /**/
.post.active:hover { /**/
box-shadow: none; /**/
} /**/
body.light .post.active:hover { /**/
box-shadow: none; /**/
} /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/* Objects: post image */
.post img {
width: 42%;
}
/* Effects & states */
.post.active img {
width: 40%;
padding-top: 4rem;
}
.post .youtube-thumbnail {
min-width: 100%;
cursor: pointer;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.post.active .youtube-thumbnail {
padding-top: 0px;
/* height: 600px;
width: 1000px; */
aspect-ratio: 16/11;
}
.post .youtube-play-button {
position: relative;
top: -65%;
left: 5%;
justify-self: center;
width: 25%;
height: 25%;
background: url("./Images/Sprites/play-button.png");
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
}
/* Effects & states */
.post.active .youtube-play-button {
top: -60%;
width: 20%;
height: 15%;
}
/**//**//**//**//**//**//**//**//**//**/
/* Objects: post iframe (YouTube) *//**/
.post iframe { /**/
border-top-left-radius: 8px; /**/
border-top-right-radius: 8px; /**/
height:fit-content;
width: 100%; /**/
aspect-ratio: 16/12;
} /**/
/* Effects & states */ /**/
.post.active iframe { /**/
border-top-left-radius: 8px; /**/
border-top-right-radius: 8px; /**/
height: 600px;
width: 50vw;
/* min-width: min-content; */
} /**/
.post.active .youtube-lite { /**/
border-top-left-radius: 8px; /**/
border-top-right-radius: 8px; /**/
/* height:500px;
width: 100%; */
/* aspect-ratio: 16/12; */
} /**/
/**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/* Sections: Content pagination *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.page-numbers ul { /**/
list-style: none; /**/
display: flex; /**/
justify-self: center; /**/
} /**/
.page-numbers li { /**/
padding: 15px; /**/
margin: 15px; /**/
align-self: center; /**/
font-size: large; /**/
} /**/
/* Effects & states */ /**/
.page-numbers li.active, .page-numbers li:hover { /**/
background-color: rgba(166, 174, 184, 0.2); /**/
box-shadow: 0 0 15px rgba(166, 174, 184, 0.2); /**/
backdrop-filter: blur(3px); /**/
border-radius: 15px; /**/
cursor: pointer; /**/
font-weight: bolder; /**/
} /**/
body.light .page-numbers li.active, body.light .page-numbers li:hover { /**/
background-color: rgba(255, 127, 80, 0.2); /**/
box-shadow: 0 0 25px rgba(255, 127, 80, 0.3); /**/
} /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/********************** MAIN: End *********************//********************** MAIN: End *********************/
/********************** MAIN: End *********************//********************** MAIN: End *********************/
/********************** MAIN: End *********************//********************** MAIN: End *********************/
/********************** MOBILE RESPONSIVE: Start *********************//********************** MOBILE RESPONSIVE: Start *********************/
/********************** MOBILE RESPONSIVE: Start *********************//********************** MOBILE RESPONSIVE: Start *********************/
/********************** MOBILE RESPONSIVE: Start *********************//********************** MOBILE RESPONSIVE: Start *********************/
/* Only used for the placing of the close filters button */
.mobile-filters-container {
display: flex;
}
.post-board-controls {
display: flex;
align-items: center;
}
/* Objects: close filters button *//**//**//**//**//**//**/
.close-filters { /**/
display: none; /**/
font-size: large;
align-self: center;
align-items: center;
height: 75rem;
cursor: pointer; /**/
padding-left: 1rem; /**/
padding-right: 1rem; /**/
padding-top: 1rem; /**/
border-radius: 25px; /**/
background-color: rgba(125, 125, 125, 0.1); /**/
} /**/
body.light .close-filters { /**/
background-color: rgba(255, 127, 80, 0.522); /**/
} /**/
/* Effects & states */ /**/
.close-filters:hover { /**/
background-color: rgba(166, 174, 184, 0.3); /**/
} /**/
body.light .close-filters:hover { /**/
background-color: coral; /**/
} /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/* WIP.: Responsive */
/* Large: 991px */
/* Medium: 767px */
/* Small: 479px */
/* Doing the following until 'screen max-width and don't stop at any lower 'screen width'*/
/* Turn on mobile menu */
@media only screen and (max-width: 1590px) {
.post.active img {
width: 50%;
}
}
@media only screen and (max-width: 1422px) {
/* NAV *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
nav {
padding-top: 1em;
}
.mobile-menu {
display: flex;
margin-right: 0.5em;
}
.nav-controls {
display: none;
}
.post-board {
padding-top: 1rem;
grid-template-columns: repeat(3, 1fr);
}
.post.active img {
width: 55%;
}
}
/* Reduce 'post-bpard-title' size */
/* Post board has two columns */
@media only screen and (max-width: 1305px) {
.post-board-title {
font-size: 2.5em;
}
}
@media only screen and (max-width: 1165px) {
body {
padding-right: 5%;
padding-left: 5%;
}
.nav-title {
padding-left: 0em;
}
/* SIDEBAR *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.sidebar {
display: none;
width: fit-content;
margin-right: 5px;
}
.tag-category ul {
grid-template-columns: repeat(4,1fr);
width: 70vw;
}
/* Objects: 'filter-button' button *//**//**//**/
.filter-button { /**/
color: #bbb;
text-decoration: none; /**/
font-size: 1rem;
justify-self: start;
margin-right: 0.5em;
display: inline; /**/
padding: 15px; /**/
border-radius: 15px; /**/
text-align: center; /**/
background-color: none; /**/
border: none; /**/
cursor: pointer; /**/
} /**/
body.light .filter-button {
color: #999
} /**/
/**//**//**//**//**//**//**//**//**//**//**//**/
.close-filters {
height: 51rem;
margin-right: 2.5rem;
}
/* Objects: search *//**//**//**//**//**//**//**//**//**//**//**//**//**/
#search-input {
border: 0px;
width: 5px;
}
body.light #search-input {
border: 0px;
}
/* Effects & states */
#search-input:hover {
border: 0px;
}
body.light #search-input:hover {
border: 0px;
}
#search-input:focus {
color: inherit;
}
body.light #search-input:focus {
color: inherit;
}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/* Objects: 'clear-search' button */
.clear-search { /**/
color: #bbb;
text-decoration: none; /**/
font-size: 1rem;
justify-self: start;
margin-right: 0.5em;
padding: 15px; /**/
border-radius: 15px; /**/
text-align: center; /**/
background-color: none; /**/
border: none; /**/
cursor: pointer; /**/
} /**/
body.light .clear-search {
color: #999
} /**/
/**//**//**//**//**//**//**//**//**//**//**//**/
/* POST BOARD *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.container {
display: block;
}
.main-content {
padding-right: 0%;
}
.post-board {
padding-top: 1rem;
grid-template-columns: repeat(3, 1fr);
}
.post-board-title { /**/
font-size: 3em; /**/
}
.post-board-header {
font-size: 0.8rem;
}
/* POST *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.post.active {
min-width: 70vw;
max-width: 70vw;
}
.post.active iframe {
width: 70vw;
}
}
@media only screen and (max-width: 1054px) and (min-width: 700px) {
.close-filters {
height: 61rem;
margin-right: 2.5rem;
}
.tag-category ul {
grid-template-columns: repeat(3,1fr);
width: 70vw;
}
.post-board {
padding-top: 1rem;
grid-template-columns: repeat(3, 1fr);
}
}
@media only screen and (max-width: 700px) {
body {
padding-right: 0%;
padding-left: 0%;
}
.nav-controls{
font-size: 1rem;
}
/* SIDEBAR *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.close-filters {
height: 75rem;
margin-right: 3rem;
}
.tag-category ul {
grid-template-columns: repeat(2,1fr);
width: 70vw;
}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.post-board {
grid-template-columns: repeat(2, 1fr);
}
/* Posts */
.back-button {
padding-left: 0.8rem;
padding-right: 0.8rem;
}
/* POST *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.post.active {
min-width: 80vw;
max-width: 80vw;
}
/* BUG: Issues with images - check out the 'Face of Mercy' documentary which also has two paragraphs. */
.post.active iframe {
height: min-content;
width: 80vw;
}
.post.active .youtube-lite {
height: min-content;
}
.post.active h3 {
padding-top: 0rem;
}
.post.active .post-details {
padding-top: 0rem;
}
}
@media only screen and (max-width: 615px) {
.mobile-filters-container {
justify-content: center;
}
.sidebar {
/* margin: 10px; */
}
}
@media only screen and (max-width: 474px) {
.close-filters {
height: 76rem;
margin-right: 3rem;
}
}
/********************** MOBILE RESPONSIVE: End *********************//********************** MOBILE RESPONSIVE: End *********************/
/********************** MOBILE RESPONSIVE: End *********************//********************** MOBILE RESPONSIVE: End *********************/
/********************** MOBILE RESPONSIVE: End *********************//********************** MOBILE RESPONSIVE: End *********************/