Skip to content

Instantly share code, notes, and snippets.

@TysonRayJones
Created January 21, 2018 20:39
Show Gist options
  • Select an option

  • Save TysonRayJones/f14c4a38e4e01550cd23f85084720d95 to your computer and use it in GitHub Desktop.

Select an option

Save TysonRayJones/f14c4a38e4e01550cd23f85084720d95 to your computer and use it in GitHub Desktop.
Custom CSS used on the qtechtheory site
/*
 * ======= GIST CUSTOMISATION
 * modifies how gists look on the resources page (in tabs)
 */
/* remove 'hosted by Github' footer (everywhere) */
.gist-meta {
  display: none;
}
/* remove border around content */
.page-id-76 .gist .gist-file {
  border: none;
	margin-bottom: 0;
}
/* removes horizontal line at bottom of gist */
.page-id-76 .gist .gist-data {
  border-bottom: none;
  border-radius: 0;
}
/* changes code font size */
.page-id-76 .gist .highlight {
  font-size: 16px;
}


/*
 * ====== HESTIA THEME CUSTOMISATION
 */

/* shrink news padding on homepage, and colour it grey (to match Post Grid bg colour) */
.home .hestia-about {
	padding-top: 2%;
	background-color: #e5e5e5;
}

/* shrink (non-news, non-home) headers */
.page:not(.home) .header {
	height:150px;
}
/* remove titles from (non-news, non-home) page headers */
.page:not(.home) .page-header .container {
	display: none;
}
/* set non-news non-home header bg color */
.page:not(.home) .header-small {
	  background-color: #BDBDBD;
}

/* remove Hestia watermark in footer */
.copyright {
	visibility: hidden;
}
/* ... replacing with below text on the about page */
.page-id-6 .copyright:after {
	content: "Site design by Tyson Jones";
	visibility: visible;
	color: #BDBDBD;
}

/* shrink footer */
.footer-big {
	padding: 0;
}


/*
 * ======== POST GRID CUSTOMISATION
 */

.post-grid .grid-items {
	/*background-color: #BDBDBD;*/
}

/* shrink the news post images, shift them upward, round their corners and give them shadows; this makes them appear like Hestia theme's 'related articles' */
.post-grid .grid-items .layer-media {
	margin-top: -30px;
	width: 90%;
	border-radius: 6px;
	box-shadow: 0 16px 38px -12px rgba(0, 0, 0, .56);
	display: inline-block;
}
/* round the text box and make it white */
.post-grid .grid-items .layer-content {
	background-color: #FFFFFF;
	border-radius: 6px;
}
/* round posts, give them Hestia shadows, and buff their vertical margins to counter up-shifted images */
.post-grid .grid-items .masonry-brick {
	border-radius : 6px;
  box-shadow    : 0 2px 2px 0 rgba(0, 0, 0, .14);
	margin-top: 40px !important;
}


/*
 * ======== MEMBERS DIREC CUSTOMISATION
 */

/* round card corners, give Hestia shadow */
.um-member.masonry-brick {
	border-radius: 6px;
	box-shadow    : 0 2px 2px 0 rgba(0, 0, 0, .14);
}

/* give circle images shadows (APPLIES TO ALL ULTIMATE-MEMBER IMAGES: e.g. profile pictures) */
.um img {
	box-shadow: 0 16px 38px -12px rgba(0, 0, 0, .56) !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment