Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@ThatJoeMoore
ThatJoeMoore committed Sep 13, 2018
1 parent 44be1ef commit 2b2d121
Show file tree
Hide file tree
Showing 5 changed files with 172 additions and 38 deletions.
87 changes: 81 additions & 6 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,19 @@
<meta charset="UTF-8">
<title>Pure CSS Styles</title>
<link rel="stylesheet" href="dist/index.css">
<link type="text/css" rel="stylesheet" href="//cloud.typography.com/75214/6517752/css/fonts.css" media="all"/>
</head>
<body>
<div class="byu-header">
<div class="byu-header__site-title">
<div class="byu-header__site-title--subtitle">Ira A. Fulton College of Engineering and Technology</div>
<div class="byu-header__title">
<div class="byu-header__title--subtitle">Ira A. Fulton College of Engineering</div>
<div>Electrical and Computer Engineering</div>
</div>
<input class="byu-header__mobile-menu" id="byu-header__mobile-menu-btn" type="checkbox">
<label class="byu-header__mobile-menu-label" for="byu-header__mobile-menu-btn">Menu</label>
<div class="byu-header__actions">
<a href="#">MYBYU</a>
</div>
<div class="byu-header__user-info">
<div class="byu-header__user">
<a href="#" class="byu-user-info__user-name">jstudent</a>
<a href="#" class="byu-user-info__sign-in">Sign In</a>
<a href="#" class="byu-user-info__sign-out">Sign Out</a>
Expand All @@ -26,7 +27,6 @@
<input type="submit" class="byu-header__search-button"/>
</form>
</div>
<div class="byu-header__mobile-menu-button">Expand</div>
<div class="byu-header__menu">
<div class="byu-header__menu-links">
<a href="#dept" class="byu-header__menu-link--active">Department</a>
Expand All @@ -38,7 +38,82 @@
</div>
</div>

<script type="module" src="src/byu-header.mjs"></script>
<!--<script type="module" src="src/byu-header.mjs"></script>-->

<!--<button class="expander">expand</button>-->
<div class="expand">
<a href="">Item 1</a>
<a href="">Item 2</a>
</div>
<h1>After Expand</h1>

<script type=module>
// const expand = document.querySelector('.expand');
// document.querySelector('.expander')
// .addEventListener('click', e => {
// expand.classList.toggle('open')
// })
</script>
<style>
:root {
--menu-transition: 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.expand {
background-color: darkslateblue;
padding-top: 0;
padding-right: 16px;
padding-left: 16px;
padding-bottom: 0;

display: flex;
flex-direction: column;
overflow: hidden;
transition: all var(--menu-transition);
}
.expander {
color: white;
padding: 16px;
font-size: 16px;
background-color: slategrey;
border-radius: 0;
border: 1px solid darkslategray;
}
.expander:focus {
background-color: palevioletred;
}
.expander:active {
background-color: palevioletred;
}
.expand > * {
color: white;
display: block;
height: 0;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
transition: all var(--menu-transition);
}

.expander {
display: none;
}
label[for=mobile-expander] {
background-color: blue;
display: inline-block;
height: 40px;
width: 40px;
}

.expander:checked ~ .expand {
padding-top: 8px;
padding-bottom: 8px;
}
.expander:checked ~ .expand > * {
height: 20px;
padding-top: 8px;
padding-bottom: 8px;
}
</style>

</body>
</html>
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"sass:build": "npm-run-all -p build-task:*",
"sass:watch": "chokidar 'src/**/*.scss' -c 'npm run sass:build'",
"build": "npm-run-all sass:build",
"start": "live-server --port=8080 --ignore=src,node_modules",
"start": "live-server --port=8081 --ignore=src,node_modules",
"dev": "npm-run-all -p sass:* start"
},
"author": "",
Expand Down
113 changes: 85 additions & 28 deletions src/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ html, body {
}

.byu-header {
@include y-type-family-ringside();
width: 100vw;
box-sizing: border-box;
background-color: $y-color-navy;
Expand Down Expand Up @@ -34,10 +35,10 @@ html, body {
}
}

