logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe git clone https://hacktivis.me/git/mastofe.git

about.scss (19750B)

    

  1. $maximum-width: 1235px;
  2. $fluid-breakpoint: $maximum-width + 20px;
  3. $column-breakpoint: 700px;
  4. $small-breakpoint: 960px;
  6. .container {
  7.   box-sizing: border-box;
  8.   max-width: $maximum-width;
  9.   margin: 0 auto;
  10.   position: relative;
  12.   @media screen and (max-width: $fluid-breakpoint) {
  13.     width: 100%;
  14.     padding: 0 10px;
  15.   }
  16. }
  18. .landing-page {
  19.   .grid {
  20.     display: grid;
  21.     grid-gap: 10px;
  22.     grid-template-columns: 1fr 2fr;
  23.     grid-auto-columns: 25%;
  24.     grid-auto-rows: max-content;
  26.     .column-0 {
  27.       display: none;
  28.     }
  30.     .column-1 {
  31.       grid-column: 1;
  32.       grid-row: 1;
  33.     }
  35.     .column-2 {
  36.       grid-column: 2;
  37.       grid-row: 1;
  38.     }
  40.     .column-3 {
  41.       grid-column: 3;
  42.       grid-row: 1 / 3;
  43.     }
  45.     .column-4 {
  46.       grid-column: 1 / 3;
  47.       grid-row: 2;
  48.     }
  49.   }
  51.   @media screen and (max-width: $small-breakpoint) {
  52.     .grid {
  53.       grid-template-columns: 40% 60%;
  55.       .column-0 {
  56.         display: none;
  57.       }
  59.       .column-1 {
  60.         grid-column: 1;
  61.         grid-row: 1;
  63.         &.non-preview .landing-page__forms {
  64.           height: 100%;
  65.         }
  66.       }
  68.       .column-2 {
  69.         grid-column: 2;
  70.         grid-row: 1 / 3;
  72.         &.non-preview {
  73.           grid-column: 2;
  74.           grid-row: 1;
  75.         }
  76.       }
  78.       .column-3 {
  79.         grid-column: 1;
  80.         grid-row: 2 / 4;
  81.       }
  83.       .column-4 {
  84.         grid-column: 2;
  85.         grid-row: 3;
  87.         &.non-preview {
  88.           grid-column: 1 / 3;
  89.           grid-row: 2;
  90.         }
  91.       }
  92.     }
  93.   }
  95.   @media screen and (max-width: $column-breakpoint) {
  96.     .grid {
  97.       grid-template-columns: auto;
  99.       .column-0 {
  100.         display: block;
  101.         grid-column: 1;
  102.         grid-row: 1;
  103.       }
  105.       .column-1 {
  106.         grid-column: 1;
  107.         grid-row: 3;
  109.         .brand {
  110.           display: none;
  111.         }
  112.       }
  114.       .column-2 {
  115.         grid-column: 1;
  116.         grid-row: 2;
  118.         .landing-page__logo,
  119.         .landing-page__call-to-action {
  120.           display: none;
  121.         }
  123.         &.non-preview {
  124.           grid-column: 1;
  125.           grid-row: 2;
  126.         }
  127.       }
  129.       .column-3 {
  130.         grid-column: 1;
  131.         grid-row: 5;
  132.       }
  134.       .column-4 {
  135.         grid-column: 1;
  136.         grid-row: 4;
  138.         &.non-preview {
  139.           grid-column: 1;
  140.           grid-row: 4;
  141.         }
  142.       }
  143.     }
  144.   }
  146.   .column-flex {
  147.     display: flex;
  148.     flex-direction: column;
  149.   }
  151.   .separator-or {
  152.     position: relative;
  153.     margin: 40px 0;
  154.     text-align: center;
  156.     &::before {
  157.       content: "";
  158.       display: block;
  159.       width: 100%;
  160.       height: 0;
  161.       border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
  162.       position: absolute;
  163.       top: 50%;
  164.       left: 0;
  165.     }
  167.     span {
  168.       display: inline-block;
  169.       background: $ui-base-color;
  170.       font-size: 12px;
  171.       font-weight: 500;
  172.       color: $ui-primary-color;
  173.       text-transform: uppercase;
  174.       position: relative;
  175.       z-index: 1;
  176.       padding: 0 8px;
  177.       cursor: default;
  178.     }
  179.   }
  181.   p,
  182.   li {
  183.     font-family: sans-serif;
  184.     font-size: 16px;
  185.     font-weight: 400;
  186.     font-size: 16px;
  187.     line-height: 30px;
  188.     margin-bottom: 12px;
  189.     color: $ui-primary-color;
  191.     a {
  192.       color: $ui-highlight-color;
  193.       text-decoration: underline;
  194.     }
  195.   }
  197.   .closed-registrations-message {
  198.     margin-top: 20px;
  200.     &,
  201.     p {
  202.       text-align: center;
  203.       font-size: 12px;
  204.       line-height: 18px;
  205.       color: $ui-primary-color;
  206.       margin-bottom: 0;
  208.       a {
  209.         color: $ui-highlight-color;
  210.         text-decoration: underline;
  211.       }
  212.     }
  214.     p:last-child {
  215.       margin-bottom: 0;
  216.     }
  217.   }
  219.   em {
  220.     display: inline;
  221.     margin: 0;
  222.     padding: 0;
  223.     font-weight: 700;
  224.     background: transparent;
  225.     font-family: inherit;
  226.     font-size: inherit;
  227.     line-height: inherit;
  228.     color: lighten($ui-primary-color, 10%);
  229.   }
  231.   h1 {
  232.     font-family: sans-serif;
  233.     font-size: 26px;
  234.     line-height: 30px;
  235.     font-weight: 500;
  236.     margin-bottom: 20px;
  237.     color: $ui-secondary-color;
  239.     small {
  240.       font-family: sans-serif;
  241.       display: block;
  242.       font-size: 18px;
  243.       font-weight: 400;
  244.       color: $ui-base-lighter-color;
  245.     }
  246.   }
  248.   h2 {
  249.     font-family: sans-serif;
  250.     font-size: 22px;
  251.     line-height: 26px;
  252.     font-weight: 500;
  253.     margin-bottom: 20px;
  254.     color: $ui-secondary-color;
  255.   }
  257.   h3 {
  258.     font-family: sans-serif;
  259.     font-size: 18px;
  260.     line-height: 24px;
  261.     font-weight: 500;
  262.     margin-bottom: 20px;
  263.     color: $ui-secondary-color;
  264.   }
  266.   h4 {
  267.     font-family: sans-serif;
  268.     font-size: 16px;
  269.     line-height: 24px;
  270.     font-weight: 500;
  271.     margin-bottom: 20px;
  272.     color: $ui-secondary-color;
  273.   }
  275.   h5 {
  276.     font-family: sans-serif;
  277.     font-size: 14px;
  278.     line-height: 24px;
  279.     font-weight: 500;
  280.     margin-bottom: 20px;
  281.     color: $ui-secondary-color;
  282.   }
  284.   h6 {
  285.     font-family: sans-serif;
  286.     font-size: 12px;
  287.     line-height: 24px;
  288.     font-weight: 500;
  289.     margin-bottom: 20px;
  290.     color: $ui-secondary-color;
  291.   }
  293.   ul,
  294.   ol {
  295.     margin-left: 20px;
  297.     &[type='a'] {
  298.       list-style-type: lower-alpha;
  299.     }
  301.     &[type='i'] {
  302.       list-style-type: lower-roman;
  303.     }
  304.   }
  306.   ul {
  307.     list-style: disc;
  308.   }
  310.   ol {
  311.     list-style: decimal;
  312.   }
  314.   li > ol,
  315.   li > ul {
  316.     margin-top: 6px;
  317.   }
  319.   hr {
  320.     width: 100%;
  321.     height: 0;
  322.     border: 0;
  323.     border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
  324.     margin: 20px 0;
  326.     &.spacer {
  327.       height: 1px;
  328.       border: 0;
  329.     }
  330.   }
  332.   .container-alt {
  333.     width: 100%;
  334.     box-sizing: border-box;
  335.     max-width: 800px;
  336.     margin: 0 auto;
  337.     word-wrap: break-word;
  338.   }
  340.   .header-wrapper {
  341.     padding-top: 15px;
  342.     background: $ui-base-color;
  343.     background: linear-gradient(150deg, lighten($ui-base-color, 8%), $ui-base-color);
  344.     position: relative;
  346.     &.compact {
  347.       background: $ui-base-color;
  348.       padding-bottom: 15px;
  350.       .hero .heading {
  351.         padding-bottom: 20px;
  352.         font-family: sans-serif;
  353.         font-size: 16px;
  354.         font-weight: 400;
  355.         font-size: 16px;
  356.         line-height: 30px;
  357.         color: $ui-primary-color;
  359.         a {
  360.           color: $ui-highlight-color;
  361.           text-decoration: underline;
  362.         }
  363.       }
  364.     }
  365.   }
  367.   .brand {
  368.     a {
  369.       padding-left: 0;
  370.       padding-right: 0;
  371.       color: $white;
  372.     }
  374.     img {
  375.       height: 32px;
  376.       position: relative;
  377.       top: 4px;
  378.       left: -10px;
  379.     }
  380.   }
  382.   .header {
  383.     line-height: 30px;
  384.     overflow: hidden;
  386.     .container-alt {
  387.       display: flex;
  388.       justify-content: space-between;
  389.     }
  391.     .links {
  392.       position: relative;
  393.       z-index: 4;
  395.       a {
  396.         display: flex;
  397.         justify-content: center;
  398.         align-items: center;
  399.         color: $ui-primary-color;
  400.         text-decoration: none;
  401.         padding: 12px 16px;
  402.         line-height: 32px;
  403.         font-family: sans-serif;
  404.         font-weight: 500;
  405.         font-size: 14px;
  407.         &:hover {
  408.           color: $ui-secondary-color;
  409.         }
  410.       }
  412.       ul {
  413.         list-style: none;
  414.         margin: 0;
  416.         li {
  417.           display: inline-block;
  418.           vertical-align: bottom;
  419.           margin: 0;
  421.           &:first-child a {
  422.             padding-left: 0;
  423.           }
  425.           &:last-child a {
  426.             padding-right: 0;
  427.           }
  428.         }
  429.       }
  430.     }
  432.     .hero {
  433.       margin-top: 50px;
  434.       align-items: center;
  435.       position: relative;
  437.       .heading {
  438.         position: relative;
  439.         z-index: 4;
  440.         padding-bottom: 150px;
  441.       }
  443.       .simple_form,
  444.       .closed-registrations-message {
  445.         background: darken($ui-base-color, 4%);
  446.         width: 280px;
  447.         padding: 15px 20px;
  448.         border-radius: 4px 4px 0 0;
  449.         line-height: initial;
  450.         position: relative;
  451.         z-index: 4;
  453.         .actions {
  454.           margin-bottom: 0;
  456.           button,
  457.           .button,
  458.           .block-button {
  459.             margin-bottom: 0;
  460.           }
  461.         }
  462.       }
  464.       .closed-registrations-message {
  465.         min-height: 330px;
  466.         display: flex;
  467.         flex-direction: column;
  468.         justify-content: space-between;
  469.       }
  470.     }
  471.   }
  473.   .about-short {
  474.     background: darken($ui-base-color, 4%);
  475.     padding: 50px 0 30px;
  476.     font-family: sans-serif;
  477.     font-size: 16px;
  478.     font-weight: 400;
  479.     font-size: 16px;
  480.     line-height: 30px;
  481.     color: $ui-primary-color;
  483.     a {
  484.       color: $ui-highlight-color;
  485.       text-decoration: underline;
  486.     }
  487.   }
  489.   .information-board {
  490.     background: darken($ui-base-color, 4%);
  491.     padding: 20px 0;
  493.     .container-alt {
  494.       position: relative;
  495.       padding-right: 280px + 15px;
  496.     }
  498.     &__sections {
  499.       display: flex;
  500.       justify-content: space-between;
  501.       flex-wrap: wrap;
  502.     }
  504.     &__section {
  505.       flex: 1 0 0;
  506.       font-family: sans-serif;
  507.       font-size: 16px;
  508.       line-height: 28px;
  509.       color: $primary-text-color;
  510.       text-align: right;
  511.       padding: 10px 15px;
  513.       span,
  514.       strong {
  515.         display: block;
  516.       }
  518.       span {
  519.         &:last-child {
  520.           color: $ui-secondary-color;
  521.         }
  522.       }
  524.       strong {
  525.         font-weight: 500;
  526.         font-size: 32px;
  527.         line-height: 48px;
  528.       }
  530.       @media screen and (max-width: $column-breakpoint) {
  531.         text-align: center;
  532.       }
  533.     }
  535.     .panel {
  536.       position: absolute;
  537.       width: 280px;
  538.       box-sizing: border-box;
  539.       background: darken($ui-base-color, 8%);
  540.       padding: 20px;
  541.       padding-top: 10px;
  542.       border-radius: 4px 4px 0 0;
  543.       right: 0;
  544.       bottom: -40px;
  546.       .panel-header {
  547.         font-family: sans-serif;
  548.         font-size: 14px;
  549.         line-height: 24px;
  550.         font-weight: 500;
  551.         color: $ui-primary-color;
  552.         padding-bottom: 5px;
  553.         margin-bottom: 15px;
  554.         border-bottom: 1px solid lighten($ui-base-color, 4%);
  555.         text-overflow: ellipsis;
  556.         white-space: nowrap;
  557.         overflow: hidden;
  559.         a,
  560.         span {
  561.           font-weight: 400;
  562.           color: darken($ui-primary-color, 10%);
  563.         }
  565.         a {
  566.           text-decoration: none;
  567.         }
  568.       }
  569.     }
  571.     .owner {
  572.       text-align: center;
  574.       .avatar {
  575.         width: 80px;
  576.         height: 80px;
  577.         margin: 0 auto;
  578.         margin-bottom: 15px;
  580.         img {
  581.           display: block;
  582.           width: 80px;
  583.           height: 80px;
  584.           border-radius: 48px;
  585.         }
  586.       }
  588.       .name {
  589.         font-size: 14px;
  591.         a {
  592.           display: block;
  593.           color: $primary-text-color;
  594.           text-decoration: none;
  596.           &:hover {
  597.             .display_name {
  598.               text-decoration: underline;
  599.             }
  600.           }
  601.         }
  603.         .username {
  604.           display: block;
  605.           color: $ui-primary-color;
  606.         }
  607.       }
  608.     }
  609.   }
  611.   &.alternative {
  612.     padding: 10px 0;
  614.     .brand {
  615.       text-align: center;
  616.       padding: 30px 0;
  617.       margin-bottom: 10px;
  619.       img {
  620.         position: static;
  621.         padding: 10px 0;
  622.       }
  624.       @media screen and (max-width: $small-breakpoint) {
  625.         padding: 15px 0;
  626.       }
  628.       @media screen and (max-width: $column-breakpoint) {
  629.         padding: 0;
  630.         margin-bottom: -10px;
  631.       }
  632.     }
  633.   }
  635.   &__information,
  636.   &__forms {
  637.     padding: 20px;
  638.   }
  640.   &__call-to-action {
  641.     background: darken($ui-base-color, 4%);
  642.     border-radius: 4px;
  643.     padding: 25px 40px;
  644.     overflow: hidden;
  646.     .row {
  647.       display: flex;
  648.       flex-direction: row-reverse;
  649.       flex-wrap: wrap;
  650.       justify-content: space-between;
  651.       align-items: center;
  652.     }
  654.     .row__information-board {
  655.       display: flex;
  656.       justify-content: flex-end;
  657.       align-items: flex-end;
  659.       .information-board__section {
  660.         flex: 1 0 auto;
  661.         padding: 0 10px;
  662.       }
  663.     }
  665.     .row__mascot {
  666.       flex: 1;
  667.       margin: 10px -50px 0 0;
  668.     }
  669.   }
  671.   &__logo {
  672.     margin-right: 20px;
  674.     img {
  675.       height: 50px;
  676.       width: auto;
  677.       mix-blend-mode: lighten;
  678.     }
  679.   }
  681.   &__information {
  682.     padding: 45px 40px;
  683.     margin-bottom: 10px;
  685.     &:last-child {
  686.       margin-bottom: 0;
  687.     }
  689.     .account {
  690.       border-bottom: 0;
  691.       padding: 0;
  693.       &__display-name {
  694.         align-items: center;
  695.         display: flex;
  696.         margin-right: 5px;
  697.       }
  699.       div.account__display-name {
  700.         &:hover {
  701.           .display-name strong {
  702.             text-decoration: none;
  703.           }
  704.         }
  706.         .account__avatar {
  707.           cursor: default;
  708.         }
  709.       }
  711.       &__avatar-wrapper {
  712.         margin-left: 0;
  713.         flex: 0 0 auto;
  714.       }
  716.       &__avatar {
  717.         width: 44px;
  718.         height: 44px;
  719.         background-size: 44px 44px;
  720.       }
  722.       .display-name {
  723.         font-size: 15px;
  725.         &__account {
  726.           font-size: 14px;
  727.         }
  728.       }
  729.     }
  731.     @media screen and (max-width: $small-breakpoint) {
  732.       .contact {
  733.         margin-top: 30px;
  734.       }
  735.     }
  737.     @media screen and (max-width: $column-breakpoint) {
  738.       padding: 25px 20px;
  739.     }
  740.   }
  742.   &__information,
  743.   &__forms,
  744.   #mastodon-timeline {
  745.     box-sizing: border-box;
  746.     background: $ui-base-color;
  747.     border-radius: 4px;
  748.     box-shadow: 0 0 6px rgba($black, 0.1);
  749.   }
  751.   &__mascot {
  752.     height: 104px;
  753.     position: relative;
  754.     left: -40px;
  755.     bottom: 25px;
  757.     img {
  758.       height: 190px;
  759.       width: auto;
  760.     }
  761.   }
  763.   &__short-description {
  764.     .row {
  765.       display: flex;
  766.       flex-wrap: wrap;
  767.       align-items: center;
  768.       margin-bottom: 40px;
  769.     }
  771.     @media screen and (max-width: $column-breakpoint) {
  772.       .row {
  773.         margin-bottom: 20px;
  774.       }
  775.     }
  777.     p a {
  778.       color: $ui-secondary-color;
  779.     }
  781.     h1 {
  782.       font-weight: 500;
  783.       color: $primary-text-color;
  784.       margin-bottom: 0;
  786.       small {
  787.         color: $ui-primary-color;
  789.         span {
  790.           color: $ui-secondary-color;
  791.         }
  792.       }
  793.     }
  795.     p:last-child {
  796.       margin-bottom: 0;
  797.     }
  798.   }
  800.   &__hero {
  801.     margin-bottom: 10px;
  803.     img {
  804.       display: block;
  805.       margin: 0;
  806.       max-width: 100%;
  807.       height: auto;
  808.       border-radius: 4px;
  809.     }
  810.   }
  812.   &__forms {
  813.     height: 100%;
  815.     @media screen and (max-width: $small-breakpoint) {
  816.       height: auto;
  817.     }
  819.     @media screen and (max-width: $column-breakpoint) {
  820.       background: transparent;
  821.       box-shadow: none;
  822.       padding: 0 20px;
  823.       margin-top: 30px;
  824.       margin-bottom: 40px;
  826.       .separator-or {
  827.         span {
  828.           background: darken($ui-base-color, 8%);
  829.         }
  830.       }
  831.     }
  833.     hr {
  834.       margin: 40px 0;
  835.     }
  837.     .button {
  838.       display: block;
  839.     }
  841.     .subtle-hint a {
  842.       text-decoration: none;
  844.       &:hover,
  845.       &:focus,
  846.       &:active {
  847.         text-decoration: underline;
  848.       }
  849.     }
  850.   }
  852.   #mastodon-timeline {
  853.     display: flex;
  854.     -webkit-overflow-scrolling: touch;
  855.     -ms-overflow-style: -ms-autohiding-scrollbar;
  856.     font-family: sans-serif;
  857.     font-size: 13px;
  858.     line-height: 18px;
  859.     font-weight: 400;
  860.     color: $primary-text-color;
  861.     width: 100%;
  862.     flex: 1 1 auto;
  863.     overflow: hidden;
  864.     height: 100%;
  866.     .column-header {
  867.       color: inherit;
  868.       font-family: inherit;
  869.       font-size: 16px;
  870.       line-height: inherit;
  871.       font-weight: inherit;
  872.       margin: 0;
  873.       padding: 0;
  874.     }
  876.     .column {
  877.       padding: 0;
  878.       border-radius: 4px;
  879.       overflow: hidden;
  880.       width: 100%;
  881.     }
  883.     .scrollable {
  884.       height: 400px;
  885.     }
  887.     p {
  888.       font-size: inherit;
  889.       line-height: inherit;
  890.       font-weight: inherit;
  891.       color: $primary-text-color;
  892.       margin-bottom: 20px;
  894.       &:last-child {
  895.         margin-bottom: 0;
  896.       }
  898.       a {
  899.         color: $ui-secondary-color;
  900.         text-decoration: none;
  901.       }
  902.     }
  904.     @media screen and (max-width: $column-breakpoint) {
  905.       height: 90vh;
  906.     }
  907.   }
  909.   &__features {
  910.     & > p {
  911.       padding-right: 60px;
  912.     }
  914.     .features-list {
  915.       margin: 40px 0;
  916.       margin-top: 30px;
  917.     }
  919.     &__action {
  920.       text-align: center;
  921.     }
  922.   }
  924.   .features-list {
  925.     .features-list__row {
  926.       display: flex;
  927.       padding: 10px 0;
  928.       justify-content: space-between;
  930.       .visual {
  931.         flex: 0 0 auto;
  932.         display: flex;
  933.         align-items: center;
  934.         margin-left: 15px;
  936.         .fa {
  937.           display: block;
  938.           color: $ui-primary-color;
  939.           font-size: 48px;
  940.         }
  941.       }
  943.       .text {
  944.         font-size: 16px;
  945.         line-height: 30px;
  946.         color: $ui-primary-color;
  948.         h6 {
  949.           font-size: inherit;
  950.           line-height: inherit;
  951.           margin-bottom: 0;
  952.         }
  953.       }
  954.     }
  956.     @media screen and (min-width: $small-breakpoint) {
  957.       display: grid;
  958.       grid-gap: 30px;
  959.       grid-template-columns: 1fr 1fr;
  960.       grid-auto-columns: 50%;
  961.       grid-auto-rows: max-content;
  962.     }
  963.   }
  965.   .extended-description {
  966.     padding: 50px 0;
  967.     font-family: sans-serif;
  968.     font-size: 16px;
  969.     font-weight: 400;
  970.     font-size: 16px;
  971.     line-height: 30px;
  972.     color: $ui-primary-color;
  974.     a {
  975.       color: $ui-highlight-color;
  976.       text-decoration: underline;
  977.     }
  978.   }
  980.   .footer-links {
  981.     padding-bottom: 50px;
  982.     text-align: right;
  983.     color: $ui-base-lighter-color;
  985.     p {
  986.       font-size: 14px;
  987.     }
  989.     a {
  990.       color: inherit;
  991.       text-decoration: underline;
  992.     }
  993.   }
  995.   &__footer {
  996.     margin-top: 10px;
  997.     text-align: center;
  998.     color: $ui-base-lighter-color;
  1000.     p {
  1001.       font-size: 14px;
  1003.       a {
  1004.         color: inherit;
  1005.         text-decoration: underline;
  1006.       }
  1007.     }
  1008.   }
  1010.   @media screen and (max-width: 840px) {
  1011.     .container-alt {
  1012.       padding: 0 20px;
  1013.     }
  1015.     .information-board {
  1016.       .container-alt {
  1017.         padding-right: 20px;
  1018.       }
  1020.       .panel {
  1021.         position: static;
  1022.         margin-top: 20px;
  1023.         width: 100%;
  1024.         border-radius: 4px;
  1026.         .panel-header {
  1027.           text-align: center;
  1028.         }
  1029.       }
  1030.     }
  1031.   }
  1033.   @media screen and (max-width: 675px) {
  1034.     .header-wrapper {
  1035.       padding-top: 0;
  1037.       &.compact {
  1038.         padding-bottom: 0;
  1039.       }
  1041.       &.compact .hero .heading {
  1042.         text-align: initial;
  1043.       }
  1044.     }
  1046.     .header .container-alt,
  1047.     .features .container-alt {
  1048.       display: block;
  1049.     }
  1051.     .header {
  1052.       .links {
  1053.         padding-top: 15px;
  1054.         background: darken($ui-base-color, 4%);
  1056.         a {
  1057.           padding: 12px 8px;
  1058.         }
  1060.         .nav {
  1061.           display: flex;
  1062.           flex-flow: row wrap;
  1063.           justify-content: space-around;
  1064.         }
  1066.         .brand img {
  1067.           left: 0;
  1068.           top: 0;
  1069.         }
  1070.       }
  1072.       .hero {
  1073.         margin-top: 30px;
  1074.         padding: 0;
  1076.         .heading {
  1077.           padding: 30px 20px;
  1078.           text-align: center;
  1079.         }
  1081.         .simple_form,
  1082.         .closed-registrations-message {
  1083.           background: darken($ui-base-color, 8%);
  1084.           width: 100%;
  1085.           border-radius: 0;
  1086.           box-sizing: border-box;
  1087.         }
  1088.       }
  1089.     }
  1090.   }
  1092.   .cta {
  1093.     margin: 20px;
  1094.   }
  1096.   &.tag-page {
  1097.     .grid {
  1098.       @media screen and (min-width: $small-breakpoint) {
  1099.         grid-template-columns: 33% 67%;
  1100.       }
  1102.       .column-2 {
  1103.         grid-column: 2;
  1104.         grid-row: 1;
  1105.       }
  1106.     }
  1108.     .brand {
  1109.       text-align: unset;
  1110.       padding: 0;
  1112.       img {
  1113.         height: 48px;
  1114.         width: auto;
  1115.       }
  1116.     }
  1118.     .cta {
  1119.       margin: 0;
  1121.       .button {
  1122.         margin-right: 4px;
  1123.       }
  1124.     }
  1126.     @media screen and (max-width: $column-breakpoint) {
  1127.       .grid {
  1128.         .column-1 {
  1129.           grid-column: 1;
  1130.           grid-row: 2;
  1131.         }
  1133.         .column-2 {
  1134.           grid-column: 1;
  1135.           grid-row: 1;
  1136.         }
  1137.       }
  1139.       .brand {
  1140.         margin: 0;
  1141.       }
  1143.       .landing-page__features {
  1144.         display: none;
  1145.       }
  1146.     }
  1147.   }
  1148. }