add background side-image and text on homepage
This commit is contained in:
parent
bb02a9efee
commit
ece54ce984
|
|
@ -1,3 +1,8 @@
|
|||
.home-background {
|
||||
background-color: var(--light-color);
|
||||
}
|
||||
.graph-background {
|
||||
background-image: url('~src/assets/monitor-assets/home/graph.svg');
|
||||
background-position-y: 50%;
|
||||
background-position-x: -5%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -102,52 +102,61 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-section uk-section-large uk-container uk-container-large uk-margin-large-top uk-margin-large-bottom uk-overflow-hidden">
|
||||
<h2 class="uk-h1 uk-text-center" uk-parallax="scale: 1.7, 1.3, 1,1">
|
||||
Tap into the OpenAIRE <br> Research Graph<span class="uk-text-primary">.</span>
|
||||
</h2>
|
||||
<div class="uk-flex uk-flex-center uk-margin-large-top uk-margin-medium-bottom" uk-parallax="y: 80, 40, 0, 0">
|
||||
<div class="uk-width-1-1 uk-flex-center uk-grid" uk-grid uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
|
||||
<ng-template #numberCard let-numberSize="numberSize" let-name="name" let-url="url">
|
||||
<a class="uk-card uk-card-default uk-card-hover uk-position-relative uk-padding-small uk-display-block uk-link-reset"
|
||||
[href]="url" target="_blank" uk-scrollspy-class>
|
||||
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
|
||||
<div class="uk-text-center">
|
||||
<div
|
||||
class="uk-text-primary-gradient uk-text-bold number">{{(numberSize.number|number) + numberSize.size}}</div>
|
||||
<div class="uk-margin-small-top uk-text-large">{{name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</ng-template>
|
||||
<div *ngIf="publicationsSize">
|
||||
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: publicationsSize, name: 'Publications',
|
||||
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=publications'}">
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="datasetsSize">
|
||||
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: datasetsSize, name: 'Datasets',
|
||||
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=dataset'}">
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="softwareSize">
|
||||
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: softwareSize, name: 'Software',
|
||||
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=software'}">
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="otherSize">
|
||||
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: otherSize, name: 'Other',
|
||||
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=other'}">
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="fundersSize">
|
||||
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: fundersSize, name: 'Funders',
|
||||
url: 'https://explore.openaire.eu/search/find/projects'}">
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-background-norepeat graph-background">
|
||||
<div class="uk-section uk-section-large uk-container uk-container-large uk-margin-large-top uk-margin-large-bottom uk-overflow-hidden">
|
||||
<h2 class="uk-h1 uk-text-center" uk-parallax="scale: 1.7, 1.3, 1,1">
|
||||
Tap into the OpenAIRE <br> Research Graph<span class="uk-text-primary">.</span>
|
||||
</h2>
|
||||
<div class="uk-text-center uk-margin-top" uk-parallax="y: 80, 40, 0, 0">
|
||||
The OpenAIRE Research Graph is one of the largest open scholarly record collections <br>
|
||||
worldwide, key in fostering Open Science and establishing its practices in the daily <br>
|
||||
research activities. Conceived as a public and transparent good, populated out of data <br>
|
||||
sources trusted by scientists, the Graph aims at bringing discovery, monitoring, and <br>
|
||||
assessment of science back in the hands of the scientific community.
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-center uk-margin-top uk-margin-medium-bottom" uk-parallax="y: 80, 40, 0, 0">
|
||||
<div class="uk-width-1-1 uk-flex-center uk-grid" uk-grid uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
|
||||
<ng-template #numberCard let-numberSize="numberSize" let-name="name" let-url="url">
|
||||
<a class="uk-card uk-card-default uk-card-hover uk-position-relative uk-padding-small uk-display-block uk-link-reset"
|
||||
[href]="url" target="_blank" uk-scrollspy-class>
|
||||
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
|
||||
<div class="uk-text-center">
|
||||
<div
|
||||
class="uk-text-primary-gradient uk-text-bold number">{{(numberSize.number|number) + numberSize.size}}</div>
|
||||
<div class="uk-margin-small-top uk-text-large">{{name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</ng-template>
|
||||
<div *ngIf="publicationsSize">
|
||||
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: publicationsSize, name: 'Publications',
|
||||
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=publications'}">
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="datasetsSize">
|
||||
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: datasetsSize, name: 'Datasets',
|
||||
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=dataset'}">
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="softwareSize">
|
||||
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: softwareSize, name: 'Software',
|
||||
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=software'}">
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="otherSize">
|
||||
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: otherSize, name: 'Other',
|
||||
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=other'}">
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="fundersSize">
|
||||
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: fundersSize, name: 'Funders',
|
||||
url: 'https://explore.openaire.eu/search/find/projects'}">
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom">
|
||||
<div class="uk-grid uk-grid-large" uk-grid>
|
||||
<div class="uk-width-1-3@m uk-width-1-1">
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit f20fe90aa2482adb14c60ab684627ae3a9ad88b4
|
||||
Subproject commit bedc28384b3fe064d7ba14806c9f1f341bd584b2
|
||||
|
|
@ -1 +1 @@
|
|||
Subproject commit 77d3480a05f35055d0447844c184b680b3a1a502
|
||||
Subproject commit fbbae0418315e06d6ce5a0d193fd08c8ea617b6b
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 158 KiB |
|
|
@ -1 +1 @@
|
|||
Subproject commit b68ddc2064ed6934d292794829a0a09ff6082eb3
|
||||
Subproject commit b441da3afde53c70df14cbdfc1230de41a034bb1
|
||||
Loading…
Reference in New Issue