|
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148 |
- $maximum-width: 1235px;
- $fluid-breakpoint: $maximum-width + 20px;
- $column-breakpoint: 700px;
- $small-breakpoint: 960px;
-
- .container {
- box-sizing: border-box;
- max-width: $maximum-width;
- margin: 0 auto;
- position: relative;
-
- @media screen and (max-width: $fluid-breakpoint) {
- width: 100%;
- padding: 0 10px;
- }
- }
-
- .landing-page {
- .grid {
- display: grid;
- grid-gap: 10px;
- grid-template-columns: 1fr 2fr;
- grid-auto-columns: 25%;
- grid-auto-rows: max-content;
-
- .column-0 {
- display: none;
- }
-
- .column-1 {
- grid-column: 1;
- grid-row: 1;
- }
-
- .column-2 {
- grid-column: 2;
- grid-row: 1;
- }
-
- .column-3 {
- grid-column: 3;
- grid-row: 1 / 3;
- }
-
- .column-4 {
- grid-column: 1 / 3;
- grid-row: 2;
- }
- }
-
- @media screen and (max-width: $small-breakpoint) {
- .grid {
- grid-template-columns: 40% 60%;
-
- .column-0 {
- display: none;
- }
-
- .column-1 {
- grid-column: 1;
- grid-row: 1;
-
- &.non-preview .landing-page__forms {
- height: 100%;
- }
- }
-
- .column-2 {
- grid-column: 2;
- grid-row: 1 / 3;
-
- &.non-preview {
- grid-column: 2;
- grid-row: 1;
- }
- }
-
- .column-3 {
- grid-column: 1;
- grid-row: 2 / 4;
- }
-
- .column-4 {
- grid-column: 2;
- grid-row: 3;
-
- &.non-preview {
- grid-column: 1 / 3;
- grid-row: 2;
- }
- }
- }
- }
-
- @media screen and (max-width: $column-breakpoint) {
- .grid {
- grid-template-columns: auto;
-
- .column-0 {
- display: block;
- grid-column: 1;
- grid-row: 1;
- }
-
- .column-1 {
- grid-column: 1;
- grid-row: 3;
-
- .brand {
- display: none;
- }
- }
-
- .column-2 {
- grid-column: 1;
- grid-row: 2;
-
- .landing-page__logo,
- .landing-page__call-to-action {
- display: none;
- }
-
- &.non-preview {
- grid-column: 1;
- grid-row: 2;
- }
- }
-
- .column-3 {
- grid-column: 1;
- grid-row: 5;
- }
-
- .column-4 {
- grid-column: 1;
- grid-row: 4;
-
- &.non-preview {
- grid-column: 1;
- grid-row: 4;
- }
- }
- }
- }
-
- .column-flex {
- display: flex;
- flex-direction: column;
- }
-
- .separator-or {
- position: relative;
- margin: 40px 0;
- text-align: center;
-
- &::before {
- content: "";
- display: block;
- width: 100%;
- height: 0;
- border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
- position: absolute;
- top: 50%;
- left: 0;
- }
-
- span {
- display: inline-block;
- background: $ui-base-color;
- font-size: 12px;
- font-weight: 500;
- color: $darker-text-color;
- text-transform: uppercase;
- position: relative;
- z-index: 1;
- padding: 0 8px;
- cursor: default;
- }
- }
-
- p,
- li {
- font-family: 'mastodon-font-sans-serif', sans-serif;
- font-size: 16px;
- font-weight: 400;
- font-size: 16px;
- line-height: 30px;
- margin-bottom: 12px;
- color: $darker-text-color;
-
- a {
- color: $highlight-text-color;
- text-decoration: underline;
- }
- }
-
- .closed-registrations-message {
- margin-top: 20px;
-
- &,
- p {
- text-align: center;
- font-size: 12px;
- line-height: 18px;
- color: $darker-text-color;
- margin-bottom: 0;
-
- a {
- color: $highlight-text-color;
- text-decoration: underline;
- }
- }
-
- p:last-child {
- margin-bottom: 0;
- }
- }
-
- em {
- display: inline;
- margin: 0;
- padding: 0;
- font-weight: 700;
- background: transparent;
- font-family: inherit;
- font-size: inherit;
- line-height: inherit;
- color: lighten($darker-text-color, 10%);
- }
-
- h1 {
- font-family: 'mastodon-font-display', sans-serif;
- font-size: 26px;
- line-height: 30px;
- font-weight: 500;
- margin-bottom: 20px;
- color: $secondary-text-color;
-
- small {
- font-family: 'mastodon-font-sans-serif', sans-serif;
- display: block;
- font-size: 18px;
- font-weight: 400;
- color: lighten($darker-text-color, 10%);
- }
- }
-
- h2 {
- font-family: 'mastodon-font-display', sans-serif;
- font-size: 22px;
- line-height: 26px;
- font-weight: 500;
- margin-bottom: 20px;
- color: $secondary-text-color;
- }
-
- h3 {
- font-family: 'mastodon-font-display', sans-serif;
- font-size: 18px;
- line-height: 24px;
- font-weight: 500;
- margin-bottom: 20px;
- color: $secondary-text-color;
- }
-
- h4 {
- font-family: 'mastodon-font-display', sans-serif;
- font-size: 16px;
- line-height: 24px;
- font-weight: 500;
- margin-bottom: 20px;
- color: $secondary-text-color;
- }
-
- h5 {
- font-family: 'mastodon-font-display', sans-serif;
- font-size: 14px;
- line-height: 24px;
- font-weight: 500;
- margin-bottom: 20px;
- color: $secondary-text-color;
- }
-
- h6 {
- font-family: 'mastodon-font-display', sans-serif;
- font-size: 12px;
- line-height: 24px;
- font-weight: 500;
- margin-bottom: 20px;
- color: $secondary-text-color;
- }
-
- ul,
- ol {
- margin-left: 20px;
-
- &[type='a'] {
- list-style-type: lower-alpha;
- }
-
- &[type='i'] {
- list-style-type: lower-roman;
- }
- }
-
- ul {
- list-style: disc;
- }
-
- ol {
- list-style: decimal;
- }
-
- li > ol,
- li > ul {
- margin-top: 6px;
- }
-
- hr {
- width: 100%;
- height: 0;
- border: 0;
- border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
- margin: 20px 0;
-
- &.spacer {
- height: 1px;
- border: 0;
- }
- }
-
- .container-alt {
- width: 100%;
- box-sizing: border-box;
- max-width: 800px;
- margin: 0 auto;
- word-wrap: break-word;
- }
-
- .header-wrapper {
- padding-top: 15px;
- background: $ui-base-color;
- background: linear-gradient(150deg, lighten($ui-base-color, 8%), $ui-base-color);
- position: relative;
-
- &.compact {
- background: $ui-base-color;
- padding-bottom: 15px;
-
- .hero .heading {
- padding-bottom: 20px;
- font-family: 'mastodon-font-sans-serif', sans-serif;
- font-size: 16px;
- font-weight: 400;
- font-size: 16px;
- line-height: 30px;
- color: $darker-text-color;
-
- a {
- color: $highlight-text-color;
- text-decoration: underline;
- }
- }
- }
- }
-
- .brand {
- a {
- padding-left: 0;
- padding-right: 0;
- color: $white;
- }
-
- img {
- height: 32px;
- position: relative;
- top: 4px;
- left: -10px;
- }
- }
-
- .header {
- line-height: 30px;
- overflow: hidden;
-
- .container-alt {
- display: flex;
- justify-content: space-between;
- }
-
- .links {
- position: relative;
- z-index: 4;
-
- a {
- display: flex;
- justify-content: center;
- align-items: center;
- color: $darker-text-color;
- text-decoration: none;
- padding: 12px 16px;
- line-height: 32px;
- font-family: 'mastodon-font-display', sans-serif;
- font-weight: 500;
- font-size: 14px;
-
- &:hover {
- color: $secondary-text-color;
- }
- }
-
- ul {
- list-style: none;
- margin: 0;
-
- li {
- display: inline-block;
- vertical-align: bottom;
- margin: 0;
-
- &:first-child a {
- padding-left: 0;
- }
-
- &:last-child a {
- padding-right: 0;
- }
- }
- }
- }
-
- .hero {
- margin-top: 50px;
- align-items: center;
- position: relative;
-
- .heading {
- position: relative;
- z-index: 4;
- padding-bottom: 150px;
- }
-
- .simple_form,
- .closed-registrations-message {
- background: darken($ui-base-color, 4%);
- width: 280px;
- padding: 15px 20px;
- border-radius: 4px 4px 0 0;
- line-height: initial;
- position: relative;
- z-index: 4;
-
- .actions {
- margin-bottom: 0;
-
- button,
- .button,
- .block-button {
- margin-bottom: 0;
- }
- }
- }
-
- .closed-registrations-message {
- min-height: 330px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
- }
- }
-
- .about-short {
- background: darken($ui-base-color, 4%);
- padding: 50px 0 30px;
- font-family: 'mastodon-font-sans-serif', sans-serif;
- font-size: 16px;
- font-weight: 400;
- font-size: 16px;
- line-height: 30px;
- color: $darker-text-color;
-
- a {
- color: $highlight-text-color;
- text-decoration: underline;
- }
- }
-
- .information-board {
- background: darken($ui-base-color, 4%);
- padding: 20px 0;
-
- .container-alt {
- position: relative;
- padding-right: 280px + 15px;
- }
-
- &__sections {
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- }
-
- &__section {
- flex: 1 0 0;
- font-family: 'mastodon-font-sans-serif', sans-serif;
- font-size: 16px;
- line-height: 28px;
- color: $primary-text-color;
- text-align: right;
- padding: 10px 15px;
-
- span,
- strong {
- display: block;
- }
-
- span {
- &:last-child {
- color: $secondary-text-color;
- }
- }
-
- strong {
- font-weight: 500;
- font-size: 32px;
- line-height: 48px;
- }
-
- @media screen and (max-width: $column-breakpoint) {
- text-align: center;
- }
- }
-
- .panel {
- position: absolute;
- width: 280px;
- box-sizing: border-box;
- background: darken($ui-base-color, 8%);
- padding: 20px;
- padding-top: 10px;
- border-radius: 4px 4px 0 0;
- right: 0;
- bottom: -40px;
-
- .panel-header {
- font-family: 'mastodon-font-display', sans-serif;
- font-size: 14px;
- line-height: 24px;
- font-weight: 500;
- color: $darker-text-color;
- padding-bottom: 5px;
- margin-bottom: 15px;
- border-bottom: 1px solid lighten($ui-base-color, 4%);
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
-
- a,
- span {
- font-weight: 400;
- color: darken($darker-text-color, 10%);
- }
-
- a {
- text-decoration: none;
- }
- }
- }
-
- .owner {
- text-align: center;
-
- .avatar {
- width: 80px;
- height: 80px;
- margin: 0 auto;
- margin-bottom: 15px;
-
- img {
- display: block;
- width: 80px;
- height: 80px;
- border-radius: 48px;
- }
- }
-
- .name {
- font-size: 14px;
-
- a {
- display: block;
- color: $primary-text-color;
- text-decoration: none;
-
- &:hover {
- .display_name {
- text-decoration: underline;
- }
- }
- }
-
- .username {
- display: block;
- color: $darker-text-color;
- }
- }
- }
- }
-
- &.alternative {
- padding: 10px 0;
-
- .brand {
- text-align: center;
- padding: 30px 0;
- margin-bottom: 10px;
-
- img {
- position: static;
- padding: 10px 0;
- }
-
- @media screen and (max-width: $small-breakpoint) {
- padding: 15px 0;
- }
-
- @media screen and (max-width: $column-breakpoint) {
- padding: 0;
- margin-bottom: -10px;
- }
- }
- }
-
- &__information,
- &__forms {
- padding: 20px;
- }
-
- &__call-to-action {
- background: darken($ui-base-color, 4%);
- border-radius: 4px;
- padding: 25px 40px;
- overflow: hidden;
-
- .row {
- display: flex;
- flex-direction: row-reverse;
- flex-wrap: wrap;
- justify-content: space-between;
- align-items: center;
- }
-
- .row__information-board {
- display: flex;
- justify-content: flex-end;
- align-items: flex-end;
-
- .information-board__section {
- flex: 1 0 auto;
- padding: 0 10px;
- }
- }
-
- .row__mascot {
- flex: 1;
- margin: 10px -50px 0 0;
- }
- }
-
- &__logo {
- margin-right: 20px;
-
- img {
- height: 50px;
- width: auto;
- mix-blend-mode: lighten;
- }
- }
-
- &__information {
- padding: 45px 40px;
- margin-bottom: 10px;
-
- &:last-child {
- margin-bottom: 0;
- }
-
- .account {
- border-bottom: 0;
- padding: 0;
-
- &__display-name {
- align-items: center;
- display: flex;
- margin-right: 5px;
- }
-
- div.account__display-name {
- &:hover {
- .display-name strong {
- text-decoration: none;
- }
- }
-
- .account__avatar {
- cursor: default;
- }
- }
-
- &__avatar-wrapper {
- margin-left: 0;
- flex: 0 0 auto;
- }
-
- &__avatar {
- width: 44px;
- height: 44px;
- background-size: 44px 44px;
- }
-
- .display-name {
- font-size: 15px;
-
- &__account {
- font-size: 14px;
- }
- }
- }
-
- @media screen and (max-width: $small-breakpoint) {
- .contact {
- margin-top: 30px;
- }
- }
-
- @media screen and (max-width: $column-breakpoint) {
- padding: 25px 20px;
- }
- }
-
- &__information,
- &__forms,
- #mastodon-timeline {
- box-sizing: border-box;
- background: $ui-base-color;
- border-radius: 4px;
- box-shadow: 0 0 6px rgba($black, 0.1);
- }
-
- &__mascot {
- height: 104px;
- position: relative;
- left: -40px;
- bottom: 25px;
-
- img {
- height: 190px;
- width: auto;
- }
- }
-
- &__short-description {
- .row {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- margin-bottom: 40px;
- }
-
- @media screen and (max-width: $column-breakpoint) {
- .row {
- margin-bottom: 20px;
- }
- }
-
- p a {
- color: $secondary-text-color;
- }
-
- h1 {
- font-weight: 500;
- color: $primary-text-color;
- margin-bottom: 0;
-
- small {
- color: $darker-text-color;
-
- span {
- color: $secondary-text-color;
- }
- }
- }
-
- p:last-child {
- margin-bottom: 0;
- }
- }
-
- &__hero {
- margin-bottom: 10px;
-
- img {
- display: block;
- margin: 0;
- max-width: 100%;
- height: auto;
- border-radius: 4px;
- }
- }
-
- &__forms {
- height: 100%;
-
- @media screen and (max-width: $small-breakpoint) {
- height: auto;
- }
-
- @media screen and (max-width: $column-breakpoint) {
- background: transparent;
- box-shadow: none;
- padding: 0 20px;
- margin-top: 30px;
- margin-bottom: 40px;
-
- .separator-or {
- span {
- background: darken($ui-base-color, 8%);
- }
- }
- }
-
- hr {
- margin: 40px 0;
- }
-
- .button {
- display: block;
- }
-
- .subtle-hint a {
- text-decoration: none;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
- }
-
- #mastodon-timeline {
- display: flex;
- -webkit-overflow-scrolling: touch;
- -ms-overflow-style: -ms-autohiding-scrollbar;
- font-family: 'mastodon-font-sans-serif', sans-serif;
- font-size: 13px;
- line-height: 18px;
- font-weight: 400;
- color: $primary-text-color;
- width: 100%;
- flex: 1 1 auto;
- overflow: hidden;
- height: 100%;
-
- .column-header {
- color: inherit;
- font-family: inherit;
- font-size: 16px;
- line-height: inherit;
- font-weight: inherit;
- margin: 0;
- padding: 0;
- }
-
- .column {
- padding: 0;
- border-radius: 4px;
- overflow: hidden;
- width: 100%;
- }
-
- .scrollable {
- height: 400px;
- }
-
- p {
- font-size: inherit;
- line-height: inherit;
- font-weight: inherit;
- color: $primary-text-color;
- margin-bottom: 20px;
-
- &:last-child {
- margin-bottom: 0;
- }
-
- a {
- color: $secondary-text-color;
- text-decoration: none;
- }
- }
-
- @media screen and (max-width: $column-breakpoint) {
- height: 90vh;
- }
- }
-
- &__features {
- & > p {
- padding-right: 60px;
- }
-
- .features-list {
- margin: 40px 0;
- margin-top: 30px;
- }
-
- &__action {
- text-align: center;
- }
- }
-
- .features-list {
- .features-list__row {
- display: flex;
- padding: 10px 0;
- justify-content: space-between;
-
- .visual {
- flex: 0 0 auto;
- display: flex;
- align-items: center;
- margin-left: 15px;
-
- .fa {
- display: block;
- color: $darker-text-color;
- font-size: 48px;
- }
- }
-
- .text {
- font-size: 16px;
- line-height: 30px;
- color: $darker-text-color;
-
- h6 {
- font-size: inherit;
- line-height: inherit;
- margin-bottom: 0;
- }
- }
- }
-
- @media screen and (min-width: $small-breakpoint) {
- display: grid;
- grid-gap: 30px;
- grid-template-columns: 1fr 1fr;
- grid-auto-columns: 50%;
- grid-auto-rows: max-content;
- }
- }
-
- .extended-description {
- padding: 50px 0;
- font-family: 'mastodon-font-sans-serif', sans-serif;
- font-size: 16px;
- font-weight: 400;
- font-size: 16px;
- line-height: 30px;
- color: $darker-text-color;
-
- a {
- color: $highlight-text-color;
- text-decoration: underline;
- }
- }
-
- .footer-links {
- padding-bottom: 50px;
- text-align: right;
- color: $dark-text-color;
-
- p {
- font-size: 14px;
- }
-
- a {
- color: inherit;
- text-decoration: underline;
- }
- }
-
- &__footer {
- margin-top: 10px;
- text-align: center;
- color: $dark-text-color;
-
- p {
- font-size: 14px;
-
- a {
- color: inherit;
- text-decoration: underline;
- }
- }
- }
-
- @media screen and (max-width: 840px) {
- .container-alt {
- padding: 0 20px;
- }
-
- .information-board {
- .container-alt {
- padding-right: 20px;
- }
-
- .panel {
- position: static;
- margin-top: 20px;
- width: 100%;
- border-radius: 4px;
-
- .panel-header {
- text-align: center;
- }
- }
- }
- }
-
- @media screen and (max-width: 675px) {
- .header-wrapper {
- padding-top: 0;
-
- &.compact {
- padding-bottom: 0;
- }
-
- &.compact .hero .heading {
- text-align: initial;
- }
- }
-
- .header .container-alt,
- .features .container-alt {
- display: block;
- }
-
- .header {
- .links {
- padding-top: 15px;
- background: darken($ui-base-color, 4%);
-
- a {
- padding: 12px 8px;
- }
-
- .nav {
- display: flex;
- flex-flow: row wrap;
- justify-content: space-around;
- }
-
- .brand img {
- left: 0;
- top: 0;
- }
- }
-
- .hero {
- margin-top: 30px;
- padding: 0;
-
- .heading {
- padding: 30px 20px;
- text-align: center;
- }
-
- .simple_form,
- .closed-registrations-message {
- background: darken($ui-base-color, 8%);
- width: 100%;
- border-radius: 0;
- box-sizing: border-box;
- }
- }
- }
- }
-
- .cta {
- margin: 20px;
- }
-
- &.tag-page {
- .grid {
- @media screen and (min-width: $small-breakpoint) {
- grid-template-columns: 33% 67%;
- }
-
- .column-2 {
- grid-column: 2;
- grid-row: 1;
- }
- }
-
- .brand {
- text-align: unset;
- padding: 0;
-
- img {
- height: 48px;
- width: auto;
- }
- }
-
- .cta {
- margin: 0;
-
- .button {
- margin-right: 4px;
- }
- }
-
- @media screen and (max-width: $column-breakpoint) {
- .grid {
- .column-1 {
- grid-column: 1;
- grid-row: 2;
- }
-
- .column-2 {
- grid-column: 1;
- grid-row: 1;
- }
- }
-
- .brand {
- margin: 0;
- }
-
- .landing-page__features {
- display: none;
- }
- }
- }
- }
|