Fixed some cosmetic bugs on smaller devices.

This commit is contained in:
Simon Busborg
2016-10-24 12:14:52 +02:00
parent 82ba42b1aa
commit c083576ef3
7 changed files with 97 additions and 52 deletions
@@ -260,12 +260,12 @@
.topic {
flex: 0 0 100%;
margin-bottom: .2rem;
word-break: break-all;
margin-bottom: 15px;
@media (min-width: $md) {
flex: 0 0 70%;
padding-right: 3px;
flex: 1 1 70%;
padding-right: 10px;
margin-bottom: 0;
}
}
@@ -276,7 +276,8 @@
flex: 0 0 100%;
@media (min-width: $md) {
flex: 0 0 30%;
flex: 1 1 30%;
margin-left: auto;
flex-direction: column;
}
@@ -287,7 +288,7 @@
margin: 0 .5rem 0 0;
@media (min-width: $md) {
margin: 0 0 .5rem 0;
margin: 0 0 .5rem auto;
}
}
}
@@ -7,9 +7,9 @@
input {
-webkit-appearance: none;
border-radius: 0;
border: 1px solid darken(whitesmoke, 15%);
padding: 20px 6px 20px 6px;
padding: 20px 10px 20px 10px;
outline: none;
display: block;
width: 100%;
@@ -529,6 +529,8 @@
font-size: .7rem;
letter-spacing: .5px;
text-align: center;
transform: translate(-50%, -50%);
cursor: pointer;
@@ -63,11 +63,11 @@ html {
display: inline-block;
overflow: hidden;
width: 100%;
max-width: $sb-desktop / 100% * $sb-width;
text-align: center;
@media (min-width: $md) {
float: right;
max-width: $sb-desktop / 100% * $sb-width;
}
}
}
@@ -80,7 +80,7 @@ html {
padding-bottom: 200px;
@media (max-width:992px) {
display: block;
width: 100%;
@@ -96,10 +96,10 @@ html {
@media (min-width: 2100px) {
width:100% - $sb-retina-width;
}
.main-content {
display: block;
width: 100%;
width: 100%;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
@@ -173,7 +173,7 @@ html {
cursor: pointer;
}
@media (max-width: 992px) {
border-left: none;
border-left: none;
background-color: lighten($color-our,10%);
padding-top: 10px;
padding-bottom: 10px;
+68 -36
View File
@@ -91,16 +91,20 @@
&-head {
flex-direction: row;
display: none;
padding: 20px 15px;
border-bottom: 1px solid whitesmoke;
@media (min-width: $md) {
display: flex;
font-size: .8rem;
text-transform: uppercase;
font-weight: bold;
padding: 20px 15px;
border-bottom: 1px solid whitesmoke;
letter-spacing: .5px;
font-size: .8rem;
text-transform: uppercase;
font-weight: bold;
letter-spacing: .5px;
}
}
@@ -112,19 +116,6 @@
display: flex;
flex-direction: column;
small {
color: darken($color-space, 25%);
font-size: 1rem;
margin-bottom: .2rem;
}
span {
font-size: .8rem;
color: $color-space;
}
}
}
@@ -135,18 +126,25 @@
padding: 25px 15px;
display: flex;
flex-direction: row;
align-items: center;
flex-direction: column;
align-items: flex-start;
border-bottom: 1px solid rgba($color-space, .11);
@media (min-width: $md) {
flex-direction: row;
align-items: center;
}
.topic {
font-size: .95rem;
font-size: 1.15rem;
line-height: 1.3;
order: 2;
h3 {
word-break: break-all;
font-weight: 600;
}
a {
@@ -181,8 +179,9 @@
@media (min-width: $md) {
font-size: 1.15rem;
line-height: 1.3;
h3 {
font-weight: 100;
}
span {
font-size: .9rem;
@@ -220,35 +219,62 @@
.topic {
flex: 0 0 50%;
margin-right: 5%;
order: 2;
margin: 10px 0;
@media (min-width: $md) {
flex: 0 0 50%;
margin-right: 10%;
margin: 0 10% 0 0;
order: 1;
}
}
.category {
flex: 0 0 30%;
margin-right: 5%;
order: 1;
@media (min-width: $md) {
flex: 0 0 28%;
margin-right: 2%;
order: 2;
}
}
.posts {
flex: 0 0 10%;
text-align: center;
order: 3;
@media (max-width: $md) {
transform: translate(-6px, 0);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: .8rem;
small {
margin-right: 3px;
margin-bottom: 0;
font-weight: normal;
font-size: .8rem;
color: $color-black;
}
@media (min-width: $md) {
text-align: center;
flex-direction: column;
small {
margin-right: 0px;
margin-bottom: 5px;
font-weight: bold;
font-size: 1rem;
}
}
}
}
@@ -295,10 +321,14 @@
color: #4f5f63;
text-transform: uppercase;
font-weight: 700;
letter-spacing: .2px;
display: block;
margin-bottom: .5rem;
text-align: left;
line-height: 1.2;
@media (min-width: $md) {
letter-spacing: .2px;
}
}
.options {
@@ -372,6 +402,8 @@
transition: color 150ms ease;
font-size: .7rem;
text-align: center;
@media(min-width: $md) {
font-size: .9rem;
}
@@ -343,9 +343,16 @@
flex: 1 1 100%;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
@media (min-width: 768px) {
flex: 1 1 47%;
padding: 0 3% 0 0;
align-items: flex-start;
text-align: left;
}
}
@@ -45,6 +45,7 @@ section.forum {
.forum-thread {
flex: 0 0 100%;
display: flex;
overflow: hidden;
@media (min-width: $md) {
flex: 1 0 49%;
@@ -77,6 +78,8 @@ section.forum {
flex-direction: column;
flex: 1 0 75%;
overflow: hidden;
padding: 0 10px 0 0;
@media (min-width: $md) {
@@ -89,6 +92,7 @@ section.forum {
.category {
margin: .5rem 0 0;
max-width: 95%;
span {
font-size: .75rem;
@@ -132,14 +136,14 @@ section.forum {
padding: 25px;
margin-bottom: 30px;
border: 1px solid darken(#f6f6f6, 5%);
transition: box-shadow .2s;
transition: box-shadow .2s ease, border-color .2s ease;
text-decoration: none;
display: flex;
align-items: center;
&:hover {
border-color: transparent;
border-color: white;
@include box_shadow(2);
}
@@ -182,7 +186,6 @@ section.forum {
color: #000;
line-height: 1.3;
font-size: 1rem;
word-break: break-all;
@media (min-width: $md) {
font-size: 1.1rem;