Browse Source

changed layout home banner

master
JoBCB 4 years ago
parent
commit
49401f0a46
  1. 48
      static/css/style.css
  2. 2
      templates/home.html

48
static/css/style.css

@ -206,7 +206,7 @@ img.artwork-mockuppage{
left: 0; left: 0;
} }
.soon-nofix { .soon-nofix {
margin: 80px 80px; margin: 10vmin 80px;
width: 100%; width: 100%;
} }
/************ LAYOUT ************/ /************ LAYOUT ************/
@ -273,10 +273,13 @@ div#header-top{
} }
div#animatedlogo{ div#animatedlogo{
display: flex; display: flex;
width: 8vw;
min-width: 130px;
} }
div#animatedlogo img{ div#animatedlogo img{
width: 8vw; /*auto*/ width: 8vw; /*auto*/
max-height: 130px; min-width: 130px;
max-width: 130px;
justify-self: center; justify-self: center;
} }
div#header-title{ div#header-title{
@ -779,6 +782,12 @@ div#home-top-div{
position: relative; position: relative;
border-bottom: solid black 3px; border-bottom: solid black 3px;
background-color: rgba(233,233,233, 0.5); background-color: rgba(233,233,233, 0.5);
padding: 0vw 8vw;
display: grid;
row-gap: 0rem;
column-gap: 1rem;
grid-template-columns: repeat(18, 1fr);
} }
.heading_A { .heading_A {
font-family: Roboto Condensed; font-family: Roboto Condensed;
@ -789,13 +798,18 @@ div#home-top-div{
font-style: normal; font-style: normal;
letter-spacing: normal; letter-spacing: normal;
color: var(--black); color: var(--black);
margin-top: 8vw; margin-top: 2vw;
margin-left: 8vw; /* 150px */ margin-left: 0vw; /* 150px 8vw */
} }
#home-top-div .heading_A { #home-top-div .heading_A {
position: relative; position: relative;
max-width: 634px; /*max-width: 634px;*/
z-index: 99; z-index: 99;
grid-column-start: 2;
grid-column-end: 10;
grid-row-start: 1;
grid-row-end: 1;
} }
#home-top-div p { #home-top-div p {
margin-bottom: 0px; margin-bottom: 0px;
@ -808,12 +822,24 @@ div#home-top-div{
z-index: 99; z-index: 99;
} }
#home-top-div #wrapper-vid { #home-top-div #wrapper-vid {
margin: 4vmin 8vw 0px 0px; /*8vmin*/ margin: 0vmin 0vw 0px 0px; /*8vmin*/
width: 50%; /*width: 50%;*/
z-index: 99;
grid-column-start: 9;
grid-column-end: 18;
grid-row-start: 1;
grid-row-end: 3;
align-self: end;
margin-bottom: 2vw;
} }
#home-top-div #wrapper-bt{ #home-top-div #wrapper-bt{
margin: 36px 26px 0px 8vw; margin: 36px 26px 0px 0vw; /*8vmin*/
width: 50%; /*width: 50%;*/
z-index: 99;
grid-column-start: 2;
grid-column-end: 8;
grid-row-start: 2;
grid-row-end: 2;
} }
#home-top-div #wrapper-vid video { #home-top-div #wrapper-vid video {
width: 100%; width: 100%;
@ -1033,7 +1059,7 @@ div.home-recent-items-bottom, div.browsethearchive-items-bottom, div.selfpublish
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-shrink: 0; flex-shrink: 0;
flex-basis: 140px; flex-basis: 100px;
justify-content: flex-start; justify-content: flex-start;
} }
@ -1050,7 +1076,7 @@ div#home-recent-grid, div#browsethearchive-grid, div#selfpublishedindex-grid, di
} }
div.home-show-wrapper{ div.home-show-wrapper{
width: 100%; width: 100%;
margin: 60px auto; margin: 0px auto 60px auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

2
templates/home.html

@ -26,7 +26,6 @@
<p class="heading_A">The Digital Archive of Artists Publishing is an interactive, user-driven, searchable database of Artist's Books and publications</p> <p class="heading_A">The Digital Archive of Artists Publishing is an interactive, user-driven, searchable database of Artist's Books and publications</p>
<div id="wrapper-bt-vid">
<div id="wrapper-bt"> <div id="wrapper-bt">
<a id="wrapper-top-buttons" class="primary-button" href="{{ url_for('zinesindex') }}">SEE EXAMPLE SEARCH FOR ZINES</a> <a id="wrapper-top-buttons" class="primary-button" href="{{ url_for('zinesindex') }}">SEE EXAMPLE SEARCH FOR ZINES</a>
<a id="wrapper-top-buttons" class="secondary-button" href="{{ url_for('casestudy') }}">CAROLEE SCHNEEMANN CASE STUDY</a> <a id="wrapper-top-buttons" class="secondary-button" href="{{ url_for('casestudy') }}">CAROLEE SCHNEEMANN CASE STUDY</a>
@ -37,7 +36,6 @@
</video> </video>
</div> </div>
</div> </div>
</div>
<div class="scroll-down"><span>Scroll Down</span></div> <div class="scroll-down"><span>Scroll Down</span></div>

Loading…
Cancel
Save