commit 0b2d001f6a82cbcfb30607d0c6ec1c417294ed93
parent fada780bd59e53cc270b48581ca4747fbfab5c3c
Author: Nathan Randecker <nathan.randecker@gmail.com>
Date: Mon, 16 Jan 2017 22:45:22 -0600
Added active element to css for mobile
Diffstat:
2 files changed, 20 insertions(+), 2 deletions(-)
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: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
+@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:active,.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:active,.down .icon:hover,.footer a:active,.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:active,.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
@@ -126,6 +126,10 @@ body {
color: $main;
background: #FFF;
}
+ &:active {
+ color: $main;
+ background: #FFF;
+ }
@media only screen and (min-width:$cut) {
width: 35px;
height: 35px;
@@ -160,6 +164,9 @@ body {
&:hover {
color: $sec;
}
+ &:active {
+ color: $sec;
+ }
}
}
@@ -228,6 +235,14 @@ body {
background-color 0.3s ease-in,
border-color 0.3s ease-in;
}
+ &:active {
+ background-color: $purple;
+ border-color: $purple;
+ color: #fff;
+ transition: color 0.3s ease-in,
+ background-color 0.3s ease-in,
+ border-color 0.3s ease-in;
+ }
}
.footer {
@@ -243,5 +258,8 @@ body {
&:hover{
color: $sec;
}
+ &:active {
+ color: $sec;
+ }
}
}
