complete and utter redesign to use hmtlgrid
This commit is contained in:
etherware-novice
parent
61f0940279
commit
c1f6dc323d
@ -19,40 +19,44 @@ navbar: topnav
|
||||
|
||||
{% include background.html %}
|
||||
{% include mplayer.html %}
|
||||
<div class="vcol">
|
||||
<div class="columns">
|
||||
<div class="left-sidebar">
|
||||
{% if layout.navbar != "" %}
|
||||
{% include {{layout.navbar}}.html %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="main-content">{{ content }}</div>
|
||||
<div class="right-sidebar">
|
||||
time:
|
||||
<span id="swatchClock"></span>
|
||||
<script src="/assets/js/swatch.js"></script>
|
||||
|
||||
<img src="https://slimepondcount.goatcounter.com/counter/{{ page.url }}.png" style="width: 100%">
|
||||
<iframe src="https://www3.cbox.ws/box/?boxid=3539632&boxtag=JU8HaS" width="100%" height="450" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="5" marginwidth="5" scrolling="auto" id="cbox"></iframe>
|
||||
<div class="container">
|
||||
<div class="navigation">
|
||||
{% if layout.navbar != "" %}
|
||||
{% include {{layout.navbar}}.html %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<marquee class="name">{{ page.name }}</marquee>
|
||||
<div class="main">{{ content }}</div>
|
||||
<div class="pets">
|
||||
time:
|
||||
<span id="swatchClock"></span>
|
||||
<script src="/assets/js/swatch.js"></script>
|
||||
{% include statuscafe.html %}
|
||||
<img src="/assets/images/blinkers/cc-by-sa.gif">
|
||||
</div>
|
||||
<marquee class="quotes">
|
||||
quotes will go here when i get back to working on this
|
||||
</marquee>
|
||||
|
||||
<img src="https://slimepondcount.goatcounter.com/counter/{{ page.url }}.png" style="width: 100%" class="sitecount">
|
||||
<iframe src="https://www3.cbox.ws/box/?boxid=3539632&boxtag=JU8HaS" width="100%" height="450" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="5" marginwidth="5" scrolling="auto" id="cbox"></iframe>
|
||||
|
||||
|
||||
{% include statuscafe.html %}
|
||||
<marquee id="blinkerscroll">
|
||||
{% for blink in site.data.blinkers %}
|
||||
<img src="/assets/images/blinkers/{{ blink.name }}" class="blinkers"></img>
|
||||
{% endfor %}
|
||||
</marquee>
|
||||
|
||||
|
||||
<img src="/assets/images/blinkers/cc-by-sa.gif">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% unless jekyll.environment == "local" %}
|
||||
<link href="https://melonking.net/styles/flood.css" rel="stylesheet" type="text/css" media="all" />
|
||||
<script src="https://melonking.net/scripts/flood.js"></script>
|
||||
{% endunless %}
|
||||
|
||||
<marquee id="blinkerscroll">
|
||||
{% for blink in site.data.blinkers %}
|
||||
<img src="/assets/images/blinkers/{{ blink.name }}" class="blinkers"></img>
|
||||
{% endfor %}
|
||||
</marquee>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -52,13 +52,6 @@ img {
|
||||
z-index: 9999999999 !important;
|
||||
}
|
||||
|
||||
#blinkerscroll {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 3vh;
|
||||
z-index: -2
|
||||
}
|
||||
|
||||
.blinkers {
|
||||
max-height: 7vh;
|
||||
min-height: 32px;
|
||||
|
||||
@ -1,44 +1,64 @@
|
||||
.columns {
|
||||
.container {
|
||||
position: relative;
|
||||
max-width: 80%;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
margin-top: 20px; margin-bottom: 0px;
|
||||
width: 80vw;
|
||||
height: 90vh;
|
||||
margin-top: 5vh;
|
||||
margin-left: auto; margin-right: auto;
|
||||
justify-content: space-around;
|
||||
border: 1px solid black;
|
||||
overflow-x: scroll;
|
||||
overflow-y: scroll;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr 4fr 2fr auto;
|
||||
grid-template-rows: 1fr 1.5em 5fr auto 1fr;
|
||||
grid-auto-rows: 1fr;
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas:
|
||||
"name name pets pets"
|
||||
"quotes quotes quotes quotes"
|
||||
"cbox main main navigation"
|
||||
"cbox main main sitecount"
|
||||
"blinker blinker blinker blinker";
|
||||
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.left-sidebar {
|
||||
background: darkgray;
|
||||
padding: 10px;
|
||||
overflow-x: scroll;
|
||||
overflow-y: scroll;
|
||||
width: max-content;
|
||||
text-align: left;
|
||||
.container>* {
|
||||
background-color: #ccc;
|
||||
border: 2px black solid;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
overflow-x: scroll;
|
||||
overflow-y: scroll;
|
||||
width: 60%;
|
||||
flex: 5;
|
||||
margin: 10px;
|
||||
border: 1px solid black;
|
||||
max-height: 89vh;
|
||||
background-color: #cccccc
|
||||
.main { grid-area: main; }
|
||||
|
||||
#cbox {
|
||||
grid-area: cbox;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right-sidebar {
|
||||
background: darkgray;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: sticky;
|
||||
margin: 5px;
|
||||
overflow-x: clip;
|
||||
overflow-y: scroll;
|
||||
align-items: flex-start;
|
||||
.navigation {
|
||||
grid-area: navigation;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.sitecount { grid-area: sitecount; }
|
||||
|
||||
#blinkerscroll {
|
||||
grid-area: blinker;
|
||||
background-color: transparent;
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
.quotes {
|
||||
grid-area: quotes;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: inline;
|
||||
grid-area: name;
|
||||
background: linear-gradient(90deg, red, blue) !important;
|
||||
font-size: 5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.pets { grid-area: pets; }
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user