Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
| /************ | |
| * body.landing | |
| ************/ | |
| body.landing { | |
| header { | |
| max-width: 800px; | |
| margin: auto; | |
| margin-top: 30px; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| img.logo { | |
| width: 178px; | |
| } | |
| .title { | |
| color: #222; | |
| font-weight: 600; | |
| font-size: 50px; | |
| margin-bottom: 10px; | |
| } | |
| .tagline { | |
| color: #9F9F9F; | |
| font-weight: 600; | |
| font-size: 26px; | |
| margin-bottom: 10px; | |
| } | |
| } | |
| .container { | |
| margin-left: auto; | |
| margin-right: auto; | |
| max-width: 560px; | |
| } | |
| div.section-models { | |
| margin-bottom: 50px; | |
| .description { | |
| a { | |
| color: inherit; | |
| } | |
| } | |
| .github-repo { | |
| text-align: center; | |
| margin-top: 20px; | |
| margin-bottom: 40px; | |
| } | |
| div.title-section { | |
| color: #222; | |
| font-weight: 600; | |
| font-size: 34px; | |
| margin-bottom: 10px; | |
| text-align: center; | |
| } | |
| .quote { | |
| color: #9F9F9F; | |
| font-weight: 600; | |
| font-size: 24px; | |
| margin-bottom: 10px; | |
| border-left: 4px solid #ec8cff; | |
| padding: 2px 14px; | |
| max-width: 380px; | |
| margin: auto; | |
| margin-top: 48px; | |
| } | |
| } | |
| div.section-footer { | |
| .clearfix(); | |
| background-color: #f7fbfb; | |
| padding-top: 80px; | |
| padding-bottom: 90px; | |
| .title { | |
| font-size: 14px; | |
| letter-spacing: 0.3px; | |
| text-transform: uppercase; | |
| text-align: center; | |
| } | |
| ul.documents { | |
| list-style-type: none; | |
| padding: 0; | |
| a { | |
| color: #696969; | |
| font-size: 14px; | |
| } | |
| } | |
| } | |
| div.model { | |
| border-radius: 5px; | |
| box-shadow: 0 10px 25px 0 rgba(50,94,128,.2); | |
| padding: 18px 26px; | |
| border: 1px solid #e6e6e6; | |
| background-image: linear-gradient(136deg, #F8F8F8 29%, #ffffff 74%, #fafafa 100%); | |
| margin-top: 20px; | |
| margin-bottom: 72px; | |
| a { | |
| color: inherit; | |
| } | |
| .model-title { | |
| font-size: 20px; | |
| font-weight: 600; | |
| &::first-letter { | |
| font-size: 30px; | |
| vertical-align: middle; | |
| } | |
| } | |
| .model-details { | |
| color: #666; | |
| font-size: 15px; | |
| } | |
| .model-bottom { | |
| .clearfix(); | |
| } | |
| a.btn { | |
| float: right; | |
| margin-left: 10px; | |
| border-radius: 6px; | |
| padding: 5px 10px; | |
| color: white; | |
| background-color: grey; | |
| &.btn-primary { | |
| background-color: #40bf0e; | |
| } | |
| &.btn-details { | |
| background-color: #c388ef; | |
| } | |
| position: relative; | |
| &:active { | |
| top: 1px; | |
| } | |
| &:hover { | |
| opacity: 0.7; | |
| } | |
| } | |
| } | |
| } | |
| /************ | |
| * body.model | |
| ************/ | |
| body.model { | |
| header { | |
| padding-top: 80px; | |
| text-align: center; | |
| img.logo-collab { | |
| height: 100px; | |
| &.logo-uber { | |
| height: 50px; | |
| vertical-align: 20px; | |
| } | |
| } | |
| img.cross { | |
| height: 50px; | |
| margin: 0 32px; | |
| vertical-align: 20px; | |
| } | |
| } | |
| .container { | |
| margin-left: auto; | |
| margin-right: auto; | |
| max-width: 560px; | |
| padding-top: 100px; | |
| padding-bottom: 200px; | |
| } | |
| a.back { | |
| font-size: 15px; | |
| img { | |
| margin-right: 1px; | |
| width: 12px; | |
| } | |
| } | |
| .model-title { | |
| color: #222; | |
| font-weight: 600; | |
| font-size: 36px; | |
| &::first-letter { | |
| font-size: 42px; | |
| vertical-align: middle; | |
| } | |
| } | |
| .github-repo { | |
| margin-top: 6px; | |
| margin-bottom: 20px; | |
| transform: scale(0.7) translateX(-85px); | |
| } | |
| .model-bottom { | |
| .clearfix(); | |
| margin-top: 52px; | |
| text-align: center; | |
| } | |
| a.btn { | |
| border-radius: 8px; | |
| padding: 10px 32px; | |
| font-size: 20px; | |
| color: white; | |
| background-color: grey; | |
| &.btn-primary { | |
| background-color: #40bf0e; | |
| } | |
| &.btn-details { | |
| background-color: #c388ef; | |
| } | |
| position: relative; | |
| &:active { | |
| top: 1px; | |
| } | |
| &:hover { | |
| opacity: 0.7; | |
| } | |
| } | |
| } | |