.byu-header__site-title {
.byu-header__title {
grid-row: 1;
grid-column: 2;
margin-bottom: 11px;
//margin-bottom: 11px;

@include y-type-logo(white);
font-size: 22px;
Expand All @@ -47,14 +48,13 @@ html, body {
flex-grow: 1;
}

.byu-header__site-title--subtitle {
.byu-header__title--subtitle {
font-size: 14px;
}

.byu-header__actions {
grid-row: 1;
grid-column: 3;
@include y-type-family-gotham();
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
Expand All @@ -69,10 +69,9 @@ html, body {
color: $y-color-accent-royal-lightest;
}
}

}

.byu-header__user-info {
.byu-header__user {
grid-row: 1;
grid-column: 4;
display: none;
Expand All @@ -82,12 +81,11 @@ html, body {
grid-row: 1;
grid-column: 5;
box-sizing: border-box;
width: 216px;
//width: 216px;

font-size: 0;

.byu-header__search-input {
@include y-type-family-gotham();
color: $y-color-text-navy;
display: inline-block;
padding: 5px 10px;
Expand Down Expand Up @@ -139,7 +137,6 @@ html, body {
* {
flex: 1;
height: 35px;
@include y-type-family-gotham();
color: $y-color-navy;
font-size: 13px;
box-sizing: border-box;
Expand All @@ -165,32 +162,79 @@ html, body {
}
}

.byu-header__mobile-menu-button {
.byu-header__mobile-menu,
.byu-header__mobile-menu-label {
display: none;
}

@media (max-width: 1023px) {

$menu-transition: 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);

@mixin menu-expands($height, $padding-top: 0, $padding-bottom: 0) {
overflow-y: hidden;
height: 0;
max-height: 0;
padding-top: 0;
padding-bottom: 0;
transition: all $menu-transition;
display: block;
opacity: 0;
}

@mixin menu-expands-expanded($height, $padding-top: 0, $padding-bottom: 0) {
height: $height;
max-height: $height;
padding-top: $padding-top;
padding-bottom: $padding-bottom;
opacity: 1;
}

.byu-header__mobile-menu,
.byu-header__mobile-menu-label {
display: inline-block;
}

.byu-header__mobile-menu {
opacity: 0;
height: 0;
width: 0;
}

.byu-header__mobile-menu-label {
color: transparent;
background-color: gray;
width: 20px;
height: 20px;
grid-row: 1;
grid-column: 3;
}

.byu-header__mobile-menu:checked ~ .byu-header__mobile-menu-label {
background-color: green;
}

.byu-header {
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto auto auto auto;

row-gap: 0;

transition: max-height 0.5s;
transition: all $menu-transition;

&.byu-header--mobile-expanded {
//grid-template-rows: auto auto auto auto 0;
}
overflow-y: hidden;
}

.byu-header__mobile-menu-button {
display: block;
grid-row: 1;
grid-column: 3;
}
//.byu-header__mobile-menu-button {
// display: block;
// grid-row: 1;
// grid-column: 3;
//}

.byu-header__site-title {
.byu-header__title {
grid-row: 1;
grid-column: 2;
}
Expand All @@ -200,25 +244,22 @@ html, body {
grid-column: span 3;

overflow-y: hidden;
max-height: 0;
transition: max-height 0.5s;

background-color: white;

* {
padding: 18px 50px;
@include menu-expands(35px, 18px, 18px);
box-sizing: border-box;

color: #002e5d;
padding: 18px 50px;
}
}

.byu-header__user-info {
grid-row: 2;
grid-column: span 3;
overflow-y: hidden;
max-height: 0;
transition: max-height 0.5s;
@include menu-expands(35px)
}

.byu-header__search {
Expand All @@ -227,7 +268,7 @@ html, body {
overflow-y: hidden;
width: 100vw;
border-bottom: 1px solid $y-color-accent-gray-light;
transition: max-height 0.5s;
//transition: all $menu-transition;
max-height: 35px;

.byu-header__search-input {
Expand All @@ -252,16 +293,32 @@ html, body {
.byu-header__menu {
grid-row: 3;
grid-column: span 3;
overflow-y: hidden;
height: auto;
border-bottom: 0;
max-height: 0;
transition: max-height 0.5s;
height: auto;
overflow-y: hidden;
}

.byu-header__menu-links {
flex-direction: column;
height: auto;
}

.byu-header__menu-links > * {
flex: 0;
@include menu-expands(35px, 8px, 8px);
}

.byu-header__mobile-menu:checked {
&~ .byu-header__menu .byu-header__menu-links > * {
@include menu-expands-expanded(35px, 8px, 8px);
}
&~ .byu-header__actions > * {
@include menu-expands-expanded(35px, 8px, 8px);
}
&~ .byu-header__user
{
@include menu-expands-expanded(35px, 8px, 8px);
}
}

}
6 changes: 3 additions & 3 deletions src/common/_type.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@import 'colors';

$y-type-family-ringside: 'Ringside Narrow A', 'Ringside Narrow B', 'Archivo Narrow', 'Arial Narrow', Arial, sans-serif;
$y-type-family-ringside: 'HCo Ringside Narrow SSm', 'Archivo Narrow', 'Arial Narrow', Arial, sans-serif;
$y-type-family-vitesse: 'Vitesse A', 'Vitesse B', 'Zilla Slab', 'Aleo', Georgia, serif;
$y-type-family-gotham: 'Gotham A', 'Gotham B', 'Montserrat', 'Roboto', Verdana, Arial, sans-serif;
$y-type-family-sentinel: 'Sentinel A', 'Sentinel B', 'Domine', 'Times New Roman', serif;
Expand Down Expand Up @@ -48,11 +48,11 @@ $y-type-family-source-sans: 'Source Sans Pro', Tahoma, Arial, sans-serif;
}

$y-type-logo: $y-type-family-ringside;
$y-type-header: $y-type-family-gotham;
$y-type-header: $y-type-family-ringside;
$y-type-logo-old: $y-type-family-vitesse;

@mixin y-type-logo($color: $y-color-text-black ) {
font-family: $y-type-logo-old;
font-family: $y-type-logo;
color: $color;
}

Expand Down
2 changes: 2 additions & 0 deletions src/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
@import url('https://cdn.byu.edu/theme-fonts/latest/ringside/fonts.css');

@import 'header';

0 comments on commit 2b2d121

Please sign in to comment.