TeamPiped-mirror/hugo-whisper-theme
1
0
Fork 0
mirror of https://github.com/TeamPiped/hugo-whisper-theme.git synced 2024-08-14 23:57:00 +00:00
Code Issues Projects Releases Packages Wiki Activity

working on responsive css

Browse source
This commit is contained in:
Robert Austin 2019-02-17 21:44:45 +10:00
parent ae72d8b0f5
commit c36e2529b1
14 changed files with 93 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
assets/scss/components/_content.scss
View file

@ -1,5 +1,3 @@
$paragraph-color: $black;
.content { .content {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
pre { pre {
@ -67,14 +65,11 @@ $paragraph-color: $black;
} }
h2 { h2 {
font-size: 2.2rem; font-size: 2.2rem;
line-height: 1.6; line-height: 1.4;
font-weight: 300; font-weight: 300;
letter-spacing: -0.01em; letter-spacing: -0.01em;
font-family: $font-family-base; font-family: $font-family-base;
margin-bottom: 20px; margin-bottom: 20px;
@include media-breakpoint-up(md) {
line-height: 1.4;
}
} }
h3 { h3 {
font-size: 1.34rem; font-size: 1.34rem;

10
assets/scss/components/_footer.scss
View file

@ -1,5 +1,5 @@
.footer { .footer {
background: $secondary; background: #eaeaea;
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
.footer-inner { .footer-inner {
@ -24,7 +24,7 @@
flex: 0 0 120px; flex: 0 0 120px;
} }
} }
ul { ul.footer-menu {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -32,14 +32,14 @@
li { li {
display: block; display: block;
margin-right: 10px; margin-right: 10px;
color: lighten($secondary, 50%); color: #333;
font-size: 0.9rem; font-size: 0.9rem;
line-height: 1.8; line-height: 1.8;
&:last-of-type { &:last-of-type {
margin-right: 0; margin-right: 0;
} }
a { a {
color: lighten($secondary, 50%); color: #333;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@ -47,7 +47,7 @@
} }
&.copyright { &.copyright {
font-weight: bold; font-weight: bold;
color: lighten($secondary, 50%); color: #333;
display: none; display: none;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
display: inline-block; display: inline-block;

3
assets/scss/components/_logo.scss
View file

@ -16,8 +16,7 @@
} }
.logo-mobile { .logo-mobile {
display: block; display: block;
width: 40px; width: 54px;
padding: 10px 0 10px 0;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
display: none; display: none;
} }

59
assets/scss/components/_main-menu-mobile.scss
View file

@ -1,56 +1,6 @@
$color-main: $primary;
$color-active: #ffffff;
$color-link: #ffffff;
$button-height: 27px;
$button-width: 35px;
// .button_container {
// position: fixed;
// top: 5%;
// right: 2%;
// height: $button-height;
// width: $button-width;
// cursor: pointer;
// z-index: 1000;
// transition: opacity 0.25s ease;
// &:hover {
// opacity: 0.7;
// }
// &.active {
// .top {
// transform: translateY(11px) translateX(0) rotate(45deg);
// background: $color-active;
// }
// .middle {
// opacity: 0;
// background: $color-active;
// }
// .bottom {
// transform: translateY(-11px) translateX(0) rotate(-45deg);
// background: $color-active;
// }
// }
// span {
// background: $color-main;
// border: none;
// height: 5px;
// width: 100%;
// position: absolute;
// top: 0;
// left: 0;
// transition: all 0.35s ease;
// cursor: pointer;
// &:nth-of-type(2) {
// top: 11px;
// }
// &:nth-of-type(3) {
// top: 22px;
// }
// }
// }
.main-menu-mobile { .main-menu-mobile {
position: fixed; position: fixed;
background: $color-main; background: $primary;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
@ -90,7 +40,7 @@ $button-width: 35px;
} }
ul { ul {
font-size: 2rem; font-size: 2rem;
font-family: $font-family-serif; font-family: $font-family-base;
text-align: center; text-align: center;
list-style: none; list-style: none;
padding: 0; padding: 0;
@ -103,9 +53,10 @@ $button-width: 35px;
a { a {
display: block; display: block;
position: relative; position: relative;
color: $color-link; color: #ffffff;
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;
font-weight: lighter;
&:hover::after, &:hover::after,
&:focus::after, &:focus::after,
&:active::after { &:active::after {
@ -119,7 +70,7 @@ $button-width: 35px;
width: 0%; width: 0%;
transform: translateX(-50%); transform: translateX(-50%);
height: 3px; height: 3px;
background: $color-link; background: #ffffff;
transition: 0.35s; transition: 0.35s;
} }
} }

11
assets/scss/components/_sub-footer.scss
View file

@ -1,5 +1,5 @@
.sub-footer { .sub-footer {
background: darken($secondary, 10%); background: #f4f5fb;
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
@ -9,7 +9,7 @@
.sub-footer-inner { .sub-footer-inner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: flex-end;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
flex-direction: row; flex-direction: row;
} }
@ -20,15 +20,16 @@
li { li {
list-style: none; list-style: none;
display: block; display: block;
color: lighten($secondary, 40%); color: #333;
font-size: 0.9rem; font-size: 0.9rem;
line-height: 1.8; line-height: 1.8;
font-weight: bold;
strong { strong {
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
} }
a { a {
color: lighten($secondary, 40%); color: #333;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@ -43,7 +44,7 @@
} }
&.zerostatic { &.zerostatic {
a { a {
color: #ffffff; color: #333;
} }
} }
} }

2
assets/scss/components/_summary.scss
View file

@ -1,2 +0,0 @@
.summary {
}

8
assets/scss/components/_title.scss
View file

@ -1,15 +1,15 @@
.title { .title {
font-size: 2.4rem; font-size: 2.7rem;
line-height: 1.2; line-height: 1.1;
font-family: $font-family-base; font-family: $font-family-base;
letter-spacing: -0.2px; letter-spacing: -0.2px;
font-weight: 100; font-weight: 100;
margin-bottom: 30px; margin-bottom: 20px;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
font-size: 3rem; font-size: 3rem;
margin-bottom: 30px;
} }
} }
.title-summary { .title-summary {
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1.4; line-height: 1.4;

0
assets/scss/components/_type.scss
View file

13
assets/scss/pages/_home.scss
View file

@ -5,18 +5,21 @@
font-family: $font-family-base; font-family: $font-family-base;
} }
p { p {
width: 60%;
margin: 0 auto; margin: 0 auto;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: lighter; font-weight: lighter;
margin-bottom: 40px; margin-bottom: 40px;
@include media-breakpoint-up(md) {
width: 80%;
}
@include media-breakpoint-up(lg) {
width: 60%;
}
} }
.terminal { .terminal {
background: #eaeaea;
border-radius: 3px;
width: 80%;
margin: 0 auto;
@include whitebox(); @include whitebox();
border-radius: 3px;
margin: 0 auto;
margin-top: -200px; margin-top: -200px;
img { img {
width: 100%; width: 100%;

5
assets/scss/style.scss
View file

@ -64,6 +64,7 @@
// Pages // Pages
@import 'pages/home'; @import 'pages/home';
// Global
body { body {
font-family: $font-family-base; font-family: $font-family-base;
font-size: 1rem; font-size: 1rem;
@ -71,6 +72,10 @@ body {
line-height: 1.4; line-height: 1.4;
color: $black; color: $black;
} }
.container {
padding-left: $grid-gutter-width;
padding-right: $grid-gutter-width;
}
// Display breakpoints for DEV // Display breakpoints for DEV
// body:after { // body:after {

80
exampleSite/resources/_gen/assets/scss/scss/style.scss_5ad6f408b0e3e473c748aac88af0ea18.content
View file

@ -5331,7 +5331,7 @@ ol {
position: static; } position: static; }
.footer { .footer {
background: #ffca28; background: #eaeaea;
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; } padding-bottom: 20px; }
.footer .footer-inner { .footer .footer-inner {
@ -5354,33 +5354,33 @@ ol {
.footer .footer-title { .footer .footer-title {
margin: 0; margin: 0;
flex: 0 0 120px; } } flex: 0 0 120px; } }
.footer ul { .footer ul.footer-menu {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
flex: 1; } flex: 1; }
.footer ul li { .footer ul.footer-menu li {
display: block; display: block;
margin-right: 10px; margin-right: 10px;
color: white; color: #333;
font-size: 0.9rem; font-size: 0.9rem;
line-height: 1.8; } line-height: 1.8; }
.footer ul li:last-of-type { .footer ul.footer-menu li:last-of-type {
margin-right: 0; } margin-right: 0; }
.footer ul li a { .footer ul.footer-menu li a {
color: white; color: #333;
text-decoration: none; } text-decoration: none; }
.footer ul li a:hover { .footer ul.footer-menu li a:hover {
text-decoration: underline; } text-decoration: underline; }
.footer ul li.copyright { .footer ul.footer-menu li.copyright {
font-weight: bold; font-weight: bold;
color: white; color: #333;
display: none; } display: none; }
@media (min-width: 768px) { @media (min-width: 768px) {
.footer ul li.copyright { .footer ul.footer-menu li.copyright {
display: inline-block; } } display: inline-block; } }
@media (min-width: 576px) { @media (min-width: 576px) {
.footer ul { .footer ul.footer-menu {
height: inherit; height: inherit;
display: flex; display: flex;
list-style: none; list-style: none;
@ -5388,16 +5388,16 @@ ol {
padding: 0; padding: 0;
align-items: center; align-items: center;
justify-content: flex-end; } justify-content: flex-end; }
.footer ul li { .footer ul.footer-menu li {
list-style: none; } list-style: none; }
.footer ul li a { .footer ul.footer-menu li a {
display: inline-block; display: inline-block;
height: 40px; height: 40px;
padding: 10px 8px 10px 8px; padding: 10px 8px 10px 8px;
font-weight: 300; } } font-weight: 300; } }
.sub-footer { .sub-footer {
background: #f4b800; background: #f4f5fb;
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; } padding-bottom: 20px; }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -5407,7 +5407,7 @@ ol {
.sub-footer .sub-footer-inner { .sub-footer .sub-footer-inner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; } justify-content: flex-end; }
@media (min-width: 768px) { @media (min-width: 768px) {
.sub-footer .sub-footer-inner { .sub-footer .sub-footer-inner {
flex-direction: row; } } flex-direction: row; } }
@ -5418,14 +5418,15 @@ ol {
.sub-footer .sub-footer-inner ul li { .sub-footer .sub-footer-inner ul li {
list-style: none; list-style: none;
display: block; display: block;
color: #fffcf4; color: #333;
font-size: 0.9rem; font-size: 0.9rem;
line-height: 1.8; } line-height: 1.8;
font-weight: bold; }
.sub-footer .sub-footer-inner ul li strong { .sub-footer .sub-footer-inner ul li strong {
font-weight: bold; font-weight: bold;
color: #ffffff; } color: #ffffff; }
.sub-footer .sub-footer-inner ul li a { .sub-footer .sub-footer-inner ul li a {
color: #fffcf4; color: #333;
text-decoration: none; } text-decoration: none; }
.sub-footer .sub-footer-inner ul li a:hover { .sub-footer .sub-footer-inner ul li a:hover {
text-decoration: underline; } text-decoration: underline; }
@ -5436,7 +5437,7 @@ ol {
font-weight: bold; font-weight: bold;
color: #ffffff; } color: #ffffff; }
.sub-footer .sub-footer-inner ul li.zerostatic a { .sub-footer .sub-footer-inner ul li.zerostatic a {
color: #ffffff; } color: #333; }
@media (min-width: 576px) { @media (min-width: 576px) {
.sub-footer .sub-footer-inner ul li { .sub-footer .sub-footer-inner ul li {
display: inline-block; display: inline-block;
@ -5460,8 +5461,7 @@ ol {
.logo-mobile { .logo-mobile {
display: block; display: block;
width: 40px; width: 54px; }
padding: 10px 0 10px 0; }
@media (min-width: 576px) { @media (min-width: 576px) {
.logo-mobile { .logo-mobile {
display: none; } } display: none; } }
@ -5533,7 +5533,7 @@ ol {
animation-delay: 0.6s; } animation-delay: 0.6s; }
.main-menu-mobile ul { .main-menu-mobile ul {
font-size: 2rem; font-size: 2rem;
font-family: "Lora", Arial, sans-serif, -apple-system; font-family: "Roboto", Arial, sans-serif, -apple-system;
text-align: center; text-align: center;
list-style: none; list-style: none;
padding: 0; padding: 0;
@ -5548,7 +5548,8 @@ ol {
position: relative; position: relative;
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
overflow: hidden; } overflow: hidden;
font-weight: lighter; }
.main-menu-mobile ul li a:hover::after, .main-menu-mobile ul li a:focus::after, .main-menu-mobile ul li a:active::after { .main-menu-mobile ul li a:hover::after, .main-menu-mobile ul li a:focus::after, .main-menu-mobile ul li a:active::after {
width: 100%; } width: 100%; }
.main-menu-mobile ul li a::after { .main-menu-mobile ul li a::after {
@ -5639,15 +5640,16 @@ ol {
border: 2px solid #fff; } border: 2px solid #fff; }
.title { .title {
font-size: 2.4rem; font-size: 2.7rem;
line-height: 1.2; line-height: 1.1;
font-family: "Roboto", Arial, sans-serif, -apple-system; font-family: "Roboto", Arial, sans-serif, -apple-system;
letter-spacing: -0.2px; letter-spacing: -0.2px;
font-weight: 100; font-weight: 100;
margin-bottom: 30px; } margin-bottom: 20px; }
@media (min-width: 768px) { @media (min-width: 768px) {
.title { .title {
font-size: 3rem; } } font-size: 3rem;
margin-bottom: 30px; } }
.title-summary { .title-summary {
font-size: 1.6rem; font-size: 1.6rem;
@ -5718,14 +5720,11 @@ ol {
font-weight: 300; } } font-weight: 300; } }
.content h2 { .content h2 {
font-size: 2.2rem; font-size: 2.2rem;
line-height: 1.6; line-height: 1.4;
font-weight: 300; font-weight: 300;
letter-spacing: -0.01em; letter-spacing: -0.01em;
font-family: "Roboto", Arial, sans-serif, -apple-system; font-family: "Roboto", Arial, sans-serif, -apple-system;
margin-bottom: 20px; } margin-bottom: 20px; }
@media (min-width: 768px) {
.content h2 {
line-height: 1.4; } }
.content h3 { .content h3 {
font-size: 1.34rem; font-size: 1.34rem;
line-height: 1.6; line-height: 1.6;
@ -6074,21 +6073,24 @@ ol {
font-weight: lighter; font-weight: lighter;
font-family: "Roboto", Arial, sans-serif, -apple-system; } font-family: "Roboto", Arial, sans-serif, -apple-system; }
.page-home p { .page-home p {
width: 60%;
margin: 0 auto; margin: 0 auto;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: lighter; font-weight: lighter;
margin-bottom: 40px; } margin-bottom: 40px; }
@media (min-width: 768px) {
.page-home p {
width: 80%; } }
@media (min-width: 992px) {
.page-home p {
width: 60%; } }
.page-home .terminal { .page-home .terminal {
background: #eaeaea;
border-radius: 3px;
width: 80%;
margin: 0 auto;
border: 1px solid #dcdcdc; border: 1px solid #dcdcdc;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2);
background: #ffffff; background: #ffffff;
padding: 10px; padding: 10px;
border-radius: 3px;
margin: 0 auto;
margin-top: -200px; } margin-top: -200px; }
.page-home .terminal img { .page-home .terminal img {
width: 100%; width: 100%;
@ -6101,4 +6103,8 @@ body {
line-height: 1.4; line-height: 1.4;
color: #212529; } color: #212529; }
.container {
padding-left: 20px;
padding-right: 20px; }
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */

8
layouts/_default/baseof.html
View file

@ -23,12 +23,12 @@
<body class='page {{ block "body_classes" . }}{{ end }}'> <body class='page {{ block "body_classes" . }}{{ end }}'>
{{ partial "main-menu-mobile.html" . }} {{ partial "main-menu-mobile.html" . }}
<div id="wrapper" class="wrapper"> <div class="wrapper">
{{ partial "header.html" . }} {{ partial "header.html" . }}
{{ if eq .Section "docs" }} {{ if eq .Section "docs" }}
<div class="container pt-3 pt-md-6"> <div class="container pt-2 pt-md-6 pb-3 pb-md-6">
<div class="row"> <div class="row">
<div class="col-12 col-md-3 mb-2"> <div class="col-12 col-md-3 mb-3">
<div class="sidebar"> <div class="sidebar">
{{ partial "docs-menu.html" . }} {{ partial "docs-menu.html" . }}
</div> </div>
@ -43,9 +43,9 @@
{{ block "main" . }} {{ block "main" . }}
{{ end }} {{ end }}
{{ end}} {{ end}}
</div> </div>
{{ partial "sub-footer.html" . }}
{{ $scripts := resources.Get "js/scripts.js" }} {{ $scripts := resources.Get "js/scripts.js" }}

14
layouts/index.html
View file

@ -28,9 +28,17 @@
</div> </div>
</div> </div>
</div> </div>
<div class="strip strip-grey pt-4 pb-4"> </div>
<div class="terminal">
<img src="{{ .Site.BaseURL }}images/terminal-white.gif" /> <div class="strip strip-grey d-none d-md-block">
<div class="container pt-8 pb-6">
<div class="row">
<div class="col-12">
<div class="terminal">
<img src="{{ .Site.BaseURL }}images/terminal-white.gif" />
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

5
layouts/partials/sub-footer.html
View file

@ -3,11 +3,6 @@
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="sub-footer-inner"> <div class="sub-footer-inner">
<ul>
<li><strong>Phone: </strong>{{ .Site.Data.contact.phone }}</li>
<li><strong>Email: </strong><a href="mailto:{{ .Site.Data.contact.email }}">
{{ .Site.Data.contact.email }}</a></li>
</ul>
<ul> <ul>
<li class="zerostatic"><a href="https://www.zerostatic.io">www.zerostatic.io</a></li> <li class="zerostatic"><a href="https://www.zerostatic.io">www.zerostatic.io</a></li>
</ul> </ul>