candycanearter07/comicsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

complete and utter redesign to use hmtlgrid

Browse Source
This commit is contained in:
etherware-novice 2024-08-10 12:37:34 -05:00
parent 61f0940279
commit c1f6dc323d
No known key found for this signature in database
GPG Key ID: 5DB73B4D57B9D701
3 changed files with 83 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
_layouts/default.html
View File

@ -19,40 +19,44 @@ navbar: topnav
{% include background.html %} {% include background.html %}
{% include mplayer.html %} {% include mplayer.html %}
<div class="vcol"> <div class="container">
<div class="columns"> <div class="navigation">
<div class="left-sidebar"> {% if layout.navbar != "" %}
{% if layout.navbar != "" %} {% include {{layout.navbar}}.html %}
{% include {{layout.navbar}}.html %} {% endif %}
{% endif %} </div>
</div> <marquee class="name">{{ page.name }}</marquee>
<div class="main-content">{{ content }}</div> <div class="main">{{ content }}</div>
<div class="right-sidebar"> <div class="pets">
time: time:
<span id="swatchClock"></span> <span id="swatchClock"></span>
<script src="/assets/js/swatch.js"></script> <script src="/assets/js/swatch.js"></script>
{% include statuscafe.html %}
<img src="https://slimepondcount.goatcounter.com/counter/{{ page.url }}.png" style="width: 100%"> <img src="/assets/images/blinkers/cc-by-sa.gif">
<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>
<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>
<marquee id="blinkerscroll">
{% include statuscafe.html %} {% 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> </div>
</div>
{% unless jekyll.environment == "local" %} {% unless jekyll.environment == "local" %}
<link href="https://melonking.net/styles/flood.css" rel="stylesheet" type="text/css" media="all" /> <link href="https://melonking.net/styles/flood.css" rel="stylesheet" type="text/css" media="all" />
<script src="https://melonking.net/scripts/flood.js"></script> <script src="https://melonking.net/scripts/flood.js"></script>
{% endunless %} {% endunless %}
<marquee id="blinkerscroll">
{% for blink in site.data.blinkers %}
<img src="/assets/images/blinkers/{{ blink.name }}" class="blinkers"></img>
{% endfor %}
</marquee>
</body> </body>
</html> </html>

7
_sass/main.scss
View File

@ -52,13 +52,6 @@ img {
z-index: 9999999999 !important; z-index: 9999999999 !important;
} }
#blinkerscroll {
position: absolute;
left: 0;
bottom: 3vh;
z-index: -2
}
.blinkers { .blinkers {
max-height: 7vh; max-height: 7vh;
min-height: 32px; min-height: 32px;

90
_sass/sidebar.scss
View File

@ -1,44 +1,64 @@
.columns { .container {
position: relative; position: relative;
max-width: 80%; width: 80vw;
max-height: 80vh; height: 90vh;
display: flex; margin-top: 5vh;
margin-top: 20px; margin-bottom: 0px;
margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto;
justify-content: space-around;
border: 1px solid black; display: grid;
overflow-x: scroll; grid-template-columns: 1.5fr 4fr 2fr auto;
overflow-y: scroll; 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 { .container>* {
background: darkgray; background-color: #ccc;
padding: 10px; border: 2px black solid;
overflow-x: scroll; overflow: scroll;
overflow-y: scroll;
width: max-content;
text-align: left;
} }
.main-content { .main { grid-area: main; }
overflow-x: scroll;
overflow-y: scroll; #cbox {
width: 60%; grid-area: cbox;
flex: 5; height: 100%;
margin: 10px;
border: 1px solid black;
max-height: 89vh;
background-color: #cccccc
} }
.right-sidebar { .navigation {
background: darkgray; grid-area: navigation;
flex: 1; padding: 5px;
display: flex;
flex-direction: column;
position: sticky;
margin: 5px;
overflow-x: clip;
overflow-y: scroll;
align-items: flex-start;
} }
.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; }