grid push

small-nav
chimchooree 2 years ago
parent 35c186e8c6
commit 3e50450f4d

@ -10,7 +10,7 @@
} }
.diary-dir { .diary-dir {
background-color: #080410; background-color: transparent;
font-size: 1.5em; font-size: 1.5em;
color: #AAA39D; color: #AAA39D;
font-weight: bold; font-weight: bold;
@ -52,7 +52,7 @@
white-space: nowrap; white-space: nowrap;
} }
.diary-dir-number { .diary-dir-number {
background-color: #7f2c28; background-color: #886488;
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
border-radius: .3em; border-radius: .3em;
@ -66,15 +66,16 @@
.diary-pages { .diary-pages {
grid-area: 2 / 1 / 3 / 2; grid-area: 2 / 1 / 3 / 2;
margin-right: 2em;
} }
.snippet { .snippet {
margin-top: 0px; margin-top: 0px;
margin-bottom: 4em; margin-bottom: 4em;
margin-right: 2em;
} }
.snippet-title { .snippet-title {
text-indent: 2em;
background-color: #585c88; background-color: #585c88;
border-top-left-radius: .3em; border-top-left-radius: .3em;
border-top-right-radius: .3em; border-top-right-radius: .3em;
@ -183,8 +184,8 @@
.sidebar a:active { .sidebar a:active {
color: ; color: ;
} }
.about-box {
grid-area: 1 / 1 / 2 / 2; .diary-box {
background-color: #886488; background-color: #886488;
text-align: center; text-align: center;
border-radius: 1em; border-radius: 1em;
@ -193,25 +194,17 @@
margin-top: 0em; margin-top: 0em;
padding-bottom: 1em; padding-bottom: 1em;
} }
.diary-box a {
}
.about-box {
grid-area: 1 / 1 / 2 / 2;
}
.twitter-box { .twitter-box {
grid-area: 2 / 1 / 3 / 2; grid-area: 2 / 1 / 3 / 2;
background-color: #886488;
text-align: center;
border-radius: 1em;
margin: 1em;
padding: .3em;
margin-top: 0em;
padding-bottom: 1em;
} }
.latest { .latest {
grid-area: 3 / 1 / 4 / 2; grid-area: 3 / 1 / 4 / 2;
background-color: #886488;
text-align: center;
border-radius: 1em;
margin: 1em;
padding: .3em;
margin-top: 0em;
padding-bottom: 1em;
} }
.latest-text { .latest-text {
text-align: left; text-align: left;
@ -220,24 +213,9 @@
} }
.wordcloud { .wordcloud {
grid-area: 4 / 1 / 5 / 2; grid-area: 4 / 1 / 5 / 2;
background-color: #886488;
text-align: center;
border-radius: 1em;
margin: 1em;
padding: .3em;
margin-top: 0em;
padding-bottom: 1em;
} }
.disclosure { .disclosure {
grid-area: 5 / 1 / 6 / 2; grid-area: 5 / 1 / 6 / 2;
background-color: #886488;
text-align: center;
border-radius: 1em;
margin: 1em;
padding: .3em;
margin-top: 0em;
padding-bottom: 1em;
} }
.diary-dir.bottom { .diary-dir.bottom {

@ -3,13 +3,13 @@
max-width: MAX(50em, 50%); max-width: MAX(50em, 50%);
display: grid; display: grid;
grid-template-columns: 2fr 1fr; grid-template-columns: 2fr 1fr;
grid-template-rows: 40px auto 40px; grid-template-rows: 1fr auto;
grid-column-gap: 0px; grid-column-gap: 0px;
grid-row-gap: 0px; grid-row-gap: 0px;
margin: auto; margin: auto;
} }
.diary-entry { .diary-entry {
grid-area: 3 / 1 / 4 / 4; grid-area: 1 / 1 / 2 / 2;
margin-top: 40px; margin-top: 40px;
margin-bottom: 30px; margin-bottom: 30px;
word-wrap: break-word; word-wrap: break-word;
@ -95,7 +95,7 @@
} }
.sidebar { .sidebar {
grid-area: 3 / 3 / 5 / 4; grid-area: 1 / 2 / 2 / 3;
display: grid; display: grid;
grid-template-columns: auto; grid-template-columns: auto;
grid-template-rows: repeat(4, auto); grid-template-rows: repeat(4, auto);
@ -185,7 +185,7 @@
} }
.rec-box { grid-area: 2 / 2 / 3 / 3; } .rec-box { grid-area: 2 / 1 / 3 / 3; }
.snip { .snip {
width: 150px; width: 150px;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

@ -1,6 +1,6 @@
<!--right column--> <!--right column-->
<div class="sidebar"> <div class="sidebar">
<div class="about-box"> <div class="diary-box about-box">
<h2>about</h2> <h2>about</h2>
<b>Blessfrey</b> is a 2D action RPG developed for PC in Godot Engine. <br> <b>Blessfrey</b> is a 2D action RPG developed for PC in Godot Engine. <br>
<br> <br>
@ -9,14 +9,14 @@
Inspired by Guild Wars 1 and Magic: The Gathering. <br> Inspired by Guild Wars 1 and Magic: The Gathering. <br>
</div> </div>
<div class="twitter-box"> <div class="diary-box twitter-box">
<h2>chat</h2> <h2>chat</h2>
Twitter: <a href="https://twitter.com/lilchimchooree">@lilchimchooree</a><br> Twitter: <a href="https://twitter.com/lilchimchooree">@lilchimchooree</a><br>
<br> <br>
<a href="/contact" rel="nofollow">contact me</a><br> <a href="/contact" rel="nofollow">contact me</a><br>
</div> </div>
<div class="latest"> <div class="diary-box latest">
<h2>latest</h2> <h2>latest</h2>
<div class="latest-text"> <div class="latest-text">
<ul> <ul>
@ -31,7 +31,7 @@
</div> </div>
</div> </div>
<div class="wordcloud"> <div class="diary-box wordcloud">
<h2>cloud</h2> <h2>cloud</h2>
% for t in tags: % for t in tags:
% tagless = t.replace('#','') % tagless = t.replace('#','')
@ -39,7 +39,7 @@
% end % end
</div> </div>
<div class="disclosure"> <div class="diary-box disclosure">
<br>Blessfrey.me is not using sponsored posts or affiliate links. <br> <br>Blessfrey.me is not using sponsored posts or affiliate links. <br>
<br> <br>
Blessfrey.me is not collecting personal information + has no cookies. <br> Blessfrey.me is not collecting personal information + has no cookies. <br>

@ -1,200 +0,0 @@
.diary-entry {
grid-area: 3 / 2 / 4 / 3;
margin-top: 40px;
margin-bottom: 30px;
word-wrap: break-word;
}
.diary-title {
background-color: #486438;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
color: #e6e8ef;
padding: 10px;
padding-top: 55px;
padding-bottom: 25px;
font-size: 25px;
text-align: center;
font-weight: bold;
text-shadow:
-1px -1px 1px #324832,
0 -1px 1px #324832,
2px -1px 1px #324832,
2px 0 1px #324832,
2px 2px 1px #324832,
0 2px 1px #324832,
-1px 2px 1px #324832,
-1px 0 1px #324832;
}
.date-line {
padding: 10px;
background-color: #1c2628;
color: #aaa39d;
text-align: center;
}
.diary-content {
background-color: #ecd5d2;
color: #080410;
text-indent: 50px;
padding: 15px;
padding-top: 25px;
}
.diary-content img {
display: block;
margin-top: 25px;
margin-bottom: 0px;
margin-left: 0px;
}
.diary-content h2 {
margin-top: 25px;
margin-bottom: 15px;
text-indent: 0px;
}
.diary-content h3 {
margin-top: 25px;
margin-bottom: 0px;
text-indent: 0px;
}
.diary-content h4 {
margin-top: 25px;
margin-bottom: 0px;
text-indent: 0px;
}
.diary-tags {
background-color: #1c2628;
padding: 10px;
font-size: 15px;
}
.diary-tag {
background-color: #b9b4af;
border-radius: 25px;
padding: 3px;
padding-left: 4px;
padding-right: 4px;
color: #1c2628;
font-size: 15px;
font-weight: bold;
display: inline-block;
}
.share-links {
background-color: #1c2628;
color: #aaa39d;
padding-top: 25px;
padding-bottom: 25px;
text-align: center;
}
.sidebar {
grid-area: 3 / 3 / 5 / 4;
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(4, auto);
grid-column-gap: 0px;
grid-row-gap: 0px;
align-content: start;
padding-left: 7px;
margin-top: 40px;
}
.sidebar a:link {
color: #213021;
}
.sidebar a:hover {
color: #486438;
}
.sidebar a:visited {
color: #213021;
}
.sidebar a:active {
color: #945634;
}
.about-box {
border-radius: 25px;
background-color: #95939F;
color: #111718;
text-align: center;
margin: 15px;
padding: 5px;
margin-top: 0px;
padding-bottom: 15px;
}
.twitter-box {
grid-area: 2 / 1 / 3 / 2;
border-radius: 25px;
background-color: #95939F;
color: #111718;
text-align: center;
margin: 15px;
padding: 5px;
padding-bottom: 15px;
}
.latest {
grid-area: 3 / 1 / 4 / 2;
border-radius: 25px;
background-color: #95939F;
color: #111718;
text-align: center;
list-style-position: inside;
margin: 15px;
padding: 5px;
}
.latest-text {
text-align: left;
list-style-position: inside;
padding: 5px;
}
.disclosure {
grid-area: 4 / 1 / 5 / 2;
border-radius: 25px;
background-color: #95939F;
color: #111718;
text-align: center;
margin: 15px;
padding: 5px;
padding-bottom: 15px;
}
.recommend {
grid-area: 4 / 2 / 5 / 3;
background-color: #080410;
color: #F9B3D7;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
grid-column-gap: 0px;
grid-row-gap: 0px;
padding: 5px;
}
.more {
grid-area: 1 / 1 / 2 / 4;
background-color: #486438;
border-radius: 25px;
padding: 5px;
text-align: center;
color: #080410;
}
.rec-box { grid-area: 2 / 2 / 3 / 3; }
.snip {
width: 150px;
float: left;
margin: 30px;
background-color: #95939f;
border-radius: 25px;
padding: 20px;
text-align: center;
font-size: 16px;
}
.snip a {
color: #080410;
}
.snip a:hover {
color: #404664;
}
.snip a:visited {
color: #080410;
}
.snip a:active {
color: #404664;
}

@ -1,4 +1,5 @@
% rebase('frame.tpl') % rebase('frame.tpl')
<div class="content-grid">
<!--left column--> <!--left column-->
<div class="diary-entry"> <div class="diary-entry">
@ -49,4 +50,4 @@
</div> </div>
</div> </div>
<div class="footer-row"> </div> </div>

Loading…
Cancel
Save