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

177
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;
}
}
} }
overflow: hidden; section.post_list {
> section.post_list { overflow: hidden;
@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,12 +371,47 @@ 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;
text-align: center; text-align: center;
} }

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

@ -35,187 +35,189 @@
<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">
<article class="tags"> <section class="side_panel">
<h4>Tags</h4> <article class="tags">
<div class="tag_container"> <h3>Tags</h3>
<a href="#"> <div class="tag_container">
<span class="fa fa-tag"></span> <a href="#">
<span class="name" href="#">neko</span> <span class="fa fa-tag"></span>
<span class="count">10</span> <span class="name" href="#">neko</span>
</a> <span class="count">10</span>
<a href="#"> </a>
<span class="fa fa-tag"></span> <a href="#">
<span class="name">works</span> <span class="fa fa-tag"></span>
<span class="count">2</span> <span class="name">works</span>
</a> <span class="count">2</span>
<a href="#"> </a>
<span class="fa fa-tag"></span> <a href="#">
<span class="name">anime</span> <span class="fa fa-tag"></span>
<span class="count">4</span> <span class="name">anime</span>
</a> <span class="count">4</span>
<a href="#"> </a>
<span class="fa fa-tag"></span> <a href="#">
<span class="name">manga</span> <span class="fa fa-tag"></span>
<span class="count">7</span> <span class="name">manga</span>
</a> <span class="count">7</span>
<a href="#"> </a>
<span class="fa fa-tag"></span> <a href="#">
<span class="name">original</span> <span class="fa fa-tag"></span>
<span class="count">5</span> <span class="name">original</span>
</a> <span class="count">5</span>
<a href="#"> </a>
<span class="fa fa-tag"></span> <a href="#">
<span class="name">azur lane</span> <span class="fa fa-tag"></span>
<span class="count">5</span> <span class="name">azur lane</span>
</a> <span class="count">5</span>
<a href="#"> </a>
<span class="fa fa-tag"></span> <a href="#">
<span class="name">figure</span> <span class="fa fa-tag"></span>
<span class="count">5</span> <span class="name">figure</span>
</a> <span class="count">5</span>
<a href="#"> </a>
<span class="fa fa-tag"></span> <a href="#">
<span class="name">touhou</span> <span class="fa fa-tag"></span>
<span class="count">5</span> <span class="name">touhou</span>
</a> <span class="count">5</span>
<a href="#"> </a>
<span class="fa fa-tag"></span> <a href="#">
<span class="name">photoshop</span> <span class="fa fa-tag"></span>
<span class="count">5</span> <span class="name">photoshop</span>
</a> <span class="count">5</span>
<a href="#"> </a>
<span class="fa fa-tag"></span> <a href="#">
<span class="name">close</span> <span class="fa fa-tag"></span>
<span class="count">5</span> <span class="name">close</span>
</a> <span class="count">5</span>
<a href="#"> </a>
<span class="fa fa-tag"></span> <a href="#">
<span class="name">cropped</span> <span class="fa fa-tag"></span>
<span class="count">5</span> <span class="name">cropped</span>
</a> <span class="count">5</span>
<a href="#"> </a>
<span class="fa fa-tag"></span> <a href="#">
<span class="name">waifu2x</span> <span class="fa fa-tag"></span>
<span class="count">5</span> <span class="name">waifu2x</span>
</a> <span class="count">5</span>
</a>
</div>
</article>
</section>
<section class="post_list">
<div class="posts">
<figure style="flex: 307.87 1 307.87px;">
<a href="#">
<img src="static/ryuzu/916993.png" alt="">
</a>
<!--<div class="thumb-info">
<span>RyuZU²</span>
<span>1920x1080</span>
<span>1.5M</span>
</div>-->
</figure>
<figure style="flex: 309.68 1 309.68px;">
<img src="static/ryuzu/916500.jpg" alt="">
</figure>
<figure style="flex: 157.98 1 157.98px;">
<img src="static/pixiv/illust_76819896_20191017_131929.jpg" alt="">
</figure>
<figure style="flex: 391.11 1 391.11px;">
<img src="static/ryuzu/916132.png" alt="">
</figure>
<figure style="flex: 220.00 1 220.00px;">
<img src="static/pixiv/illust_75885180_20191105_174853.jpg" alt="">
</figure>
<figure style="flex: 334.97 1 334.97px;">
<img src="static/ryuzu/916486.png" alt="">
</figure>
<figure style="flex: 155.53 1 155.53px;">
<img src="static/pixiv/illust_71840908_20191117_162206.png" alt="">
</figure>
<figure style="flex: 391.11 1 391.11px;">
<img src="static/ryuzu/916269.jpg" alt="">
</figure>
<figure style="flex: 131.98 1 131.98px;">
<img src="static/pixiv/illust_72206228_20191026_131238.jpg" alt="">
</figure>
<figure style="flex: 391.11 1 391.11px;">
<img src="static/ryuzu/916234.png" alt="">
</figure>
<figure style="flex: 157.75 1 157.75px;">
<img src="static/pixiv/illust_66441619_20191117_162011.png" alt="">
</figure>
<figure style="flex: 340.92 1 340.92px;">
<img src="static/ryuzu/917345.png" alt="">
</figure>
<figure style="flex: 155.28 1 155.28px;">
<img src="static/pixiv/illust_71851314_20191017_131351.jpg" alt="">
</figure>
<figure style="flex: 356.46 1 356.46px;">
<img src="static/ryuzu/917364.png" alt="">
</figure>
<figure style="flex: 155.55 1 155.55px;">
<img src="static/pixiv/illust_74700365_20191026_131807.jpg" alt="">
</figure>
<figure style="flex: 391.11 1 391.11px;">
<img src="static/ryuzu/916232.png" alt="">
</figure>
<figure style="flex: 229.12 1 229.12px;">
<img src="static/pixiv/illust_73298123_20191017_131918.jpg" alt="">
</figure>
<figure style="flex: 318.79 1 318.79px;">
<img src="static/ryuzu/917571.png" alt="">
</figure>
<figure style="flex: 155.56 1 155.56px;">
<img src="static/pixiv/illust_72068885_20191017_131812.jpg" alt="">
</figure>
<figure style="flex: 361.95 1 361.95px;">
<img src="static/ryuzu/917362.png" alt="">
</figure>
<figure style="flex: 329.28 1 329.28px;">
<img src="static/pixiv/illust_74981463_20191010_180604.png" alt="">
</figure>
<figure style="flex: 201.44 1 201.44px;">
<img src="static/pixiv/illust_73112550_20191017_132201.jpg" alt="">
</figure>
<figure style="flex: 134.56 1 134.56px;">
<img src="static/pixiv/illust_58205189_20191117_161917.jpg" alt="">
</figure>
<figure style="flex: 170.19 1 170.19px;">
<img src="static/pixiv/illust_75746945_20191026_131754.png" alt="">
</figure>
<figure style="flex: 155.54 1 155.54px;">
<img src="static/pixiv/illust_77361639_20191026_131342.png" alt="">
</figure>
<figure style="flex: 220.00 1 220.00px;">
<img src="static/pixiv/illust_76970188_20191105_175035.jpg" alt="">
</figure>
<figure style="flex: 134.89 1 134.89px;">
<img src="static/pixiv/illust_77544221_20191117_162451.png" alt="">
</figure>
<figure style="flex: 171.16 1 171.16px;">
<img src="static/pixiv/illust_76606724_20191027_110006.png" alt="">
</figure>
<figure style="flex: 107.11 1 107.11px;">
<img src="static/pixiv/illust_71850098_20191017_131539.jpg" alt="">
</figure>
<figure style="flex: 220.99 1 220.99px;">
<img src="static/pixiv/illust_76418587_20191027_110252.png" alt="">
</figure>
<figure style="flex: 155.78 1 155.78px;">
<img src="static/pixiv/illust_76629400_20191026_131307.jpg" alt="">
</figure>
</div> </div>
</article> <div class="pagin">
</section> <a href="#"><span class="fa fa-chevron-left"></span></a>
<section class="post_list"> <a href="#">1</a>
<div class="posts"> <a href="#">2</a>
<figure style="flex: 307.87 1 307.87px;"> <a href="#">3</a>
<a href="#"> <a href="#">4</a>
<img src="static/ryuzu/916993.png" alt=""> <a href="#">5</a>
</a> <a href="#"><span class="fa fa-chevron-right"></span></a>
<!--<div class="thumb-info"> </div>
<span>RyuZU²</span> </section>
<span>1920x1080</span> </div>
<span>1.5M</span>
</div>-->
</figure>
<figure style="flex: 309.68 1 309.68px;">
<img src="static/ryuzu/916500.jpg" alt="">
</figure>
<figure style="flex: 157.98 1 157.98px;">
<img src="static/pixiv/illust_76819896_20191017_131929.jpg" alt="">
</figure>
<figure style="flex: 391.11 1 391.11px;">
<img src="static/ryuzu/916132.png" alt="">
</figure>
<figure style="flex: 220.00 1 220.00px;">
<img src="static/pixiv/illust_75885180_20191105_174853.jpg" alt="">
</figure>
<figure style="flex: 334.97 1 334.97px;">
<img src="static/ryuzu/916486.png" alt="">
</figure>
<figure style="flex: 155.53 1 155.53px;">
<img src="static/pixiv/illust_71840908_20191117_162206.png" alt="">
</figure>
<figure style="flex: 391.11 1 391.11px;">
<img src="static/ryuzu/916269.jpg" alt="">
</figure>
<figure style="flex: 131.98 1 131.98px;">
<img src="static/pixiv/illust_72206228_20191026_131238.jpg" alt="">
</figure>
<figure style="flex: 391.11 1 391.11px;">
<img src="static/ryuzu/916234.png" alt="">
</figure>
<figure style="flex: 157.75 1 157.75px;">
<img src="static/pixiv/illust_66441619_20191117_162011.png" alt="">
</figure>
<figure style="flex: 340.92 1 340.92px;">
<img src="static/ryuzu/917345.png" alt="">
</figure>
<figure style="flex: 155.28 1 155.28px;">
<img src="static/pixiv/illust_71851314_20191017_131351.jpg" alt="">
</figure>
<figure style="flex: 356.46 1 356.46px;">
<img src="static/ryuzu/917364.png" alt="">
</figure>
<figure style="flex: 155.55 1 155.55px;">
<img src="static/pixiv/illust_74700365_20191026_131807.jpg" alt="">
</figure>
<figure style="flex: 391.11 1 391.11px;">
<img src="static/ryuzu/916232.png" alt="">
</figure>
<figure style="flex: 229.12 1 229.12px;">
<img src="static/pixiv/illust_73298123_20191017_131918.jpg" alt="">
</figure>
<figure style="flex: 318.79 1 318.79px;">
<img src="static/ryuzu/917571.png" alt="">
</figure>
<figure style="flex: 155.56 1 155.56px;">
<img src="static/pixiv/illust_72068885_20191017_131812.jpg" alt="">
</figure>
<figure style="flex: 361.95 1 361.95px;">
<img src="static/ryuzu/917362.png" alt="">
</figure>
<figure style="flex: 329.28 1 329.28px;">
<img src="static/pixiv/illust_74981463_20191010_180604.png" alt="">
</figure>
<figure style="flex: 201.44 1 201.44px;">
<img src="static/pixiv/illust_73112550_20191017_132201.jpg" alt="">
</figure>
<figure style="flex: 134.56 1 134.56px;">
<img src="static/pixiv/illust_58205189_20191117_161917.jpg" alt="">
</figure>
<figure style="flex: 170.19 1 170.19px;">
<img src="static/pixiv/illust_75746945_20191026_131754.png" alt="">
</figure>
<figure style="flex: 155.54 1 155.54px;">
<img src="static/pixiv/illust_77361639_20191026_131342.png" alt="">
</figure>
<figure style="flex: 220.00 1 220.00px;">
<img src="static/pixiv/illust_76970188_20191105_175035.jpg" alt="">
</figure>
<figure style="flex: 134.89 1 134.89px;">
<img src="static/pixiv/illust_77544221_20191117_162451.png" alt="">
</figure>
<figure style="flex: 171.16 1 171.16px;">
<img src="static/pixiv/illust_76606724_20191027_110006.png" alt="">
</figure>
<figure style="flex: 107.11 1 107.11px;">
<img src="static/pixiv/illust_71850098_20191017_131539.jpg" alt="">
</figure>
<figure style="flex: 220.99 1 220.99px;">
<img src="static/pixiv/illust_76418587_20191027_110252.png" alt="">
</figure>
<figure style="flex: 155.78 1 155.78px;">
<img src="static/pixiv/illust_76629400_20191026_131307.jpg" alt="">
</figure>
</div>
<div class="pagin">
<a href="#"><span class="fa fa-chevron-left"></span></a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#"><span class="fa fa-chevron-right"></span></a>
</div>
</section>
</div> </div>
<footer> <footer>

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

