themes-wordpress/redhill/sass/_extra-child-theme.scss

/**
 * Extra Child Theme Styles
 */

// HTML reset
html {
	@include font-family (map-deep-get($config-global, "font", "family", "primary") );
}

// Link style
a {
	text-decoration: none;

	.wp-block-cover &,
	.wp-block-cover-image &,
	.wp-block-media-text &,
	p:not(.site-title) & {
		text-decoration: underline;

		&.wp-block-button__link,
		&:hover {
			text-decoration: none;
		}
	}
}

// Page
.site {
	border-top: 5px solid map-deep-get($config-global, "color", "foreground", "default");
	position: relative;

	&:before {
		border-top: 1px solid rgba(#fff, 0.5);
    content: "";
    left: 0;
    position: absolute;
    top: -5px;
    width: 100%;
	}
}

// Header
#masthead {
  padding-top: map-deep-get($config-global, "spacing", "vertical");

	.custom-logo-link {
		display: inline-block;
		margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
	}

	@include media(mobile) {
		align-content: center;
		align-items: center;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		max-width: 92vw;
		padding-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
		padding-top: #{1.5 * map-deep-get($config-global, "spacing", "vertical")};

		.site-branding {
			flex: 1 100%;
		}

		.main-navigation {
			padding-left: #{2 * map-deep-get($config-global, "spacing", "horizontal")};
			padding-right: #{2 * map-deep-get($config-global, "spacing", "horizontal")};
		}

		.social-navigation {
			padding-left: #{2 * map-deep-get($config-global, "spacing", "horizontal")};
			padding-right: #{2 * map-deep-get($config-global, "spacing", "horizontal")};
			margin: 0;
		}
	}
}

// Footer
#colophon {
	@include media(mobile) {
		margin-top: map-deep-get($config-global, "spacing", "vertical");
	}

	.site-info {
		@include media(mobile) {
			max-width: 92vw;
			margin-left: auto;
			margin-right: auto;
		}
	}

	.footer-navigation {
		& + .site-info {
			text-align: left;
		}

		.footer-menu > li:last-of-type > a {
			padding-right: 0;
		}
	}
}

// Navigation
.main-navigation {
	#toggle-menu {
		text-transform: uppercase;
	}

	@include media(mobile) {
		a {
			padding: #{0.75 * map-deep-get($config-header, "main-nav", "link-padding")} map-deep-get($config-header, "main-nav", "link-padding");
		}
	}

	& > div > ul > li > a {
		text-transform: uppercase;
	}

	& > div {
		background: #{map-deep-get($config-global, "color", "border", "light")};
		border-radius: #{map-deep-get($config-global, "border-radius", "sm")};
		padding-left: map-deep-get($config-global, "spacing", "horizontal");
		padding-right: map-deep-get($config-global, "spacing", "horizontal");

		@include media(mobile) {
			background: none;
			border-radius: 0;
			padding-left: 0;
			padding-right: 0;
		}
	}

	@include media(mobile) {
		& > div > ul > li {
			margin: 0 #{0.25 * map-deep-get($config-global, "spacing", "horizontal")};
		}

		& > div > ul > li:first-of-type > a {
			padding-left: #{map-deep-get($config-header, "main-nav", "link-padding")};
		}

		& > div > ul > li:last-of-type > a {
			padding-right: #{map-deep-get($config-header, "main-nav", "link-padding")};
		}

		& > div > ul > li:hover,
		& > div > ul > li.focus,
		& > div > ul > li.current-menu-item {

			& > a {
				background: #{map-deep-get($config-global, "color", "primary", "default")};
				border-radius: #{map-deep-get($config-global, "border-radius", "sm")};
				color: #{map-deep-get($config-global, "color", "background", "default")};
			}

			& > ul {
				border-radius: #{map-deep-get($config-global, "border-radius", "sm")};
				overflow: hidden;
			}

			& li {

				& > a {
					background: #{map-deep-get($config-global, "color", "foreground", "default")};
					color: #{map-deep-get($config-global, "color", "background", "default")};
					font-weight: normal;
				}

				&:hover > a,
				&.focus > a,
				&.current-menu-item > a {
					background: #{map-deep-get($config-global, "color", "primary", "default")};
				}
			}
		}

		& > div > ul > .menu-item-has-children > a::after {
				opacity: 0.67;
		}
	}
}

