exa/reploy
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

mock a sidebar

Browse source
This commit is contained in:
Mirek Kratochvil 2023-06-08 21:39:19 +02:00
parent 2b68087b23
commit 09b5a9be85
3 changed files with 80 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
assets/style.css
View file

@ -23,12 +23,6 @@ h1, h2, h3, h4, h5, h6 {
font-family: 'Roboto Condensed', sans-serif; font-family: 'Roboto Condensed', sans-serif;
color: #444; color: #444;
border-bottom: 1pt solid #eee; border-bottom: 1pt solid #eee;
/* this might need rethinking but looks good for navigation
border-left: 1rem solid;
border-color: #aaa;
margin-left: -2rem;
padding-left: 1rem;
*/
} }
h1 { h1 {
@ -61,21 +55,40 @@ h6 {
font-weight: 300; font-weight: 300;
} }
.layout-topbar { header {
height: 8rem; height: 8rem;
margin-bottom: 3rem; margin-bottom: 3rem;
background: linear-gradient(to bottom, #fafafa, #fafafa 66%, #eeeeee); background: linear-gradient(to bottom, #fafafa, #fafafa 66%, #eeeeee);
display: flex; display: flex;
} }
.topbar-borderbottom { main {
border-bottom: 1pt solid #777; display: flex;
width: 100%;
} }
.bar-fill { .width-content {
width: 900px;
}
.width-sidebar {
width: 300px;
}
.flex-fill {
flex-grow: 1; flex-grow: 1;
} }
.flex-sidefill {
flex-grow: 1;
}
/* header bar */
.topbar-borderbottom {
border-bottom: 1pt solid #777;
}
.same-height { .same-height {
height: inherit; height: inherit;
display: flex; display: flex;
@ -137,12 +150,27 @@ h6 {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
/* contents bar */
.width-content { .sidebar-box {
width: 980px; align-self: flex-start;
font-size: 80%;
color: #777;
padding-left: 2em;
} }
.layout-footer { .sidebar-header {
font-weight: bold;
}
.sidebar-values {
padding-left: 1em;
margin-bottom: 1em;
}
/* footer */
.content-footer {
height: 10rem; height: 10rem;
margin-top: 5rem; margin-top: 5rem;
background-color: #aaa; background-color: #aaa;
@ -180,7 +208,3 @@ h6 {
font-size: 80%; font-size: 80%;
color: #777; color: #777;
} }
.margin-center {
margin: 0 auto;
}

41
templates/footer.html
View file

@ -1,12 +1,31 @@
<div class="layout-footer"> <div class="content-footer">
<div class="bar-fill"></div> <div class="flex-fill"></div>
<div class="footer-r3"></div> <div class="footer-r3"></div>
<div class="footer-lcsb"></div> <div class="footer-lcsb"></div>
<div class="footer-text"> <div class="footer-text">
<div>Share this page: <a href="#">...</a></div> <div>
<div>The contents are available under the <a href="#">Creative Commons Attribution-ShareAlike License (CC-BY-SA 4.0)</a>.</div> The contents are available under the <a href="#">Creative Commons Attribution-ShareAlike License (CC-BY-SA 4.0)</a>.
<div><a href="#">Privacy Policy</a> (Only necessary cookies accepted — <a href="#">change</a>)</div> </div>
<div>
<a href="#">Privacy Policy</a> (Only necessary cookies accepted — <a href="#">change</a>)
</div>
</div>
<div class="flex-fill"></div>
</div>
</div> </div>
<div class="bar-fill"></div> <div class="width-sidebar sidebar-box">
<div> <div class="sidebar-header">
</div> Page categories
</div>
<div class="sidebar-values">
a → b → c
</div>
<div class="sidebar-header">
Last modification
</div>
<div class="sidebar-values">
January 2023
</div>
</div>
<div class="flex-sidefill"></div>
</main>

15
templates/header.html
View file

@ -1,5 +1,5 @@
<div class="layout-topbar"> <header>
<div class="bar-fill topbar-borderbottom"></div> <div class="flex-sidefill topbar-borderbottom"></div>
<div class="width-content same-height"> <div class="width-content same-height">
<div class="topbar-unilu topbar-borderbottom"> <div class="topbar-unilu topbar-borderbottom">
<div class="logo-unilu"></div> <div class="logo-unilu"></div>
@ -8,11 +8,14 @@
<div class="header-title">LCSB How-To Cards</div> <div class="header-title">LCSB How-To Cards</div>
<div class="header-subtitle">The practical and handy reference</div> <div class="header-subtitle">The practical and handy reference</div>
</div> </div>
<div class="bar-fill topbar-borderbottom"></div> <div class="flex-fill topbar-borderbottom"></div>
<div class="topbar-lcsb topbar-borderbottom"> <div class="topbar-lcsb topbar-borderbottom">
<div class="logo-lcsb"></div> <div class="logo-lcsb"></div>
</div> </div>
</div> </div>
<div class="bar-fill topbar-borderbottom"></div> <div class="flex-sidefill topbar-borderbottom"></div>
</div> </header>
<div class="width-content margin-center"> <main>
<div class="flex-sidefill"></div>
<div class="width-sidebar sidebar-box"></div>
<div class="width-content">