mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-19 19:25:51 +00:00
Cleanup. Bump css version
This commit is contained in:
Jake
File diff suppressed because one or more lines are too long
6
assets/css/devportal2022-v14.css
Normal file
6
assets/css/devportal2022-v14.css
Normal file
File diff suppressed because one or more lines are too long
@@ -47,7 +47,6 @@ $(document).ready(() => {
|
||||
|
||||
$(".cat_checkbox input").change((event) => {
|
||||
|
||||
// const lang = $(event.target).val().toLowerCase().split(' ').join('_')
|
||||
const lang = $(event.target).val()
|
||||
const lang_checked = $(event.target).prop("checked")
|
||||
|
||||
|
||||
@@ -167,6 +167,17 @@
|
||||
}
|
||||
|
||||
.page-uses {
|
||||
|
||||
.container-new {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
|
||||
&::before {
|
||||
transform: scaleX(-1);
|
||||
background-image: url(../img/backgrounds/use-cases-blue.svg);
|
||||
@@ -180,46 +191,137 @@
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
|
||||
@each $usecase in "infrastructure",
|
||||
"developer_tooling",
|
||||
"interoperability",
|
||||
"wallet",
|
||||
"nfts",
|
||||
"exchanges",
|
||||
"gaming",
|
||||
"security",
|
||||
"payments",
|
||||
"web_monetization",
|
||||
"sustainability",
|
||||
"cbdc",
|
||||
"custody",
|
||||
"defi" {
|
||||
##{$usecase} {
|
||||
content: url("../img/icons/usecases/ic_#{$usecase}.png");
|
||||
/* Cleanup bootstrap modal */
|
||||
.modal {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.modal-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
pointer-events: auto;
|
||||
background-color: #000;
|
||||
|
||||
background-clip: padding-box;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.card-grid img {
|
||||
max-height: 48px;
|
||||
background: #111112;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
grid-gap: 48px
|
||||
.modal-header {
|
||||
border: none;
|
||||
background: #111112;
|
||||
box-shadow: 0px 1px 2px #000000;
|
||||
}
|
||||
}
|
||||
.modal-header .cancel .chevron {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.modal-header .apply .chevron {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border: none;
|
||||
background: #111112;
|
||||
box-shadow: 0px -1px 2px #000000;
|
||||
|
||||
align-items: unset;
|
||||
padding: 0.75rem;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
.card-title {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 26px;
|
||||
}
|
||||
.card-uses {
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
transition: all 0.35s ease-out;
|
||||
}
|
||||
.card-uses:hover {
|
||||
text-decoration: none;
|
||||
color: #E0E0E1;
|
||||
transform: translateY(-16px);
|
||||
text-decoration: none;
|
||||
}
|
||||
.card-body {
|
||||
background: #232325;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
padding: 32px;
|
||||
margin: 0;
|
||||
}
|
||||
.page-events .label {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding-left: 26px;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
font-weight: bold;
|
||||
/*color: $gray-300;*/
|
||||
color: #c1c1c2;
|
||||
}
|
||||
|
||||
.category-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.category-checkbox label {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding-left: 26px;
|
||||
}
|
||||
.category_count {
|
||||
padding: 0px 8px;
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
background: $blue-purple-800;
|
||||
border-radius: 100px;
|
||||
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $blue-purple-300;
|
||||
}
|
||||
.category_sidebar {
|
||||
position: sticky;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
|
||||
// @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" {
|
||||
// ##{$usecase} {
|
||||
// content: url("../img/icons/#{$usecase}.svg");
|
||||
// }
|
||||
// }
|
||||
@each $usecase in "infrastructure",
|
||||
"developer_tooling",
|
||||
"interoperability",
|
||||
"wallet",
|
||||
"nfts",
|
||||
"exchanges",
|
||||
"gaming",
|
||||
"security",
|
||||
"payments",
|
||||
"web_monetization",
|
||||
"sustainability",
|
||||
"cbdc",
|
||||
"custody",
|
||||
"defi" {
|
||||
##{$usecase} {
|
||||
content: url("../img/icons/usecases/ic_#{$usecase}.png");
|
||||
}
|
||||
}
|
||||
|
||||
// logos for cards
|
||||
// $type incase png or jpg is needed.
|
||||
@each $company,$type in (
|
||||
"bithomp": 'svg',
|
||||
"onthedex": "svg",
|
||||
@@ -264,24 +366,36 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ##{$company} {
|
||||
// .card-footer {
|
||||
// background-image: url("../img/cards/3col-#{$card-graphic}.svg");
|
||||
// }
|
||||
// .biz-logo {
|
||||
// content: url("../img/uses/#{$company}.svg");
|
||||
// }
|
||||
// }
|
||||
}
|
||||
#raisedinspace {
|
||||
.card-footer {
|
||||
background-image: url(../img/cards/3col-orange-yellow-2.svg);
|
||||
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
|
||||
h1 {
|
||||
font-size: 62px;
|
||||
}
|
||||
.biz-logo {
|
||||
content: url(../img/uses/raised.png);
|
||||
.container-new {
|
||||
padding-left: 64px;
|
||||
padding-right: 64px;
|
||||
}
|
||||
|
||||
.card-grid img {
|
||||
max-height: 48px;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
grid-gap: 48px
|
||||
}
|
||||
|
||||
.card-uses {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
// End UseCases
|
||||
|
||||
// History Page
|
||||
#history-orange {
|
||||
|
||||
@@ -726,9 +726,6 @@ pre code {
|
||||
color: #350080;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@each $company,$type in (
|
||||
'bitgo': 'svg',
|
||||
'sologenic-nft': 'svg',
|
||||
@@ -759,28 +756,6 @@ pre code {
|
||||
}
|
||||
}
|
||||
|
||||
// @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" {
|
||||
// ##{$usecase} {
|
||||
// content: url("../img/icons/lightmode/#{$usecase}.svg");
|
||||
// }
|
||||
// }
|
||||
|
||||
// darkened card graphics
|
||||
// @each $company,
|
||||
// $card-graphic
|
||||
// in (
|
||||
// "bitpay": "blue-green",
|
||||
// "exodus": "green",
|
||||
// "forte": "light-blue-2",
|
||||
// "ripple": "blue-light-blue",
|
||||
// "xrplorer": "green-purple"
|
||||
// )
|
||||
// {
|
||||
// ##{$company} .card-footer {
|
||||
// background-image: url("../img/cards/lightmode/3col-#{$card-graphic}.svg");
|
||||
// }
|
||||
// }
|
||||
|
||||
// Monochrome logos; invert.
|
||||
#bitpay,
|
||||
// #coil,
|
||||
@@ -792,28 +767,7 @@ pre code {
|
||||
filter: invert(100%);
|
||||
}
|
||||
}
|
||||
// // Alternate SVG logos
|
||||
// @each $company in "bitgo", "exodus", "ripple", "xrpl-labs" {
|
||||
// ##{$company} {
|
||||
// .biz-logo {
|
||||
// content: url("../img/uses/lightmode/#{$company}.svg");
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// // non-SVG logos:
|
||||
// #raisedinspace {
|
||||
// .card-footer {
|
||||
// background-image: url("../img/cards/lightmode/3col-orange-yellow-2.svg");
|
||||
// }
|
||||
// .biz-logo {
|
||||
// content: url("../img/uses/lightmode/raised.png");
|
||||
// }
|
||||
// }
|
||||
// #towo {
|
||||
// .biz-logo {
|
||||
// content: url("../img/uses/lightmode/towo.png");
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
.landing-bg {
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
"node-sass": "^7.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v13.css --output-style compressed",
|
||||
"build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v13.css --output-style compressed --source-map true",
|
||||
"build-css-watch-out": "node-sass --recursive --watch --include-path scss xrpl.scss ../out/assets/css/devportal2022-v13.css --output-style compressed --source-map true"
|
||||
"build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v14.css --output-style compressed",
|
||||
"build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v14.css --output-style compressed --source-map true",
|
||||
"build-css-watch-out": "node-sass --recursive --watch --include-path scss xrpl.scss ../out/assets/css/devportal2022-v14.css --output-style compressed --source-map true"
|
||||
},
|
||||
"dependencies": {
|
||||
"sass": "^1.26.10"
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
{% if target.lang=="ja" %}
|
||||
<link href="{{currentpage.prefix}}assets/css/fonts-ja.css" rel="stylesheet" />
|
||||
{% endif %}
|
||||
<link href="{{currentpage.prefix}}assets/css/devportal2022-v13.css" rel="stylesheet" />
|
||||
<link href="{{currentpage.prefix}}assets/css/devportal2022-v14.css" rel="stylesheet" />
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
|
||||
|
||||
|
||||
@@ -17,76 +17,6 @@
|
||||
|
||||
{% block main %}
|
||||
|
||||
<!-- temp -->
|
||||
<style>
|
||||
.container-new {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
|
||||
h1 {
|
||||
font-size: 62px;
|
||||
}
|
||||
|
||||
|
||||
.container-new {
|
||||
padding-left: 64px;
|
||||
padding-right: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cleanup bootstrap modal */
|
||||
.modal {
|
||||
padding: 0;
|
||||
}
|
||||
.modal-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
pointer-events: auto;
|
||||
background-color: #000;
|
||||
|
||||
background-clip: padding-box;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
|
||||
background: #111112;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border: none;
|
||||
background: #111112;
|
||||
box-shadow: 0px 1px 2px #000000;
|
||||
}
|
||||
.modal-header .cancel .chevron {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.modal-header .apply .chevron {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border: none;
|
||||
background: #111112;
|
||||
box-shadow: 0px -1px 2px #000000;
|
||||
|
||||
align-items: unset;
|
||||
padding: 0.75rem;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
{% set cards = [
|
||||
{
|
||||
"id": "aesthetes",
|
||||
@@ -383,10 +313,6 @@
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<!-- <h5 class="modal-title" id="categoryFilterModalLabel"></h5>
|
||||
<button type="button" class="" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">Cancel</span>
|
||||
</button> -->
|
||||
<a class="btn cancel" data-dismiss="modal"><span class="chevron"><span></span><span></span></span> Cancel</a>
|
||||
<a class="btn apply" data-dismiss="modal">Apply <span class="chevron"><span></span><span></span></span></a>
|
||||
</div>
|
||||
@@ -401,7 +327,6 @@
|
||||
<label class="font-weight-bold" for="input_{{category_id}}">{{ category_name }}</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<!-- pt-lg-4 mt-lg-3 -->
|
||||
<p class="category-header pt-5 mt-3 mb-4">Other Categories <span id="other_count_old" class="other_count category_count">0</span></p>
|
||||
{% for category_id, category_name in other_categories.items() %}
|
||||
<div class="cat_checkbox category-checkbox pb-2">
|
||||
@@ -524,92 +449,13 @@
|
||||
<a class="btn d-block d-lg-none" data-toggle="modal" data-target="#categoryFilterModal">
|
||||
<span class="mr-3"><img src="./assets/img/uses/usecase-filter.svg" class=""></span>Filter by Categories <span class="ml-3 total_count category_count">2</span>
|
||||
</a>
|
||||
|
||||
<!-- temp -->
|
||||
<style>
|
||||
.card-title {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 26px;
|
||||
}
|
||||
.card-uses {
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
transition: all 0.35s ease-out;
|
||||
}
|
||||
.card-uses:hover {
|
||||
text-decoration: none;
|
||||
color: #E0E0E1;
|
||||
transform: translateY(-16px);
|
||||
text-decoration: none;
|
||||
}
|
||||
.card-body {
|
||||
background: #232325;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
padding: 32px;
|
||||
margin: 0;
|
||||
}
|
||||
.page-events .label {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding-left: 26px;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
font-weight: bold;
|
||||
/*color: $gray-300;*/
|
||||
color: #c1c1c2;
|
||||
}
|
||||
|
||||
.category-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.category-checkbox label {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding-left: 26px;
|
||||
}
|
||||
.category_count {
|
||||
padding: 0px 8px;
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
/* Blue-Purple / Blue-Purple 80 */
|
||||
background: #350080;
|
||||
border-radius: 100px;
|
||||
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
/* Blue-Purple / Blue-Purple 30 */
|
||||
color: #B480FF;
|
||||
}
|
||||
.page-events {
|
||||
position: sticky;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.card-uses {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- // TODO:rename events- css -->
|
||||
|
||||
<!-- Start company cards -->
|
||||
<div class="row col-12 m-0 p-0 mt-4 pt-2">
|
||||
<div class="left col-3 m-0 p-0 mt-2 d-none d-lg-block">
|
||||
|
||||
<!-- Side bar Desktop. -->
|
||||
<div class="p-3 page-events">
|
||||
<div class="p-3 category_sidebar">
|
||||
<form >
|
||||
<p class="category-header mb-4">Featured Categories <span id="featured_count_old" class="featured_count category_count">2</span></p>
|
||||
{% for category_id, category_name in featured_categories.items() %}
|
||||
|
||||
Reference in New Issue
Block a user