From 1ecf35ef1de0a44305020fb7eb15ed93356855c5 Mon Sep 17 00:00:00 2001 From: Billy Brawner Date: Sat, 26 Mar 2016 09:25:34 -0700 Subject: [PATCH] Fixed the styles for mobile --- static/css/style.css | 73 ++++++++---- templates/home.html | 250 ++++++++++++++++++++++-------------------- templates/master.html | 3 + 3 files changed, 188 insertions(+), 138 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 463ad37..442c802 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -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) { diff --git a/templates/home.html b/templates/home.html index 35170a6..8aeafdf 100644 --- a/templates/home.html +++ b/templates/home.html @@ -3,129 +3,143 @@

web developer.

- -
-

from my blog

- {% for entry in entries %} -
-

{{ entry.title }}

-
{{ entry.updated }}
- {{ entry.text|safe }} +
+
+
+
- {% else %} - Sorry, I still haven't gotten around to moving my blog posts over! - {% endfor %} - Read more » +

from my blog

+ {% for entry in entries %} +
+

{{ entry.title }}

+
{{ entry.updated }}
+ {{ entry.text|safe }} +
+ {% else %} + Sorry, I still haven't gotten around to moving my blog posts over! + {% endfor %} + Read more » +
-
-

projects

-
- -

interval timer app

-

languages/technologies used:

-
    -
  • English
    • -
  • HTML/CSS
    • -
  • JavaScript
    • -
  • AngularJS
    • -
  • GIMP
    • -
- - -
-
- -

workout generator app

-

languages/technologies used:

-
    -
  • English
    • -
  • HTML/CSS
    • -
  • JavaScript
    • -
  • JQuery
    • -
  • PHP
    • -
  • Laravel
    • -
  • GIMP
    • -
  • VIM
    • -
  • MySQL
    • -
-
-
- -

sinconsa consultores

-

languages/technologies used:

-
    -
  • Spanish
    • -
  • HTML/CSS
    • -
  • JavaScript
    • -
  • JQuery
    • -
  • CPanel
    • -
  • GIMP
    • -
  • VIM
    • -
-
- See more » -
-
-

quick facts

- - - - - - - - - - - - - - - - - - - - - - - -
- current employer: - - White Rabbit -
- current occupation: - - web developer -
- previous occupations: - - cashier, front desk receptionist, gym membership salesman, personal trainer, efl teacher -
- background: - -
    -
  • 13 years old: first time out of the USA - trip to Japan
    • -
  • 16 years old: first experience living in another country - foreign exchange student program in Finland
    • -
  • 18 years old: graduated high school and moved to Mexico
    • -
-
- languages: - -
    +
    +
    +
    + +
    +

    projects

    +
    + +

    interval timer app

    +

    languages/technologies used:

    +
    • English
      • -
    • Spanish
      • -
    • Finnish
      • -
    • German
      • -
    -
    • HTML/CSS
    • JavaScript
      • -
    • PHP
      • -
    • Python
      • +
    • AngularJS
      • +
    • GIMP
    -
- Learn more » + + +
+
+ +

workout generator app

+

languages/technologies used:

+
    +
  • English
    • +
  • HTML/CSS
    • +
  • JavaScript
    • +
  • JQuery
    • +
  • PHP
    • +
  • Laravel
    • +
  • GIMP
    • +
  • VIM
    • +
  • MySQL
    • +
+
+
+ +

sinconsa consultores

+

languages/technologies used:

+
    +
  • Spanish
    • +
  • HTML/CSS
    • +
  • JavaScript
    • +
  • JQuery
    • +
  • CPanel
    • +
  • GIMP
    • +
  • VIM
    • +
+
+ See more » +
+
+
+
+
+ +
+

quick facts

+ + + + + + + + + + + + + + + + + + + + + + + +
+ current employer: + + White Rabbit +
+ current occupation: + + web developer +
+ previous occupations: + + cashier, front desk receptionist, gym membership salesman, personal trainer, efl teacher +
+ background: + +
    +
  • 13 years old: first time out of the USA - trip to Japan
    • +
  • 16 years old: first experience living in another country - foreign exchange student program in Finland
    • +
  • 18 years old: graduated high school and moved to Mexico
    • +
+
+ languages: + +
    +
  • English
    • +
  • Spanish
    • +
  • Finnish
    • +
  • German
    • +
+
    +
  • HTML/CSS
    • +
  • JavaScript
    • +
  • PHP
    • +
  • Python
    • +
+
+ Learn more » +
{% endblock %} diff --git a/templates/master.html b/templates/master.html index 81950d0..358bbe0 100644 --- a/templates/master.html +++ b/templates/master.html @@ -57,6 +57,9 @@
+
+ +
{% for message in get_flashed_messages() %}
{{ message }}