mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-20 03:35:51 +00:00
[Task]Restructure www files and delete node.js files
This commit is contained in:
n0rmz
980
less/main.less
Normal file
980
less/main.less
Normal file
@@ -0,0 +1,980 @@
|
||||
@import "icons.less";
|
||||
@import "modals.less";
|
||||
@import "variables.less";
|
||||
@import "mixins";
|
||||
*{
|
||||
box-sizing:border-box;
|
||||
-webkit-box-sizing:border-box;
|
||||
-moz-box-sizing:border-box;
|
||||
}
|
||||
|
||||
body{
|
||||
color: #898788;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
.content-root {
|
||||
background-color: #f3f6fb;
|
||||
-webkit-box-shadow: inset 780px 0 #fff, inset 781px 0 #dfe2e7, inset 790px 0 5px -10px rgba(0,0,0,0.1);
|
||||
box-shadow: inset 780px 0 #fff, inset 781px 0 #dfe2e7, inset 790px 0 5px -10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
&:not(.no-literate){
|
||||
.header {
|
||||
position: relative;
|
||||
.left {
|
||||
.header-menu-button {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 8px;
|
||||
width: 40px;
|
||||
height: 38px;
|
||||
padding: 3px 4px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background: url('../img/burger.png') center no-repeat;
|
||||
-moz-border-radius: 4px;
|
||||
z-index: 888;
|
||||
svg {
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 50px;
|
||||
iframe {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-root{
|
||||
background: #4a4a4c;
|
||||
}
|
||||
.content > pre, .content > blockquote {
|
||||
color: #fff;
|
||||
}
|
||||
a{
|
||||
color:#517ab8;
|
||||
}
|
||||
.content{
|
||||
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
padding-top: 10px;
|
||||
&>h1,&>h2,&>h3{
|
||||
color: #474648;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
h1, h2, .big-heading, h3{
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
&:before{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
font-size: 25px
|
||||
}
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 17px;
|
||||
}
|
||||
/********************** CODE *****************/
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
position: relative;
|
||||
float: left;
|
||||
width:40%;
|
||||
width: -moz-calc(~"100% - 550px");
|
||||
width: -webkit-calc(~"100% - 550px");
|
||||
width: -o-calc(~"100% - 550px");
|
||||
width: calc(~"100% - 550px");
|
||||
overflow-x: auto;
|
||||
|
||||
&:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
|
||||
visibility: hidden;
|
||||
line-height: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
code{
|
||||
color: #fff;
|
||||
word-wrap:break-word;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ul + pre {
|
||||
width: -moz-calc(~"100% - 570px");
|
||||
width: -webkit-calc(~"100% - 570px");
|
||||
width: -o-calc(~"100% - 570px");
|
||||
width: calc(~"100% - 570px");
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
pre {
|
||||
width: -moz-calc(~"100% - 620px");
|
||||
width: -webkit-calc(~"100% - 620px");
|
||||
width: -o-calc(~"100% - 620px");
|
||||
width: calc(~"100% + 620px");
|
||||
padding-left: calc(~"100% + 40px");
|
||||
//
|
||||
overflow: inherit;
|
||||
code{
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
ul,p,pre,h1,h2,h3,h4,h5,h6,blockquote {
|
||||
|
||||
}
|
||||
|
||||
/********************** CODE *****************/
|
||||
}
|
||||
|
||||
.guidelines-content {
|
||||
box-shadow: none;
|
||||
background: #fff;
|
||||
color: #6E6F7E;
|
||||
padding:0 15%;
|
||||
.content {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.terms-conditions-link-container {
|
||||
font-size: 15px;
|
||||
background: #F3EEAE;
|
||||
border: 1px solid darken(#F3EEAE, 20%);
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
margin: 15px 0;
|
||||
color: #695221;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: #695221;
|
||||
}
|
||||
}
|
||||
.download-all {
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
background: #F9FAFC;
|
||||
border: 1px solid darken(#F9FAFC, 20%);
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
margin: 20px 0 20px;
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: #507BBA;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
svg {
|
||||
display: inline-block;
|
||||
margin-top: -3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.brand-guidelines-row {
|
||||
overflow: hidden;
|
||||
padding-bottom: 25px;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
color: #6E6E70;
|
||||
font-size: 14px;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
strong {
|
||||
color: #346AA9;
|
||||
}
|
||||
}
|
||||
}
|
||||
.brand-guidelines-title {
|
||||
color: #474648;
|
||||
text-transform: inherit;
|
||||
font-weight: 600;
|
||||
font-family: 'Open sans' sans-serif;
|
||||
border: 0;
|
||||
}
|
||||
.terms-conditions-content {
|
||||
p {
|
||||
margin-bottom: 20px;
|
||||
color: #6E6E70;
|
||||
&+h2{
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.xrp-logos {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
.xrp-logo {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 32%;
|
||||
float: left;
|
||||
margin-right: 2%;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 7px;
|
||||
moz-border-radius: 7px;
|
||||
|
||||
&:nth-of-type(3n+3) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
padding-bottom: 90%;
|
||||
position: relative;
|
||||
.bg-container {
|
||||
padding-top: 23%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: -webkit-calc(~"100% - 50px");
|
||||
height: -moz-calc(~"100% - 50px");
|
||||
height: calc(~"100% - 50px");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 90%;
|
||||
&.logo-triskelion {
|
||||
background-image: url(../img/ripple-triskelion.png);
|
||||
background-size: 50%;
|
||||
}
|
||||
&.logotype {
|
||||
background-image: url(../img/logotype.png);
|
||||
|
||||
}
|
||||
&.logo-full {
|
||||
background-image: url(../img/logo-lg.png);
|
||||
}
|
||||
&.badge-blue, &.badge-gray {
|
||||
background-size: 52%;
|
||||
}
|
||||
&.bg-badge-white {
|
||||
background-image: url(../img/badge-white.png);
|
||||
background-size: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-download-link {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
text-decoration: none;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: #F5F5F5;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-weight: bold;
|
||||
font-size: 17px;
|
||||
border-top: 1px solid #ddd;
|
||||
border-radius: 0 0 7px 7px;
|
||||
moz-border-radius: 0 0 7px 7px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #346AA9;
|
||||
}
|
||||
svg {
|
||||
display: inline-block;
|
||||
margin-top: -2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.brand-usage-types {
|
||||
padding-top: 25px;
|
||||
hr {
|
||||
display: block;
|
||||
width: 39%;
|
||||
float: left;
|
||||
border-color: #ddd;
|
||||
}
|
||||
.unacceptable {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.usage-brand {
|
||||
overflow: hidden;
|
||||
margin-bottom: 30px;
|
||||
.brand-img {
|
||||
width: 40%;
|
||||
padding-right: 30px;
|
||||
float: left;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.usage-brand-info {
|
||||
float: left;
|
||||
width: 60%;
|
||||
padding-left: 55px;
|
||||
position: relative;
|
||||
&:before {
|
||||
content: "";
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top:2px;
|
||||
display: block;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
&.acceptable-use:before {
|
||||
width: 20px;
|
||||
background-image: url('../img/icon-check.png');
|
||||
|
||||
}
|
||||
&.unacceptable-use:before {
|
||||
top: 3px;
|
||||
width: 16px;
|
||||
background-image: url('../img/icon-remove.png');
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
color: #474648;
|
||||
|
||||
}
|
||||
li {
|
||||
font-size: 14px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
hr {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.attribution-badges {
|
||||
margin-bottom: 50px;
|
||||
padding-top: 25px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
&>div {
|
||||
width: 25%;
|
||||
min-width: 140px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.attribution-badge {
|
||||
position: relative;
|
||||
span.badge-blue {
|
||||
margin: 0 auto 20px;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: block;
|
||||
background: url('../img/Ripple_attribution_badge_blue.svg') center no-repeat;
|
||||
}
|
||||
span.badge-gray {
|
||||
margin: 0 auto 20px;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: block;
|
||||
background: url('../img/Ripple_attribution_badge_gray.svg') center no-repeat;
|
||||
}
|
||||
|
||||
span.badge-white {
|
||||
margin: 0 auto 20px;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: block;
|
||||
background: url('../img/Ripple_attribution_badge_white.svg') #000 center no-repeat;
|
||||
}
|
||||
a.download-logo {
|
||||
display: none;
|
||||
opacity: 0.6;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10%;
|
||||
width: 33px;
|
||||
height: 28px;
|
||||
svg {
|
||||
width: 33px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
a.download-logo {
|
||||
display: block;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.badge-example {
|
||||
padding-bottom: 15px;
|
||||
position: relative;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
.badge-location {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: inline-block;
|
||||
|
||||
&.left {
|
||||
left: 0;
|
||||
}
|
||||
&.right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
&.center {
|
||||
left: 50%;
|
||||
margin-left: -75px;
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
width: 1px;
|
||||
height: 70px;
|
||||
border-left: 1px solid #EC008D;
|
||||
|
||||
}
|
||||
&:after {
|
||||
color: #EC008D;
|
||||
content: "●";
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
line-height: 4px;
|
||||
margin-left: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal {
|
||||
.modal-body {
|
||||
.modal-body-content {
|
||||
height: 360px;
|
||||
overflow-x: auto;
|
||||
border: 1px solid #ccc;
|
||||
color: #323332;
|
||||
padding:10px 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.modal-header {
|
||||
position: relative;
|
||||
background: #326BAA;
|
||||
padding: 20px 30px;
|
||||
.modal-title {
|
||||
color: #FFFFFF;
|
||||
font-size: 19px;
|
||||
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
font-size: 30px;
|
||||
line-height: 15px;
|
||||
height: 15px;
|
||||
color: #93A5CF;
|
||||
}
|
||||
}
|
||||
.modal-footer {
|
||||
border-top: 0;
|
||||
margin: 0;
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
.btn {
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
padding: 13px 15px;
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
width: 170px;
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
border:0;
|
||||
|
||||
&.btn-download {
|
||||
background: #56B95C;
|
||||
cursor: pointer;
|
||||
}
|
||||
&.btn-disabled {
|
||||
background: #ccc;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
.modal-checkbox {
|
||||
text-align: left;
|
||||
padding-bottom: 10px;
|
||||
label {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
color: #323332;
|
||||
font-size: 17px;
|
||||
}
|
||||
input {
|
||||
margin: 7px 5px 2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.badge-blue {
|
||||
margin: 0 auto 20px;
|
||||
width: 135px;
|
||||
height: 58px;
|
||||
display: inline-block;
|
||||
background: url('../img/Ripple_attribution_badge_blue.svg') center no-repeat;
|
||||
}
|
||||
.badge-gray {
|
||||
margin: 0 auto 20px;
|
||||
width: 135px;
|
||||
height: 58px;
|
||||
display: inline-block;
|
||||
background: url('../img/Ripple_attribution_badge_gray.svg') center no-repeat;
|
||||
}
|
||||
.badge-white {
|
||||
margin: 0 auto 20px;
|
||||
width: 135px;
|
||||
height: 58px;
|
||||
display: inline-block;
|
||||
background: url('../img/Ripple_attribution_badge_white.svg') #000 center no-repeat;
|
||||
}
|
||||
.menubar .section{
|
||||
padding-top: 10px;
|
||||
}
|
||||
.menu{
|
||||
a{
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 13px;
|
||||
|
||||
&.level-1{
|
||||
color: #474648;
|
||||
font-size: 13px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
&.level-2{
|
||||
padding-left: 25px;
|
||||
color: #466db2;
|
||||
font-size: 13px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
text-transform: capitalize;
|
||||
&.active {
|
||||
color: #517ab8 !important;
|
||||
|
||||
}
|
||||
}
|
||||
&.level-3 {
|
||||
padding-left: 50px;
|
||||
color: #7A7979;
|
||||
&:before {
|
||||
content: "- ";
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
|
||||
border: solid 1px #CED3E1 !important;
|
||||
background: rgba(206, 211, 225, 0.5);
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
color: #517ab8 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.level-2{
|
||||
|
||||
a {
|
||||
border: solid 1px transparent;
|
||||
|
||||
&:hover, &:active {
|
||||
border: solid 1px #CED3E1;
|
||||
background: rgba(206, 211, 225, 0.5);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.header{
|
||||
background: #5d89ae;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
height: 56px;
|
||||
position: relative;
|
||||
-webkit-box-shadow:inset 0 -2px 2px 0 rgba(0,0,0,0.1);
|
||||
box-shadow:inset 0 -2px 2px 0 rgba(0,0,0,0.1);
|
||||
h1{
|
||||
border:0;
|
||||
margin-top: -3px;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
line-height: 56px;
|
||||
font-weight: normal;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
i{
|
||||
display: inline-block;
|
||||
margin-top: -2px;
|
||||
margin: 0 5px;
|
||||
font-size: 24px;
|
||||
line-height: 56px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
h1 + ul{
|
||||
margin-left: 30px;
|
||||
border:0;
|
||||
li{
|
||||
display: inline-block;
|
||||
border:0;
|
||||
// margin-right: 10px;
|
||||
a{
|
||||
border:0;
|
||||
display: inline-block;
|
||||
line-height: 56px;
|
||||
padding: 0 20px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
text-shadow:none;
|
||||
&:hover{
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
&.active, &:hover{
|
||||
a{
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@media (min-width:1180px) {
|
||||
body {
|
||||
&:not(.no-literate) {
|
||||
.modal {
|
||||
.modal-dialog {
|
||||
width: 700px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 1180px){
|
||||
body{
|
||||
|
||||
&:not(.no-literate){
|
||||
.body .content-root {
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
}
|
||||
.content {
|
||||
pre {
|
||||
width: 100%;
|
||||
|
||||
overflow-x: auto;
|
||||
float: none;
|
||||
code {
|
||||
color: #000;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
li {
|
||||
pre {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
code{
|
||||
padding-left: 20px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul + pre {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.guidelines-content {
|
||||
padding: 0;
|
||||
.content {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background: #fff;
|
||||
pre {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
body{
|
||||
|
||||
&:not(.no-literate){
|
||||
.guidelines-content {
|
||||
padding: 0;
|
||||
.content {
|
||||
padding: 0 20px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
.brand-guidelines-row {
|
||||
padding-bottom: 50px;
|
||||
.guidelines-label {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
.xrp-logos {
|
||||
.xrp-logo {
|
||||
width: 49%;
|
||||
&:nth-of-type(3n+3) {
|
||||
margin-right: 2%;
|
||||
}
|
||||
&:nth-of-type(even) {
|
||||
margin-right: 0;
|
||||
}
|
||||
a.logo-download-link {
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.logo-container .bg-container {
|
||||
height: -webkit-calc(~"100% - 40px");
|
||||
height: -moz-calc(~"100% - 40px");
|
||||
height: calc(~"100% - 40px");
|
||||
}
|
||||
}
|
||||
}
|
||||
.guidelines-graphics-part{
|
||||
margin-bottom: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
.guidelines-text-part {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-bottom: 50px;
|
||||
.brand-guidelines-title,p {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.logo-trademark-guideline {
|
||||
.colors-info {
|
||||
ul {
|
||||
width: 100%;
|
||||
li{
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.badge-example {
|
||||
.badge-location {
|
||||
font-size: 10px;
|
||||
&:before {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.usage-brand {
|
||||
.usage-brand-info {
|
||||
width: 100%;
|
||||
}
|
||||
.brand-img {
|
||||
padding: 0 10%;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
max-width: 365px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 700px) {
|
||||
body{
|
||||
|
||||
&:not(.no-literate){
|
||||
.header {
|
||||
position: relative;
|
||||
.left {
|
||||
.header-menu-button {
|
||||
display: inline-block;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background-color: #5D89AE;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 0 0 8px 8px;
|
||||
-moz-border-radius: 0 0 8px 8px;
|
||||
z-index: 999;
|
||||
li {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0;
|
||||
a {
|
||||
width: 100%;
|
||||
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
line-height: 50px;
|
||||
border-bottom: 1px solid #fff;
|
||||
height: 50px;
|
||||
}
|
||||
&:last-child {
|
||||
a {
|
||||
border-bottom: 0px solid #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.right {
|
||||
right: 90px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 400px) {
|
||||
|
||||
body{
|
||||
|
||||
&:not(.no-literate){
|
||||
.header {
|
||||
position: relative;
|
||||
.left {
|
||||
.header-menu-button {
|
||||
display: inline-block;
|
||||
}
|
||||
ul {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.guidelines-content {
|
||||
.content {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.xrp-logos {
|
||||
|
||||
.xrp-logo {
|
||||
|
||||
width: 100%;
|
||||
&:nth-of-type(3n+3) {
|
||||
margin-right: 0;
|
||||
}
|
||||
&:nth-of-type(even) {
|
||||
margin-right: 0;
|
||||
}
|
||||
a.logo-download-link {
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.logo-container .bg-container {
|
||||
height: -webkit-calc(~"100% - 50px");
|
||||
height: -moz-calc(~"100% - 50px");
|
||||
height: calc(~"100% - 50px");
|
||||
}
|
||||
}
|
||||
}
|
||||
.brand-usage-types {
|
||||
hr {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.usage-brand {
|
||||
|
||||
.usage-brand-info {
|
||||
padding-left: 20px;
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.attribution-badges {
|
||||
margin-bottom: 15px;
|
||||
&>div {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.attribution-badge {
|
||||
|
||||
span {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.badge-example {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user