Fixed the styles for mobile
This commit is contained in:
parent
7c40a6e902
commit
1ecf35ef1d
3 changed files with 188 additions and 138 deletions
|
|
@ -59,7 +59,7 @@ input[type='submit'] {
|
|||
background-color:#002900;
|
||||
height:60px;
|
||||
width:100vw;
|
||||
z-index:99;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
|
|
@ -72,7 +72,7 @@ input[type='submit'] {
|
|||
max-width: 1100px;
|
||||
margin:auto;
|
||||
padding:12px 0;
|
||||
z-index:99;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.main-nav h1 {
|
||||
|
|
@ -83,6 +83,7 @@ input[type='submit'] {
|
|||
padding:10px;
|
||||
width:200px;
|
||||
font-size:30px;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.main-nav h1 a:link, .main-nav h1 a:visited, .main-nav h1 a:hover, .main-nav h1 a:active {
|
||||
|
|
@ -93,6 +94,7 @@ input[type='submit'] {
|
|||
#menu-container {
|
||||
overflow-x: hidden;
|
||||
display: inline;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.main-nav ul {
|
||||
|
|
@ -165,20 +167,20 @@ input[type='submit'] {
|
|||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.mobile-bg {
|
||||
display: none;
|
||||
}
|
||||
.content {
|
||||
width:90%;
|
||||
max-width:1100px;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.content h1, .content h2 {
|
||||
color:#fff;
|
||||
text-align:left;
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
.flash {
|
||||
width: 80%;
|
||||
background-color: rgb(175, 255, 175);
|
||||
|
|
@ -189,7 +191,6 @@ input[type='submit'] {
|
|||
padding: 10px;
|
||||
margin: 20px auto 0px;
|
||||
}
|
||||
|
||||
#changing-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
|
@ -198,7 +199,9 @@ input[type='submit'] {
|
|||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.section-bg {
|
||||
display: none;
|
||||
}
|
||||
.section {
|
||||
border-radius: 40px;
|
||||
border: 2px solid #fff;
|
||||
|
|
@ -220,43 +223,35 @@ input[type='submit'] {
|
|||
margin: 5px 20px 15px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.blog-entry:last-of-type {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.blog-entry h3, .blog-entry h5, .blog-entry p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.blog-entry h5 {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.one-half {
|
||||
width: 45%;
|
||||
margin: 0 2.5%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.one-third {
|
||||
width: 30%;
|
||||
margin: 5px 1.5%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1.entry-title {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid black;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a.view-more {
|
||||
display: block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#home {
|
||||
color:white;
|
||||
}
|
||||
|
|
@ -268,11 +263,9 @@ a.insta-link {
|
|||
width: 155px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
a.insta-link img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
a.insta-link span {
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
|
|
@ -281,11 +274,9 @@ a.insta-link span {
|
|||
-webkit-transition:opacity 0.25s linear;
|
||||
transition:opacity 0.25s linear;
|
||||
}
|
||||
|
||||
a.insta-link:hover span {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
span.insta-caption-bg {
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
top: 0;
|
||||
|
|
@ -296,7 +287,6 @@ span.insta-caption-bg {
|
|||
right: 0;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
span.insta-caption {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
|
|
@ -512,6 +502,10 @@ a.social-link:hover, a.social-link:active {
|
|||
}
|
||||
|
||||
@media screen and (max-width:1024px) {
|
||||
* {
|
||||
z-index: 99;
|
||||
position: relative;
|
||||
}
|
||||
.main-nav, #nav {
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -575,6 +569,45 @@ a.social-link:hover, a.social-link:active {
|
|||
.social-link {
|
||||
font-size: 30px;
|
||||
}
|
||||
.container, .section {
|
||||
background-image: none;
|
||||
}
|
||||
.mobile-bg {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mobile-bg img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -3,129 +3,143 @@
|
|||
<h1 style="border-width: 0px; text-align: center; min-height: 120px; position: relative; overflow: hidden;">
|
||||
<span id="changing-text">web developer.</span>
|
||||
</h1>
|
||||
|
||||
<div class="section" id="blog">
|
||||
<h2 style="margin-top: 0;">from my blog</h2>
|
||||
{% for entry in entries %}
|
||||
<div class="blog-entry">
|
||||
<h3><a href="{{ url_for('blog') }}/{{ entry.url }}">{{ entry.title }}</a></h3>
|
||||
<h5>{{ entry.updated }}</h5>
|
||||
{{ entry.text|safe }}
|
||||
<div class="section-wrapper">
|
||||
<div class="section" id="blog">
|
||||
<div class="section-bg">
|
||||
<img src="{{ url_for('static', filename='img/bg-blur.jpg') }}">
|
||||
</div>
|
||||
{% else %}
|
||||
<em>Sorry, I still haven't gotten around to moving my blog posts over!</em>
|
||||
{% endfor %}
|
||||
<a class="view-more" href="{{ url_for('blog') }}">Read more »</a>
|
||||
<h2 style="margin-top: 0;">from my blog</h2>
|
||||
{% for entry in entries %}
|
||||
<div class="blog-entry">
|
||||
<h3><a href="{{ url_for('blog') }}/{{ entry.url }}">{{ entry.title }}</a></h3>
|
||||
<h5>{{ entry.updated }}</h5>
|
||||
{{ entry.text|safe }}
|
||||
</div>
|
||||
{% else %}
|
||||
<em>Sorry, I still haven't gotten around to moving my blog posts over!</em>
|
||||
{% endfor %}
|
||||
<a class="view-more" href="{{ url_for('blog') }}">Read more »</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section" id="projects">
|
||||
<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>
|
||||
<h3>interval timer app</h3>
|
||||
<p>languages/technologies used:</p>
|
||||
<ul class="project">
|
||||
<li>English</li>
|
||||
<li>HTML/CSS</li>
|
||||
<li>JavaScript</li>
|
||||
<li>AngularJS</li>
|
||||
<li>GIMP</li>
|
||||
</ul>
|
||||
<a href="https://marketplace.firefox.com/app/interval-timer-1/" target="_blank"><img class="ff-store-link" src="{{ url_for('static', filename='img/ff-marketplace.png') }}"></a>
|
||||
<a href="https://chrome.google.com/webstore/detail/interval-timer/glhbffeiigldedfpeiccmfdigplkeanm" target="_blank"><img class="chrome-webstore-link" src="{{ url_for('static', filename='img/chrome-webstore.png') }}"></a>
|
||||
</div>
|
||||
<div class="one-third">
|
||||
<a href="http://workout-generator.wbrawner.com/" target="_blank"><img class="project-logo" style="margin: 23px auto;" src="{{ url_for('static', filename='img/workout-generator.png') }}"></a>
|
||||
<h3>workout generator app</h3>
|
||||
<p>languages/technologies used:</p>
|
||||
<ul class="project">
|
||||
<li>English</li>
|
||||
<li>HTML/CSS</li>
|
||||
<li>JavaScript</li>
|
||||
<li>JQuery</li>
|
||||
<li>PHP</li>
|
||||
<li>Laravel</li>
|
||||
<li>GIMP</li>
|
||||
<li>VIM</li>
|
||||
<li>MySQL</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="one-third">
|
||||
<a href="http://www.sinconsa.com/" target="_blank"><img class="project-logo" style="margin: 17px auto;" src="{{ url_for('static', filename='img/sinconsa.png') }}"></a>
|
||||
<h3>sinconsa consultores</h3>
|
||||
<p>languages/technologies used:</p>
|
||||
<ul class="project">
|
||||
<li>Spanish</li>
|
||||
<li>HTML/CSS</li>
|
||||
<li>JavaScript</li>
|
||||
<li>JQuery</li>
|
||||
<li>CPanel</li>
|
||||
<li>GIMP</li>
|
||||
<li>VIM</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="view-more" href="{{ url_for('projects') }}">See more »</a>
|
||||
</div>
|
||||
<div class="section" id="bio">
|
||||
<h2>quick facts</h2>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
current employer:
|
||||
</th>
|
||||
<td>
|
||||
<a href="http://whiterabbit.is">White Rabbit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
current occupation:
|
||||
</th>
|
||||
<td>
|
||||
web developer
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
previous occupations:
|
||||
</th>
|
||||
<td>
|
||||
cashier, front desk receptionist, gym membership salesman, personal trainer, efl teacher
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
background:
|
||||
</th>
|
||||
<td>
|
||||
<ul>
|
||||
<li>13 years old: first time out of the USA - trip to Japan</li>
|
||||
<li>16 years old: first experience living in another country - foreign exchange student program in Finland</li>
|
||||
<li>18 years old: graduated high school and moved to Mexico</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
languages:
|
||||
</th>
|
||||
<td>
|
||||
<ul>
|
||||
<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>
|
||||
<h3>interval timer app</h3>
|
||||
<p>languages/technologies used:</p>
|
||||
<ul class="project">
|
||||
<li>English</li>
|
||||
<li>Spanish</li>
|
||||
<li>Finnish</li>
|
||||
<li>German</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>HTML/CSS</li>
|
||||
<li>JavaScript</li>
|
||||
<li>PHP</li>
|
||||
<li>Python</li>
|
||||
<li>AngularJS</li>
|
||||
<li>GIMP</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<a class="view-more" href="{{ url_for('bio') }}">Learn more »</a>
|
||||
<a href="https://marketplace.firefox.com/app/interval-timer-1/" target="_blank"><img class="ff-store-link" src="{{ url_for('static', filename='img/ff-marketplace.png') }}"></a>
|
||||
<a href="https://chrome.google.com/webstore/detail/interval-timer/glhbffeiigldedfpeiccmfdigplkeanm" target="_blank"><img class="chrome-webstore-link" src="{{ url_for('static', filename='img/chrome-webstore.png') }}"></a>
|
||||
</div>
|
||||
<div class="one-third">
|
||||
<a href="http://workout-generator.wbrawner.com/" target="_blank"><img class="project-logo" style="margin: 23px auto;" src="{{ url_for('static', filename='img/workout-generator.png') }}"></a>
|
||||
<h3>workout generator app</h3>
|
||||
<p>languages/technologies used:</p>
|
||||
<ul class="project">
|
||||
<li>English</li>
|
||||
<li>HTML/CSS</li>
|
||||
<li>JavaScript</li>
|
||||
<li>JQuery</li>
|
||||
<li>PHP</li>
|
||||
<li>Laravel</li>
|
||||
<li>GIMP</li>
|
||||
<li>VIM</li>
|
||||
<li>MySQL</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="one-third">
|
||||
<a href="http://www.sinconsa.com/" target="_blank"><img class="project-logo" style="margin: 17px auto;" src="{{ url_for('static', filename='img/sinconsa.png') }}"></a>
|
||||
<h3>sinconsa consultores</h3>
|
||||
<p>languages/technologies used:</p>
|
||||
<ul class="project">
|
||||
<li>Spanish</li>
|
||||
<li>HTML/CSS</li>
|
||||
<li>JavaScript</li>
|
||||
<li>JQuery</li>
|
||||
<li>CPanel</li>
|
||||
<li>GIMP</li>
|
||||
<li>VIM</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="view-more" href="{{ url_for('projects') }}">See more »</a>
|
||||
</div>
|
||||
</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>
|
||||
<tr>
|
||||
<th>
|
||||
current employer:
|
||||
</th>
|
||||
<td>
|
||||
<a href="http://whiterabbit.is">White Rabbit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
current occupation:
|
||||
</th>
|
||||
<td>
|
||||
web developer
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
previous occupations:
|
||||
</th>
|
||||
<td>
|
||||
cashier, front desk receptionist, gym membership salesman, personal trainer, efl teacher
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
background:
|
||||
</th>
|
||||
<td>
|
||||
<ul>
|
||||
<li>13 years old: first time out of the USA - trip to Japan</li>
|
||||
<li>16 years old: first experience living in another country - foreign exchange student program in Finland</li>
|
||||
<li>18 years old: graduated high school and moved to Mexico</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
languages:
|
||||
</th>
|
||||
<td>
|
||||
<ul>
|
||||
<li>English</li>
|
||||
<li>Spanish</li>
|
||||
<li>Finnish</li>
|
||||
<li>German</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>HTML/CSS</li>
|
||||
<li>JavaScript</li>
|
||||
<li>PHP</li>
|
||||
<li>Python</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<a class="view-more" href="{{ url_for('bio') }}">Learn more »</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -57,6 +57,9 @@
|
|||
</div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<div class="mobile-bg">
|
||||
<img src="{{ url_for('static', filename='img/bg.jpg') }}">
|
||||
</div>
|
||||
<div class="content">
|
||||
{% for message in get_flashed_messages() %}
|
||||
<div class=flash>{{ message }}</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue