1
Fork 0

restyle header

This commit is contained in:
Jake Howard 2017-01-17 22:03:25 +00:00
parent fd8e512fd5
commit 0bf9bbfcfb
5 changed files with 20 additions and 31 deletions

View file

@ -4,16 +4,6 @@
<meta name="no_container" content="true" /> <meta name="no_container" content="true" />
</head> </head>
<body> <body>
<section class="bg-primary">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h1 class="section-heading">About Me</h1>
<hr class="light">
</div>
</div>
</div>
</section>
<section id="me"> <section id="me">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@ -23,7 +13,7 @@
I work as a full stack developer, but I prefer working on servers and mobile apps. I work as a full stack developer, but I prefer working on servers and mobile apps.
</p> </p>
</div> </div>
<div class="col-sm-4 text-center"> <div class="col-sm-4 text-center github-card-container">
<div data-theme="medium" data-github="RealOrangeOne" class="github-card"></div> <div data-theme="medium" data-github="RealOrangeOne" class="github-card"></div>
</div> </div>
</div> </div>

View file

@ -71,16 +71,18 @@ p a {
padding: 1px 0; padding: 1px 0;
} }
#header { header#header {
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 50vh;
&.image .section-heading { &.image .section-heading {
@extend .text-shadow; @extend .text-shadow;
} }
@media screen and (min-height: $screen-xs-max) { @media screen and (max-height: $screen-xs-max) {
height: 40vh; height: 100vh;
} }
} }
@ -99,3 +101,7 @@ p a {
} }
} }
} }
.github-card-container > iframe {
max-width: 100%;
}

View file

@ -1,7 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block htmltitle %} {% block htmltitle %}
{{ category|title }} {{ category.name|title }}
{% endblock %} {% endblock %}
{% block metadata %} {% block metadata %}
@ -9,16 +9,7 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<section class="bg-primary"> {% include 'extras/header.html' with instance=category %}
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h1 class="section-heading">{{ category.name|title }}</h1>
<hr class="light">
</div>
</div>
</div>
</section>
{% if category.page.content %} {% if category.page.content %}
<section> <section>
<div class="container"> <div class="container">

View file

@ -1,6 +1,8 @@
<section id="header" class="bg-primary image" data-image="{{ instance.image }}"> <header id="header" class="bg-primary image" data-image="{{ instance.image or (instance.page and instance.page.image) }}">
<div class="container text-center text-uppercase"> <div class="header-content">
<h1 class="section-heading">{{ instance.title }}</h1> <div class="header-content-inner">
<hr class="light"> <h1>{{ instance.title or instance.name or (instance.page and instance.page.name) }}</h1>
<hr>
</div> </div>
</section> </div>
</header>

View file

@ -9,8 +9,8 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
{% if not page.no_container %}
{% include 'extras/header.html' with instance=page %} {% include 'extras/header.html' with instance=page %}
{% if not page.no_container %}
<section> <section>
<div class="container"> <div class="container">
{{ page.content }} {{ page.content }}