commit 38c946ef79cf6740e1f8ad4494aab922032e801f
parent 0b5fbab5771c948bd8eaf00a6011b6ae57c95cfe
Author: Nathan Randecker <nathan.randecker@gmail.com>
Date: Mon, 16 Jan 2017 22:30:25 -0600
Fix to projects layout on mobile
Diffstat:
3 files changed, 25 insertions(+), 16 deletions(-)
diff --git a/_includes/projects.html b/_includes/projects.html
@@ -3,24 +3,24 @@
<h3> Featured Projects </h3>
</span>
<div class="row user-projects">
- <div class="six columns u-pull-left">
+ <div class="six columns images">
+ <img alt="mountains" src="../images/mountains.jpg" />
+ </div>
+ <div class="six columns">
<h5> Project Title </h5>
<li> Featured Skills</li>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a class="project-link" href="#">Check it out</a>
</div>
- <div class="six columns u-pull-right">
- <img alt="mountains" src="../images/mountains.jpg" />
- </div>
</div>
<div class="row user-projects">
- <div class="six columns u-pull-left">
+ <div class="six columns">
<img alt="mountains" src="../images/skate.jpg" />
</div>
- <div class="six columns u-pull-right">
+ <div class="six columns">
<h5> Project Title </h5>
<li> Featured Skills</li>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a class="project-link" href="#">Check it out</a>
</div>
</div>
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -1 +1 @@
-@import url(https://fonts.googleapis.com/css?family=Montserrat);body{font-family:'Montserrat',sans-serif}@-webkit-keyframes pulse{0%,to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";filter:alpha(opacity=40);opacity:.4;top:0}50%{-ms-filter:none;-webkit-filter:none;filter:none;opacity:1;top:-10px}}@keyframes pulse{0%,to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";filter:alpha(opacity=40);opacity:.4;top:0}50%{-ms-filter:none;-webkit-filter:none;filter:none;opacity:1;top:-10px}}.main-wrapper{display:block;height:100%}#particles-js{background:#1a222c;width:100%;min-height:100vh;margin:0 auto;background-repeat:no-repeat;background-size:cover}.content{text-align:center;color:#fff;position:absolute;top:50%;left:50%;margin:0 auto;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.content .site-title{font-size:50px;display:block;line-height:1}@media only screen and (min-width:37.5rem){.content .site-title{margin:0;font-size:100px}}.content .site-description{font-size:20px;display:block;line-height:1;margin:5px 0 10px}@media only screen and (min-width:37.5rem){.content .site-description{font-size:40px}}.content .link{color:#fff;display:inline-flex;justify-content:space-between;text-decoration:none;font-size:15px;margin:10px}@media only screen and (min-width:37.5rem){.content .link{font-size:20px}}.icons-header{display:flex;justify-content:center}.icons-header .icon{text-align:center;color:#fff;width:18px;height:18px;padding:10px;margin:2px;border-radius:50%;border:2px solid #fff;transition:all .7s}.icons-header .icon:hover{color:#1a222c;background:#fff}@media only screen and (min-width:37.5rem){.icons-header .icon{width:30px;height:30px;font-size:30px}}.down,.icons-header,.user{text-align:center}.down{color:#fff;position:absolute;bottom:25px;width:100%;display:block;cursor:pointer;margin:0 auto;font-size:30px}.down .icon{position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100px;height:100px;fill:#fff;-webkit-animation:pulse 1.3s infinite;animation:pulse 1.3s infinite}.down .icon:hover,.footer a:hover{color:#4b5664}.user{margin:10px;font-size:75px}@media only screen and (min-width:37.5rem){.user{font-size:100px}}.user-details{text-align:center;margin:10px}.user-projects{margin:10px}.user-projects img{max-width:100%;height:auto;border-radius:5px}.user-projects h5,body{margin:0}.user-projects li{color:#1a222c;font-size:1.1rem}.project-link{display:block;width:100px;margin-top:10px;padding:5px;color:#1a222c;background-color:transparent;border:1px solid #1a222c;border-radius:10px;text-align:center;outline:none;text-decoration:none;cursor:pointer;transition:color .3s ease-out,background-color .3s ease-out,border-color .3s ease-out}.project-link:hover{background-color:#54516a;border-color:#54516a;color:#fff;transition:color .3s ease-in,background-color .3s ease-in,border-color .3s ease-in}.footer{background:#1a222c;padding:25px 0;margin-top:100px;text-align:center;color:#fff}.footer a{text-decoration:none;margin:0;color:#fff}
-\ No newline at end of file
+@import url(https://fonts.googleapis.com/css?family=Montserrat);body{font-family:'Montserrat',sans-serif}@-webkit-keyframes pulse{0%,to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";filter:alpha(opacity=40);opacity:.4;top:0}50%{-ms-filter:none;-webkit-filter:none;filter:none;opacity:1;top:-10px}}@keyframes pulse{0%,to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";filter:alpha(opacity=40);opacity:.4;top:0}50%{-ms-filter:none;-webkit-filter:none;filter:none;opacity:1;top:-10px}}.main-wrapper{display:block;height:100%}#particles-js{background:#1a222c;width:100%;min-height:100vh;margin:0 auto;background-repeat:no-repeat;background-size:cover}.content{text-align:center;color:#fff;position:absolute;top:50%;left:50%;margin:0 auto;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.content .site-title{font-size:50px;display:block;line-height:1}@media only screen and (min-width:37.5rem){.content .site-title{margin:0;font-size:100px}}.content .site-description{font-size:20px;display:block;line-height:1;margin:5px 0 10px}@media only screen and (min-width:37.5rem){.content .site-description{font-size:40px}}.content .link{color:#fff;display:inline-flex;justify-content:space-between;text-decoration:none;font-size:15px;margin:10px}@media only screen and (min-width:37.5rem){.content .link{font-size:20px}}.icons-header{display:flex;justify-content:center}.icons-header .icon{text-align:center;color:#fff;width:18px;height:18px;padding:10px;margin:2px;border-radius:50%;border:2px solid #fff;transition:all .7s}.icons-header .icon:hover{color:#1a222c;background:#fff}@media only screen and (min-width:37.5rem){.icons-header .icon{width:35px;height:35px;font-size:35px}}.down,.icons-header,.user{text-align:center}.down{color:#fff;position:absolute;bottom:25px;width:100%;display:block;cursor:pointer;margin:0 auto;font-size:30px}.down .icon{position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100px;height:100px;fill:#fff;-webkit-animation:pulse 1.3s infinite;animation:pulse 1.3s infinite}.down .icon:hover,.footer a:hover{color:#4b5664}.user{margin:10px;font-size:50px}@media only screen and (min-width:37.5rem){.user{font-size:75px}}.user-details{text-align:center;margin:10px}.user-projects{margin:10px}.user-projects img{max-width:100%;height:auto;border-radius:5px}.user-projects h5,body{margin:0}.user-projects li{color:#1a222c;font-size:1.1rem}.user-projects p{margin-right:5px}@media only screen and (min-width:37.5rem){.images{float:right}}.project-link{display:block;width:100px;margin:10px 0;padding:5px;color:#1a222c;background-color:transparent;border:1px solid #1a222c;border-radius:10px;text-align:center;outline:none;text-decoration:none;cursor:pointer;transition:color .3s ease-out,background-color .3s ease-out,border-color .3s ease-out}.project-link:hover{background-color:#54516a;border-color:#54516a;color:#fff;transition:color .3s ease-in,background-color .3s ease-in,border-color .3s ease-in}.footer{background:#1a222c;padding:25px 0;margin-top:100px;text-align:center;color:#fff}.footer a{text-decoration:none;margin:0;color:#fff}
+\ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -127,9 +127,9 @@ body {
background: #FFF;
}
@media only screen and (min-width:$cut) {
- width: 30px;
- height: 30px;
- font-size: 30px;
+ width: 35px;
+ height: 35px;
+ font-size: 35px;
}
}
}
@@ -168,9 +168,9 @@ body {
margin: 10px;
text-align: center;
margin: 10px;
- font-size: 75px;
+ font-size: 50px;
@media only screen and (min-width: $cut) {
- font-size: 100px;
+ font-size: 75px;
}
}
@@ -193,12 +193,21 @@ body {
color: $main;
font-size: 1.1rem;
}
+ p {
+ margin-right: 5px;
+ }
+}
+
+.images {
+ @media only screen and (min-width: $cut) {
+ float: right;
+ }
}
.project-link {
display: block;
width: 100px;
- margin-top: 10px;
+ margin: 10px 0px;
padding: 5px;
color: $main;
background-color: transparent;
