Commit 9effed88 authored by Anders B. Clausen's avatar Anders B. Clausen
Browse files

Now using flexbox for header instead. Way more beautiful code :) Also more repsonsive

parent 7657dda9
Pipeline #48551 passed with stage
in 36 seconds
<template>
<div class="container" id="header">
<div id="header">
<router-link to="/">
<div id="logo" class="vertical-center">
<div id="logo">
<h1>Studerende.dk</h1>
<span id="version-tag">v. Den Flyvende Gris</span>
<span id="version-tag"> v. Den Flyvende Gris</span>
</div>
</router-link>
<div id="navbar" class="vertical-center">
<div id="navbar">
<Navbar/>
</div>
<div id="notification-widget" class="vertical-center">
<div id="notification-widget">
<NotificationWidget/>
</div>
</div>
......@@ -28,18 +28,6 @@
</script>
<style scoped lang="scss">
.container {
position: relative;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#version-tag {
color: $light-theme-color;
font-weight: bold;
......@@ -49,9 +37,17 @@
}
#header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 100px;
width: 100%;
top: 0;
padding-left: $default-margin;
padding-right: $default-margin;
z-index: 1;
background-color: $theme-color;
......@@ -60,6 +56,7 @@
}
#logo {
display: inline-block;
color: $lighter-theme-color;
left: $default-margin;
......@@ -69,11 +66,13 @@
}
#navbar {
display: inline-block;
width: 100%;
height: 1em;
}
#notification-widget {
display: inline-block;
right: $default-margin;
cursor: pointer;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment