Go to file
bmen 58ebb0d88f mysite.template zu site-conf umbenannt und pfad angepasst 2019-09-30 08:30:48 +00:00
css Initial Commit 2019-03-22 11:10:07 +01:00
doc doc: new search results grid image 2019-04-15 02:17:04 +02:00
img deleted no nooded images and renamed images for better understanding 2019-04-15 01:06:54 +02:00
js implemented parallax effect 2019-04-15 03:11:37 +02:00
.gitignore ignore all mac os system files 2019-03-28 09:35:05 +01:00
README.md 'README.md' ändern 2019-04-15 00:29:44 +00:00
detail.html implemented parallax effect 2019-04-15 03:11:37 +02:00
docker-compose.yml mysite.template zu site-conf umbenannt und pfad angepasst 2019-09-30 08:30:48 +00:00
index.html Added category and "to my list" button to search result item 2019-04-18 17:21:03 +02:00
mysite.template nginx template hinzugefügt 2019-09-30 08:22:32 +00:00
style.css Added category and "to my list" button to search result item 2019-04-18 17:21:03 +02:00

README.md

OHO - Openource Hardware Observatory

Intro

Demo

https://oho.zeitpunkt-agentur.org

CSS

The styling of the page is in the CSS file: style.css. In general, only the classes of elements of the media wiki have to be found out and transferred to the CSS. Some implementations are a bit more tricky and are described in more detail in this Readme.

Images

All images are in the folder /img. There are sample images as well as individual icons, banner / footer backgrounds and logo files.

Javascript

The Javascript Framework Jquery is used for this website. The javascript functions are saved in separate files in the /js folder and named according to their task.

Overview CSS classes homepage

Overview CSS classes homepage

z-index

.header {
  z-index:1003;
}
.search-results-item:hover {
  z-index:1002;
}
.row::before {
  z-index:1001;
}
.row::after {
  z-index:1001;
}
.searchbar {
  z-index:1000;
}
.search-results-item {
  z-index:999;
}

Row - Background and red lines (CSS line: 51-87)

The rows who separating the content horizontally must be 100% wide. This means that the width restriction of the content must be made within the row. So the background color gradiation is in full width and the red lines are on the left and right side of the browser.

The red lines are purely CSS and no additionaly HTML elements have to be created.

.row::before {...}
.row::after {...}

Search results grid

Because of the hover effect, the search result item (.search-results-item) must be absolutely positioned. Therefore, it is important that there is a grid element (.col-1-4) above the search result item which is relatively positioned. And it needs even a minimum height, because the absolutely positioned search result item falls from the HTML flow.