Commit 4a18c10a authored by Jarek Ostrowski's avatar Jarek Ostrowski

Change styling on multiple things

parent 8d8f930d
Pipeline #58458438 passed with stage
in 3 minutes and 49 seconds
......@@ -39,4 +39,5 @@ testem.log
# System Files
.DS_Store
.env
Thumbs.db
......@@ -2561,6 +2561,11 @@
"is-obj": "1.0.1"
}
},
"dotenv": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-7.0.0.tgz",
"integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g=="
},
"duplexer": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
......
......@@ -15,6 +15,7 @@ var crypto = require('crypto')
var cloudinary = require('cloudinary');
var os = require('os')
var Twitter = require('twitter');
require('dotenv').config();
var twitter = new Twitter({
consumer_key: process.env.TWITTER_CONSUMER_KEY,
......
......@@ -117,11 +117,11 @@
<div class="right">
<div class="beta-image mobile-banner" [style.background]="getBetaThumbnail(beta?.thumbnail) | safeStyle"></div>
<div class="beta-info flex-container flex-column">
<div class="flex-container space-between full-width">
<div class="flex-container full-width">
<h2 class="beta-name">{{ beta?.name }}</h2>
<div *ngIf="usersService?.user && usersService?.user._id === beta?.postedBy._id" class="not-beta-owner flex-container">
<div (click)="editingPost = true" class="button-edit flex-container justify-center align-center" target="_blank">
<p>Edit details</p>
<p>Edit</p>
</div>
</div>
</div>
......@@ -132,7 +132,7 @@
</a>
<p class="beta-request">{{ beta?.request }}</p>
<a (click)="addLinkClickValue(beta)" class="beta-link button-primary" [href]="beta?.link" target="_blank">
<p>Check out {{ beta?.name }}</p>
<p>Open {{ beta?.name }}</p>
</a>
<!-- <a href="/submit" class="margin-top20 font-small">
<p>Have a site? Submit it and start getting feedback!</p>
......
@import '~sass/variables';
.beta-container {
width: calc(100% - 200px);
margin: 140px auto;
width: calc(100% - 280px);
margin: 160px auto;
margin-top: 60px;
}
.character-count {
margin: auto;
......@@ -43,13 +44,12 @@
box-sizing: border-box;
}
.left {
width: calc(100% - 500px);
width: calc(100% - 480px);
}
.right {
position: fixed;
right: 160px;
top: 140px;
width: 380px;
right: 140px;
width: 420px;
flex-shrink: 0;
}
.review-about {
......@@ -106,7 +106,7 @@
}
.beta-image {
width: 100%;
height: 400px;
height: 380px;
border-radius: $borderRadius;
box-sizing: border-box;
border: $border;
......
<app-background-animation></app-background-animation>
<div class="hero-container full-width flex-container flex-column justify-center align-center">
<h1>What do you think of my site?</h1>
<p>It's something we all want to know. Now you can find out.</p>
<div routerLink="/submit" class="button-primary margin-top20">Submit your site or app</div>
</div>
<div class="categories-container full-width flex-container align-center" [class.hidden]="hideCategories">
<div *ngFor="let category of categories" (click)="selectCategory(category)" [class.active-category]="category.selected" class="category flex-container full-height full-width justify-center align-center">
<div class="categories-container" [class.hidden]="hideCategories">
<div *ngFor="let category of categories" (click)="selectCategory(category)" [class.active-category]="category.selected" class="category">
<p>{{ category.name }}</p>
</div>
<!-- <div class="filters flex-container space-between flex-shrink">
<p *ngFor="let filter of filters" class="filter" [class.active-category]="filter.selected" (click)="selectFilter(filter)">{{ filter.name }}</p>
</div> -->
</div>
<!-- <div class="hero-container full-width flex-container flex-column justify-center align-center">
<h1>What do you think of my site?</h1>
<p>It's something we all want to know. Now you can find out.</p>
<div routerLink="/submit" class="button-primary margin-top20">Submit your site or app</div>
</div> -->
<div *ngIf="!filteredBetas.length" class="no-betas flex-container flex-column full-width justify-center align-center">
<h1 class="emoji">😕</h1>
<h3>Nothing fits these categories</h3>
......
......@@ -18,7 +18,7 @@
width: calc(100% - 280px);
margin: 160px auto;
// margin-top: 186px;
margin-top: 0;
margin-top: 80px;
position: relative;
}
.no-betas {
......@@ -31,7 +31,9 @@
margin: 0;
}
.categories-container {
position: fixed;
display: flex;
width: 100%;
position: sticky;
top: 70px;
left: 0;
box-sizing: border-box;
......@@ -41,24 +43,28 @@
z-index: 100;
background: white;
transition: .4s cubic-bezier(0,0,0,1);
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.categories {
width: 100%;
height: 100%;
}
.category,
.filter {
cursor: pointer;
padding: 2px 8px;
box-sizing: border-box;
text-align: center;
color: #a9a9a9;
width: 100%;
height: 100%;
user-select: none;
min-width: 140px;
.category {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
cursor: pointer;
padding: 2px 8px;
box-sizing: border-box;
text-align: center;
color: #a9a9a9;
width: 100%;
height: 100%;
user-select: none;
min-width: 140px;
}
@media all and (max-width: 760px) {
height: 60px;
}
}
.hidden {
transform: translateY(-40px);
......@@ -71,19 +77,20 @@
color: $darkGray;
}
.active-category {
background: $superSuperLightGray;
color: black;
color: black !important;
position: relative;
&::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
background: black;
height: 2px;
z-index: 100;
width: 100%;
}
}
// .active-category::after {
// content: '';
// position: absolute;
// left: 0;
// bottom: 0px;
// background: black;
// height: 1px;
// width: 100%;
// }
.filters {
width: 260px;
text-align: right;
......
@import '~sass/variables';
.about-container {
margin: 140px auto;
margin: 160px auto;
margin-top: 80px;
width: 600px;
font-size: 1.1em;
padding: 20px;
......
......@@ -15,7 +15,7 @@
text-overflow: ellipsis;
}
.right {
margin-top: 70px;
margin-top: 32px;
margin-left: 300px;
width: calc(100% - 240px);
}
......@@ -56,7 +56,6 @@
}
.profile-content-container {
width: calc(100% - 100px);
margin-top: 110px;
}
@keyframes showSuccess {
20% {
......
......@@ -25,7 +25,8 @@ form {
margin-right: 6px;
}
.submit-container {
margin: 140px auto;
margin: 160px auto;
margin-top: 80px;
margin-bottom: 300px;
width: 600px;
max-width: 600px;
......
......@@ -4,8 +4,8 @@
<title>Path 3</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Profile" transform="translate(-164.000000, -551.000000)" stroke="#1BBD2E" stroke-width="2">
<g id="Page-1" stroke="none" stroke-width="3" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Profile" transform="translate(-164.000000, -551.000000)" stroke="#1BBD2E" stroke-width="3">
<polyline id="Path-3" points="165.624303 564.95994 174.016895 573.851663 192.207255 552.907946"></polyline>
</g>
</g>
......
......@@ -11,7 +11,7 @@ $red: #E24545;
$redDark: #CC3D3D;
$green: #1BBD2E;
$clearBlack: rgba(0,0,0,.9);
$clearBlack: rgba(0,0,0,.8);
// Fonts //
......
......@@ -8,7 +8,7 @@ body {
}
header {
font-size: .85em;
position: fixed;
position: sticky;
left: 0;
top: 0;
height: 70px;
......@@ -274,7 +274,7 @@ textarea {
box-sizing: border-box;
}
.modal {
width: 600px;
width: 640px;
padding: 40px;
margin: auto;
margin-top: 70px;
......@@ -284,7 +284,7 @@ textarea {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 600px;
max-width: 640px;
position: relative;
}
.lightbox {
......@@ -299,6 +299,12 @@ textarea {
}
}
body::-webkit-scrollbar,
body::-webkit-scrollbar-track,
body::-webkit-scrollbar-thumb {
width: 0;
height: 0;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: rgba(0,0,0,.3);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment