153 lines
6.6 KiB
Markdown
153 lines
6.6 KiB
Markdown
# Arc-hive omeka theme
|
|
|
|
This is the Arc-hive development theme based on Omeka S theme based on [Omeka Foundation S theme].
|
|
|
|
## dev site
|
|
|
|
https://dev-archive.hangar.org/
|
|
|
|
### designs omeka
|
|
We are trying to accomplish this design for the OmekaS system
|
|
|
|
https://www.figma.com/file/HruKRRVPgfAgSgs8HihI2w/ARCHIVE-WEB-04?node-id=274%3A0
|
|
|
|
|
|
## Installation
|
|
|
|
For basic out-of-the-box use of the theme, follow the [Omeka S User Manual instructions for installing themes](https://omeka.org/s/docs/user-manual/sites/site_theme/#installing-themes).
|
|
|
|
```bash
|
|
cd themes
|
|
git clone https://git.hangar.org/arcHIVE-tech/Arc-hive-omeka-theme.git archive
|
|
cd archive
|
|
git checkout arc-hive-v01
|
|
chown -R www-data:www-data ./
|
|
```
|
|
to update changes
|
|
|
|
```bash
|
|
cd themes/archive
|
|
git pull
|
|
chown -R www-data:www-data ./
|
|
```
|
|
|
|
## Arc-hive theme notes
|
|
|
|
|
|
For more advanced use, such as customizing the theme with Sass, you'll need to install the tools with [NodeJS](https://nodejs.org/en/) (0.12 or greater). Navigate to your theme directory and run `npm install`.
|
|
|
|
## Theme Configuration
|
|
|
|
* **Stylesheet**: we provide de default **arc-hive** `css` file <del>The theme provides 4 style options.</del>
|
|
* <del>**Default** uses ZURB Foundation's default styles for prototyping, which are all viewable in their documentation under the [Kitchen Sink](https://get.foundation/sites/docs/kitchen-sink.html).</del>
|
|
* <del>**Revolution** aims to capture the feel of old documents and juxtaposes it with a bright red accent. It includes a textured paper background image.</del>
|
|
* <del>**Sea Foam** offers a clean, friendly look with a teal palette.</del>
|
|
* <del>**Inkwell** features a high contrast serif family for its typography, as well as sunny yellow accents.</del>
|
|
* **Navigation layouts**: Global navigation <del>can</del> displays as a **horizontal top bar** <del>**with optional dropdown menus** or a **left vertical column**</del>.
|
|
* **Show Top Navigation Child Pages**: Toggle display of child pages within the main navigation.
|
|
* **Top Navigation Depth**: If the main navigation is set to display child pages, this setting controls how many navigation levels to display. Setting this to '0' shows all levels.
|
|
* **Logo**: Upload an image asset to use as a logo in place of a text site title.
|
|
* **Footer Content**: it is set up by the `arc-hive` project needs and must be modified in the [`view/common/footer-archive.phtml`](https://git.hangar.org/arcHIVE-tech/Arc-hive-omeka-theme/src/branch/fix/20210728/view/common/footer-archive.phtml) file <del>Control what appears in the footer. This field takes HTML markup.</del>
|
|
* **Layout for Browse Pages**: Select how to display items within their "browse" views.
|
|
* **Grid**: Items are organized into rows and columns. This is recommended for items that prominently feature images.
|
|
* **List**: Items are stacked into a single column.
|
|
* **Toggle (default: grid)**: Site visitors can choose to display the browse views as grids or lists, and grids are the default.
|
|
* **Toggle (default: list)**: Site visitors can choose to display the browse views as grids or lists, and lists are the default.
|
|
* **Layout for Show Pages**: Resource metadata can show display as **stacked** with properties as headings above their values, or **inline** with properties as headings inline with their values.
|
|
|
|
## Customizing the Theme
|
|
|
|
The whole is being moved towards a more semantic solution such as, having the templates independendt from the **Foundation** `css` or `js` though being used it to preprocess the scss.
|
|
|
|
This way the `css` is independent from the framework and can be exported, has a semantic meaning and can be processed by any means.
|
|
|
|
most site follows:
|
|
```html
|
|
<html>
|
|
<head>
|
|
STANDARD HEAD SECTION
|
|
</head>
|
|
<body>
|
|
<content>
|
|
<header>
|
|
<main>
|
|
MAIN SITE TITLE
|
|
</main>
|
|
<nav>
|
|
TOP MENU
|
|
</nav>
|
|
</header>
|
|
<section>
|
|
HERO for example
|
|
</section>
|
|
<main>
|
|
<article>
|
|
MAIN ARTICLE
|
|
<section>
|
|
PARTS OF THE MAIN ARTICLE
|
|
SHOULD BE IN SECTIONS
|
|
</section>
|
|
</article>
|
|
<aside>
|
|
OTHER CONTENT SORROUNDING MAIN ARTICLE
|
|
<nav>
|
|
SUCH AS NAVIGATION AND SEARCH
|
|
</nav>
|
|
</aside>
|
|
</main>
|
|
<footer>
|
|
GENERAL FOOTER CONTENT
|
|
<nav>
|
|
FOOTER NAVIGATION
|
|
</nav>
|
|
</footer>
|
|
</content>
|
|
<script>
|
|
JS SCRIPTS BEST PRACTICES AT BOTTOM
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
|
|
### CSS classes
|
|
Arc-hive projecct css classes will start with `arc-` as ex: `arc-my-class-name`
|
|
|
|
|
|
|
|
### Sass Tasks
|
|
|
|
Run these commands within the theme's root directory.
|
|
|
|
* **npm start**: While this task runs, it watches for changes to sass files and recompiles the CSS.
|
|
* **gulp sass**: This is the one-off task for compiling the current Sass/CSS.
|
|
|
|
### Sass File Structure
|
|
|
|
<del>Foundation S comes with the Default theme, as well as 3 other customized stylesheets that were built on top of Default. The "Sea Foam" theme has the fewest overrides and is thus the easiest reference for a custom theme model.</del>
|
|
|
|
<del>**/asset/sass/seafoam.scss**</del>
|
|
|
|
We have all the scss files inside **/assets/scss/** directory, so when running `npm start` or `gulp scss`will generate the needed `/assets/css/default.css`
|
|
|
|
The file structure is as follows:
|
|
```
|
|
assets/scss/
|
|
components/ <---- such as accordion, buttons, cards, forms, tables, etc...
|
|
global/ <---- branding, colors, omeka, wordpress, typography,...
|
|
modules/ <---- content,footer,header,navigation,...
|
|
templates/ <---- front, kitchen-sink,...
|
|
_foundation-core.scss <---- select wich foundation to include
|
|
_settings.scss <---- variables applied all round scss
|
|
default.scss <---- components to be processed by npm/gulp sass/scss
|
|
editor.scss <---- parts regarding wordpress scss
|
|
```
|
|
|
|
Much of the customizability within the theme lies in managing its settings variables. ZURB Foundation's default global variables from their original `_settings.scss` all sit in `default.scss`.
|
|
|
|
Any non-global setting variable overrides should come after the import for `_settings.scss` and before their usagee in the rule files, `_foundation-core.scss`, and `_omeka.scss`.
|
|
|
|
ZURB Foundation's default style rules are all managed in `_foundation-core.scss`. All style rules specific to Omeka S are contained within `_omeka.scss`.
|
|
|
|
After all those imports come all style rules specific to the theme.
|