// Center common elements
.site-branding,
.site-info,
.main-navigation,
.entry-header,
.entry-footer,
.page-title,
.author-title,
.comments-title,
.comment-reply-title,
.a8c-posts-list {
	text-align: center;
}

.main-navigation > div {
	text-align: left;
}

.comment-reply-title {
	display: inherit;
}

.comment .comment-reply-title {
	display: flex;
}

.main-navigation > div > ul,
.social-navigation > div > ul,
.pagination .nav-links {
	justify-content: center;
}

.home.page.hide-homepage-title .site-main {
	padding-top: 0;
}

// Cover & Hero block
.wp-block-cover .wp-block-cover__inner-container,
.wp-block-coblocks-hero .wp-block-coblocks-hero__box {
	& > * {
		margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
		margin-bottom: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };

		@include media(mobile) {
			margin-top: map-deep-get($config-global, "spacing", "vertical");
			margin-bottom: map-deep-get($config-global, "spacing", "vertical");
		}

		&:first-child {
			margin-top: 0;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}
}

// Quote block
.wp-block-quote {
  p {
    @include font-family( map-deep-get($config-global, "font", "family", "primary") );
  }
}

// Table block
table,
.wp-block-table {
	td,
	th {
		border-color: map-deep-get($config-global, "color", "border", "default");
	}
}

// Posts List block
.a8c-posts-list-item__excerpt {
	text-align: left;
}

// Hentry
.entry-header {
	.entry-meta {
		display: none;
	}
}

.entry-footer {
	border-top: 1px solid #{map-deep-get($config-global, "color", "border", "default")};
	@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
	font-size: #{map-deep-get($config-global, "font", "size", "xs")};
	padding-top: #{map-deep-get($config-global, "spacing", "unit")};
}

article .entry-header .entry-title,
.page-title,
.a8c-posts-list-item__title {
	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
	font-size: #{map-deep-get($config-global, "font", "size", "xxxl")};
	margin-bottom: #{1.5 * map-deep-get($config-global, "spacing", "vertical")};

  a {
    color: inherit;

    &:active,
    &:focus,
    &:hover {
      color: #{map-deep-get($config-global, "color", "primary", "default")};
    }
  }
}

.entry-content {
	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
}

// Pagination
.pagination {
  text-align: center;

  .nav-links > * {
    color: map-deep-get($config-global, "color", "foreground", "light");
    @include font-family( map-deep-get($config-global, "font", "family", "secondary") );
    font-size: #{map-deep-get($config-global, "font", "size", "base")};
    text-transform: uppercase;

    &.current,
    &:active,
    &:focus,
    &:hover {
      color: map-deep-get($config-global, "color", "primary", "default");
    }
  }

  svg {
    fill: currentColor;
  }

  &:before {
		background: map-deep-get($config-global, "color", "border", "default");;
		height: 1px;
		content: "";
		display: block;
		margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};

		@include media(mobile) {
			margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
		}

		@extend %responsive-alignfull;
	}
}

// Post Navigation
.post-navigation {
	a {
		color: map-deep-get($config-global, "color", "foreground", "default");

		&:active,
		&:hover,
		&:focus {
			color: map-deep-get($config-global, "color", "primary", "default");
		}
	}

	.meta-nav {
		color: map-deep-get($config-global, "color", "foreground", "light");
		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
		font-weight: bold;
		text-transform: uppercase;
	}

	.post-title {
		font-size: #{map-deep-get($config-global, "font", "size", "base")};
	}

	&:before {
		background: map-deep-get($config-global, "color", "border", "default");;
		height: 1px;
		content: "";
		display: block;
		margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};

		@include media(mobile) {
			margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
		}

		@extend %responsive-alignfull;
	}
}

