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,8 +3,11 @@
|
|||
<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-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">
|
||||
|
|
@ -17,7 +20,12 @@
|
|||
{% endfor %}
|
||||
<a class="view-more" href="{{ url_for('blog') }}">Read more »</a>
|
||||
</div>
|
||||
</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>
|
||||
|
|
@ -65,7 +73,12 @@
|
|||
</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>
|
||||
|
|
@ -128,4 +141,5 @@
|
|||
</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