Fixed mobile styles
This commit is contained in:
parent
1a7376cdb2
commit
ae69ee60bf
10 changed files with 161 additions and 176 deletions
|
|
@ -6,6 +6,7 @@ from flask_debugtoolbar import DebugToolbarExtension
|
|||
from admin import admin
|
||||
from flask.ext.mail import Mail, Message
|
||||
from wtforms import Form, TextField, TextAreaField, validators
|
||||
from datetime import datetime
|
||||
|
||||
app = Flask(__name__)
|
||||
app.config.from_pyfile('config.py')
|
||||
|
|
@ -34,6 +35,10 @@ class ContactForm(Form):
|
|||
email = TextField('Email Address', [validators.Length(min=6, max=35)])
|
||||
message = TextAreaField('Message', [validators.Length(min=6, max=5000)])
|
||||
|
||||
@app.context_processor
|
||||
def get_current_year():
|
||||
return dict(current_year=datetime.now().year)
|
||||
|
||||
@app.route('/')
|
||||
def home():
|
||||
g.db.execute('SELECT * FROM blog_posts ORDER BY updated_on DESC LIMIT 3')
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@ body {
|
|||
padding:0;
|
||||
background-color:#fff;
|
||||
overflow-x: hidden;
|
||||
text-shadow: 0.5px 0 0 #000, -0.5px 0 0 #000, 0 0.5px 0 #000, 0 -0.5px 0 #000, 0.5px 0.5px #000, -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1, h2, h3, h4, h5, h6, #menu-icon {
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
|
||||
}
|
||||
|
||||
a {
|
||||
* {
|
||||
-webkit-transition: all 0.5s; /* Safari */
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
|
@ -57,10 +57,11 @@ input[type='submit'] {
|
|||
position:fixed;
|
||||
top:0;
|
||||
margin:0;
|
||||
background-color:#002900;
|
||||
background: linear-gradient(#F5F5F5, #CCCCCC);
|
||||
height:60px;
|
||||
width:100vw;
|
||||
z-index: 999;
|
||||
box-shadow: 0 1px 10px #000;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
|
|
@ -120,7 +121,7 @@ input[type='submit'] {
|
|||
.main-nav li a:link, .main-nav li a:visited {
|
||||
text-decoration:none;
|
||||
text-align:center;
|
||||
color:white;
|
||||
color: #000;
|
||||
padding:5px;
|
||||
margin:0 auto;
|
||||
font-size:16px;
|
||||
|
|
@ -131,7 +132,8 @@ input[type='submit'] {
|
|||
}
|
||||
|
||||
.main-nav li a:hover, .main-nav li a:active {
|
||||
background-color: #5C995C;
|
||||
/*background-color: #5C995C;*/
|
||||
background: linear-gradient(#CCCCCC, #F5F5F5);
|
||||
}
|
||||
|
||||
.main-nav p {
|
||||
|
|
@ -219,6 +221,9 @@ input[type='submit'] {
|
|||
.section:first-of-type {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.section p {
|
||||
text-shadow: 0 0 30px #000;
|
||||
}
|
||||
.blog-entry {
|
||||
margin: 5px 20px 15px;
|
||||
padding: 0 20px;
|
||||
|
|
@ -306,20 +311,6 @@ div#instafeed {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
#home img {
|
||||
border-radius:50%;
|
||||
height:auto;
|
||||
width:150px;
|
||||
display:inline-block;
|
||||
float:none;
|
||||
margin:10px;
|
||||
}
|
||||
|
||||
#about {
|
||||
background-color:white;
|
||||
padding:1px 15px 15px 15px;
|
||||
}
|
||||
|
||||
.desktop {
|
||||
display:inline-block;
|
||||
width:70%;
|
||||
|
|
@ -340,17 +331,11 @@ div#instafeed {
|
|||
}
|
||||
|
||||
#projects {
|
||||
background-color:#002900;
|
||||
color:white;
|
||||
margin:50px auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#projects h2 {
|
||||
color: #ffffff;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
|
||||
#projects h3 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
|
@ -426,13 +411,14 @@ div#instafeed {
|
|||
margin-right: 20px;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #002900;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
#contact p {
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
p.contact-btns {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
a#menu-icon {
|
||||
|
|
@ -445,7 +431,7 @@ a.social-link {
|
|||
}
|
||||
|
||||
a.social-link:link, a.social-link:visited {
|
||||
color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a.social-link:hover, a.social-link:active {
|
||||
|
|
@ -499,17 +485,12 @@ a.social-link:hover, a.social-link:active {
|
|||
|
||||
.admin-table th:first-child, .admin-table td:first-child {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media screen and (max-width:1024px) {
|
||||
* {
|
||||
z-index: 99;
|
||||
position: relative;
|
||||
}
|
||||
@media screen and (max-width:1024px) {
|
||||
.main-nav, #nav {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#menu {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
|
|
@ -518,12 +499,11 @@ a.social-link:hover, a.social-link:active {
|
|||
top: 60px;
|
||||
left: 0;
|
||||
padding:0;
|
||||
background-color:#002900;
|
||||
background-color:#CCCCCC;
|
||||
float:none;
|
||||
-webkit-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
#menu-icon {
|
||||
position:absolute;
|
||||
right:30px;
|
||||
|
|
@ -532,35 +512,33 @@ a.social-link:hover, a.social-link:active {
|
|||
margin: 2px 10px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.main-nav li {
|
||||
display:block;
|
||||
margin:0 auto;
|
||||
padding:0;
|
||||
background-color:#002900;
|
||||
background-color:#CCCCCC;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.main-nav li a {
|
||||
width:90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.desktop {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
}
|
||||
.glance {
|
||||
width:95%;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.project {
|
||||
display:block;
|
||||
width:95%;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.project-logo {
|
||||
display: block;
|
||||
float:none;
|
||||
|
|
@ -572,10 +550,12 @@ a.social-link:hover, a.social-link:active {
|
|||
.container, .section {
|
||||
background-image: none;
|
||||
}
|
||||
.section {
|
||||
background: rgba(0, 41, 0, 0.75);
|
||||
}
|
||||
.mobile-bg {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
|
@ -588,26 +568,6 @@ a.social-link:hover, a.social-link:active {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.section-bg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 40px;
|
||||
}
|
||||
.section-wrapper {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.section-bg img {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
|
|
@ -641,3 +601,14 @@ a.social-link:hover, a.social-link:active {
|
|||
margin: 5px 5% 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 440px) {
|
||||
.blog-entry {
|
||||
padding: 0 5px;
|
||||
}
|
||||
#contact p {
|
||||
float: none !important;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
{% extends 'master.html' %}
|
||||
{% block body %}
|
||||
<div class="section-wrapper">
|
||||
<div class="section" id="bio">
|
||||
<h2>about me</h2>
|
||||
<p>I have work experience using HTML, CSS, JavaScript, jQuery, AngularJS, NodeJS, PHP, Laravel, WordPress, Magento. Shopify, Ruby on Rails, Python, Linux, Ubuntu Server 14.04, and I have the Certified System Administrator certification from the Linux Foundation. As far as software goes, I'm proficient in git, GIMP, and vim. All of my learning so far has been from self-study, so I am very independent and self-motivated; little to no direction isn’t a problem for me. I’m also a very quick learner and I’m detail-oriented. I tend to stay up late at night working and wake up early the next day to continue working when I have a big project. I love Open Source software, and I use Arch Linux as my primary operating system. I have made a few minor contributions to open source software, as seen on my GitHub profile. </p>
|
||||
<p>When I was 16 years old I decided to go on a foreign exchange trip, and I wanted to go to Europe. I wasn’t too particular about where exactly though and I ended up going to Finland. Finnish is a very difficult language to learn and the people there are more reserved than most Americans. Add to that mix a nearly 6 month winter with temperatures as low as -24 F (-31 C) and you can see how this was quite a life-changing experience. I left Finland fluent in Spanish and conversational in Finnish. The Finns were rather shy, at least with me, so I spent most of my time with Latin American exchange students and actually met my current fiancée there. When I returned to the US, I finished my last year of high school and then moved to Mexico, precisely for my fiancée, who was only my girlfriend at the time. When I got to Mexico, I had a couple thousand dollars saved up, I had no visas or permissions to work, but I at least spoke Spanish. Within 2 weeks of being there I was able to find work teaching English, and I later found a better teaching position and got my visa situation taken care of. Prior to teaching I had only gained experience in sales and retail, so teaching was a completely new experience for me. It wasn’t my favorite thing to do, however, so I decided that I needed to get some more education in order to get into a field that I actually would enjoy. I began to teach myself HTML/CSS, JavaScript, and Python in my free time since I’ve always been a tech junkie. At 20 years old, I began my first job in web development, only 4 months after I began studying programming. In the 6 months that I've been there, I've learned PHP, Laravel, WordPress, some Magento, some Ruby on Rails, and Shopify development. I am also conversational in German, since German is a pretty popular language around the tech world from what I’ve seen. I’m currently 21 years old, I speak English, Spanish, Finnish, and German, and can code in HTML, CSS, JavaScript, PHP, Ruby and Python, am a certified Linux System Administrator, and I’d like to think that I’ve overcome more difficulties and had more life experiences than most people twice my age have.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
{% extends 'master.html' %}
|
||||
{% block body %}
|
||||
{% for data in post %}
|
||||
<div class="section-wrapper">
|
||||
<div class="section">
|
||||
<h2>{{ data.title }}</h2>
|
||||
<em>{{ data.updated }}</em>
|
||||
{{ data.text | safe }}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
{% extends "master.html" %}
|
||||
{% block body %}
|
||||
<div class="section-wrapper">
|
||||
<div class="section">
|
||||
<h2>blog</h2>
|
||||
{% for entry in entries %}
|
||||
|
|
@ -12,4 +13,5 @@
|
|||
<em>Sorry, I still haven't gotten around to moving my blog posts over!</em>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{% extends 'master.html' %}
|
||||
{% block body %}
|
||||
<div class="section-wrapper">
|
||||
<div class="section" id="contact">
|
||||
<h2>contact</h2>
|
||||
{% from "_formhelper.html" import render_field %}
|
||||
|
|
@ -33,4 +34,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,6 @@
|
|||
</h1>
|
||||
<div class="section-wrapper">
|
||||
<div class="section" id="blog">
|
||||
<div class="section-bg">
|
||||
<img src="{{ url_for('static', filename='img/bg-blur.jpg') }}">
|
||||
</div>
|
||||
<h2 style="margin-top: 0;">from my blog</h2>
|
||||
{% for entry in entries %}
|
||||
<div class="blog-entry">
|
||||
|
|
@ -23,9 +20,6 @@
|
|||
</div>
|
||||
<div class="section-wrapper">
|
||||
<div class="section" id="projects">
|
||||
<div class="section-bg">
|
||||
<img src="{{ url_for('static', filename='img/bg-blur.jpg') }}">
|
||||
</div>
|
||||
<h2>projects</h2>
|
||||
<div class="one-third">
|
||||
<a href="http://wbrawner.com/interval-timer" target="_blank"><img class="project-logo" style="max-width: 102px; border-radius: 50%;" src="{{ url_for('static', filename='img/interval-timer.png') }}"></a>
|
||||
|
|
@ -76,9 +70,6 @@
|
|||
</div>
|
||||
<div class="section-wrapper">
|
||||
<div class="section" id="bio">
|
||||
<div class="section-bg">
|
||||
<img src="{{ url_for('static', filename='img/bg-blur.jpg') }}">
|
||||
</div>
|
||||
<h2>quick facts</h2>
|
||||
<table>
|
||||
<tbody>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
{% extends "master.html" %}
|
||||
{% block body %}
|
||||
<div class="section-wrapper">
|
||||
<div class="section" id="contact">
|
||||
<h2>Login</h2>
|
||||
{% if error %}<p class=error><strong>Error:</strong> {{ error }}{% endif %}
|
||||
<form action="{{ url_for('login') }}" method=post id="login-form">
|
||||
|
|
@ -7,4 +9,6 @@
|
|||
<input type="password" name="password" placeholder="password">
|
||||
<input type="submit" value="login">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<script type="text/javascript" src="{{ url_for('static', filename='js/highlight.pack.js') }}"></script>
|
||||
<link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
|
||||
<link rel="shortcut icon" href="{{ url_for('static', filename='css/styles/zenburn.css') }}">
|
||||
<link rel="apple-touch-icon" href="{{ url_for('static', filename='img/favicon.png') }}">
|
||||
<link rel="apple-touch-icon" href="{{ url_for('static', filename='img/apple-favicon.png') }}">
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)
|
||||
|
|
@ -66,19 +66,23 @@
|
|||
<div class=flash>{{ message }}</div>
|
||||
{% endfor %}
|
||||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="one-third" id="contact">
|
||||
<p>contact</p>
|
||||
<p class="contact-btns"><a class="social-link" href="mailto:contact@wbrawner.com?subject=Let's Work Together"><i class="fa fa-envelope-o"></i></a>
|
||||
<div class="section-wrapper">
|
||||
<div class="section" id="footer">
|
||||
<div class="section-content" id="contact">
|
||||
<p>William Brawner {{ current_year }}</p>
|
||||
<p class="contact-btns">
|
||||
<a class="social-link" href="mailto:contact@wbrawner.com?subject=Let's Work Together"><i class="fa fa-envelope-o"></i></a>
|
||||
<a target="_blank" class="social-link" href="https://www.facebook.com/wpbrawner"><i class="fa fa-facebook"></i></a>
|
||||
<a target="_blank" class="social-link" href="https://twitter.com/BillyBrawner1"><i class="fa fa-twitter"></i></a>
|
||||
<a target="_blank" class="social-link" href="https://www.linkedin.com/profile/view?id=AAIAABAr3PgB2QY4LrVuT2tCxni4S7Rdi2FC3MY&trk=nav_responsive_tab_profile"><i class="fa fa-linkedin"></i></a>
|
||||
<a target="_blank" class="social-link" href='http://stackexchange.com/users/6090478/billy-brawner'><i class="fa fa-stack-overflow"></i></a>
|
||||
<a target="_blank" class="social-link" href='https://github.com/wbrawner'><i class="fa fa-github"></i></a></p>
|
||||
<a target="_blank" class="social-link" href='https://github.com/wbrawner'><i class="fa fa-github"></i></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
changeText()
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{% extends 'master.html' %}
|
||||
{% block body %}
|
||||
<div class="section-wrapper">
|
||||
<div class="section">
|
||||
<h2>projects</h2>
|
||||
<div class="project-description">
|
||||
|
|
@ -24,4 +25,5 @@
|
|||
<p>I decided to make my personal website open source as well. If you're interested, you can find the code on <a href="https://github.com/wbrawner/flask-site">GitHub</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue