gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Layout tweaks, updated illustrations, responsiveness

Browse Source
This commit is contained in:
Lennart Ziburski
2018-02-24 01:12:39 +01:00
parent 07a76c658a
commit 941cf44017
19 changed files with 126 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
website/src/css/imports/base.css
View File

@ -33,10 +33,10 @@ h1 {
h2 {
font-family: $roboto;
font-size: 32px;
font-size: 36px;
font-weight: $bold;
color: $darkGrey;
margin: 0 auto $tiny auto;
margin-bottom: $tiny;
&.subhead {
font-weight: $regular;
@ -46,8 +46,8 @@ h2 {
h3 {
font-family: $roboto;
font-size: 18px;
font-weight: $semibold;
line-height: 30px;
font-weight: $bold;
line-height: 26px;
padding-bottom: $micro;
margin: 0;
}

27
website/src/css/imports/community.css
View File

@ -6,7 +6,7 @@
@media screen and (min-width: $desktop) {
h2 {
text-align: center;
margin-bottom: $medium;
margin-bottom: $large;
}
}
@ -23,32 +23,13 @@
.community-features {
.feature {
margin-top: $small;
}
}
.community-buttons {
margin-top: $small;
padding-top: $medium;
border-top: 1px solid $lightestGrey;
a {
padding: $micro $tiny $micro $tiny;
margin-right: $micro;
background-color: $lightishGrey;
color: white;
border-radius: $borderRadius;
}
a:hover {
background-color: $darkGreen;
}
a:active {
background-color: $darkerGreen;
margin-top: $medium;
}
}
.contributors {
@neat-span-columns 12;
margin-top: $small;
margin-top: $medium;
@media screen and (min-width: $tablet) {
@neat-span-columns 10;
@ -62,7 +43,7 @@
margin-top: 4px;
img {
width: 32px;
margin: 0 $micro $micro 0;
margin: 0 4px 4px 0;
border-radius: 16px;
transition: 0.1s;
}

18
website/src/css/imports/editors.css
View File

@ -1,7 +1,6 @@
.editors {
@neat-row;
margin-top: calc($large * 1.5);
margin-bottom: $xxl;
margin: $xxl 0 $xxl 0;
@media screen and (min-width: $desktop) {
text-align: center;
@ -22,8 +21,8 @@
.editors-features {
display: flex;
justify-content: space-evenly;
margin-top: $large;
justify-content: space-between;
margin-top: calc($large * 2);
@media screen and (max-width: $desktop) {
justify-content: flex-start;
@ -32,18 +31,19 @@
}
.feature {
max-width: 340px;
min-width: 260px;
width: 320px;
text-align: left;
margin-right: $medium;
img {
max-width: 280px;
max-width: 300px;
margin-bottom: $tiny;
border-radius: $borderRadius;
box-shadow: 0 4px 12px 0 rgba(68,74,87,0.10), 0 1px 3px 0 rgba(68,74,87,0.20);
margin-left: -9px;
}
@media screen and (max-width: $desktop) {
margin-top: $large;
margin-right: $medium;
}
}

45
website/src/css/imports/footer.css
View File

@ -1,14 +1,43 @@
footer {
background: white;
padding: $medium 0;
padding: $medium 0 $large 0;
text-align: center;
p {
color: $grey;
font-family: $roboto;
font-size: 12px;
opacity: .5;
.footer-info {
@media screen and (min-width: $tablet) {
float: left;
margin-right: $small;
}
p {
color: $grey;
font-family: $roboto;
font-size: 12px;
opacity: .5;
}
a {
color: $grey;
}
}
a {
color: $grey;
.social-buttons {
margin-bottom: $small;
@media screen and (min-width: $tablet) {
float: left;
margin-right: $small;
}
a {
padding: $micro $tiny $micro $tiny;
margin-right: $micro;
background-color: $lightishGrey;
color: white;
border-radius: $borderRadius;
}
a:hover {
background-color: $darkGreen;
}
a:active {
background-color: $darkerGreen;
}
}
}

10
website/src/css/imports/header.css
View File

@ -192,7 +192,7 @@ header {
line-height: 24px;
transition: all .2s ease-in-out;
@media screen and (min-width: 968px) {
@media screen and (min-width: 1024px) {
display: inline;
}
@ -228,10 +228,16 @@ header {
float: left;
}
}
iframe {
@media screen and (max-width: 820px) {
display: none;
opacity: 0;
}
}
}
.cta-header {
margin-left: $micro;
margin-left: $tiny;
}
.cta-header a {
display: inline-block;

30
website/src/css/imports/hero.css
View File

@ -16,17 +16,14 @@
}
&.landing {
@media screen and (min-width: $tablet) {
padding-bottom: 165px;
padding-bottom: 100px;
@media screen and (min-width: $desktop) {
padding-bottom: 200px;
}
}
.hero-copy {
margin: $large auto $medium auto;
@media screen and (min-width: $desktop) {
/* text-align: center; */
}
margin: $medium auto $xl auto;
}
.subhead {
@ -47,6 +44,7 @@
h1 {
color: $green;
margin-bottom: 0;
max-width: 800px;
}
h2 {
@ -55,8 +53,6 @@
h3 {
color: white;
font-size: $tiny;
padding-bottom: 0;
}
.hero-features {
@ -66,18 +62,23 @@
}
.feature {
margin-top: $medium;
margin: 0 0 $medium 0;
}
}
.hero-graphic {
transform: scale(1.1) rotate(2deg);
@media screen and (min-width: $tablet) {
@neat-span-columns 6;
float: right;
margin-bottom: 0;
margin: 0;
transform: scale(1.1) rotate(2deg);
}
img {
border-radius: $largeBorderRadius;
box-shadow: 0 10px 30px 0 rgba(0,0,0,0.15), 0 3px 9px 0 rgba(0,0,0,0.30);
}
a.hero-videolink {
@ -97,11 +98,6 @@
a.hero-videolink:active {
background-color: rgba(255,255,255,0.4);
}
img {
border-radius: $largeBorderRadius;
box-shadow: 0 10px 30px 0 rgba(0,0,0,0.15), 0 3px 9px 0 rgba(0,0,0,0.30);
}
}
/*COMMUNITY PAGE*/

2
website/src/css/imports/utilities.css
View File

@ -256,4 +256,4 @@ img.responsive {
line-height: 28px;
color: $lightGrey;
}
}
}

27
website/src/css/imports/whatsnew.css
View File

@ -1,32 +1,45 @@
.whatsnew {
margin-top: -98px;
padding: 75px 0 $medium 0;
padding: $medium 0 $medium 0;
background-color: $lightishGrey;
color: white;
@media screen and (min-width: $desktop) {
margin-top: -98px;
padding-top: 75px;
}
ol {
display: flex;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
list-style: none;
padding-left: 0;
@media screen and (max-width: $desktop) {
flex-wrap: wrap;
}
a {
color: white;
font-weight: $regular;
min-width: 250px;
max-width: 320px;
margin-right: $medium;
@media screen and (max-width: $desktop) {
max-width: 100%;
min-width: 100%;
padding: 16px 0 16px 0;
}
}
a:hover {
padding: 16px 24px 16px 24px;
margin: -16px -24px -16px -24px;
margin: -16px calc($medium - 24px) -16px -24px;
background-color: $darkGrey;
border-radius: $borderRadius;
@media screen and (max-width: $desktop) {
margin: 0 -24px 0 -24px;
}
}
a:active {
background-color: $darkerGrey;
}
li {
min-width: 250px;
max-width: 350px;
.update-metadata {
font-size: 13px;
color: rgba(255,255,255,0.6);