Fix display of con10t pages.

dainst · May 18, 2016 · 4b8b704 · 4b8b704
1 parent 06063d7
commit 4b8b704
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/dist/css/idai-components.css b/dist/css/idai-components.css
@@ -6004,17 +6004,17 @@ idai-footer .logoImage {
 #teaser:hover #description {
   opacity: 1; }
 
-.page {
+.teaserpage {
   position: relative;
   padding: 25px;
   background-color: rgba(255, 255, 255, 0.7);
   margin-top: -150px; }
 
-.page main {
+.teaserpage main {
   background-color: #fff;
   padding: 25px; }
 
-.page main h1 {
+.teaserpage main h1 {
   margin: 0;
   padding: 10px 25px 25px;
   text-align: center; }

diff --git a/partials/header.html b/partials/header.html
@@ -4,7 +4,7 @@
         link="http://arachne.dainst.org">
 </idai-header>
 
-<div class="page container">
+<div class="teaserpage container">
     <main>
         <h1>&lt;idai-header&gt;</h1>
         <strong>idai-components</strong> provides the directive <code>&lt;idai-header&gt;</code> to extend your project
@@ -24,7 +24,7 @@ <h2>Usage</h2>
                 <code>link</code> (optional) - you can provide a url to connect the header with a web ressource.
             </li>
         </ul>
-        Wrap your page content in a div-Container with the classes <code>page</code> and <code>container</code> or use
+        Wrap your page content in a div-Container with the classes <code>teaserpage</code> and <code>container</code> or use
         the predefined class <code>con10t-page</code> to have your page rendered correctly.
 
         <h3>Example page</h3>
@@ -36,23 +36,23 @@ <h3>Example page</h3>
     link="http://arachne.dainst.org"&gt;
 &lt;/idai-header&gt;
 
-&lt;div class="page container"&gt;
+&lt;div class="teaserpage container"&gt;
     &ltmain&gt;
         &lth1>Project Title&lt;/h1&gt;
         Page content. Here, div-container with bootstrap's classes can be used to structure your content.
     &lt/main&gt;
 &lt/div&gt;
 </pre>
 
-        Example page using <code>con10t</code> classes:
+        The following example page uses <code>con10t</code> classes. Be sure to add the class <code>teaserpage</code> to your con10t-page:
 <pre>
 &lt;idai-header
     image="/img/exampleteaser.jpg"
     description="Palmyra, Baal-Heiligtum, Bankettsaal"
     link="http://arachne.dainst.org"&gt;
 &lt;/idai-header&gt;
 
-&lt;div class="con10t-page container"&gt;
+&lt;div class="con10t-page teaserpage container"&gt;
     &lt;div class="con10t-row"&gt;
         &lt;div class="con10t-title"&gt;
             &lt;img src="path/to/your/project-logo" class="img-responsive"&gt;

diff --git a/src/scss/idai-components/_idai-header.scss b/src/scss/idai-components/_idai-header.scss
@@ -46,19 +46,19 @@
   opacity: 1;
 }
 
-.page {
+.teaserpage {
   position: relative;
   padding: 25px;
   background-color: rgba(255, 255, 255, 0.7);
   margin-top: -150px;
 }
 
-.page main {
+.teaserpage main {
   background-color: #fff;
   padding: 25px;
 }
 
-.page main h1 {
+.teaserpage main h1 {
   margin: 0;
   padding: 10px 25px 25px;
   text-align: center;