fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

media-queries and sticky refinements

Browse Source
This commit is contained in:
Felix Hamann 2018-01-25 17:55:41 +01:00
parent e6fadd1986
commit 8c792c9243
10 changed files with 249 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/www/courses.html
View File

@ -11,7 +11,7 @@
<body> <body>
<div class="grid"> <div class="grid">
<header class="header"> <header class="header">
<nav class="horizontal"> <nav>
<ul class="flat"> <ul class="flat">
<li><a href="/">Startseite</a></li> <li><a href="/">Startseite</a></li>
<li><a href="/courses.html">Kurse</a></li> <li><a href="/courses.html">Kurse</a></li>
@ -153,7 +153,7 @@
</section> </section>
<footer class="footer"> <footer class="footer">
<nav class="thirdary"> <nav>
<ul class="flat"> <ul class="flat">
<li><a href="">Impressum</a></li> <li><a href="">Impressum</a></li>
<li><a href="">Kontakt</a></li> <li><a href="">Kontakt</a></li>

4
app/www/index.html
View File

@ -11,7 +11,7 @@
<body> <body>
<div class="grid"> <div class="grid">
<header class="header"> <header class="header">
<nav class="horizontal"> <nav>
<ul class="flat"> <ul class="flat">
<li><a href="/">Startseite</a></li> <li><a href="/">Startseite</a></li>
<li><a href="/courses.html">Kurse</a></li> <li><a href="/courses.html">Kurse</a></li>
@ -54,7 +54,7 @@
</section> </section>
<footer class="footer"> <footer class="footer">
<nav class="thirdary"> <nav>
<ul class="flat"> <ul class="flat">
<li><a href="#">Impressum</a></li> <li><a href="#">Impressum</a></li>
<li><a href="#">Kontakt</a></li> <li><a href="#">Kontakt</a></li>

168
app/www/src/css/main.css
View File

