jason/ja.son-williams.ca
jason/ja.son-williams.ca
1
0
Fork 0
Code Issues 23 Pull Requests Projects 1 Wiki Activity

Fixed element spacing for defaul layout

Browse Source
This commit is contained in:
JayWll 2020-05-19 16:17:57 -06:00
parent 6e2b090188
commit 02aceb106e
3 changed files with 68 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
www/themes/jason-williamsca/assets/css/sidemenu.css
View File

@ -1,7 +1,7 @@
/* lg Breakpoint */ /* lg Breakpoint */
@media (min-width: 992px) { @media (min-width: 992px) {
body { body {
padding-left: 17rem; /*padding-left: 17rem;*/
} }
#sideNav { #sideNav {
@ -11,7 +11,7 @@
left: 0; left: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 17rem; /*width: 17rem;*/
height: 100vh; height: 100vh;
padding: 0; padding: 0;
background-color: var(--main-accent-color); background-color: var(--main-accent-color);
@ -20,7 +20,7 @@
#sideNav .navbar-brand { #sideNav .navbar-brand {
display: flex; display: flex;
margin: auto auto 0; margin: auto auto 0;
padding: 0.5rem; /*padding: 0.5rem;*/
} }
#sideNav .navbar-brand .img-profile { #sideNav .navbar-brand .img-profile {

106
www/themes/jason-williamsca/assets/css/theme.css
View File

@ -1,3 +1,4 @@
/* Variables */
:root { :root {
--main-bg-color: #E7D9D1; /*#F0E4D1; #E8D5B5; #e7d9d1;*/ --main-bg-color: #E7D9D1; /*#F0E4D1; #E8D5B5; #e7d9d1;*/
--main-accent-color: #302b44; --main-accent-color: #302b44;
@ -8,6 +9,7 @@
--body-font: 'Raleway', sans-serif; --body-font: 'Raleway', sans-serif;
} }
/* Structural elements */
html, body { height: 100%; } html, body { height: 100%; }
body { body {
@ -17,21 +19,25 @@ body {
color: var(--main-accent-color); 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 { #page-content {
flex: 1 0 auto; flex: 1 0 auto;
} }
#main-nav .navbar-brand {
height: 4.5rem;
padding-left: 100px;
font-family: var(--title-font);
font-size: 2.5rem;
background-image: url('../images/jwlogo.svg');
background-repeat: no-repeat;
background-size: 4.5rem;
color: var(--main-accent-color);
}
footer { footer {
flex-shrink: 0; flex-shrink: 0;
background-color: var(--main-accent-color); background-color: var(--main-accent-color);
padding-top: 1rem;
} }
footer p, footer ul li { footer p, footer ul li {
@ -40,42 +46,56 @@ footer p, footer ul li {
} }
footer ul { footer ul {
margin-top: -16px; margin-top: -1rem;
padding-left: 20px; padding-left: 1.25rem;
} }
h1, h2, h3, h4 { /* Responsive element spacing */
font-weight: 500; .container-fluid, #main-nav {
padding-left: 1rem;
padding-right: 1rem;
}
#main-nav {
padding-top: 1rem;
} }
.container-fluid { footer, h1, h2 {
padding-left: 5%; margin-top: 1rem;
padding-right: 5%;
} }
.navbar { footer {
padding-left: 5%; margin-top: 1rem;
padding-right: 5%;
} }
#mainNav .navbar-brand { /* Responsive element spacing - lg breakpoint */
height: 75px; @media (min-width: 992px) {
padding-left: 100px; .container-fluid, #main-nav {
font-family: var(--title-font); padding-left: 3rem;
font-size: 2.5rem; padding-right: 3rem;
background-image: url('../images/jwlogo.svg'); }
background-repeat: no-repeat;
color: var(--main-accent-color); #main-nav {
padding-top: 3rem;
}
footer, h1, h2 {
margin-top: 3rem;
}
} }
.navbar-light .navbar-nav .nav-link { /* Standard element styles */
a {
color: var(--alt-accent-color);
text-decoration: underline;
}
a:hover {
color: var(--dark-alt-accent-color);
text-decoration: none; text-decoration: none;
} }
.navbar-light .navbar-nav .nav-link:hover { /* Custom styles */
color: var(--alt-accent-color);
}
.social-icons { .social-icons {
font-size: 0; font-size: 0;
} }
@ -93,20 +113,20 @@ h1, h2, h3, h4 {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.social-icons a:last-child {
margin-right: 0;
}
.social-icons a:hover { .social-icons a:hover {
background-color: var(--dark-alt-accent-color); background-color: var(--dark-alt-accent-color);
color: #fff; color: white;
} }
a { #main-nav .nav-item .nav-link {
color: rgba(48, 43, 68, 0.5);
text-decoration: none;
}
#main-nav .nav-item.active .nav-link {
color: var(--main-accent-color);
}
#main-nav .nav-item .nav-link:hover {
color: var(--alt-accent-color); color: var(--alt-accent-color);
text-decoration: underline; }
}
a:hover {
color: var(--dark-alt-accent-color);
text-decoration: none;

4
www/themes/jason-williamsca/layouts/default.htm
View File

@ -22,7 +22,7 @@ description = "Default Layout"
<body class="d-flex flex-column"> <body class="d-flex flex-column">
<div id="page-content"> <div id="page-content">
<header> <header>
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav"> <nav class="navbar navbar-expand-lg navbar-light" id="main-nav">
<a class="navbar-brand" href="/"><span class="d-none d-sm-inline-block">Jason Williams</span></a></a> <a class="navbar-brand" href="/"><span class="d-none d-sm-inline-block">Jason Williams</span></a></a>
{% partial 'mainmenu' %} {% partial 'mainmenu' %}
</nav> </nav>
@ -35,7 +35,7 @@ description = "Default Layout"
</main> </main>
</div> </div>
<footer class="footer mt-auto py-3 static-bottom"> <footer class="footer static-bottom">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">