Browse Source

style for show more button homepage

master
JoBCB 4 years ago
parent
commit
7660864c86
  1. 60
      static/css/style.css
  2. 2
      templates/home.html

60
static/css/style.css

@ -199,7 +199,12 @@ div#navigation a{
}
div#navigation a:hover {
text-decoration: underline;
}
div#navigation a:active {
color: #1b42d8;
text-decoration: none;
}
/*Footer*/
@ -358,15 +363,14 @@ table, th, td {
#artistsindex-table, #publishersindex-table, #zinesindex-table, #selfpublishedindex-table {
width: 100%; }
#artistsindex-table_wrapper, #publishersindex-table_wrapper, #selfpublishedindex-table_wrapper, #zinesindex-table_wrapper {background-color: #E9E9E9;}
table {background-color: #fdfdfd}
thead tr th:first-child { padding: 0px 0px 0px 80px }
thead tr th:last-child { padding: 0px 80px 0px 0px }
tr { padding: 10px 80px 10px 80px; }
th { padding: 22px; }
.idnumber { padding: 0px 0px 0px 80px }
.label { font-weight: bold;}
.altaliases {}
.description { padding: 0px 80px 0px 0px }
th { padding: 16px; }
thead tr th{
text-transform: uppercase;
@ -390,6 +394,26 @@ tbody tr th a{
text-decoration: none;
color: #000000;
}
.idnumber {
padding: 16px 0px 16px 80px;
min-width: 56px;
max-width: 128px; /*56px * 2 + 16*/
}
.label { font-weight: bold;
min-width: 128px;
max-width: 272px;/*56px * 4 + 16 * 3*/
}
.altaliases {
min-width: 128px;
max-width: 272px;/*56px * 4 + 16 * 3*/
}
.description {
padding: 16px 80px 16px 0px;
min-width: 128px;
max-width: 560px;/*56px * 8 + 16 * 7*/
}
.idnumber, .label, .altaliases, .description{
vertical-align: top;}
#artistsindex-table_paginate{
background-color: #E9E9E9;
@ -431,12 +455,13 @@ a.current {
justify-content: center;
cursor: pointer;
}
.paginate_button{
.paginate_button {
cursor: pointer;
}
a.paginate_button.previous, a.paginate_button.next{
display: flex;
flex-direction: row;
font-size: 0;
}
a.paginate_button.previous:before {
display: inline-block;
@ -486,7 +511,7 @@ a.paginate_button.next:after {
.primary-button {
max-width: 365px;
min-height: 48px;
font-family: Roboto;
font-family: 'Roboto Condensed Bold';
font-size: 14px;
line-height: 16px;
font-weight: bold;
@ -592,25 +617,12 @@ div#home-recent-grid, div#browsethearchive-grid{
/*text-align: center;*/
grid-gap: 1rem;
}
div#show-button-wrapper{
width: 100%;
}
div.home-show-wrapper{
width: 100%;
margin: 60px 0px;
}
span.home-show{
display: flex;
margin: auto;
background-color: #1b42d8;
border-radius: 6px;
color: #FFFFFF;
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
font-weight: bold;
height: 48px;
width: 365px;
cursor: pointer;
margin: 60px auto;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 768px) {

2
templates/home.html

@ -39,7 +39,7 @@
</div>
<div class="home-show-wrapper"><span class="home-show"></span></div>
<div class="home-show-wrapper primary-button"><span class="home-show">SHOW MORE</span></div>
</div>

Loading…
Cancel
Save