Skip to content

New Ui proposal #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

New Ui proposal #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ad612dd
added new UI
axios047 Oct 15, 2017
05e9215
added responsiveness for mobile
axios047 Oct 18, 2017
48250cd
temporarily removed CNAME for ghpages
axios047 Oct 18, 2017
f1ee3b3
fixed responsiveness
axios047 Oct 18, 2017
f758326
Added meta tag for chrome theme
axios047 Oct 18, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion CNAME
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
www.linuxdelhi.org

360 changes: 247 additions & 113 deletions assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,148 +2,282 @@
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;

body{
margin: 0;
width: 100%;
height: 100vh;
position: relative;
padding: 10px;
background: #000;
color: #000;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
/*animation-name: bg-appear;
animation-duration: 7s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;*/
}

body {
font-family: 'PT Sans', sans-serif;
text-align: center;
max-width: 1200px;
margin: 0 auto;
padding-left: 1em;
padding-right: 1em;
.wrapper::-webkit-scrollbar {
display: none;
}

.wrapper{
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
/*display: flex;
flex-wrap: wrap;*/
background: #FFD97D;
background-image: radial-gradient(#e2bf6a 15%, #FFD97D 15%);
background-size: 20px 20px;
background-repeat: repeat;
animation-name: bg-move;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
padding: 10px;
box-sizing: border-box;
border-radius: 5px;
overflow-x: hidden;
overflow-y: scroll;
}

@keyframes bg-move {
from {background-position:0 0;}
to {background-position: 500px 500px;}
}
@keyframes bg-appear {
from {filter: opacity(0); }
to {filter: opacity(1);}
}

/*section{
border: 1px solid black;
}*/

.header{
height: 50%;
flex-grow: 1;
height: 100%;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
align-items: center;
justify-content: center;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }

section{
padding-top: 5px;
}

.header-logo{
width: 25%;
.content{
width: 60%;
position: relative;
}

@media (max-width: 500px) {
.header-logo{
width: 55%;
}
.navbar{
display: flex;
width: 100%;
justify-content: flex-end;
margin-bottom: 30px;
}

p {
font-size: 25px;
.navbar .link{
color: inherit;
text-decoration: none;
padding: 5px;
cursor: pointer;
margin-left: 10px;
}
.navbar .link:hover{
background: #000;
color: #FFD97D;
border-radius: 3px;
}

h1{
font-size: 35px;
.logo{
background: url("../img/ilugdlogo.svg");
background-size: contain;
background-repeat: no-repeat;
width: 100px;
height: 150px;
}

a {
text-decoration: none;
transition: all 0.3s ease;
border-bottom: 1px solid transparent;
color: #000;
.logotype{
font-size: 60px;
font-weight: 800;
transition: all 0.3s ease-in-out;
}
a:hover, a:active {

.logotype:hover{
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
color: #fff;
filter: drop-shadow(5px 5px #000);
}

.page-home .social-links {
margin-top: 30px;
.intro{
font-size: 25px;
font-weight: 300;
}

.page-home .social-links ul {
text-align: left;
.dropper{
display: inline;
margin: 0;
list-style: none;
padding-left: 0px;
padding-top: 5px;
}
.page-home .social-links li a {
padding: 5px 10px;
background: #fff;
cursor: pointer;
display: inline-block;
border-bottom: 1px solid #00cc88;

.dropper:hover .drop-wrap{
display: block;
}
.page-home .social-links li:hover a {
color: #000;
border: None;
background: #00e699;
border-bottom: 1px solid #000;
}
.page-home .social-links ul li {
display: inline-block;
margin-right: -4px;
margin-bottom: 0;
position: relative;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.page-home .social-links ul li ul {
padding: 0;
position: absolute;
top: 28px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;

.drop-wrap{
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
z-index: 1;
}
.page-home .social-links ul li ul li a{
background: #376fa0;
display: block;
width: 150px;
color: #fff;
position: absolute;
padding-top: 10px;
}
.page-home .social-links ul li ul li small {
font-size: 56%;

.drop{
background: #000;
border-radius: 4px;
padding: 5px;
}
.page-home .social-links ul li ul li:hover a { background: #00e699; }
.page-home .social-links ul li:hover ul {

.drop a{
display: block;
opacity: 1;
visibility: visible;
color: #FFD97D;
text-decoration: none;
padding: 5px;
border-radius: 3px;
}

.page-home .section--next_event {
margin-top: 3.5em;
text-align: center;
transition: all 0.5s ease;
opacity: 0;
.drop a:nth-child(1){
margin-bottom: 5px;
}
.page-home .section--next_event .caption {
display: inline-block;
background-color: #11fac2;
background-color: ##eee;
padding: 10px;

.drop a:hover{
color: #000;
background: #FFD97D;
}

.social{
display: flex;
width: 100%;
font-size: 20px;
justify-content: space-between;
margin-top: 50px;
}
.page-home .section--next_event a {
display: inline-block;

.social a{
color: inherit;
text-decoration: none;
padding: 10px;
background-color: #fdf7d6;
border-bottom: none;
}
.page-home .section--next_event a:hover {
border-bottom: none;
background-color: #e4dfc0;
/*background-color: #eee;*/
color: #111;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}

.social a:hover{
background: #e2bf6a;
}

.meetup{
background: #EE6055;
/*width: 50%;*/
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}

.caption{
font-size: 40px;
}

.desc{
font-size: 30px;
color: #fff;
margin: 10px 0;
}

.date{
font-size: 25px;
color: #FFD97D;
}

.button-primary{
padding: 10px 20px;
margin-top: 25px;
margin-bottom: 25px;
background: #fff;
border-radius: 35px;
width: 150px;
display: flex;
justify-content: space-between;
cursor: pointer;
transition: all 0.3s ease-in-out;
}

.button-primary:hover{
box-shadow: 0px 10px 5px -5px rgba(0, 0, 0, 0.2);
transform: translateY(-5px);
}


@media only screen and (max-width: 450px){

.wrapper{
width: 100%;
height: 100%;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr;
grid-row-gap: 20px;
}

.navbar{
padding: 0 10px;
background: #FFD97D;
border-radius: 3px;
font-size: 15px;
box-sizing: border-box;
}

.social{
margin: 0 auto;
}

.content{
width: 95%;
position: relative;
}

.logo{
width: 50px;
height: 75px;
}

.logotype{
font-size: 50px;
}

.intro{
font-size: 20px;
}

.caption{
font-size: 25px;
}

.desc{
font-size: 20px;
}

.date{
font-size: 18px;
}

.button-primary{
width: 75px;
font-size: 15px;
padding: 5px 10px;
}
}
Loading