- add font awesome
- add custom page styling
This commit is contained in:
parent
315f845292
commit
a4e8ee6f2e
1243
package-lock.json
generated
1243
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -3,12 +3,15 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve --port 3000",
|
||||
"serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --port 3000",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint",
|
||||
"format": "prettier --write 'src/**/*.{ts,tsx}'"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.36",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.0-5",
|
||||
"@openfonts/open-sans_all": "^1.44.2",
|
||||
"axios": "^0.24.0",
|
||||
"class-transformer": "^0.4.0",
|
||||
|
|
|
|||
68
src/App.vue
68
src/App.vue
|
|
@ -1,6 +1,12 @@
|
|||
<template>
|
||||
<!-- <HelloWorld msg="Welcome to Your Vue.js plus TypeScript App" /> -->
|
||||
|
||||
<!-- <link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
|
||||
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
|
||||
crossorigin="anonymous"
|
||||
/> -->
|
||||
<nav class="navbar navbar-light border-bottom" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="#">
|
||||
|
|
@ -39,10 +45,11 @@
|
|||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<a class="button is-primary">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-align-left"></i>
|
||||
</span>
|
||||
<a class="button is-primary custom-button">
|
||||
<!-- <span class="icon is-small"> -->
|
||||
<!-- <i class="fas fa-sign-in-alt"></i> -->
|
||||
<fa :icon="['fas', 'phone']" class="fas fa-sign-in-alt" />
|
||||
<!-- </span> -->
|
||||
<strong>Sign in</strong>
|
||||
</a>
|
||||
<!-- <a class="button is-light"> Log in </a> -->
|
||||
|
|
@ -78,16 +85,59 @@
|
|||
<hr class="center-line" />
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="column header-image align-items-center h-100">
|
||||
<!-- <div class="col mt-3 mx-auto">
|
||||
<div class="column">
|
||||
<div class="col text-center py-3">
|
||||
<h1>Tethys Research Data Repository</h1>
|
||||
<p class="lead">Data Publisher for Geoscience Austria</p>
|
||||
<hr class="center-line" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="column header-image align-items-center h-100">
|
||||
<div class="col mt-3 mx-auto">
|
||||
<div class="search-box mx-auto">
|
||||
<form class="my-2 my-lg-0 main-search-from-bg d-flex d-row">
|
||||
<input class="form-control mr-sm-2 border-0" type="text" placeholder="Search" aria-label="Search" />
|
||||
<button class="btn btn-secondary m-0" type="submit"><i class="fas fa-search text-white"></i></button>
|
||||
</form>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <figure class="image is-128x128">
|
||||
<img src="https://bulma.io/images/placeholders/256x256.png" />
|
||||
</figure> -->
|
||||
<section data-sr id="help" class="help u-full-width featured-bg-image"></section>
|
||||
|
||||
<!-- <div class="columns">
|
||||
<div class="column text-center">
|
||||
<h1>ÜBER TETHYS</h1>
|
||||
<p class="lead">Was sind unsere Schwerpunkte</p>
|
||||
<hr class="center-line" />
|
||||
</div>
|
||||
</div> -->
|
||||
<section class="section">
|
||||
<div class="column is-full text-center">
|
||||
<h1>ÜBER TETHYS</h1>
|
||||
<p class="lead">Was sind unsere Schwerpunkte</p>
|
||||
<hr class="center-line" />
|
||||
</div>
|
||||
<div class="column is-full text-left">
|
||||
<p>
|
||||
TETHYS RDR ist ein publizierendes Forschungsdatenrepositorium der Geologischen Bundesanstalt (GBA), das an der GBA generierte geowisse nschaftliche
|
||||
Forschungsdaten veröffentlicht.
|
||||
</p>
|
||||
<p>
|
||||
Zum derzeitigen Stand wird TETHYS RDR in deutscher Sprache bereitgestellt. Die englische Version befindet sich in Vorbereitung und wird sukzessive ebenfalls zur
|
||||
Verfügung gestellt. Die Forschungsdatenpublikationen und die dazugehörigen Metadaten können in Deutsch und in Englisch veröffentlicht werden. Tethys RDR hat den
|
||||
Anspruch, publizierte Datensätze unverändert, langfristig und nachhaltig bereitzustellen. Dadurch ist Tethys ein Forschungsdatenrepositorium, das ein
|
||||
permanentes Referenzieren ermöglicht und somit die darin publizierten Datensätze zitierfähig macht.
|
||||
</p>
|
||||
<p>
|
||||
Der Name Tethys kommt ursprünglich aus der griechischen Mythologie und benennt eine Titanin und Meeresgöttin. Ende des 19. Jahrhunderts entdeckte Eduard Suess
|
||||
(1831–1914), ein bedeutender österreichischer Geologe, den mesozoischen Ozean und benannte ihn nach dieser Tethys.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
|
||||
|
||||
|
|
@ -253,7 +303,7 @@ export default App;
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 5px;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,9 +16,30 @@
|
|||
text-decoration: none;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
};
|
||||
}
|
||||
&.custom-button {
|
||||
// display: block;
|
||||
|
||||
width: 125px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
.fas {
|
||||
margin-right: 0.6em;
|
||||
// border-right: 1px solid #fff;
|
||||
width: 2em;
|
||||
};
|
||||
strong {
|
||||
border-left: 1px solid #fff;
|
||||
padding-left: 0.6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.header-image {
|
||||
background-image: url("./../site/img/Main-banner-homepage-xl.jpg");
|
||||
background-size: cover;
|
||||
|
|
@ -35,7 +56,98 @@
|
|||
height: 100% !important;
|
||||
}
|
||||
|
||||
/* =Section general styling
|
||||
-------- */
|
||||
// section {
|
||||
// text-align: center;
|
||||
// padding: 60px 0 0 0;
|
||||
// }
|
||||
// section.normal {
|
||||
// text-align: left;
|
||||
// }
|
||||
|
||||
// .content-container {
|
||||
// margin-top: 25px;
|
||||
// }
|
||||
// /*
|
||||
|
||||
|
||||
.help:before {
|
||||
background: url("./../site/img/Main-banner-homepage-xl.jpg");
|
||||
}
|
||||
|
||||
.featured-bg-image {
|
||||
position: relative;
|
||||
/* background-color: #222222; */
|
||||
background-color: gray;
|
||||
color: white;
|
||||
min-height: 500px;
|
||||
}
|
||||
.featured-bg-image:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
// opacity: .35;
|
||||
|
||||
// background-size: cover;
|
||||
// background-position: top center;
|
||||
// background-repeat: no-repeat;
|
||||
min-height: 562px;
|
||||
}
|
||||
/* Utilities
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.u-full-width {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
.py-3 {
|
||||
padding-top: 1rem !important;
|
||||
padding-bottom: 1rem !important;
|
||||
}
|
||||
hr.center-line {
|
||||
background: #33cccc;
|
||||
}
|
||||
|
||||
hr.center-line {
|
||||
border: 0;
|
||||
height: 3px;
|
||||
width: 185px;
|
||||
position: relative;
|
||||
margin: 1.65em auto;
|
||||
opacity: 1;
|
||||
}
|
||||
body H1 {
|
||||
font-family: Verdana;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: 1.6em;
|
||||
line-height: 1.75em;
|
||||
}
|
||||
.lead {
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
// font-family: Verdana;
|
||||
color: #495057;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1.5rem !important;
|
||||
}
|
||||
.text-left {
|
||||
text-align: left!important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -247,8 +359,6 @@ svg,
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.navbar {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
|
|
@ -283,4 +393,3 @@ svg,
|
|||
.navbar-item img {
|
||||
max-height: 6rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import "./assets/scss/main-styles.scss";
|
||||
import FontAwesomeIcon from "@/utilities/fontawesome";
|
||||
|
||||
createApp(App).mount("#app");
|
||||
createApp(App).component("fa", FontAwesomeIcon).mount("#app");
|
||||
|
|
|
|||
|
|
@ -42,4 +42,9 @@ vue inspect > out.js
|
|||
|
||||
npm install --save qs
|
||||
|
||||
npm install --save class-transformer
|
||||
npm install --save class-transformer
|
||||
|
||||
|
||||
npm install --save @fortawesome/vue-fontawesome@prerelease
|
||||
npm install --save @fortawesome/fontawesome-svg-core
|
||||
npm install --save @fortawesome/free-solid-svg-icons
|
||||
14
src/utilities/fontawesome.ts
Normal file
14
src/utilities/fontawesome.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import { library } from "@fortawesome/fontawesome-svg-core";
|
||||
import { faPhone } from "@fortawesome/free-solid-svg-icons";
|
||||
// import { faUser } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faFlag, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
// https://stackoverflow.com/questions/66389974/using-font-awesome-in-vue-3
|
||||
library.add(faSignInAlt);
|
||||
library.add(faFlag);
|
||||
library.add(faPhone);
|
||||
// import { dom } from "@fortawesome/fontawesome-svg-core";
|
||||
// dom.watch();
|
||||
|
||||
export default FontAwesomeIcon;
|
||||
Loading…
Reference in New Issue
Block a user