ross/slowtwitch-news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

front page draft 1

Browse Source
This commit is contained in:
Ross Trottier 2024-07-01 15:01:37 -06:00
parent fcf5635bf5
commit 35ee1fb1a3
2 changed files with 77 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
header.php
View File

@ -33,7 +33,7 @@
?> ?>
<a href="#" class="st-header-icon"><i class="fa fa-user"></i></a> <a href="#" class="st-header-icon"><i class="fa fa-user"></i></a>
<button class="st-nav-btn st-open-search" aria-label="Open Search"><i class="fa fa-search"></i></button> <button class="st-nav-btn st-open-search" aria-label="Open Search"><i class="fa fa-search"></i></button>
<button class="st-nav-btn st-open-nav" aria-label="Open Navigation">&#9776;</button> <button class="st-nav-btn st-open-nav" aria-label="Open Navigation"><i class="fa fa-bars"></i></button>
</div> </div>
<h1 class="st-site-title">Slowtwitch</h1> <h1 class="st-site-title">Slowtwitch</h1>

85
style.css
View File

@ -54,6 +54,7 @@ h1 {
@media (min-width: 760px) { @media (min-width: 760px) {
.st-site-title { .st-site-title {
font-size: 6.9rem; font-size: 6.9rem;
margin-bottom: .10em;
} }
} }
@ -111,7 +112,7 @@ SECTIONS
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
color: black; color: black;
margin-top: .25em; margin-top: 1em;
} }
.st-header-logo { .st-header-logo {
@ -128,7 +129,8 @@ SECTIONS
display: none; display: none;
} }
.st-icon-bar-sticky .st-open-nav { .st-icon-bar-sticky .st-open-nav,
.st-icon-bar-sticky .st-open-search {
border-radius: 20%; border-radius: 20%;
padding: .1em .4em; padding: .1em .4em;
background: #fff; background: #fff;
@ -138,12 +140,48 @@ SECTIONS
} }
.st-icon-bar-sticky .st-open-search { .st-icon-bar-sticky .st-open-search {
border-radius: 20%; margin-left: 0;
padding: .1em .4em;
background: #fff;
box-shadow: 0 0 3px rgb(0 0 0 / 30%);
margin-right: auto; margin-right: auto;
pointer-events: auto; }
@media (min-width: 760px) {
.st-header-icon-bar {
margin-top: 1.5em;
}
.st-icon-bar-sticky {
justify-content: flex-end;
margin-top: 1em;
}
.st-icon-bar-sticky .st-open-nav {
margin-left: 1em;
}
.st-icon-bar-sticky .st-open-search {
margin-right: 0;
}
}
@media (min-width: 1200px) {
.st-nav-btn i,
.st-header-icon i{
font-size: 2rem;
}
.st-header-icon-bar a,
.st-header-icon {
font-size: 1.25rem;
}
.st-icon-bar-sticky .st-open-nav,
.st-icon-bar-sticky .st-open-search {
padding: .6em .8em;
}
.st-header-icon-bar {
margin-top: 2.5em;
}
} }
/* nav */ /* nav */
@ -232,6 +270,31 @@ SECTIONS
font-size: 1.25em; font-size: 1.25em;
} }
@media (min-width: 760px) {
.st-nav-is-open {
text-align: center;
}
.st-nav-links {
margin-top: 2.5em;
font-size: 2.5rem;
}
.st-search-form {
margin-top: 5em;
}
.st-search-box {
width: 500px;
}
}
@media (min-width: 120px) {
.st-search-box {
width: 1000px;
}
}
/* footer */ /* footer */
.st-footer { .st-footer {
@ -328,7 +391,7 @@ SECTIONS
@media (min-width: 760px) { @media (min-width: 760px) {
.st-footer { .st-footer {
background-color: white; background-color: white;
grid-template-columns: minmax(1em, 1fr) minmax(50px, 80px) repeat(2, minmax(130px, 725px)) minmax(1em, 1fr); grid-template-columns: minmax(1em, 1fr) minmax(50px, 80px) repeat(2, minmax(130px, 660px)) minmax(1em, 1fr);
grid-template-areas: grid-template-areas:
"lpad socials empty partners rpad" "lpad socials empty partners rpad"
"lpad menu empty partners rpad" "lpad menu empty partners rpad"
@ -490,6 +553,10 @@ SECTIONS
.st-article-section-wide .st-article-section-title { .st-article-section-wide .st-article-section-title {
grid-column: 1 / span 4; grid-column: 1 / span 4;
} }
.st-article-section-title {
font-size: 2.6rem;
}
} }
/* ad section */ /* ad section */
@ -715,7 +782,7 @@ COMPONENTS
font-size: 1rem; font-size: 1rem;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
border-radius: 100px; border-radius: 15px;
color: white; color: white;
font-weight: 500; font-weight: 500;
letter-spacing: 1px; letter-spacing: 1px;