style.scss

/*!
Theme Name: CC Starter Theme
Theme URI: https://chancecorbeil.com/
Author: Chance Corbeil
Author URI: https://chancecorbeil.com/
Description: A Bulma WordPress Theme built on Underscores
Version: 1.0.1
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cc-starter-theme

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

CC Starter Theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

// Import collection of WordPress Sass
@import "sass/wordpressimports";
// Import the initial variables
@import "sass/bulma/sass/utilities/initial-variables";
@import "sass/bulma/sass/utilities/functions";
// Import the custom variables
// In your sass directory
@import "sass/variables";


// *******************
// Table Of Contents
// *******************
// General
// Titles
// Header
// Footer
// Home Page
// Page Template
// Sidebar
// Main Content Area
// Page Particle
// Buttons
// Navigation
// Hero Template
// Screen Size Break Points


// Import the child theme variables
// By importing the child theme variables, they can be used in the Bulma compiling.
// Only enable this import if you are using a child
@import "../cc-starter-theme-child/sass/variables";

// Import the rest of Bulma
@import "sass/bulma/bulma";

// General

html,
body {
//	overflow-x: hidden;
}

body{
	font-family: $family-secondary;
	background-color: $background;
}

.post,
.page {
	margin: 0;
}

a:visited {
	color: $primary;
}

.posted-on a,
.posted-on a:visited {
	color: $secondary;
}

.entry-meta a,
.entry-content .entry-meta a {
	color: $secondary;
	text-decoration: none;
}

.entry-content a {
	color: $black;
	text-decoration: underline;
	text-decoration-color: $secondary;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 0;
}

.subtitle,
.single .subtitle,
.single .subtitle:not(:last-child) {
	margin-bottom: 0;
	font-size: $body-size;
}

p {
	font-family: $family-secondary;
}

.displaynone {
	display: none;
}

.displayblock {
	display: block !important;
}

.announcement {
	padding: 10px 35px;
}

.container.wide-container {
    max-width: 1538px;
}

// Titles

.title {
	font-family: $family-primary;
	color: $primary;
}

h1,
h1.title  {
}

h2,
h2.title {
}

.entry-content h2 {
}

h3,
h3.title {
}

.entry-content h3 {
}

@include until($tablet) {
	.title.is-2,
	.is-size-2  {
		font-size: 1.8rem !important;
	}
	.title.is-3,
	.is-size-3  {
		font-size: 1.5rem !important;
	}
	.title.is-4,
	.is-size-4  {
		font-size: 1.2rem !important;
	}
}


// Header

section.headersection {
	padding-top: 40px;
	padding-bottom: 33px;
}

// Footer

// Home Page

// Page Template

// Sidebar

.sidebar {

	.pageparticle {
		margin-bottom: 2rem;
	}

	.pageparticle:last-of-type {
		margin-bottom: 0;
	}
}

// Main Content Area

.maincontentarea

p,
ul {
	padding-bottom: 1.5rem;
}

// Page Particle

.pageparticlecontainer {

	.pageparticle {
		border-bottom: 0 solid $primary;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.pageparticle:first-of-type {
		border-bottom: 0 solid $primary;
		padding-top: 0;
		padding-bottom: 20px;
	}

	.pageparticle:last-of-type {
		border-bottom: 0 solid $primary;
		padding-top: 20px;
		padding-bottom: 40px;
	}

}

.pageparticlecontainer.withdividingline {

	.pageparticle {
		border-bottom: 1px solid $primary;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.pageparticle:first-of-type {
		border-bottom: 1px solid $primary;
		padding-top: 0;
		padding-bottom: 40px;
	}

	.pageparticle:last-of-type {
		border-bottom: 0 solid $primary;
		padding-top: 40px;
		padding-bottom: 40px;
	}

}

.pageparticle {
	p {
		padding-bottom: 1.5rem;
	}
}

.pageparticle {
	p:last-of-type {}
}

// Buttons

.button {
	border-radius: 0 !important;
	border: none !important;
	color: $white-ter;
	font-weight: $weight-bold;
	font-size: 15px;
	letter-spacing: 1px;
}

section .button:hover,
.button.is-hovered {
	color: $white-ter;
}

a.button:visited {
	color: $white-ter;
}


// Navigation

nav a,
nav a:visited {
	border-radius: 0;
	color: $darkblue;
	font-weight: $weight-bold;
	text-transform: uppercase;
	font-size: 16px;
	letter-spacing: 1px;
}

nav li.navbar-item {
	padding-left: 16px;
	padding-right: 16px;
}

nav li.button {
	color: $white;
	top: 23px;
	height: 30px;
	padding-left: 10px;
	padding-right: 10px;
	margin-right: 16px;
	;

	a {
		color: $white;
	}
}

.navbar {
	background-color: transparent;
}

@media screen and (max-width: 1201px) {

	nav .navbar-menu {
		background-color: $white-ter;
		box-shadow: none;

		.button {
			text-align: left;
			color: $primary;
			background-color: $white-ter;
			top: auto;
			height: auto;
			padding: 0.5rem 0.75rem;
		}

		li.navbar-item,
		li.button {
			padding: 3px 0;
		}

		li a {
			color: $primary !important;
		}
	}

	nav .navbar-burger {
		margin-top: 16px;
	}

	nav .navbar-burger:hover {
		background-color: transparent;
	}

}


// Hero Template

.hero nav.tabs.is-boxed {
	background-color: $primary;

	ul {
		align-items: center;
		justify-content: center;

		a,
		a:visited {
			border-radius: 0;
			color: $white;
			font-weight: $weight-bold;
			text-transform: uppercase;
			font-size: 15px;
			padding: 18px 23px;
		}

	}
}




// Screen Size Break Points

// mobile until 768px
// tablet from 769px
// tablet-only from 769px and until 1023px
// touch until 1023px
// desktop from 1024px
// desktop-only from 1024px and until 1215px
// widescreen from 1216px
// widescreen-only from 1216px and until 1407px
// fullhd from 1408px

// Example break point use
@include until($desktop) {}
@include from($desktop) {}