style: mobile typography
This commit is contained in:
Ramon Ayco Jr
parent
1476c8dff5
commit
b1aa0afd5b
1 changed files with 131 additions and 113 deletions
244
assets/main.scss
244
assets/main.scss
|
|
@ -393,119 +393,6 @@ nav#side-nav {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 0px) and (max-width: 350px) {
|
|
||||||
div.subscription-message-div {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-home {
|
|
||||||
&__list-items {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 0px) and (max-width: 767px) {
|
|
||||||
article .post-content p,
|
|
||||||
article .post-content ul li,
|
|
||||||
article .post-content ol li,
|
|
||||||
.blog-home {
|
|
||||||
&__list-items {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
caption {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron {
|
|
||||||
background: rgba(141, 191, 66, 0.97) !important;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
#mc_embed_signup label {
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
#mc_embed_signup input {
|
|
||||||
width: 250px !important;
|
|
||||||
height: 50px !important;
|
|
||||||
padding: 10px !important;
|
|
||||||
margin-bottom: 5px !important;
|
|
||||||
}
|
|
||||||
.jumbotron-content {
|
|
||||||
width: calc(100% - 120px);
|
|
||||||
padding: 80px 60px;
|
|
||||||
}
|
|
||||||
.page-content .wrapper {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
main.page-content {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
nav#side-nav {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 0 30px;
|
|
||||||
box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
|
|
||||||
}
|
|
||||||
.side-panel {
|
|
||||||
width: calc(100%-30px) !important;
|
|
||||||
margin: 0 15px;
|
|
||||||
}
|
|
||||||
.post-thumb {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 0 25px 25px;
|
|
||||||
}
|
|
||||||
.jumbotron {
|
|
||||||
background: rgba(141, 191, 66, 0.97) !important;
|
|
||||||
width: 100%;
|
|
||||||
box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
|
|
||||||
}
|
|
||||||
.jumbotron-content {
|
|
||||||
padding: 30px 0;
|
|
||||||
}
|
|
||||||
.post-list li h3 a {
|
|
||||||
font-size: 31px;
|
|
||||||
}
|
|
||||||
#mc_embed_signup input {
|
|
||||||
margin: 0 20px !important;
|
|
||||||
width: calc(100% - 40px) !important;
|
|
||||||
height: 50px !important;
|
|
||||||
padding: 10px !important;
|
|
||||||
}
|
|
||||||
.jumbotron-content #logo-div {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.jumbotron-content #mc_embed_signup {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.jumbotron-content {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.site-nav {
|
|
||||||
background-color: rgba(141, 191, 66, 0.97) !important;
|
|
||||||
border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
|
|
||||||
}
|
|
||||||
.site-nav .menu-icon > svg path {
|
|
||||||
fill: #ffffff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 768px) and (max-width: 1024px) {
|
|
||||||
#mc_embed_signup input {
|
|
||||||
width: 250px !important;
|
|
||||||
height: 50px !important;
|
|
||||||
padding: 10px !important;
|
|
||||||
margin-bottom: 5px !important;
|
|
||||||
}
|
|
||||||
.jumbotron-content {
|
|
||||||
width: calc(100% - 100px);
|
|
||||||
padding: 60px 50px;
|
|
||||||
}
|
|
||||||
.jumbotron {
|
|
||||||
background: rgba(141, 191, 66, 0.97) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
table.image caption {
|
table.image caption {
|
||||||
font-size: small;
|
font-size: small;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
|
|
@ -750,3 +637,134 @@ table.image caption {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 0px) and (max-width: 350px) {
|
||||||
|
div.subscription-message-div {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-home {
|
||||||
|
&__list-items {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 0px) and (max-width: 767px) {
|
||||||
|
article .post-content p,
|
||||||
|
article .post-content ul li,
|
||||||
|
article .post-content ol li,
|
||||||
|
.blog-home {
|
||||||
|
&__list-items {
|
||||||
|
margin-left: 0;
|
||||||
|
&__item {
|
||||||
|
&__header {
|
||||||
|
&__description {
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-post {
|
||||||
|
&__header {
|
||||||
|
&__description {
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
&__title {
|
||||||
|
font-size: 42px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
caption {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jumbotron {
|
||||||
|
background: rgba(141, 191, 66, 0.97) !important;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#mc_embed_signup label {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
#mc_embed_signup input {
|
||||||
|
width: 250px !important;
|
||||||
|
height: 50px !important;
|
||||||
|
padding: 10px !important;
|
||||||
|
margin-bottom: 5px !important;
|
||||||
|
}
|
||||||
|
.jumbotron-content {
|
||||||
|
width: calc(100% - 120px);
|
||||||
|
padding: 80px 60px;
|
||||||
|
}
|
||||||
|
.page-content .wrapper {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
main.page-content {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
nav#side-nav {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 0 30px;
|
||||||
|
box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
|
||||||
|
}
|
||||||
|
.side-panel {
|
||||||
|
width: calc(100%-30px) !important;
|
||||||
|
margin: 0 15px;
|
||||||
|
}
|
||||||
|
.post-thumb {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 0 25px 25px;
|
||||||
|
}
|
||||||
|
.jumbotron {
|
||||||
|
background: rgba(141, 191, 66, 0.97) !important;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
|
||||||
|
}
|
||||||
|
.jumbotron-content {
|
||||||
|
padding: 30px 0;
|
||||||
|
}
|
||||||
|
.post-list li h3 a {
|
||||||
|
font-size: 31px;
|
||||||
|
}
|
||||||
|
#mc_embed_signup input {
|
||||||
|
margin: 0 20px !important;
|
||||||
|
width: calc(100% - 40px) !important;
|
||||||
|
height: 50px !important;
|
||||||
|
padding: 10px !important;
|
||||||
|
}
|
||||||
|
.jumbotron-content #logo-div {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.jumbotron-content #mc_embed_signup {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.jumbotron-content {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.site-nav {
|
||||||
|
background-color: rgba(141, 191, 66, 0.97) !important;
|
||||||
|
border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
|
||||||
|
}
|
||||||
|
.site-nav .menu-icon > svg path {
|
||||||
|
fill: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 768px) and (max-width: 1024px) {
|
||||||
|
#mc_embed_signup input {
|
||||||
|
width: 250px !important;
|
||||||
|
height: 50px !important;
|
||||||
|
padding: 10px !important;
|
||||||
|
margin-bottom: 5px !important;
|
||||||
|
}
|
||||||
|
.jumbotron-content {
|
||||||
|
width: calc(100% - 100px);
|
||||||
|
padding: 60px 50px;
|
||||||
|
}
|
||||||
|
.jumbotron {
|
||||||
|
background: rgba(141, 191, 66, 0.97) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue