- better styling for section 'services': style.css, index.blade.php and services.blade.php

This commit is contained in:
Arno Kaimbacher 2020-04-22 22:12:24 +02:00
parent 06effbb2f7
commit 5e63dc41f6
3 changed files with 42 additions and 38 deletions

44
public/css/style.css vendored
View File

@ -497,7 +497,6 @@ section.normal {
} }
/* Work items */ /* Work items */
.work-items { .work-items {
list-style: none; list-style: none;
width: 100%; width: 100%;
@ -506,7 +505,7 @@ section.normal {
.work-items li { .work-items li {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
height: 360px; height: 310px;
/* important because we need to overwrite the default skeleton */ /* important because we need to overwrite the default skeleton */
margin: 0!important; margin: 0!important;
@ -528,41 +527,46 @@ section.normal {
} }
/* Work detail */ /* Work detail */
.work-detail { .work-back {
position: absolute; position: absolute;
top: 0; bottom: 0; left: 0; right: 0; top: 0; bottom: 0; left: 0; right: 0;
opacity: 0;
opacity: 0; background-color: #777;
background: rgba(0,0,0,.75);
color: white; color: white;
-webkit-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out; transition: all .3s ease-in-out;
border-radius: 3px;
} }
.work-detail h3 { .work-back p {
font-size: 16px; font-size: 14px;
letter-spacing: .05em;
}
.work-detail p {
font-size: 15px;
/* text-transform: capitalize; */ /* text-transform: capitalize; */
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
.work-back p a {
color: #6aa3d5;
cursor: pointer;
text-decoration: none;
}
.work-back p a:hover {
color: #1EAEDB;
}
.work-front { .work-front {
position: absolute; position: absolute;
top: 0; bottom: 0; left: 0; right: 0; top: 0; bottom: 0; left: 0; right: 0;
/* opacity: 0; */ /* opacity: 0; */
background: #F5F5F5; background: #F5F5F5;
color: black; color: black;
box-shadow: inset 0 0 0 10px grey; border-radius: 3px;
} }
.work-front p { font-size: 15px; .work-front h3 {
margin-top: 15px;
}
.work-front p {
font-size: 15px;
color: black; color: black;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
@ -570,12 +574,12 @@ section.normal {
.work-front .icon { .work-front .icon {
line-height: 1; line-height: 1;
font-size: 40px; font-size: 40px;
color: #00bfffcc; color: #6aa3d5;
} }
.work-items li:hover .work-detail{ .work-items li:hover .work-back{
opacity: 1; opacity: 1;
box-shadow: inset 0 0 0 10px #222; /* box-shadow: inset 0 0 0 10px #222; */
} }
.work-items li:hover .work-front{ .work-items li:hover .work-front{
opacity: 0; opacity: 0;

View File

@ -78,10 +78,10 @@
<h3>Datenarchvierung</h3> <h3>Datenarchvierung</h3>
</div> </div>
</div> </div>
<div class="work-detail"> <div class="work-back">
<div class="vertical-centered"> <div class="vertical-centered">
<p class="separator orange">Datenarchvierung</p> {{-- <p class="separator orange">Datenarchvierung</p> --}}
<p class="paragraph-justify"> <p>
Tethys RDR publiziert und archiviert nach den FAIR Prinzipien* Tethys RDR publiziert und archiviert nach den FAIR Prinzipien*
nachhaltig so wie sicher geowissenschaftliche Datensätze in offenen, frei lesbaren nachhaltig so wie sicher geowissenschaftliche Datensätze in offenen, frei lesbaren
Formaten. Formaten.
@ -99,10 +99,10 @@
<h3>Datenpublikation</h3> <h3>Datenpublikation</h3>
</div> </div>
</div> </div>
<div class="work-detail"> <div class="work-back">
<div class="vertical-centered"> <div class="vertical-centered">
<p class="separator orange">Datenpublikation</p> {{-- <p class="separator orange">Datenpublikation</p> --}}
<p class="paragraph-justify"> <p>
Die Datensätze werden mit standardisierten Metadatenschemen publiziert Die Datensätze werden mit standardisierten Metadatenschemen publiziert
und sind somit nicht nur auffindbar, wiederverwendbar und auch maschinenlesbar, und sind somit nicht nur auffindbar, wiederverwendbar und auch maschinenlesbar,
sondern können dadurch auch einfach zitiert werden. sondern können dadurch auch einfach zitiert werden.
@ -118,10 +118,10 @@
<h3>Begutachtung</h3> <h3>Begutachtung</h3>
</div> </div>
</div> </div>
<div class="work-detail"> <div class="work-back">
<div class="vertical-centered"> <div class="vertical-centered">
<p class="separator orange">Begutachtung</p> {{-- <p class="separator orange">Begutachtung</p> --}}
<p class="paragraph-justify"> <p>
Alle im Tethys RDR publizierten Datensätze werden auf technische sowie inhaltliche Alle im Tethys RDR publizierten Datensätze werden auf technische sowie inhaltliche
Vollständigkeit geprüft Vollständigkeit geprüft
und werden bei Bedarf auch einer fachlichen Begutachtung unterworfen. und werden bei Bedarf auch einer fachlichen Begutachtung unterworfen.

View File

@ -23,10 +23,10 @@
<h3>Datenarchvierung</h3> <h3>Datenarchvierung</h3>
</div> </div>
</div> </div>
<div class="work-detail"> <div class="work-back">
<div class="vertical-centered"> <div class="vertical-centered">
<p class="separator orange">Datenarchvierung</p> {{-- <p class="orange">Datenarchvierung</p> --}}
<p class="paragraph-justify"> <p>
Tethys RDR publiziert und archiviert nach den FAIR Prinzipien* Tethys RDR publiziert und archiviert nach den FAIR Prinzipien*
nachhaltig so wie sicher geowissenschaftliche Datensätze in offenen, frei lesbaren nachhaltig so wie sicher geowissenschaftliche Datensätze in offenen, frei lesbaren
Formaten. Formaten.
@ -44,10 +44,10 @@
<h3>Datenpublikation</h3> <h3>Datenpublikation</h3>
</div> </div>
</div> </div>
<div class="work-detail"> <div class="work-back">
<div class="vertical-centered"> <div class="vertical-centered">
<p class="separator orange">Datenpublikation</p> {{-- <p class="orange">Datenpublikation</p> --}}
<p class="paragraph-justify"> <p>
Die Datensätze werden mit standardisierten Metadatenschemen publiziert Die Datensätze werden mit standardisierten Metadatenschemen publiziert
und sind somit nicht nur auffindbar, wiederverwendbar und auch maschinenlesbar, und sind somit nicht nur auffindbar, wiederverwendbar und auch maschinenlesbar,
sondern können dadurch auch einfach zitiert werden. sondern können dadurch auch einfach zitiert werden.
@ -63,10 +63,10 @@
<h3>Begutachtung</h3> <h3>Begutachtung</h3>
</div> </div>
</div> </div>
<div class="work-detail"> <div class="work-back">
<div class="vertical-centered"> <div class="vertical-centered">
<p class="separator orange">Begutachtung</p> {{-- <p class="orange">Begutachtung</p> --}}
<p class="paragraph-justify"> <p>
Alle im Tethys RDR publizierten Datensätze werden auf technische sowie inhaltliche Vollständigkeit geprüft Alle im Tethys RDR publizierten Datensätze werden auf technische sowie inhaltliche Vollständigkeit geprüft
und werden bei Bedarf auch einer fachlichen Begutachtung unterworfen. und werden bei Bedarf auch einer fachlichen Begutachtung unterworfen.
Ein klassischer Peer Review-Prozess ist in Vorbereitung. Ein klassischer Peer Review-Prozess ist in Vorbereitung.