mirror of https://github.com/ThmmyNoLife/mTHMMY
Ezerous
6 years ago
commit
61f93321a0
42 changed files with 762 additions and 0 deletions
@ -0,0 +1 @@ |
|||||
|
node_modules |
||||
@ -0,0 +1,175 @@ |
|||||
|
html, |
||||
|
body { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
color: #333333; |
||||
|
-webkit-transition: all .35s; |
||||
|
transition: all .35s; |
||||
|
} |
||||
|
|
||||
|
a:hover, a:focus { |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
|
||||
|
h1, |
||||
|
h2, |
||||
|
h3, |
||||
|
h4, |
||||
|
h5, |
||||
|
h6 { |
||||
|
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; |
||||
|
font-weight: 200; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
font-size: 18px; |
||||
|
line-height: 1.5; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
section { |
||||
|
padding: 100px 0; |
||||
|
} |
||||
|
|
||||
|
section h2 { |
||||
|
font-size: 50px; |
||||
|
} |
||||
|
|
||||
|
header.masthead { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
padding-top: 150px; |
||||
|
padding-bottom: 100px; |
||||
|
color: white; |
||||
|
background: #333333; |
||||
|
} |
||||
|
|
||||
|
header.masthead .header-content { |
||||
|
max-width: 500px; |
||||
|
margin-bottom: 100px; |
||||
|
margin-right: auto; |
||||
|
margin-left: auto; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
header.masthead .header-content h1 { |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
|
||||
|
header.masthead .device-container { |
||||
|
max-width: 325px; |
||||
|
margin-right: auto; |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
|
||||
|
header.masthead .device-container .screen img { |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
|
||||
|
@media (min-width: 992px) { |
||||
|
header.masthead { |
||||
|
height: 100vh; |
||||
|
min-height: 775px; |
||||
|
padding-top: 0; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
header.masthead .header-content { |
||||
|
margin-bottom: 0; |
||||
|
text-align: center; |
||||
|
} |
||||
|
header.masthead .header-content h1 { |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
header.masthead .device-container { |
||||
|
max-width: 325px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
header.masthead #badge { |
||||
|
max-width: 300px; |
||||
|
} |
||||
|
|
||||
|
footer { |
||||
|
padding: 25px 0; |
||||
|
text-align: center; |
||||
|
color: #26A69A; |
||||
|
background-color: #3C3C3C; |
||||
|
} |
||||
|
|
||||
|
footer p { |
||||
|
font-size: 12px; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
footer ul { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
footer ul li a { |
||||
|
font-size: 12px; |
||||
|
color: rgba(255, 255, 255, 0.3); |
||||
|
} |
||||
|
|
||||
|
footer ul li a:hover, footer ul li a:focus, footer ul li a:active, footer ul li a.active { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
footer ul.list-social { |
||||
|
margin-bottom: 25px; |
||||
|
} |
||||
|
|
||||
|
footer ul.list-social li a { |
||||
|
font-size: 40px; |
||||
|
line-height: 80px; |
||||
|
display: block; |
||||
|
width: 80px; |
||||
|
height: 80px; |
||||
|
color: white; |
||||
|
border-radius: 100%; |
||||
|
} |
||||
|
|
||||
|
footer ul.list-social li.social-discord a { |
||||
|
background-color: #7289da; |
||||
|
} |
||||
|
|
||||
|
footer ul.list-social li.social-discord a:hover { |
||||
|
background-color: #5e78d5; |
||||
|
} |
||||
|
|
||||
|
footer ul.list-social li.social-github a { |
||||
|
background-color: #24292e; |
||||
|
} |
||||
|
|
||||
|
footer ul.list-social li.social-github a:hover { |
||||
|
background-color: #191c20; |
||||
|
} |
||||
|
|
||||
|
footer ul.list-social li.social-mail a { |
||||
|
background-color: #dd4b39; |
||||
|
} |
||||
|
|
||||
|
footer ul.list-social li.social-mail a:hover { |
||||
|
background-color: #d73925; |
||||
|
} |
||||
|
|
||||
|
.bg-primary { |
||||
|
background: #333333; |
||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#262626)); |
||||
|
background: linear-gradient(#333333, #262626); |
||||
|
} |
||||
|
|
||||
|
.text-primary { |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.no-gutter > [class*='col-'] { |
||||
|
padding-right: 0; |
||||
|
padding-left: 0; |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
body,html{width:100%;height:100%}body{font-family:Roboto,Helvetica,Arial,sans-serif}a{color:#333;-webkit-transition:all .35s;transition:all .35s}a:focus,a:hover{color:#1a1a1a}h1,h2,h3,h4,h5,h6{font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:200}p{font-size:18px;line-height:1.5;margin-bottom:20px}section{padding:100px 0}section h2{font-size:50px}header.masthead{position:relative;width:100%;padding-top:150px;padding-bottom:100px;color:#fff;background:#333}header.masthead .header-content{max-width:500px;margin-bottom:100px;margin-right:auto;margin-left:auto;text-align:center}header.masthead .header-content h1{font-size:30px}header.masthead .device-container{max-width:325px;margin-right:auto;margin-left:auto}header.masthead .device-container .screen img{border-radius:3px}@media (min-width:992px){header.masthead{height:100vh;min-height:775px;padding-top:0;padding-bottom:0}header.masthead .header-content{margin-bottom:0;text-align:center}header.masthead .header-content h1{font-size:30px}header.masthead .device-container{max-width:325px}}header.masthead #badge{max-width:300px}footer{padding:25px 0;text-align:center;color:#26a69a;background-color:#3c3c3c}footer p{font-size:12px;margin:0}footer ul{margin-bottom:0}footer ul li a{font-size:12px;color:rgba(255,255,255,.3)}footer ul li a.active,footer ul li a:active,footer ul li a:focus,footer ul li a:hover{text-decoration:none}footer ul.list-social{margin-bottom:25px}footer ul.list-social li a{font-size:40px;line-height:80px;display:block;width:80px;height:80px;color:#fff;border-radius:100%}footer ul.list-social li.social-discord a{background-color:#7289da}footer ul.list-social li.social-discord a:hover{background-color:#5e78d5}footer ul.list-social li.social-github a{background-color:#24292e}footer ul.list-social li.social-github a:hover{background-color:#191c20}footer ul.list-social li.social-mail a{background-color:#dd4b39}footer ul.list-social li.social-mail a:hover{background-color:#d73925}.bg-primary{background:#333;background:-webkit-gradient(linear,left top,left bottom,from(#333),to(#262626));background:linear-gradient(#333,#262626)}.text-primary{color:#333}.no-gutter>[class*=col-]{padding-right:0;padding-left:0} |
||||
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,2 @@ |
|||||
|
<?xml version="1.0" encoding="utf-8"?> |
||||
|
<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig> |
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,41 @@ |
|||||
|
{ |
||||
|
"name": "App", |
||||
|
"icons": [ |
||||
|
{ |
||||
|
"src": "\/android-icon-36x36.png", |
||||
|
"sizes": "36x36", |
||||
|
"type": "image\/png", |
||||
|
"density": "0.75" |
||||
|
}, |
||||
|
{ |
||||
|
"src": "\/android-icon-48x48.png", |
||||
|
"sizes": "48x48", |
||||
|
"type": "image\/png", |
||||
|
"density": "1.0" |
||||
|
}, |
||||
|
{ |
||||
|
"src": "\/android-icon-72x72.png", |
||||
|
"sizes": "72x72", |
||||
|
"type": "image\/png", |
||||
|
"density": "1.5" |
||||
|
}, |
||||
|
{ |
||||
|
"src": "\/android-icon-96x96.png", |
||||
|
"sizes": "96x96", |
||||
|
"type": "image\/png", |
||||
|
"density": "2.0" |
||||
|
}, |
||||
|
{ |
||||
|
"src": "\/android-icon-144x144.png", |
||||
|
"sizes": "144x144", |
||||
|
"type": "image\/png", |
||||
|
"density": "3.0" |
||||
|
}, |
||||
|
{ |
||||
|
"src": "\/android-icon-192x192.png", |
||||
|
"sizes": "192x192", |
||||
|
"type": "image\/png", |
||||
|
"density": "4.0" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
@ -0,0 +1,54 @@ |
|||||
|
var gulp = require('gulp'); |
||||
|
var sass = require('gulp-sass'); |
||||
|
var cleanCSS = require('gulp-clean-css'); |
||||
|
var rename = require("gulp-rename"); |
||||
|
var autoprefixer = require('gulp-autoprefixer'); |
||||
|
var browserSync = require('browser-sync').create(); |
||||
|
|
||||
|
// Compile SCSS
|
||||
|
gulp.task('css:compile', function() { |
||||
|
return gulp.src('./scss/**/*.scss') |
||||
|
.pipe(sass.sync({ |
||||
|
outputStyle: 'expanded' |
||||
|
}).on('error', sass.logError)) |
||||
|
.pipe(autoprefixer({ |
||||
|
browsers: ['last 2 versions'], |
||||
|
cascade: false |
||||
|
})) |
||||
|
.pipe(gulp.dest('./css')) |
||||
|
}); |
||||
|
|
||||
|
// Minify CSS
|
||||
|
gulp.task('css:minify', ['css:compile'], function() { |
||||
|
return gulp.src([ |
||||
|
'./css/*.css', |
||||
|
'!./css/*.min.css' |
||||
|
]) |
||||
|
.pipe(cleanCSS()) |
||||
|
.pipe(rename({ |
||||
|
suffix: '.min' |
||||
|
})) |
||||
|
.pipe(gulp.dest('./css')) |
||||
|
.pipe(browserSync.stream()); |
||||
|
}); |
||||
|
|
||||
|
// CSS
|
||||
|
gulp.task('css', ['css:compile', 'css:minify']); |
||||
|
|
||||
|
// Default task
|
||||
|
gulp.task('default', ['css']); |
||||
|
|
||||
|
// Configure the browserSync task
|
||||
|
gulp.task('browserSync', function() { |
||||
|
browserSync.init({ |
||||
|
server: { |
||||
|
baseDir: "./" |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
// Dev task
|
||||
|
gulp.task('dev', ['css', 'browserSync'], function() { |
||||
|
gulp.watch('./scss/*.scss', ['css']); |
||||
|
gulp.watch('./*.html', browserSync.reload); |
||||
|
}); |
||||
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 475 KiB |
@ -0,0 +1,102 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
|
||||
|
<head> |
||||
|
|
||||
|
<meta charset="utf-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
||||
|
<meta name="description" content=""> |
||||
|
<meta name="author" content=""> |
||||
|
|
||||
|
<!-- Favicon --> |
||||
|
<link rel="apple-touch-icon" sizes="57x57" href="favicon/apple-icon-57x57.png"> |
||||
|
<link rel="apple-touch-icon" sizes="60x60" href="favicon/apple-icon-60x60.png"> |
||||
|
<link rel="apple-touch-icon" sizes="72x72" href="favicon/apple-icon-72x72.png"> |
||||
|
<link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-icon-76x76.png"> |
||||
|
<link rel="apple-touch-icon" sizes="114x114" href="favicon/apple-icon-114x114.png"> |
||||
|
<link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-icon-120x120.png"> |
||||
|
<link rel="apple-touch-icon" sizes="144x144" href="favicon/apple-icon-144x144.png"> |
||||
|
<link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-icon-152x152.png"> |
||||
|
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-icon-180x180.png"> |
||||
|
<link rel="icon" type="image/png" sizes="192x192" href="favicon/android-icon-192x192.png"> |
||||
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png"> |
||||
|
<link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96x96.png"> |
||||
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png"> |
||||
|
<link rel="manifest" href="favicon/manifest.json"> |
||||
|
<link rel="shortcut icon" href="favicon/favicon.ico" type="image/x-icon"> |
||||
|
<link rel="icon" href="favicon/favicon.ico" type="image/x-icon"> |
||||
|
<meta name="msapplication-TileColor" content="#ffffff"> |
||||
|
<meta name="msapplication-TileImage" content="favicon/ms-icon-144x144.png"> |
||||
|
<meta name="theme-color" content="#ffffff"> |
||||
|
|
||||
|
<title>mTHMMY</title> |
||||
|
|
||||
|
<!-- Bootstrap core CSS --> |
||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> |
||||
|
|
||||
|
<!-- Custom fonts --> |
||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> |
||||
|
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> |
||||
|
|
||||
|
<!-- Plugin CSS --> |
||||
|
<link rel="stylesheet" href="device-mockups/device-mockups.min.css"> |
||||
|
|
||||
|
<!-- Custom styles --> |
||||
|
<link href="css/style.min.css" rel="stylesheet"> |
||||
|
|
||||
|
</head> |
||||
|
|
||||
|
<body id="page-top"> |
||||
|
<header class="masthead"> |
||||
|
<div class="container h-100"> |
||||
|
<div class="row h-100"> |
||||
|
<div class="col-lg-7 my-auto"> |
||||
|
<div class="header-content"> |
||||
|
<h1 class="mb-5">mTHMMY is a mobile app for thmmy.gr!</h1> |
||||
|
<div class="mx-auto" id="badge"> |
||||
|
<a href="https://play.google.com/store/apps/details?id=gr.thmmy.mthmmy&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img src="img/google-play-badge.svg" alt="Download"></a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-lg-5 my-auto"> |
||||
|
<div class="device-container"> |
||||
|
<img src="img/mockup.png" class="img-fluid" alt=""> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</header> |
||||
|
|
||||
|
<footer> |
||||
|
<div class="container"> |
||||
|
<ul class="list-inline list-social"> |
||||
|
<li class="list-inline-item social-github"> |
||||
|
<a href="https://github.com/ThmmyNoLife/mTHMMY"> |
||||
|
<i class="fab fa-github"></i> |
||||
|
</a> |
||||
|
</li> |
||||
|
<li class="list-inline-item social-discord"> |
||||
|
<a href="https://discord.gg/CVt3yrn"> |
||||
|
<i class="fab fa-discord"></i> |
||||
|
</a> |
||||
|
</li> |
||||
|
<li class="list-inline-item social-mail"> |
||||
|
<a href="mailto:thmmynolife@gmail.com"> |
||||
|
<i class="fa fa-envelope"></i> |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<p>© Thmmy No Life 2018. All Rights Reserved.</p> |
||||
|
<ul class="list-inline"> |
||||
|
<li class="list-inline-item"> |
||||
|
<a href="https://github.com/ThmmyNoLife/mTHMMY/blob/develop/PRIVACY.md">Privacy Policy</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</footer> |
||||
|
|
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,24 @@ |
|||||
|
{ |
||||
|
"title": "mTHMMY", |
||||
|
"name": "mthmmy", |
||||
|
"version": "0.1.0", |
||||
|
"description": "Landing page for mTHMMY.", |
||||
|
"private": true, |
||||
|
"author": "Thmmy No Life", |
||||
|
"repository": { |
||||
|
"type": "git", |
||||
|
"url": "https://github.com/ThmmyNoLife/thmmynolife.github.io.git" |
||||
|
}, |
||||
|
"bugs": { |
||||
|
"url": "https://github.com/ThmmyNoLife/thmmynolife.github.io/issues", |
||||
|
"email": "thmmynolife@gmail.com" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"browser-sync": "^2.26.0", |
||||
|
"gulp": "^3.9.1", |
||||
|
"gulp-autoprefixer": "6.0.0", |
||||
|
"gulp-clean-css": "3.10.0", |
||||
|
"gulp-rename": "1.4.0", |
||||
|
"gulp-sass": "4.0.1" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,15 @@ |
|||||
|
// Bootstrap overrides for this template |
||||
|
.bg-primary { |
||||
|
background: $theme-primary; |
||||
|
background: -webkit-linear-gradient($theme-primary, darken($theme-primary, 5%)); |
||||
|
background: linear-gradient($theme-primary, darken($theme-primary, 5%)); |
||||
|
} |
||||
|
|
||||
|
.text-primary { |
||||
|
color: $theme-primary; |
||||
|
} |
||||
|
|
||||
|
.no-gutter > [class*='col-'] { |
||||
|
padding-right: 0; |
||||
|
padding-left: 0; |
||||
|
} |
||||
@ -0,0 +1,64 @@ |
|||||
|
// Styling for the footer |
||||
|
footer { |
||||
|
padding: 25px 0; |
||||
|
text-align: center; |
||||
|
color: $theme-tertiary; |
||||
|
background-color: $theme-secondary; |
||||
|
p { |
||||
|
font-size: 12px; |
||||
|
margin: 0; |
||||
|
} |
||||
|
ul { |
||||
|
margin-bottom: 0; |
||||
|
li { |
||||
|
a { |
||||
|
font-size: 12px; |
||||
|
color: fade-out(white, .7); |
||||
|
&:hover, |
||||
|
&:focus, |
||||
|
&:active, |
||||
|
&.active { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
&.list-social { |
||||
|
margin-bottom: 25px; |
||||
|
li { |
||||
|
a { |
||||
|
font-size: 40px; |
||||
|
line-height: 80px; |
||||
|
display: block; |
||||
|
width: 80px; |
||||
|
height: 80px; |
||||
|
color: white; |
||||
|
border-radius: 100%; |
||||
|
} |
||||
|
&.social-discord { |
||||
|
a { |
||||
|
background-color: $social-discord; |
||||
|
&:hover { |
||||
|
background-color: darken($social-discord, 5%); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
&.social-github { |
||||
|
a { |
||||
|
background-color: $social-github; |
||||
|
&:hover { |
||||
|
background-color: darken($social-github, 5%); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
&.social-mail { |
||||
|
a { |
||||
|
background-color: $social-mail; |
||||
|
&:hover { |
||||
|
background-color: darken($social-mail, 5%); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,41 @@ |
|||||
|
// Global styling |
||||
|
html, |
||||
|
body { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
@include body-font; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
color: $theme-primary; |
||||
|
@include transition-all; |
||||
|
&:hover, |
||||
|
&:focus { |
||||
|
color: darken($theme-primary, 10%); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
h1, |
||||
|
h2, |
||||
|
h3, |
||||
|
h4, |
||||
|
h5, |
||||
|
h6 { |
||||
|
@include heading-font; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
font-size: 18px; |
||||
|
line-height: 1.5; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
section { |
||||
|
padding: 100px 0; |
||||
|
h2 { |
||||
|
font-size: 50px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,49 @@ |
|||||
|
// Styling for the masthead |
||||
|
header.masthead { |
||||
|
position: relative; |
||||
|
|
||||
|
width: 100%; |
||||
|
padding-top: 150px; |
||||
|
padding-bottom: 100px; |
||||
|
|
||||
|
color: white; |
||||
|
background: $theme-primary; |
||||
|
.header-content { |
||||
|
max-width: 500px; |
||||
|
margin-bottom: 100px; |
||||
|
margin-right: auto; |
||||
|
margin-left: auto; |
||||
|
text-align: center; |
||||
|
h1 { |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
} |
||||
|
.device-container { |
||||
|
max-width: 325px; |
||||
|
margin-right: auto; |
||||
|
margin-left: auto; |
||||
|
.screen img { |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
} |
||||
|
@media (min-width: 992px) { |
||||
|
height: 100vh; |
||||
|
min-height: 775px; |
||||
|
padding-top: 0; |
||||
|
padding-bottom: 0; |
||||
|
.header-content { |
||||
|
margin-bottom: 0; |
||||
|
|
||||
|
text-align: center; |
||||
|
h1 { |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
} |
||||
|
.device-container { |
||||
|
max-width: 325px; |
||||
|
} |
||||
|
} |
||||
|
#badge { |
||||
|
max-width: 300px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,72 @@ |
|||||
|
// Mixins |
||||
|
@mixin transition-all() { |
||||
|
-webkit-transition: all .35s; |
||||
|
-moz-transition: all .35s; |
||||
|
transition: all .35s; |
||||
|
} |
||||
|
|
||||
|
@mixin background-cover() { |
||||
|
-webkit-background-size: cover; |
||||
|
-moz-background-size: cover; |
||||
|
-o-background-size: cover; |
||||
|
background-size: cover; |
||||
|
} |
||||
|
|
||||
|
@mixin button-variant($color, $background, $border) { |
||||
|
color: $color; |
||||
|
border-color: $border; |
||||
|
background-color: $background; |
||||
|
&:focus, |
||||
|
&.focus { |
||||
|
color: $color; |
||||
|
border-color: darken($border, 25%); |
||||
|
background-color: darken($background, 10%); |
||||
|
} |
||||
|
&:hover { |
||||
|
color: $color; |
||||
|
border-color: darken($border, 12%); |
||||
|
background-color: darken($background, 10%); |
||||
|
} |
||||
|
&:active, |
||||
|
&.active, |
||||
|
.open > &.dropdown-toggle { |
||||
|
color: $color; |
||||
|
border-color: darken($border, 12%); |
||||
|
background-color: darken($background, 10%); |
||||
|
&:hover, |
||||
|
&:focus, |
||||
|
&.focus { |
||||
|
color: $color; |
||||
|
border-color: darken($border, 25%); |
||||
|
background-color: darken($background, 17%); |
||||
|
} |
||||
|
} |
||||
|
&:active, |
||||
|
&.active, |
||||
|
.open > &.dropdown-toggle { |
||||
|
background-image: none; |
||||
|
} |
||||
|
&.disabled, |
||||
|
&[disabled], |
||||
|
fieldset[disabled] & { |
||||
|
&:hover, |
||||
|
&:focus, |
||||
|
&.focus { |
||||
|
border-color: $border; |
||||
|
background-color: $background; |
||||
|
} |
||||
|
} |
||||
|
.badge { |
||||
|
color: $background; |
||||
|
background-color: $color; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin heading-font { |
||||
|
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; |
||||
|
font-weight: 200; |
||||
|
} |
||||
|
|
||||
|
@mixin body-font { |
||||
|
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; |
||||
|
} |
||||
@ -0,0 +1,9 @@ |
|||||
|
// Variables |
||||
|
|
||||
|
$theme-primary: #333333; |
||||
|
$theme-secondary: #3C3C3C; |
||||
|
$theme-tertiary: #26A69A; |
||||
|
|
||||
|
$social-github: #24292e; |
||||
|
$social-discord: #7289da; |
||||
|
$social-mail: #dd4b39; |
||||
@ -0,0 +1,6 @@ |
|||||
|
@import "variables.scss"; |
||||
|
@import "mixins.scss"; |
||||
|
@import "global.scss"; |
||||
|
@import "masthead.scss"; |
||||
|
@import "footer.scss"; |
||||
|
@import "bootstrap-overrides.scss"; |
||||
Loading…
Reference in new issue