andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated the landing page

Browse Source 
Functional daily picks
This commit is contained in:
Angelos Chalaris
2018-04-07 15:54:51 +03:00
parent fc5c64a5c1
commit eaa5e1d4cf
4 changed files with 278 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/mini.css
View File

File diff suppressed because one or more lines are too long

118
docs/mini/flavor.scss
View File

@ -470,7 +470,11 @@ button#disclaimer-close{
#splash {
height: auto;
padding-bottom: 1.5rem;
background: linear-gradient(135deg, rgba(255,174,39,1) 0%,rgba(222,73,109,1) 100%);
background: linear-gradient(
135deg,
rgba(255, 174, 39, 1) 0%,
rgba(222, 73, 109, 1) 100%
);
#logo {
margin-top: 0;
margin-left: -0.5rem;
@ -492,15 +496,16 @@ button#disclaimer-close{
margin-left: -0.5rem;
> a {
background: transparent;
border: 0.0625rem solid rgba(17,17,17,0.95);
border: 0.0625rem solid rgba(17, 17, 17, 0.95);
transition: all 0.3s;
&:hover, &:focus {
background: rgba(17,17,17,0.95);
&:hover,
&:focus {
background: rgba(17, 17, 17, 0.95);
color: #e86957;
}
}
}
@media screen and (max-width:767px){
@media screen and (max-width: 767px) {
#logo {
font-size: 1.75rem;
img {
@ -515,7 +520,7 @@ button#disclaimer-close{
font-size: 0.875rem;
}
}
@media screen and (max-width: 383px){
@media screen and (max-width: 383px) {
#logo {
font-size: 1.5rem;
img {
@ -526,7 +531,7 @@ button#disclaimer-close{
padding: 0.125rem 5%;
}
}
@media screen and (max-width: 479px){
@media screen and (max-width: 479px) {
#tagline #tagline-lg {
display: none;
}
@ -553,7 +558,7 @@ h2 {
#license-icon {
text-align: center;
@media screen and (min-width: 768px){
@media screen and (min-width: 768px) {
position: relative;
top: calc(50% - 40px);
}
@ -580,7 +585,7 @@ h2 {
color: #fff;
svg {
fill: #fff;
@media screen and (min-width: 768px){
@media screen and (min-width: 768px) {
position: relative;
top: 20px;
left: -34px;
@ -590,7 +595,7 @@ h2 {
}
p {
overflow-wrap: break-word;
@media screen and (min-width: 768px){
@media screen and (min-width: 768px) {
position: relative;
top: -24px;
left: 22px;
@ -602,9 +607,12 @@ h2 {
}
}
#snippet-count, #contrib-count, #commit-count, #test-count {
#snippet-count,
#contrib-count,
#commit-count,
#test-count {
font-size: 1rem;
@media screen and (min-width: 768px){
@media screen and (min-width: 768px) {
font-size: 1.25rem;
}
}
@ -621,6 +629,15 @@ ul#links {
display: none;
}
.card.pick {
transition: all 0.6s;
left: 0;
}
.card.pick + .card.pick {
margin-top: 0.5rem;
}
.pick.selected {
overflow: visible;
button.next {
@ -631,32 +648,47 @@ ul#links {
margin-right: -0.0625rem;
}
}
button.previous {
position: absolute;
top: 50%;
left: -1rem;
> svg {
margin-left: -0.0625rem;
}
}
#pick-slider {
position: relative;
}
button.previous {
left: -1%;
> svg {
margin-left: -0.125rem;
}
button.previous, button.next {
border-radius: 100%;
background: #f8f8f8;
border: 0.03125rem solid #ddd;
width: 1.5rem;
height: 1.5rem;
padding: 0;
margin: 0;
}
button.next {
right: -1%;
> svg {
margin-left: 0.0625rem;
}
}
button.previous,
button.next {
position: absolute;
top: 50%;
border-radius: 100%;
background: #f8f8f8;
border: 0.03125rem solid #ddd;
width: 1.5rem;
height: 1.5rem;
padding: 0;
margin: 0;
transition: all 0.3s;
z-index: 2000;
> svg {
fill: #888;
transition: all 0.3s;
}
&:hover,
&:focus {
border-color: #aaa;
> svg {
fill: #888;
transition: all 0.3s;
}
&:hover, &:focus {
border-color: #aaa;
> svg {
fill: #444;
}
fill: #444;
}
}
}
@ -672,7 +704,8 @@ ul#links {
font-weight: 700;
text-align: center;
transition: color 0.3s;
&:hover, &:focus {
&:hover,
&:focus {
color: var(--a-l-col);
background: #f8f8f8;
}
@ -690,8 +723,9 @@ ul#links {
}
.contribution-guideline + .contribution-guideline {
&:before, &:after {
content: '';
&:before,
&:after {
content: "";
position: relative;
top: -2.75rem;
width: 0.375rem;
@ -700,7 +734,7 @@ ul#links {
border: 0.03125rem solid #d0d0d0;
border-radius: 100%;
left: calc(50% - 0.1875rem);
box-shadow: inset -0.03125rem -0.03125rem 0.03125rem rgba(0,0,0,0.05);
box-shadow: inset -0.03125rem -0.03125rem 0.03125rem rgba(0, 0, 0, 0.05);
}
&:after {
position: absolute;
@ -713,7 +747,11 @@ ul#links {
top: -1.125rem;
left: calc(50% - 1.125rem);
font-size: 1.5rem;
background: linear-gradient(135deg, rgba(255,174,39,1) 0%,rgba(222,73,109,1) 100%);
background: linear-gradient(
135deg,
rgba(255, 174, 39, 1) 0%,
rgba(222, 73, 109, 1) 100%
);
border: 0.03125 solid #ddd;
width: 2.25rem;
text-align: center;