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

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

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

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

@ -16,8 +16,7 @@
}
.logo-mobile {
display: block;
width: 40px;
padding: 10px 0 10px 0;
width: 54px;
@include media-breakpoint-up(sm) {
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 {
position: fixed;
background: $color-main;
background: $primary;
top: 0;
left: 0;
width: 100%;
@ -90,7 +40,7 @@ $button-width: 35px;
}
ul {
font-size: 2rem;
font-family: $font-family-serif;
font-family: $font-family-base;
text-align: center;
list-style: none;
padding: 0;
@ -103,9 +53,10 @@ $button-width: 35px;
a {
display: block;
position: relative;
color: $color-link;
color: #ffffff;
text-decoration: none;
overflow: hidden;
font-weight: lighter;
&:hover::after,
&:focus::after,
&:active::after {
@ -119,7 +70,7 @@ $button-width: 35px;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: $color-link;
background: #ffffff;
transition: 0.35s;
}
}

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

@ -1,5 +1,5 @@
.sub-footer {
background: darken($secondary, 10%);
background: #f4f5fb;
padding-top: 20px;
padding-bottom: 20px;
@include media-breakpoint-up(md) {
@ -9,7 +9,7 @@
.sub-footer-inner {
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: flex-end;
@include media-breakpoint-up(md) {
flex-direction: row;
}
@ -20,15 +20,16 @@
li {
list-style: none;
display: block;
color: lighten($secondary, 40%);
color: #333;
font-size: 0.9rem;
line-height: 1.8;
font-weight: bold;
strong {
font-weight: bold;
color: #ffffff;
}
a {
color: lighten($secondary, 40%);
color: #333;
text-decoration: none;
&:hover {
text-decoration: underline;
@ -43,7 +44,7 @@
}
&.zerostatic {
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 {
font-size: 2.4rem;
line-height: 1.2;
font-size: 2.7rem;
line-height: 1.1;
font-family: $font-family-base;
letter-spacing: -0.2px;
font-weight: 100;
margin-bottom: 30px;
margin-bottom: 20px;
@include media-breakpoint-up(md) {
font-size: 3rem;
margin-bottom: 30px;
}
}
.title-summary {
font-size: 1.6rem;
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;
}
p {
width: 60%;
margin: 0 auto;
font-size: 1.2rem;
font-weight: lighter;
margin-bottom: 40px;
@include media-breakpoint-up(md) {
width: 80%;
}
@include media-breakpoint-up(lg) {
width: 60%;
}
}
.terminal {
background: #eaeaea;
border-radius: 3px;
width: 80%;
margin: 0 auto;
@include whitebox();
border-radius: 3px;
margin: 0 auto;
margin-top: -200px;
img {
width: 100%;

5
assets/scss/style.scss
View file

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