MediaWiki:Frame.rythm: Difference between revisions

From BITPlan Wiki
Jump to navigation Jump to search
(Undo revision 470 by Wf (talk))
No edit summary
 
(38 intermediate revisions by the same user not shown)
Line 10: Line 10:
   <meta charset="utf-8"/>
   <meta charset="utf-8"/>
   <style>
   <style>
body {
/**
    background-color: linen;
* 1. Avoid the IE 10-11 `min-height` bug.
* 2. Set `flex-shrink` to `0` to prevent some browsers from
*    letting these items shrink to smaller than their content's default
*    minimum size. See http://bit.ly/1Mn35US for details.
* 3. Use `%` instead of `vh` since `vh` is buggy in older mobile Safari.
*/
body
{
  padding:0;
  margin:0;
  font-family:Verdana;
}
 
.HolyGrail {
  display: flex;
  height: 100%; /* 1, 3 */
  flex-direction: column;
}
 
.HolyGrail-header,
.HolyGrail-footer {
  flex: none; /* 2 */
  color: #FF8000;
  height: 64px;
  background-color: #FCFCFC;
}
 
.HolyGrail-body {
  display: flex;
  flex: 1 0 auto; /* 2 */
  flex-direction: column;
  padding: var(--space);
  background-color: #FEFEFE;
}
 
.HolyGrail-content {
  margin-top: var(--space);
  margin-left: 10px;
}
 
.HolyGrail-nav {
  order: -1;
}
 
.HolyGrail-nav,
.HolyGrail-ads {
  padding: 1em;
  border-radius: 3px;
  background: rgba(147, 128, 108, 0.1);
}
 
@("@")media (--break-lg) {
  .HolyGrail-body {
    flex-direction: row;
  }
  .HolyGrail-content {
    flex: 1;
    padding: 0 var(--space-lg);
    margin: 0;
  }
  .HolyGrail-nav, .HolyGrail-ads {
    flex: 0 0 12em;
  }
}
}


h1 {
h1 {
     color: #FF8000;
     color: #FF8000;
     margin-left: 40px;
}
 
h2 {
     color: #FF8000;
}
 
h3 {
    color: #FF8000;
}
}
   </style>
   </style>
</head>
</head>
<body>
<body>
   <div id='content'>
   <div class="HolyGrail-body">
@(content)
    <header class="HolyGrail-header"><div style='float:left'><img height='64px' src='http://wiki.bitplan.com/images/wiki/thumb/6/63/Profiwikiicon.png/128px-Profiwikiicon.png'></div><div style='margin-top:10px'><span style='font-size:24px'><a href='http://profiwiki.bitplan.com'>Powered by Profiwiki</a></span></div></header>
    <main class="HolyGrail-content">@(content)</main>
   </div>
   </div>
  <footer class="HolyGrail-footer"> <div style="width: 50%; margin: 0px auto;">Copyright (c) 2017 <a href='http://www.bitplan.com'>BITPlan GmbH</a></div></footer>
</body>
</body>
</source>
</source>
[[Category:RythmTemplate]]

Latest revision as of 13:26, 13 January 2018

@// Rythm template for the manager for the 
@// Entity Attribute which is a DocElement
@args() {
  String content;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <style>
/**
 * 1. Avoid the IE 10-11 `min-height` bug.
 * 2. Set `flex-shrink` to `0` to prevent some browsers from
 *    letting these items shrink to smaller than their content's default
 *    minimum size. See http://bit.ly/1Mn35US for details.
 * 3. Use `%` instead of `vh` since `vh` is buggy in older mobile Safari.
 */
body
{
   padding:0;
   margin:0;
   font-family:Verdana;
}

.HolyGrail {
  display: flex;
  height: 100%; /* 1, 3 */
  flex-direction: column;
}

.HolyGrail-header,
.HolyGrail-footer {
  flex: none; /* 2 */
  color: #FF8000;
  height: 64px;
  background-color: #FCFCFC;
}

.HolyGrail-body {
  display: flex;
  flex: 1 0 auto; /* 2 */
  flex-direction: column;
  padding: var(--space);
  background-color: #FEFEFE;
}

.HolyGrail-content {
  margin-top: var(--space);
  margin-left: 10px;
}

.HolyGrail-nav {
  order: -1;
}

.HolyGrail-nav,
.HolyGrail-ads {
  padding: 1em;
  border-radius: 3px;
  background: rgba(147, 128, 108, 0.1);
}

@("@")media (--break-lg) {
  .HolyGrail-body {
    flex-direction: row;
  }
  .HolyGrail-content {
    flex: 1;
    padding: 0 var(--space-lg);
    margin: 0;
  }
  .HolyGrail-nav, .HolyGrail-ads {
    flex: 0 0 12em;
  }
}

h1 {
    color: #FF8000;
}

h2 {
    color: #FF8000;
}

h3 {
    color: #FF8000;
}
  </style>
</head>
<body>
  <div class="HolyGrail-body">
    <header class="HolyGrail-header"><div style='float:left'><img height='64px' src='http://wiki.bitplan.com/images/wiki/thumb/6/63/Profiwikiicon.png/128px-Profiwikiicon.png'></div><div style='margin-top:10px'><span style='font-size:24px'><a href='http://profiwiki.bitplan.com'>Powered by Profiwiki</a></span></div></header>
    <main class="HolyGrail-content">@(content)</main>
  </div>
  <footer class="HolyGrail-footer"> <div style="width: 50%; margin: 0px auto;">Copyright (c) 2017 <a href='http://www.bitplan.com'>BITPlan GmbH</a></div></footer>
</body>