MediaWiki:Frame.rythm: Difference between revisions

From BITPlan Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(39 intermediate revisions by the same user not shown)
Line 5: Line 5:
   String content;
   String content;
}
}
@// http://jsfiddle.net/VzGAy/2/
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<html lang="en">
Line 11: 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;
}
}


h1 {
.HolyGrail {
    color: #FF8000;
  display: flex;
    margin-left: 40px;
  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;
}
}
.container {
 
    width: 500px;
.HolyGrail-content {
    max-height: 500px;
  margin-top: var(--space);
    margin: 10px;
  margin-left: 10px;
    border: 1px solid #fff;
    background-color: #ffffff;
    box-shadow: 0px 2px 7px #292929;
    -moz-box-shadow: 0px 2px 7px #292929;
    -webkit-box-shadow: 0px 2px 7px #292929;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
}
.mainbody,
 
.header,
.HolyGrail-nav {
.footer {
  order: -1;
    padding: 5px;
}
}
.mainbody {
 
    margin-top: 0;
.HolyGrail-nav,
    min-height: 150px;
.HolyGrail-ads {
    max-height: 388px;
  padding: 1em;
    overflow: auto;
  border-radius: 3px;
  background: rgba(147, 128, 108, 0.1);
}
}
.header {
 
     height: 40px;
@("@")media (--break-lg) {
    border-bottom: 1px solid #EEE;
  .HolyGrail-body {
     background-color: #ffffff;
     flex-direction: row;
     height: 40px;
  }
    -webkit-border-top-left-radius: 5px;
  .HolyGrail-content {
     -webkit-border-top-right-radius: 5px;
     flex: 1;
    -moz-border-radius-topleft: 5px;
     padding: 0 var(--space-lg);
    -moz-border-radius-topright: 5px;
     margin: 0;
     border-top-left-radius: 5px;
  }
    border-top-right-radius: 5px;
  .HolyGrail-nav, .HolyGrail-ads {
     flex: 0 0 12em;
  }
}
}
.footer {
 
     height: 40px;
h1 {
    background-color: whiteSmoke;
     color: #FF8000;
    border-top: 1px solid #DDD;
}
    -webkit-border-bottom-left-radius: 5px;
 
     -webkit-border-bottom-right-radius: 5px;
h2 {
    -moz-border-radius-bottomleft: 5px;
     color: #FF8000;
    -moz-border-radius-bottomright: 5px;
}
    border-bottom-left-radius: 5px;
 
     border-bottom-right-radius: 5px;
h3 {
     color: #FF8000;
}
}
   </style>
   </style>
</head>
</head>
<body>
<body>
   <div class="container">
   <div class="HolyGrail-body">
     <div class="header">Header</div>
     <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>
    <div class="mainbody">
     <main class="HolyGrail-content">@(content)</main>
@(content)
    </div>
     <div class="footer">Footer</div>
   </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>
Retrieved from "https://wiki.bitplan.com/index.php?title=MediaWiki:Frame.rythm&oldid=5768"