Difference between revisions of "MediaWiki:Frame.rythm"
Jump to navigation
Jump to search
Line 10: | Line 10: | ||
<meta charset="utf-8"/> | <meta charset="utf-8"/> | ||
<style> | <style> | ||
− | + | .HolyGrail { | |
− | + | display: flex; | |
− | + | min-height: 100vh; | |
− | + | flex-direction: column; | |
− | } | + | } |
+ | |||
+ | .HolyGrail-body { | ||
+ | display: flex; | ||
+ | flex: 1; | ||
+ | background-color: #EEEEEE; | ||
+ | font-size: 18px; | ||
+ | line-height: 21px; | ||
+ | } | ||
+ | |||
+ | .HolyGrail-content { | ||
+ | flex: 1; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 768px) { | ||
+ | .HolyGrail-body { | ||
+ | flex-direction: row; | ||
+ | flex: 1; | ||
+ | } | ||
+ | .HolyGrail-content { | ||
+ | flex: 1; | ||
+ | } | ||
+ | } | ||
h1 { | h1 { | ||
Line 31: | Line 53: | ||
<body> | <body> | ||
<div id='content'> | <div id='content'> | ||
− | @(content) | + | |
+ | </div> | ||
+ | <div class="HolyGrail-body"> | ||
+ | <header>header</header> | ||
+ | <main class="HolyGrail-content">@(content)</main> | ||
</div> | </div> | ||
+ | <footer>footer</footer> | ||
</body> | </body> | ||
</source> | </source> |
Revision as of 19:34, 5 February 2017
@// 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>
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.HolyGrail-body {
display: flex;
flex: 1;
background-color: #EEEEEE;
font-size: 18px;
line-height: 21px;
}
.HolyGrail-content {
flex: 1;
}
@media (min-width: 768px) {
.HolyGrail-body {
flex-direction: row;
flex: 1;
}
.HolyGrail-content {
flex: 1;
}
}
h1 {
color: #FF8000;
}
h2 {
color: #FF8000;
}
h3 {
color: #FF8000;
}
</style>
</head>
<body>
<div id='content'>
</div>
<div class="HolyGrail-body">
<header>header</header>
<main class="HolyGrail-content">@(content)</main>
</div>
<footer>footer</footer>
</body>