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;
$text-color: #fff;
$a-color: #fff;
$a-color: #bbb;
$ahover-color: #909090;
$header-bg-color: #111;
$nav-bg-color: #222d;//#20141fd0;
$header-bg-color: #222;
$nav-bg-color: #111d;//#20141fd0;
$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 {
margin: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
// font-family: monospace; font-size: 1.1em;
//font-size: 14px;
background-color: $bg-color;
@ -205,50 +207,63 @@ header {
.main_wrap {
// margin: 0 auto;
max-width: 1200px;
$bp-desktop: ">=desktop";
$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-bottom: 10px;
font-size: 1.4em;
font-size: 1.3em;
}
@include media("<desktop") {
flex-flow: column nowrap;
.important_subwrap {
// section {
// margin: 0 10px;
// }
}
@include media(">=desktop") {
flex-flow: row nowrap;
display: flex;
@include media($bp-tablet) {
flex-flow: column nowrap;
}
@include media($bp-desktop) {
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;
@include media($bp-desktop) {
// width: 14em;
width: $side-panel-width;
article.tags {
// @include media(">=desktop") {
// margin-left: 10px;
// margin-top: 10px;
// }
height: 0; // for overflow
}
padding: 10px;
padding: 10px;
article {
&:not(:last-child) {
margin-bottom: 10px;
}
}
article.tags {
.tag_container {
display: flex;
> a {
margin: 2px 2px;
padding: 6px 12px;
// padding: .4em .75em;
padding: .35em .6em;
//text-align: center;
border-radius: 4px;
@ -268,38 +283,49 @@ header {
// }
}
}
@include media("<desktop") {
@include media($bp-tablet) {
.tag_container {
flex-flow: row wrap;
}
}
@include media(">=desktop") {
@include media($bp-desktop) {
.tag_container {
flex-flow: column nowrap;
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 {
display: flex;
flex-flow: row wrap;
// margin-left: -4px;
// margin-right: -4px;
// margin-left: 0;
// margin-right: 0;
// margin: 0;
// padding: 8px;
// margin: 0 8px;
// @include media(">=desktop") {
// margin-right: 8px;
// margin-top: 8px;
// }
$figure-margin: 8px;
@include media($bp-tablet) {
margin-left: -#{$figure-margin};
margin-right: -#{$figure-margin};
}
&::after {
content: "";
@ -308,26 +334,26 @@ header {
> figure {
position: relative;
margin: 8px;
margin: $figure-margin;
img {
display: block;
width: 100%;
height: 100%;
border-radius: 4px;
// border-radius: 4px;
transition: .2s ease;
}
&:hover img {
opacity: .7;
}
}
}
.pagin {
margin: 10px auto;
margin: 10px 0;
margin-right: calc(#{$side-panel-width}/2);
display: flex;
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;
// background-color: $header-bg-color;
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>
</header>
<div class="main_wrap">
<section class="tag_panel">
<article class="tags">
<h4>Tags</h4>
<div class="tag_container">
<a href="#">
<span class="fa fa-tag"></span>
<span class="name" href="#">neko</span>
<span class="count">10</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">works</span>
<span class="count">2</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">anime</span>
<span class="count">4</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">manga</span>
<span class="count">7</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">original</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">azur lane</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">figure</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">touhou</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">photoshop</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">close</span>
<span class="count">5</span>
</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 class="important_subwrap">
<section class="side_panel">
<article class="tags">
<h3>Tags</h3>
<div class="tag_container">
<a href="#">
<span class="fa fa-tag"></span>
<span class="name" href="#">neko</span>
<span class="count">10</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">works</span>
<span class="count">2</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">anime</span>
<span class="count">4</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">manga</span>
<span class="count">7</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">original</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">azur lane</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">figure</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">touhou</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">photoshop</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">close</span>
<span class="count">5</span>
</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_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>
</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 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 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>

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

@ -35,76 +35,99 @@
<span id="nav-menu" class="fa fa-bars"></span>
</header>
<div class="main_wrap">
<section class="tag_panel">
<article class="tags">
<h4>Tags</h4>
<div class="tag_container">
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">neko</span>
<span class="count">10</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">works</span>
<span class="count">2</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">anime</span>
<span class="count">4</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">manga</span>
<span class="count">7</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">original</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">azur lane</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">figure</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">touhou</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">photoshop</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">close</span>
<span class="count">5</span>
</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 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">
<h3>Tags</h3>
<div class="tag_container">
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">neko</span>
<span class="count">10</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">works</span>
<span class="count">2</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">anime</span>
<span class="count">4</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">manga</span>
<span class="count">7</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">original</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">azur lane</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">figure</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">touhou</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">photoshop</span>
<span class="count">5</span>
</a>
<a href="#">
<span class="fa fa-tag"></span>
<span class="name">close</span>
<span class="count">5</span>
</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>
</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 class="content">
</section>
</div>

Write Preview
Loading…
Cancel
Save