Skip to content

o.kimura / novel-noveler.com

Go to a project
Commit bb821dea by o.kimura
Options

temporary commit

parent 78821b79
Inline Side-by-side
Showing with 295 additions and 282 deletions
css/main.css
......@@ -65,476 +65,489 @@ output,
ruby,
section,
summary {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
a {
color: #1d6ec6;
color: #1d6ec6;
}
html {
line-height: 1;
line-height: 1;
}
body {
font-size: 12px;
line-height: 1.5;
color: #333333;
background-color: #e4e7ee;
font-size: 12px;
line-height: 1.5;
color: #333333;
background-color: #e4e7ee;
}
body,
pre {
font-family: "Helvetica Neue", "arial", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-family: "Helvetica Neue", "arial", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
ol,
ul {
list-style: none;
list-style: none;
}
.row {
margin-left: 0.2em;
margin-right: 0.2em;
margin-left: 0.2em;
margin-right: 0.2em;
}
/* LOGO */
.logo {
font-family: 'Logo';
position: absolute;
font-size: 200%;
margin: 0.5em 0 0.5em 1.2em;
font-weight: 500;
font-family: 'Logo';
position: absolute;
font-size: 200%;
margin: 0.5em 0 0.5em 1.2em;
font-weight: 500;
}
.left-menu {
background-color: #ffffff;
border: 1px solid #d6dee5;
margin: 5em 0 1em 0;
position: relative;
min-width: inherit;
border-radius: 5px;
-moz-border-radius: 5px;
background-color: #ffffff;
border: 1px solid #d6dee5;
margin: 5em 0 1em 0;
position: relative;
min-width: inherit;
border-radius: 5px;
-moz-border-radius: 5px;
}
.left-inside {
padding: 7px;
text-align: left;
border-bottom: 1px solid #dddddd;
padding: 7px;
text-align: left;
border-bottom: 1px solid #dddddd;
}
/* main */
.main-contents {
float: left;
margin: 5em 0 1em 0;
padding: 0px;
/* width: 550px;*/
float: left;
margin: 5em 0 1em 0;
padding: 0px;
/* width: 550px;*/
}
#main-container {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 0.2em;
border-radius: 5px;
background-color: #fff;
border: 1px solid #d6dee5;
padding: 0 10px;
overflow: visible;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 0.2em;
border-radius: 5px;
background-color: #fff;
border: 1px solid #d6dee5;
padding: 0 10px;
overflow: visible;
}
.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
position: relative;
clear: both;
overflow: hidden;
margin: 0 0 10px;
padding: 5px 10px;
background-color: #fff;
border: 1px solid #d6dee5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
position: relative;
clear: both;
overflow: hidden;
margin: 0 0 10px;
padding: 5px 10px;
background-color: #fff;
border: 1px solid #d6dee5;
}
.trans-button {
background-color: transparent;
border: 2px solid #fff;
color: #fff;
line-height: 50px;
background-color: transparent;
border: 2px solid #fff;
color: #fff;
line-height: 50px;
}
.trans-button .trans1 {
display: inline-block;
width: 200px;
height: 54px;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: center;
text-decoration: none;
line-height: 54px;
outline: none;
display: inline-block;
width: 200px;
height: 54px;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: center;
text-decoration: none;
line-height: 54px;
outline: none;
}
.trans-button:hover {
background-color: rgba(255, 255, 255, .2);
background-color: rgba(255, 255, 255, .2);
}
/* novel */
.novel-items {
margin-left: 0;
text-align: center;
margin-left: 0;
text-align: center;
}
novel-item {
position: relative;
text-align: left;
min-height: 115px;
min-width: 700px;
margin: 0 50px;
border: solid #e8f0f6;
border-width: 0 0 1px
position: relative;
text-align: left;
min-height: 115px;
min-width: 700px;
margin: 0 50px;
border: solid #e8f0f6;
border-width: 0 0 1px
}
.novel-item.muted .banner,
.novel-item.muted .chars,
.novel-item.muted .novel-right-contents {
display: none
display: none
}
.novel-item.muted .thumbnail-filter-items {
bottom: 11px
bottom: 11px
}
.novel-item+.novel-item {
border-top: 1px solid #d6dee5;
padding-top: 10px
border-top: 1px solid #d6dee5;
padding-top: 10px
}
.novel-item .series-title {
display: inline-block;
font-size: 12px;
margin-bottom: 4px;
font-weight: 700;
color: #faa200
display: inline-block;
font-size: 14px;
margin-bottom: 4px;
font-weight: 700;
color: #faa200
}
.novel-item .marker-delete {
text-align: center;
margin-top: 10px
text-align: center;
margin-top: 10px
}
.novel-item .title {
text-decoration: none;
font-size: 18px;
font-weight: 700;
line-height: 1
text-decoration: none;
font-size: 18px;
font-weight: 700;
line-height: 1
}
.novel-item .title:hover {
text-decoration: underline
text-decoration: underline
}
.novel-item .title a {
color: #555
color: #555
}
.novel-item .title a:visited {
color: #555
color: #555
}
.novel-item .banner:before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -17px;
left: 31px;
border: 17px solid transparent;
border-bottom-color: #cd8603
content: "";
width: 0;
height: 0;
position: absolute;
top: -17px;
left: 31px;
border: 17px solid transparent;
border-bottom-color: #cd8603
}
.novel-item .banner:after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 34px;
left: -14px;
border: 17px solid transparent;
border-top-color: #cd8603
content: "";
width: 0;
height: 0;
position: absolute;
top: 34px;
left: -14px;
border: 17px solid transparent;
border-top-color: #cd8603
}
.novel-item .banner span {
position: absolute;
left: -20px;
text-align: center;
top: 11px;
background: orange;
color: #fff;
font-weight: 700;
width: 78px;
font-size: 10px;
z-index: 1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
position: absolute;
left: -20px;
text-align: center;
top: 11px;
background: orange;
color: #fff;
font-weight: 700;
width: 78px;
font-size: 10px;
z-index: 1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.novel-item table.stats {
margin: 10px 0 5px;
font-size: 11px
margin: 10px 0 5px;
font-size: 11px
}
.novel-item table.stats th {
color: #888
color: #888
}
.novel-item table.stats th:after {
content: ":";
margin: 0 2px
content: ":";
margin: 0 2px
}
.novel-item table.stats td {
padding-right: 10px
padding-right: 10px
}
.novel-item table.stats .report-link {
font-weight: 700
font-weight: 700
}
.novel-item img.cover {
max-width: 75px;
max-height: 100px;
position: relative;
z-index: 1
max-width: 75px;
max-height: 100px;
position: relative;
z-index: 1
}
.novel-item .novel-contents {
width: 100%;
position: relative;
min-height: 120px
width: 100%;
position: relative;
min-height: 120px
}
.novel-item .novel-contents .imgbox {
padding: 3px 0 0 3px;
top: -3px;
left: -3px;
float: left;
overflow: hidden;
position: relative
padding: 3px 0 0 3px;
top: -3px;
left: -3px;
float: left;
overflow: hidden;
position: relative
}
.novel-item .novel-contents .novel-right-contents {
text-align: left;
padding: 20px 45px 10px 45px;
margin-bottom: 0.35em;
border-bottom: 1px solid #dddddd;
text-align: left;
padding: 20px 45px 10px 45px;
margin-bottom: 0.35em;
border-bottom: 1px solid #dddddd;
font-size: 120%;
}
.novel-item .novel-contents .novel-right-contents .edit-bookmark {
margin: 5px 0
margin: 5px 0
}
.novel-item .novel-contents .novel-right-contents .data-a {
margin: 6px 0
margin: 6px 0
}
.novel-item .novel-contents .novel-right-contents .data-a li {
display: inline;
margin-left: 6px
display: inline;
margin-left: 6px
}
.novel-item .novel-contents .novel-right-contents .data-a li+li:before {
content: "|";
font-size: 12px;
color: #ccc;
margin: 0 10px 0 0
content: "|";
font-size: 12px;
color: #ccc;
margin: 0 10px 0 0
}
.novel-item .novel-contents .novel-right-contents .data-a li.bookmark-count {
background-color: #fff!important;
color: #333!important
background-color: #fff!important;
color: #333!important
}
.novel-item .novel-contents .novel-right-contents .data-a li.response-count {
color: #000;
background-color: inherit;
padding: 0!important;
font: 700 10px/18px lucida grande, sans-serif
color: #000;
background-color: inherit;
padding: 0!important;
font: 700 10px/18px lucida grande, sans-serif
}
.novel-item .novel-contents .novel-right-contents .data-a li.response-count i {
margin-right: 3px
margin-right: 3px
}
.novel-item .novel-contents .novel-right-contents ._inline-list {
margin-bottom: 4px
margin-bottom: 4px
}
.novel-item .novel-contents .novel-right-contents ._inline-list dd+dt {
margin-left: 20px
margin-left: 20px
}
.novel-item .novel-contents .novel-right-contents .stats td {
width: 5em
width: 5em
}
.novel-item .novel-contents .novel-right-contents .edit {
float: left
float: left
}
.novel-item .novel-contents .novel-right-contents .update-date {
text-align: right;
color: #aaa;
clear: left
text-align: right;
color: #aaa;
clear: left
}
.novel-item .novel-contents .novel-right-contents .novel-caption {
padding: 15px 0;
line-height: 1.8;
word-break: break-all
padding: 15px 0;
line-height: 1.8;
word-break: break-all
}
.novel-item .novel-contents .novel-right-contents .tags li {
display: inline-block;
max-width: 610px;
margin-right: 10px
display: inline-block;
max-width: 610px;
margin-right: 10px
}
.novel-item .novel-contents .novel-right-contents .tags li:last-child {
margin-right: 0
margin-right: 0
}
.novel-list {
margin-bottom: 10px
margin-bottom: 10px
}
.novel-list .novel-item {
margin: 0;
max-width: 450px;
min-width: 450px;
border-width: 1px 0 0;
padding-top: 20px
margin: 0;
max-width: 450px;
min-width: 450px;
border-width: 1px 0 0;
padding-top: 20px
}
.novel-list .novel-item .novel-contents .novel-right-contents {
padding-left: 90px
padding-left: 90px
}
.novel-list .novel-item .novel-contents .tags {
max-width: none
max-width: none
}
.novel-list .novel-item .novel-contents .novel-caption {
max-width: 350px;
padding-bottom: 0
max-width: 350px;
padding-bottom: 0
}
.layout-column-tags-portal .novel-item {
min-width: 555px
min-width: 555px
}
.rounded .novel-item {
min-width: 515px
min-width: 515px
}
.novel-items li input {
position: absolute;
left: -15px;
top: 15px
position: absolute;
left: -15px;
top: 15px
}
.novel-settings {
margin-bottom: 10px
margin-bottom: 10px
}
.novel-settings>li {
margin-bottom: 0
margin-bottom: 0
}
.novel-settings .novel-item {
margin: 0;
max-width: 360px;
min-width: 360px;
border-width: 1px 0 0;
padding-top: 15px
margin: 0;
max-width: 360px;
min-width: 360px;
border-width: 1px 0 0;
padding-top: 15px
}
.novel-settings .novel-item .novel-contents .novel-right-contents {
padding-left: 90px
padding-left: 90px
}
.novel-settings .novel-item .novel-contents .tags {
max-width: none
max-width: none
}
.novel-settings .novel-item .novel-contents .novel-caption {
max-width: 350px;
padding-bottom: 0
max-width: 350px;
padding-bottom: 0
}
.list-b .imgbox {
padding: 3px 0 0 3px;
top: -3px;
left: -3px;
float: left;
overflow: hidden;
position: relative;
width: 75px
padding: 3px 0 0 3px;
top: -3px;
left: -3px;
float: left;
overflow: hidden;
position: relative;
width: 75px
}
.list-b .series-title {
display: inherit;
font-size: 12px;
margin-bottom: 4px;
font-weight: 700;
color: #faa200
display: inherit;
font-size: 12px;
margin-bottom: 4px;
font-weight: 700;
color: #faa200
}
.list-b .chars {
background-color: #eee;
width: 75px;
text-align: center;
color: #666;
padding: 3px 0;
box-sizing: border-box
background-color: #eee;
width: 75px;
text-align: center;
color: #666;
padding: 3px 0;
box-sizing: border-box
}
.list-b .author {
margin: 5px 0 10px
margin: 5px 0 10px
}
.list-b .bookmark-box {
float: right;
margin: 0 0 15px
float: right;
margin: 0 0 15px
}
.list-b .bookmark-box .bookmark-count {
background-color: #cef;
color: #0069b1
background-color: #cef;
color: #0069b1
}
.list-b .bookmark-box .response-count {
background-color: #fad7de;
color: red!important;
margin-left: 4px
background-color: #fad7de;
color: red!important;
margin-left: 4px
}
.list-b .bookmark-box i {
margin-right: 3px
margin-right: 3px
}
.list-b .bookmark-count,
.list-b .response-count {
border-radius: 3px;
display: inline-block!important;
margin: 0 1px;
padding: 0 6px!important;
font: 700 10px/18px lucida grande, sans-serif!important;
text-decoration: none
border-radius: 3px;
display: inline-block!important;
margin: 0 1px;
padding: 0 6px!important;
font: 700 10px/18px lucida grande, sans-serif!important;
text-decoration: none
}
.list-b .report-link {
font-weight: 700
font-weight: 700
}
.baseTop1 {
padding: 5px 0 15px 0;
padding: 5px 0 15px 0;
}
.ui-btn {
overflow: hidden;
}
/*menu*/
.menu-unit ul li span {
color: #999999;
color: #999999;
}
.menu-unit ul li span.count {
color: black;
color: black;
}
.menu-unit ul.profile li {
display: flex;
align-items: center;
padding: 10px 8px 0;
display: flex;
align-items: center;
padding: 10px 8px 0;
}
.menu-unit ul.menu-item a {
text-decoration-color: #cccccc;
text-decoration-style: solid;
display: flex;
justify-content: flex-end;
padding: 6px 4px;
text-decoration-color: #cccccc;
text-decoration-style: solid;
display: flex;
justify-content: flex-end;
padding: 6px 4px;
}
.ui-btn-icon-right {
font-size: 11px;
border: none;
padding-right: 4em;
margin-left: 1em;
text-align: right;
font-size: 11px;
border: none;
padding-right: 4em;
margin-left: 1em;
text-align: right;
}
/* font */
@font-face {
font-family: 'Logo';
src: url(../res/A-OTF-ReimPro-Bold.otf);
font-family: 'Logo';
src: url(../res/A-OTF-ReimPro-Bold.otf);
}
/* hidden menu */
.menu-item>li.menu-list>a {
display: none;
}
/* media Query */
@media screen and (max-width: 576px) {
.ui-btn-icon-notext:after,
.ui-btn-icon-left:after,
.ui-btn-icon-right:after {
display: none;
}
.main-contents {
margin: -5em 0 1em 0;
padding: 0px;
}
.flex-menu,
.flex-menu .ui-btn {
display: inline;
}
#main-container {
margin-top: 50px;
}
.menu-unit ul.menu-item a {
display: inline;
}
.menu-unit ul.menu-item a {
padding: 0;
}
.left-inside {
border-bottom: none;
}
.ui-btn-icon-notext:after,
.ui-btn-icon-left:after,
.ui-btn-icon-right:after {
display: none;
}
.main-contents {
margin: -5em 0 1em 0;
padding: 0px;
}
.flex-menu,
.flex-menu .ui-btn {
display: inline;
}
#main-container {
margin-top: 50px;
}
.menu-unit ul.menu-item a {
display: inline;
}
.menu-unit ul.menu-item a {
padding: 0;
}
.left-inside {
border-bottom: none;
}
.menu-item>li.menu-list>a {
display: inline-block;
}
}
html/index.html
......@@ -21,9 +21,9 @@
<div class="left-inside">
<div class="menu-unit">
<ul class="menu-item">
<li class="flex-menu"><a href="#" class="js-click-trackable-later" data-click-category="mypage-profile-column-simple" data-click-action="click-followings" data-click-label=""><span class="ui-btn ui-btn-icon-right ui-icon-carat-r">マイページ</span></a></li>
<li class="flex-menu"><a href="#" class="js-click-trackable-later" data-click-category="mypage-profile-column-simple" data-click-action="click-followings" data-click-label=""><span class="ui-btn ui-btn-icon-right ui-icon-carat-r">ブックマーク</span></a></li>
<li class="flex-menu"><a href="#" class="js-click-trackable-later" data-click-category="mypage-profile-column-simple" data-click-action="click-followings" data-click-label=""><span class="ui-btn ui-btn-icon-right ui-icon-carat-r">オプション</span></a></li>
<li class="flex-menu"><a href="#" class="clickable-menu"><span class="ui-btn ui-btn-icon-right ui-icon-carat-r">マイページ</span></a></li>
<li class="flex-menu"><a href="#" class="clickable-menu"><span class="ui-btn ui-btn-icon-right ui-icon-carat-r">ブックマーク</span></a></li>
<li class="flex-menu"><a href="#" class="clickable-menu"><span class="ui-btn ui-btn-icon-right ui-icon-carat-r">オプション</span></a></li>
</ul>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment