Skip to content

Commit

Permalink
Adjust reponsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kikobeats
Kikobeats committed May 22, 2017
1 parent 093c62a commit bcacd0a
Showing 1 changed file with 14 additions and 11 deletions.
25 changes: 14 additions & 11 deletions docs/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -470,6 +470,14 @@ body.close .content {
}

@media screen and (max-width: 768px) {
section.cover blockquote {
margin: 2rem auto;
}

section.cover p {
margin: 0 !important;
}

.github-corner, .sidebar, .sidebar-toggle {
position: fixed;
}
Expand Down Expand Up @@ -598,7 +606,7 @@ section.cover .cover-main {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin: -20px 16px 0;
margin: -80px 16px 0;
text-align: center;
z-index: 1;
}
Expand All @@ -613,17 +621,15 @@ section.cover a, section.cover a:hover {

section.cover p {
line-height: 24px;
line-height: 1.5rem;
margin: 1em 0;
line-height: 1.75;
margin: 2rem 16rem 0 16rem;
}

section.cover h1 {
color: inherit;
font-size: 40px;
font-size: 2.5rem;
font-weight: 300;
margin: 10px 0 40px;
margin: .625rem 0 2.5rem;
position: relative;
text-align: center;
}
Expand Down Expand Up @@ -680,13 +686,10 @@ section.cover .cover-main>p:last-child a:last-child {
margin-right: 0;
}

section.cover .cover-main>p:last-child a:last-child:hover {
color: inherit;
opacity: .8;
}

section.cover .cover-main>p:last-child a:last-child:hover,
section.cover .cover-main>p:last-child a:hover {
color: inherit;
color: white;
opacity: .85;
}

section.cover blockquote>p>a {
Expand Down

2 comments on commit bcacd0a

@elrumordelaluz
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's an issue with in some beakpoints, see 👇
bp

@elrumordelaluz
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since I made the container to control the size, could be fixed, plying with width and height values (both always the same) here.

For example, a size relative to viewport:

.logo-container {
  /*...*/
  witdth: 20vw;
  height: 20vw;
  /* set a limit for large screens */
  max-width: 400px;
  max-height: 400px;
  /* could be applied also with min-height and min-width */
}

Please sign in to comment.