ja.son-williams.ca/www/themes/jason-williamsca/assets/css/theme.css

112 lines
2.1 KiB
CSS

:root {
--main-bg-color: #E7D9D1; /*#F0E4D1; #E8D5B5; #e7d9d1;*/
--main-accent-color: #302b44;
--light-accent-color: #686283;
--alt-accent-color: #B05C71;
--dark-alt-accent-color: #913A50;
--title-font: 'Cinzel', serif;
--body-font: 'Raleway', sans-serif;
}
html, body { height: 100%; }
body {
background-color: var(--main-bg-color);
font-family: var(--body-font);
font-weight: 500;
color: var(--main-accent-color);
}
header {
margin-bottom: 30px; /* Is there a better way to do this? */
}
header, header nav {
min-height: 91px; /* 75px for the logo, plus 16px padding */
}
#page-content {
flex: 1 0 auto;
}
footer {
flex-shrink: 0;
background-color: var(--main-accent-color);
}
footer p, footer ul li {
color: var(--light-accent-color);
font-size: 0.8rem;
}
footer ul {
margin-top: -16px;
padding-left: 20px;
}
h1, h2, h3, h4 {
font-weight: 500;
}
.container-fluid {
padding-left: 5%;
padding-right: 5%;
}
.navbar {
padding-left: 5%;
padding-right: 5%;
}
#mainNav .navbar-brand {
height: 75px;
padding-left: 100px;
font-family: var(--title-font);
font-size: 2.5rem;
background-image: url('../images/jwlogo.svg');
background-repeat: no-repeat;
color: var(--main-accent-color);
}
.navbar-light .navbar-nav .nav-link {
text-decoration: none;
}
.navbar-light .navbar-nav .nav-link:hover {
color: var(--alt-accent-color);
}
.social-icons {
font-size: 0;
}
.social-icons a {
display: inline-block;
height: 3.5rem;
width: 3.5rem;
background-color: var(--main-accent-color);
color: var(--main-bg-color);
text-align: center;
font-size: 1.5rem;
line-height: 3.5rem;
margin-right: 0.25rem;
margin-bottom: 0.25rem;
}
.social-icons a:last-child {
margin-right: 0;
}
.social-icons a:hover {
background-color: var(--dark-alt-accent-color);
color: #fff;
}
a {
color: var(--alt-accent-color);
text-decoration: underline;
}
a:hover {
color: var(--dark-alt-accent-color);
text-decoration: none;