Template:Wikimedia Hackathon 2018/styles.css

.center { /* Minerva skin doesn't provide this */ text-align: center; } .hackathon-banner-image { max-width: 100%; height: 100%; object-fit: contain; margin-top: 1vh; } .hackathon-subtitle { text-align: center; } .hackathon-header { display: flex; flex-direction:row; flex-wrap: wrap; text-align:center; /* noflex */ padding: 5px; margin-bottom:1em; }

/* TODO: Found Wikimedia_Hackathon_2018/Mentoring_Program after finishing this */ .hackathon-header + .hackathon-header { margin-top: -2em; }

.hackathon-header > .hackathon-tab { display:inline-block; /* noflex */ flex:1 1 0; align-self: flex-end; vertical-align:bottom; /* noflex */ text-align:center; font-size:larger; margin: 5px; } .hackathon-tab > .green-marker { visibility: hidden; background-color: #339966; height: 1.2em; } .hackathon-tab.selected > .green-marker { visibility: visible; } @media (max-width:550px) { .hackathon-header { flex-direction:column; padding:0; margin-top: 0!important; /* cancels out the sibling styling */ }	.hackathon-header > .hackathon-tab { width: 100%; margin:0; }	/* At smaller sizes we make the hr the green marker */ .hackathon-tab > .green-marker { display:none; }	.hackathon-tab > p { margin:0 2vw 0 2vw; }	.hackathon-tab.selected > hr { background-color: #339966; height: 5px; } } @media (min-width:551px) { .hackathon-subtitle { font-size:155%; } }