// Comments
.comments-area {
	&:before {
		background: map-deep-get($config-global, "color", "border", "default");;
		height: 1px;
		content: "";
		display: block;
		margin-bottom: map-deep-get($config-global, "spacing", "vertical");

		@include media(mobile) {
			margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
		}

		@extend %responsive-alignfull;
	}

	.comment-list {
		border-bottom: 1px solid map-deep-get($config-global, "color", "border", "light");

		> li {
			border-top: 1px solid map-deep-get($config-global, "color", "border", "light");
		}
	}

	.children {
		> li {
			border-top: 1px solid map-deep-get($config-global, "color", "border", "light");
		}
	}
}

.comments-title,
.comment-reply-title {
	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
	font-size: #{map-deep-get($config-heading, "font", "size", "h3")};
}

.comment-meta {
  .comment-metadata {
    color: map-deep-get($config-global, "color", "foreground", "light");
    @include font-family( map-deep-get($config-global, "font", "family", "secondary") );

    a {
      color: inherit;
    }

    a:active,
    a:focus,
    a:hover {
      color: map-deep-get($config-global, "color", "primary", "default");
    }
  }
}

// Comments Navigation
.comment-navigation {
    a {
    color: map-deep-get($config-global, "color", "foreground", "light");
    @include font-family( map-deep-get($config-global, "font", "family", "secondary") );
    font-size: #{map-deep-get($config-global, "font", "size", "sm")};
    text-transform: uppercase;

    &:active,
    &:focus,
    &:hover {
      color: map-deep-get($config-global, "color", "primary", "default");
    }
  }

  .comments-title + & {
    display: none;
  }
}

// Widgets
.widget-area {
  font-size: #{map-deep-get($config-global, "font", "size", "sm")};

  .widget-title,
  .widgettitle {
    @include font-family( map-deep-get($config-global, "font", "family", "secondary") );
    font-size: #{map-deep-get($config-global, "font", "size", "base")};
    margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
    text-transform: uppercase;

    &:empty {
      display: none;
    }
  }

  @include media(mobile) {
    padding-top: map-deep-get($config-global, "spacing", "vertical");
  }

  @include media(laptop) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    & > *:nth-child(2) {
      margin-top: 0;
    }

    .widget {
      width: calc(50% - #{map-deep-get($config-global, "spacing", "horizontal")});
    }
  }
}

.widget_calendar,
.widget_calendar {
  caption {
    font-weight: bold;
  }

  td,
  th {
	   text-align: center;
  }
}

.widget_archive,
.widget_categories,
.widget_links,
.widget_meta,
.widget_nav_menu,
.widget_pages,
.widget_recent_comments,
.widget_recent_entries,
.widget_rss,
.widget_rss_links,
.widget_top-posts,
.widget_authors,
.widget_jp_blogs_i_follow,
.widget_top-click,
.widget_upcoming_events_widget {
  ul {
    border-bottom: 1px solid map-deep-get($config-global, "color", "border", "light");
    list-style: none;
    padding-left: 0;
  }

  li {
    border-top: 1px solid map-deep-get($config-global, "color", "border", "light");
    padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
  }
}

.widget_categories .children,
.widget_nav_menu .sub-menu,
.widget_pages .children {
  border-bottom: 0;
  margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
  margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
  padding-left: map-deep-get($config-global, "spacing", "horizontal");
}

.widget_recent_entries .post-date {
  display: block;
}

.widget_rss {
  cite,
  .rssSummary,
  .rss-date {
    display: block;
  }
}

.widget_search {
  input[type="search"] {
    display: block;
    margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
    width: 100%;
  }
}