@ -35,76 +35,99 @@
<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">
<article class="tags"> <section class="side_panel">
<h4>Tags</h4> <article class="post_desc">
<div class="tag_container"> <!-- <h4>Description</h4> -->
<a href="#"> <!-- <img src="/static/profile.jpg" alt=""> -->
<span class="fa fa-tag"></span> <div class="id">Id: 51432</div>
<span class="name">neko</span> <div class="author">Author: Kuxa</div>
<span class="count">10</span> <div class="time">Posted: 10 hours ago</div>
</a> <div class="source">Source: <a href="https://www.pixiv.net/en/artworks/78136345">https://www.pixiv.net/en/artworks/78136345</a></div>
<a href="#">
<span class="fa fa-tag"></span> </article>
<span class="name">works</span> <article class="tags">
<span class="count">2</span> <h3>Tags</h3>
</a> <div class="tag_container">
<a href="#"> <a href="#">
<span class="fa fa-tag"></span> <span class="fa fa-tag"></span>
<span class="name">anime</span> <span class="name">neko</span>
<span class="count">4</span> <span class="count">10</span>
</a> </a>
<a href="#"> <a href="#">
<span class="fa fa-tag"></span> <span class="fa fa-tag"></span>
<span class="name">manga</span> <span class="name">works</span>
<span class="count">7</span> <span class="count">2</span>
</a> </a>
<a href="#"> <a href="#">
<span class="fa fa-tag"></span> <span class="fa fa-tag"></span>
<span class="name">original</span> <span class="name">anime</span>
<span class="count">5</span> <span class="count">4</span>
</a> </a>
<a href="#"> <a href="#">
<span class="fa fa-tag"></span> <span class="fa fa-tag"></span>
<span class="name">azur lane</span> <span class="name">manga</span>
<span class="count">5</span> <span class="count">7</span>
</a> </a>
<a href="#"> <a href="#">
<span class="fa fa-tag"></span> <span class="fa fa-tag"></span>
<span class="name">figure</span> <span class="name">original</span>
<span class="count">5</span> <span class="count">5</span>
</a> </a>
<a href="#"> <a href="#">
<span class="fa fa-tag"></span> <span class="fa fa-tag"></span>
<span class="name">touhou</span> <span class="name">azur lane</span>
<span class="count">5</span> <span class="count">5</span>
</a> </a>
<a href="#"> <a href="#">
<span class="fa fa-tag"></span> <span class="fa fa-tag"></span>
<span class="name">photoshop</span> <span class="name">figure</span>
<span class="count">5</span> <span class="count">5</span>
</a> </a>
<a href="#"> <a href="#">
<span class="fa fa-tag"></span> <span class="fa fa-tag"></span>
<span class="name">close</span> <span class="name">touhou</span>
<span class="count">5</span> <span class="count">5</span>
</a> </a>
<a href="#"> <a href="#">
<span class="fa fa-tag"></span> <span class="fa fa-tag"></span>
<span class="name">cropped</span> <span class="name">photoshop</span>
<span class="count">5</span> <span class="count">5</span>
</a> </a>
<a href="#"> <a href="#">
<span class="fa fa-tag"></span> <span class="fa fa-tag"></span>
<span class="name">waifu2x</span> <span class="name">close</span>
<span class="count">5</span> <span class="count">5</span>
</a> </a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">cropped</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">waifu2x</span>
<span class="count">5</span>
</a>
</div>
</article>
</section>
<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> </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> </article>
</section>
<section class="content">
</section> </section>
</div> </div>

Write Preview
Loading…
Cancel
Save