add site-newdesign configuration that generates the new design
This commit is contained in:
Lee Hanken
323
public_html/css/new-design.css
Normal file
323
public_html/css/new-design.css
Normal file
@@ -0,0 +1,323 @@
|
||||
@charset "utf-8";
|
||||
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
display: block;
|
||||
background: #dfdfdf;
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
img,
|
||||
form,
|
||||
fieldset,
|
||||
input,
|
||||
textarea,
|
||||
blockquote,
|
||||
footer {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
color: #4D4D4D;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 1.15rem;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
color: #5e949e;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
color: #7eb4be;
|
||||
}
|
||||
|
||||
pre {
|
||||
/* Add background, border and scrollbar to <pre> */
|
||||
background: #eee;
|
||||
border: 1px solid #ddd;
|
||||
overflow: auto;
|
||||
clear: both;
|
||||
padding: 0.5rem
|
||||
}
|
||||
|
||||
code {
|
||||
background: #eee;
|
||||
border-radius: 0.2rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
pre code {
|
||||
padding-right: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #4D4D4D;
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
footer span {
|
||||
background-color: #4D4D4D;
|
||||
color: #dfdfdf;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #afafef;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
nav{
|
||||
background: linear-gradient(to right, #2f789d, #a6cbcb);
|
||||
color: #dfdfdf;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-links {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: block;
|
||||
color: #b6dbdb;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background-color: #5fa9be;
|
||||
color: #efefef;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.hamburger img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
filter: invert(80%) sepia(20%) saturate(100%) hue-rotate(140deg) brightness(110%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.hamburger {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menu-links {
|
||||
position: static;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(to right, #2f789d, #a6cbcb);
|
||||
flex-direction: column;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-links.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
nav a {
|
||||
text-align: left;
|
||||
border-top: solid 1px #0f597e;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background: linear-gradient(to right, #3f89ae, #a6cbcb);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin: 5px;
|
||||
background: linear-gradient(to right, #2f789d, #a6cbcb);
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
margin: 0 auto;
|
||||
height: 35vh;
|
||||
width: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
object-position: left;
|
||||
max-width:1600px;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 0 2em;
|
||||
}
|
||||
|
||||
section {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
section.podcast {
|
||||
width: 90%;
|
||||
margin: 0 5%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
a.podcast {
|
||||
flex: 0 0 20%;
|
||||
flex-basis: 150px;
|
||||
box-sizing: border-box;
|
||||
margin: 2.5%;
|
||||
padding: 1em 1em 0em 1em;
|
||||
height: 180px;
|
||||
background-size: cover;
|
||||
border: none;
|
||||
}
|
||||
|
||||
section a.podcast.record {
|
||||
background-image: url('../icons/record_button.png');
|
||||
}
|
||||
|
||||
section a.podcast.schedule {
|
||||
background-image: url('../icons/schedule_button.png');
|
||||
background-size: cover;
|
||||
border: none;
|
||||
}
|
||||
|
||||
section a.podcast.subscribe {
|
||||
background-image: url('../icons/subscribe_button.png');
|
||||
background-size: cover;
|
||||
border: none;
|
||||
}
|
||||
|
||||
section a.podcast.listen {
|
||||
background-image: url('../icons/listen_button.png');
|
||||
background-size: cover;
|
||||
border: none;
|
||||
}
|
||||
|
||||
section.podcast > a > p
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
section.project {
|
||||
width: 90%;
|
||||
margin: 0 5%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
a.project {
|
||||
flex: 0 0 20%;
|
||||
flex-basis: 150px;
|
||||
box-sizing: border-box;
|
||||
margin: 2.5%;
|
||||
padding: 1em 1em 0em 1em;
|
||||
height: 180px;
|
||||
background-size: cover;
|
||||
border: none;
|
||||
}
|
||||
|
||||
section.project > a > p
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
section a.project.host {
|
||||
background-image: url('../icons/hosts_button.png');
|
||||
background-size: cover;
|
||||
border: none;
|
||||
}
|
||||
|
||||
section a.project.series {
|
||||
background-image: url('../icons/series_button.png');
|
||||
background-size: cover;
|
||||
border: none;
|
||||
}
|
||||
|
||||
section a.project.about {
|
||||
background-image: url('../icons/about_button.png');
|
||||
background-size: cover;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.column-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
section.episodes, section.comments {
|
||||
paddng: 10px;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
section.episodes, section.comments {
|
||||
flex-basis: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.column-container {
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user