@ -1,7 +1,7 @@
.grid { .grid {
display: grid; display: grid;
height: 100%; height: 100%;
grid-template-columns: repeat(12, 1fr); grid-template-columns: [grid-col-start] repeat(12, 1fr) [grid-col-end];
grid-template-rows: var(--header-height) auto var(--footer-height); grid-template-rows: var(--header-height) auto var(--footer-height);
grid-gap: 20px; grid-gap: 20px;
} }
@ -22,7 +22,7 @@
} }
.grid > section { .grid > section {
grid-column: 4 / span 8; grid-column: 4/span 8;
grid-row-start: 2; grid-row-start: 2;
} }
@ -31,11 +31,65 @@
grid-row-start: 3; grid-row-start: 3;
} }
@media (max-width: 1000px) {
.grid {
grid-template-columns: [grid-col-start] repeat(8, 1fr) [grid-col-end];
grid-gap: 10px;
}
.grid > header {
grid-column: span 8;
}
.grid > .sidebar {
grid-column: grid-col-start / span 2;
grid-row-start: 2;
}
.grid > section {
grid-column: 3 / span 6;
grid-row-start: 2;
}
.grid > footer {
grid-column: span 8;
grid-row-start: 3;
}
}
@media (max-width: 800px) {
.grid {
grid-template-columns: [grid-col-start] repeat(4, 1fr) [grid-col-end];
}
.grid > header, .grid > .sidebar, .grid > section, .grid > footer {
grid-column: span 4;
}
.grid > section {
grid-row-start: 2;
}
.grid > .sidebar {
grid-row-start: 3;
}
.grid > footer {
grid-row-start: 4;
}
}
@media (max-width: 600px) {
.grid {
grid-template-columns: [grid-col-start] repeat(2, 1fr) [grid-col-end];
}
.grid > header, .grid > .sidebar, .grid > section, .grid > footer {
grid-column: span 2;
}
}
.box { .box {
position: relative; position: relative;
padding: 13px 24px; padding: 13px 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
flex-direction: column; -webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 16px; font-size: 16px;
} }
@ -50,8 +104,8 @@
} }
.course-box { .course-box {
border-left: 1px solid #afb5df; border-left: 1px solid #ccb3e6;
padding: 4px 20px; padding: 0 20px;
position: relative; position: relative;
} }
@ -100,7 +154,8 @@
} }
* { * {
box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@ -120,11 +175,12 @@ a:link {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
-webkit-transition: color .2s ease, background-color .2s ease;
transition: color .2s ease, background-color .2s ease; transition: color .2s ease, background-color .2s ease;
} }
a:hover { a:hover {
color: #38428a; color: rebeccapurple;
} }
ul { ul {
@ -141,12 +197,12 @@ h1, h2, h3, h4, h5 {
h1 { h1 {
font-size: 32px; font-size: 32px;
margin: 20px 0 5px; margin: 20px 0 10px;
} }
h2 { h2 {
font-size: 24px; font-size: 24px;
margin: 10px 0 0; margin: 10px 0 5px;
} }
h3 { h3 {
@ -162,7 +218,7 @@ h4 {
th, td { th, td {
text-align: left; text-align: left;
padding: 0 2px 0 4px; padding: 0 2px 0 4px;
border-left: 1px solid #38428a; border-left: 1px solid rebeccapurple;
} }
th:first-of-type, td:first-of-type { th:first-of-type, td:first-of-type {
@ -171,60 +227,70 @@ th:first-of-type, td:first-of-type {
.header { .header {
position: relative; position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
flex-direction: row; -webkit-box-orient: horizontal;
align-items: center; -webkit-box-direction: normal;
justify-content: space-between; -ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0 24px; padding: 0 24px;
height: var(--header-height); height: 60px;
line-height: var(--header-height); line-height: 60px;
background-color: #38428a; background-color: rebeccapurple;
width: 100%; width: 100%;
text-align: right; text-align: right;
overflow: hidden; overflow: hidden;
z-index: 100; z-index: 100;
transition: height .2s ease, line-height .2s ease;
} }
.header.sticky { .header > nav {
position: fixed;
top: 0;
}
.header.collapsed {
height: var(--header-height-collapsed);
line-height: var(--header-height-collapsed);
}
.header.collapsed:before {
height: 30px;
}
.header .horizontal {
width: 100%; width: 100%;
} }
.header > nav.horizontal li a { .has-sticky-nav {
padding: 13px; padding-top: 60px;
position: relative;
height: 100%;
display: inline-block;
color: #eaf2ff;
} }
.header > nav.horizontal li a:hover { .has-sticky-nav .header {
background-color: #2e3671; height: 40px;
line-height: 40px;
position: fixed;
top: 0;
left: 0;
-webkit-transition: height .2s ease, line-height .2s ease;
transition: height .2s ease, line-height .2s ease;
} }
.main-content { .main-content {
font-size: 16px; font-size: 16px;
} }
ul.flat > li > a {
padding: 0 13px;
position: relative;
height: 100%;
display: inline-block;
color: #eaf2ff;
}
ul.flat > li > a:hover {
background-color: #542a7e;
}
.footer { .footer {
text-align: right; text-align: right;
height: 50px;
line-height: 50px;
padding: 7px 24px; padding: 7px 24px;
overflow: hidden; overflow: hidden;
background-color: #38428a; background-color: rebeccapurple;
color: #eaf2ff; color: #eaf2ff;
} }
@ -233,19 +299,29 @@ th:first-of-type, td:first-of-type {
} }
.button, .event-registration { .button, .event-registration {
background-color: #38428a; background-color: rebeccapurple;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
align-items: center; -webkit-box-align: center;
justify-content: center; -ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 3px 13px; padding: 3px 13px;
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
-webkit-transition: background-color .2s ease, -webkit-transform .1s;
transition: background-color .2s ease, -webkit-transform .1s;
transition: transform .1s, background-color .2s ease; transition: transform .1s, background-color .2s ease;
transition: transform .1s, background-color .2s ease, -webkit-transform .1s;
} }
.button:hover, .event-registration:hover { .button:hover, .event-registration:hover {
background-color: #293166; background-color: #4d2673;
transform: scale(1.01); -webkit-transform: scale(1.01);
transform: scale(1.01);
} }
.hidden { .hidden {

3
app/www/src/css/main.css.map
View File

File diff suppressed because one or more lines are too long

11
app/www/src/js/helper/sticky_menu.js
View File

@ -4,6 +4,8 @@ define(function (require) {
init: function() { init: function() {
var last_known_scroll_position = 0; var last_known_scroll_position = 0;
var ticking = false; var ticking = false;
var grid = document.querySelector('.grid');
var nav = document.querySelector('.header');
window.addEventListener('scroll', function(e) { window.addEventListener('scroll', function(e) {
if (!ticking) { if (!ticking) {
@ -12,13 +14,14 @@ define(function (require) {
}); });
ticking = true; ticking = true;
} }
}); }, false);
// checks scroll direction and shows/hides navbar accordingly
function checkScroll() { function checkScroll() {
var collapsed = (window.scrollY > 0 && last_known_scroll_position <= window.scrollY) // var collapsed = (window.scrollY > 0 && last_known_scroll_position <= window.scrollY)
var sticky = window.scrollY > 0; var sticky = window.scrollY > 0;
document.querySelector('header').classList.toggle('collapsed', collapsed); grid.classList.toggle('has-sticky-nav', sticky);
document.querySelector('header').classList.toggle('sticky', sticky); // nav.classList.toggle('collapsed', collapsed);
ticking = false; ticking = false;
last_known_scroll_position = window.scrollY; last_known_scroll_position = window.scrollY;
} }

2
app/www/src/scss/_colors.scss
View File

@ -10,3 +10,5 @@ $base-bg-color: #ffffff;
$base-font-color: rgb(53, 53, 53); $base-font-color: rgb(53, 53, 53);
$sec-font-color: #eaf2ff; $sec-font-color: #eaf2ff;
$box-bg-color: #dddddd; $box-bg-color: #dddddd;
// THEME 3
$base00: rebeccapurple;

3
app/www/src/scss/_dimensions.scss Normal file
View File

@ -0,0 +1,3 @@
$header-height: 60px;
$header-height-collapsed: 40px;
$footer-height: 50px;

82
app/www/src/scss/_grid.scss
View File

@ -1,12 +1,27 @@
$l-cols: 12;
$m-cols: 8;
$s-cols: 4;
$xs-cols: 2;
$l-grid: "[grid-col-start] repeat(#{$l-cols}, 1fr) [grid-col-end]";
$m-grid: "[grid-col-start] repeat(#{$m-cols}, 1fr) [grid-col-end]";
$s-grid: "[grid-col-start] repeat(#{$s-cols}, 1fr) [grid-col-end]";
$xs-grid: "[grid-col-start] repeat(#{$xs-cols}, 1fr) [grid-col-end]";
$l-breakpoint: 1000px;
$m-breakpoint: 800px;
$s-breakpoint: 600px;
$xs-breakpoint: 400px;
.grid { .grid {
display: grid; display: grid;
height: 100%; height: 100%;
grid-template-columns: repeat(12, 1fr); grid-template-columns: #{$l-grid};
grid-template-rows: var(--header-height) auto var(--footer-height); grid-template-rows: var(--header-height) auto var(--footer-height);
grid-gap: 20px; grid-gap: 20px;
> header { > header {
grid-column: span 12; grid-column: span $l-cols;
} }
> .sidebar { > .sidebar {
@ -21,12 +36,71 @@
} }
> section { > section {
grid-column: 4 / span 8; grid-column: 4 / span ($l-cols - 4);
grid-row-start: 2; grid-row-start: 2;
} }
> footer { > footer {
grid-column: span 12; grid-column: span $l-cols;
grid-row-start: 3; grid-row-start: 3;
} }
} }
@media (max-width: $l-breakpoint) {
.grid {
grid-template-columns: #{$m-grid};
grid-gap: 10px;
> header {
grid-column: span $m-cols;
}
> .sidebar {
grid-column: grid-col-start / span 2;
grid-row-start: 2;
}
> section {
grid-column: 3 / span 6;
grid-row-start: 2;
}
> footer {
grid-column: span $m-cols;
grid-row-start: 3;
}
}
}
@media (max-width: $m-breakpoint) {
.grid {
grid-template-columns: #{$s-grid};
> header, > .sidebar, > section, > footer {
grid-column: span $s-cols;
}
> section {
grid-row-start: 2;
}
> .sidebar {
grid-row-start: 3;
}
> footer {
grid-row-start: 4;
}
}
}
@media (max-width: $s-breakpoint) {
.grid {
grid-template-columns: #{$xs-grid};
> header, > .sidebar, > section, > footer {
grid-column: span $xs-cols;
}
}
}

57
app/www/src/scss/main.scss
View File

@ -1,5 +1,6 @@
@import 'grid'; @import 'grid';
@import 'colors'; @import 'colors';
@import 'dimensions';
// modules // modules
@import 'modules/box'; @import 'modules/box';
@ -44,11 +45,11 @@ h1, h2, h3, h4, h5 {
} }
h1 { h1 {
font-size: 32px; font-size: 32px;
margin: 20px 0 5px; margin: 20px 0 10px;
} }
h2 { h2 {
font-size: 24px; font-size: 24px;
margin: 10px 0 0; margin: 10px 0 5px;
} }
h3 { h3 {
font-size: 20px; font-size: 20px;
@ -78,36 +79,40 @@ th, td {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 24px; padding: 0 24px;
height: var(--header-height); height: $header-height;
line-height: var(--header-height); line-height: $header-height;
background-color: $base00; background-color: $base00;
width: 100%; width: 100%;
text-align: right; text-align: right;
overflow: hidden; overflow: hidden;
z-index: 100; z-index: 100;
// box-shadow: 0 0 40px 40px rgba(0, 0, 0, 0.1);
transition: height .2s ease, line-height .2s ease;
&.sticky { > nav {
position: fixed;
top: 0;
}
&.collapsed {
height: var(--header-height-collapsed);
line-height: var(--header-height-collapsed);
&:before {
height: 30px;
}
}
.horizontal {
width: 100%; width: 100%;
} }
}
> nav.horizontal li a { .has-sticky-nav {
padding: 13px; padding-top: $header-height;
}
.has-sticky-nav .header {
height: $header-height-collapsed;
line-height: $header-height-collapsed;
position: fixed;
top: 0;
left: 0;
transition: height .2s ease, line-height .2s ease;
}
.main-content {
font-size: 16px;
}
ul.flat {
> li > a {
padding: 0 13px;
position: relative; position: relative;
height: 100%; height: 100%;
display: inline-block; display: inline-block;
@ -119,12 +124,10 @@ th, td {
} }
} }
.main-content {
font-size: 16px;
}
.footer { .footer {
text-align: right; text-align: right;
height: $footer-height;
line-height: $footer-height;
padding: 7px 24px; padding: 7px 24px;
overflow: hidden; overflow: hidden;
background-color: $base00; background-color: $base00;

2
app/www/src/scss/modules/_box.scss
View File

@ -22,7 +22,7 @@
// COURSE BOX // COURSE BOX
.course-box { .course-box {
border-left: 1px solid lighten($base00, 40%); border-left: 1px solid lighten($base00, 40%);
padding: 4px 20px; padding: 0 20px;
position: relative; position: relative;
li { li {