forked from cybrespace/mastodon
		
	Adjust public hashtag pages (#5357)
This commit is contained in:
		
							parent
							
								
									8125fdc19f
								
							
						
					
					
						commit
						b3b4b5a2eb
					
				
					 2 changed files with 90 additions and 68 deletions
				
			
		| 
						 | 
				
			
			@ -704,7 +704,6 @@
 | 
			
		|||
    .features #mastodon-timeline {
 | 
			
		||||
      height: 70vh;
 | 
			
		||||
      width: 100%;
 | 
			
		||||
      min-width: 330px;
 | 
			
		||||
      margin-bottom: 50px;
 | 
			
		||||
 | 
			
		||||
      .column {
 | 
			
		||||
| 
						 | 
				
			
			@ -718,6 +717,23 @@
 | 
			
		|||
  }
 | 
			
		||||
 | 
			
		||||
  &.tag-page {
 | 
			
		||||
    .features {
 | 
			
		||||
      padding: 30px 0;
 | 
			
		||||
 | 
			
		||||
      .container {
 | 
			
		||||
        max-width: 820px;
 | 
			
		||||
 | 
			
		||||
        #mastodon-timeline {
 | 
			
		||||
          margin-right: 0;
 | 
			
		||||
          border-top-right-radius: 0;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .about-mastodon {
 | 
			
		||||
          .about-hashtag {
 | 
			
		||||
            background: darken($ui-base-color, 4%);
 | 
			
		||||
            padding: 0 20px 20px 30px;
 | 
			
		||||
            border-radius: 0 5px 5px 0;
 | 
			
		||||
 | 
			
		||||
            .brand {
 | 
			
		||||
              padding-top: 20px;
 | 
			
		||||
              margin-bottom: 20px;
 | 
			
		||||
| 
						 | 
				
			
			@ -728,74 +744,68 @@
 | 
			
		|||
              }
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
    .container {
 | 
			
		||||
      max-width: 690px;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .cta {
 | 
			
		||||
      margin: 40px 0;
 | 
			
		||||
      margin-bottom: 80px;
 | 
			
		||||
 | 
			
		||||
      .button {
 | 
			
		||||
        margin-right: 4px;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .about-mastodon {
 | 
			
		||||
      max-width: 330px;
 | 
			
		||||
 | 
			
		||||
            p {
 | 
			
		||||
              strong {
 | 
			
		||||
                color: $ui-secondary-color;
 | 
			
		||||
                font-weight: 700;
 | 
			
		||||
              }
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            .cta {
 | 
			
		||||
              margin: 0;
 | 
			
		||||
 | 
			
		||||
              .button {
 | 
			
		||||
                margin-right: 4px;
 | 
			
		||||
              }
 | 
			
		||||
            }
 | 
			
		||||
          }
 | 
			
		||||
 | 
			
		||||
          .features-list {
 | 
			
		||||
            margin-left: 30px;
 | 
			
		||||
            margin-right: 10px;
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    @media screen and (max-width: 675px) {
 | 
			
		||||
      .features {
 | 
			
		||||
        padding: 10px 0;
 | 
			
		||||
 | 
			
		||||
        .container {
 | 
			
		||||
          display: flex;
 | 
			
		||||
          flex-direction: column;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      .features {
 | 
			
		||||
        padding: 20px 0;
 | 
			
		||||
          #mastodon-timeline {
 | 
			
		||||
            order: 2;
 | 
			
		||||
            flex: 0 0 auto;
 | 
			
		||||
            height: 60vh;
 | 
			
		||||
            margin-bottom: 20px;
 | 
			
		||||
            border-top-right-radius: 4px;
 | 
			
		||||
          }
 | 
			
		||||
 | 
			
		||||
          .about-mastodon {
 | 
			
		||||
            order: 1;
 | 
			
		||||
            flex: 0 0 auto;
 | 
			
		||||
            max-width: 100%;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      #mastodon-timeline {
 | 
			
		||||
        order: 2;
 | 
			
		||||
        flex: 0 0 auto;
 | 
			
		||||
        height: 60vh;
 | 
			
		||||
      }
 | 
			
		||||
            .about-hashtag {
 | 
			
		||||
              background: unset;
 | 
			
		||||
              padding: 0;
 | 
			
		||||
              border-radius: 0;
 | 
			
		||||
 | 
			
		||||
              .cta {
 | 
			
		||||
                margin: 20px 0;
 | 
			
		||||
        margin-bottom: 30px;
 | 
			
		||||
              }
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            .features-list {
 | 
			
		||||
              display: none;
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
      .stripe {
 | 
			
		||||
        display: none;
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
  .stripe {
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    height: 360px;
 | 
			
		||||
    overflow: hidden;
 | 
			
		||||
    background: darken($ui-base-color, 4%);
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    z-index: -1;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -7,12 +7,12 @@
 | 
			
		|||
  = render 'og'
 | 
			
		||||
 | 
			
		||||
.landing-page.tag-page
 | 
			
		||||
  .stripe
 | 
			
		||||
  .features
 | 
			
		||||
    .container
 | 
			
		||||
      #mastodon-timeline{ data: { props: Oj.dump(default_props.merge(hashtag: @tag.name)) } }
 | 
			
		||||
 | 
			
		||||
      .about-mastodon
 | 
			
		||||
        .about-hashtag
 | 
			
		||||
          .brand
 | 
			
		||||
            = link_to root_url do
 | 
			
		||||
              = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
 | 
			
		||||
| 
						 | 
				
			
			@ -24,12 +24,24 @@
 | 
			
		|||
            = link_to t('about.learn_more'), root_url, class: 'button button-alternative'
 | 
			
		||||
 | 
			
		||||
        .features-list
 | 
			
		||||
          .features-list__row
 | 
			
		||||
            .text
 | 
			
		||||
              %h6= t 'about.features.real_conversation_title'
 | 
			
		||||
              = t 'about.features.real_conversation_body'
 | 
			
		||||
            .visual
 | 
			
		||||
              = fa_icon 'fw comments'
 | 
			
		||||
          .features-list__row
 | 
			
		||||
            .text
 | 
			
		||||
              %h6= t 'about.features.not_a_product_title'
 | 
			
		||||
              = t 'about.features.not_a_product_body'
 | 
			
		||||
            .visual
 | 
			
		||||
              = fa_icon 'fw users'
 | 
			
		||||
          .features-list__row
 | 
			
		||||
            .text
 | 
			
		||||
              %h6= t 'about.features.within_reach_title'
 | 
			
		||||
              = t 'about.features.within_reach_body'
 | 
			
		||||
            .visual
 | 
			
		||||
              = fa_icon 'fw mobile'
 | 
			
		||||
          .features-list__row
 | 
			
		||||
            .text
 | 
			
		||||
              %h6= t 'about.features.humane_approach_title'
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		
		Reference in a new issue