Kuxaaak
/
yadc
1
1
Fork 0
Code Releases Activity

Noice, post view done?

Browse Source 
Maybe start splitting?
dev
Jan Kužílek 5 years ago
parent 5de5a5c14b
commit 05fac7ffac
3 changed files with 391 additions and 305 deletions
Show Stats Download Patch File Download Diff File

167
yadc/static/default.scss
Unescape Escape View File

@ -7,29 +7,31 @@ $breakpoints: (tablet: 560px, desktop: 900px);
$bg-color: #222; //#20141f; $bg-color: #222; //#20141f;
$text-color: #fff; $text-color: #fff;
$a-color: #fff; $a-color: #bbb;
$ahover-color: #909090; $ahover-color: #909090;
$header-bg-color: #111; $header-bg-color: #222;
$nav-bg-color: #222d;//#20141fd0; $nav-bg-color: #111d;//#20141fd0;
$nav-bg-color_hover: #333;//#20141fa0; $nav-bg-color_hover: #333;//#20141fa0;
$desktop-width: 560px; // $desktop-width: 560px;
// @mixin mobile {
// @media only screen and (max-width: #{$desktop-width - 1px}) {
// @content;
// }
// }
// @mixin desktop {
// @media only screen and (min-width: #{$desktop-width}) {
// @content;
// }
// }
@mixin mobile {
@media only screen and (max-width: #{$desktop-width - 1px}) {
@content;
}
}
@mixin desktop {
@media only screen and (min-width: #{$desktop-width}) {
@content;
}
}
body { body {
margin: 0; margin: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif; font-family: Verdana, Geneva, Tahoma, sans-serif;
// font-family: monospace; font-size: 1.1em;
//font-size: 14px; //font-size: 14px;
background-color: $bg-color; background-color: $bg-color;
@ -205,50 +207,63 @@ header {
.main_wrap { .main_wrap {
// margin: 0 auto; $bp-desktop: ">=desktop";
max-width: 1200px; $bp-tablet: "<desktop";
display: flex; // margin: 0 auto;
// max-width: 1200px;
padding: 8px; $main-wrap-padding: 8px;
padding: $main-wrap-padding;
padding-top: 0;
padding-bottom: 0;
h4 { h3 {
margin: 0; margin: 0;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 1.4em; font-size: 1.3em;
} }
@include media("<desktop") { .important_subwrap {
flex-flow: column nowrap;
// section { display: flex;
// margin: 0 10px; @include media($bp-tablet) {
// } flex-flow: column nowrap;
} }
@include media(">=desktop") { @include media($bp-desktop) {
flex-flow: row nowrap; flex-flow: row nowrap;
}
overflow: visible; // for negative margin of .post_single
} }
> section.tag_panel { $side-panel-width: 14rem;
section.side_panel {
flex-shrink: 0; flex-shrink: 0;
@include media($bp-desktop) {
// width: 14em;
width: $side-panel-width;
article.tags { height: 0; // for overflow
// @include media(">=desktop") { }
// margin-left: 10px;
// margin-top: 10px;
// }
padding: 10px; padding: 10px;
article {
&:not(:last-child) {
margin-bottom: 10px;
}
}
article.tags {
.tag_container { .tag_container {
display: flex; display: flex;
> a { > a {
margin: 2px 2px; margin: 2px 2px;
padding: 6px 12px; // padding: .4em .75em;
padding: .35em .6em;
//text-align: center; //text-align: center;
border-radius: 4px; border-radius: 4px;
@ -268,38 +283,49 @@ header {
// } // }
} }
} }
@include media("<desktop") { @include media($bp-tablet) {
.tag_container { .tag_container {
flex-flow: row wrap; flex-flow: row wrap;
} }
} }
@include media(">=desktop") { @include media($bp-desktop) {
.tag_container { .tag_container {
flex-flow: column nowrap; flex-flow: column nowrap;
align-items: start; align-items: start;
} }
} }
} }
article.post_desc {
display: flex;
flex-flow: column nowrap;
font-size: .9em;
> img {
display: block;
max-width: 128px;
}
}
} }
section.post_list {
overflow: hidden; overflow: hidden;
> section.post_list { @include media("<tablet") {
margin-left: -#{$main-wrap-padding};
margin-right: -#{$main-wrap-padding};
}
.posts { .posts {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
// margin-left: -4px;
// margin-right: -4px; $figure-margin: 8px;
// margin-left: 0;
// margin-right: 0; @include media($bp-tablet) {
// margin: 0; margin-left: -#{$figure-margin};
// padding: 8px; margin-right: -#{$figure-margin};
// margin: 0 8px; }
// @include media(">=desktop") {
// margin-right: 8px;
// margin-top: 8px;
// }
&::after { &::after {
content: ""; content: "";
@ -308,26 +334,26 @@ header {
> figure { > figure {
position: relative; position: relative;
margin: 8px; margin: $figure-margin;
img { img {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 4px; // border-radius: 4px;
transition: .2s ease; transition: .2s ease;
} }
&:hover img { &:hover img {
opacity: .7; opacity: .7;
} }
} }
} }
.pagin { .pagin {
margin: 10px auto; margin: 10px 0;
margin-right: calc(#{$side-panel-width}/2);
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
@ -345,9 +371,44 @@ header {
} }
} }
section.post_single {
@include media($bp-desktop) {
padding: 8px;
}
@include media($bp-tablet) {
order: -1;
margin-bottom: $main-wrap-padding;
}
@include media("<tablet") {
// margin-top: -$main-wrap-padding;
margin-left: -#{$main-wrap-padding};
margin-right: -#{$main-wrap-padding};
}
img {
display: block;
max-width: 100%;
}
}
section.comments {
padding: 10px;
@include media($bp-desktop) {
margin-left: $side-panel-width;
}
article { overflow: hidden; }
h4 {
margin-top: .5em;
margin-bottom: .5em;
}
p {
margin-top: .5em;
}
}
} }
footer { footer { // DUE TO OVERFLOW OF THE SIDE PANEL, TRY TO KEEP IT ON THE RIGHT
padding: 10px; padding: 10px;
// background-color: $header-bg-color; // background-color: $header-bg-color;

6
yadc/templates/index.html
Unescape Escape View File

@ -35,9 +35,10 @@
<span id="nav-menu" class="fa fa-bars"></span> <span id="nav-menu" class="fa fa-bars"></span>
</header> </header>
<div class="main_wrap"> <div class="main_wrap">
<section class="tag_panel"> <div class="important_subwrap">
<section class="side_panel">
<article class="tags"> <article class="tags">
<h4>Tags</h4> <h3>Tags</h3>
<div class="tag_container"> <div class="tag_container">
<a href="#"> <a href="#">
<span class="fa fa-tag"></span> <span class="fa fa-tag"></span>
@ -217,6 +218,7 @@
</div> </div>
</section> </section>
</div> </div>
</div>
<footer> <footer>
Produced by KuxaBeast Produced by KuxaBeast

33
yadc/templates/post.html
Unescape Escape View File

@ -35,9 +35,19 @@
<span id="nav-menu" class="fa fa-bars"></span> <span id="nav-menu" class="fa fa-bars"></span>
</header> </header>
<div class="main_wrap"> <div class="main_wrap">
<section class="tag_panel"> <div class="important_subwrap">
<section class="side_panel">
<article class="post_desc">
<!-- <h4>Description</h4> -->
<!-- <img src="/static/profile.jpg" alt=""> -->
<div class="id">Id: 51432</div>
<div class="author">Author: Kuxa</div>
<div class="time">Posted: 10 hours ago</div>
<div class="source">Source: <a href="https://www.pixiv.net/en/artworks/78136345">https://www.pixiv.net/en/artworks/78136345</a></div>
</article>
<article class="tags"> <article class="tags">
<h4>Tags</h4> <h3>Tags</h3>
<div class="tag_container"> <div class="tag_container">
<a href="#"> <a href="#">
<span class="fa fa-tag"></span> <span class="fa fa-tag"></span>
@ -99,12 +109,25 @@
<span class="name">waifu2x</span> <span class="name">waifu2x</span>
<span class="count">5</span> <span class="count">5</span>
</a> </a>
</div> </div>
</article> </article>
</section> </section>
<section class="content"> <section class="post_single">
<div class="image">
<!-- <img src="/static/pixiv/illust_72206228_20191026_131238.jpg" alt=""> -->
<img src="/static/ryuzu/916500.jpg" alt="">
</div>
</section>
</div>
<section class="comments">
<article>
<h4>Kuxa</h4>
<p>what the fuck actually happened here?</p>
</article>
<article>
<h4>Glum</h4>
<p>no tea 4 ya</p>
</article>
</section> </section>
</div> </div>

Write Preview
Loading…
Cancel
Save