makyo/makyo.ink
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Carousel

Browse Source
This commit is contained in:
Madison Scott-Clary
2020-03-01 22:49:54 -08:00
parent 2ece8b806a
commit 901bb1e720
7 changed files with 331 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/css/main.scss
View File

@ -192,8 +192,9 @@ pre {
/* = = = = = = = = = = Animate Styles = = = = = = = = = = */
//@import "parts/animate";
/* = = = = = = = = = = Misc = = = = = = = = = = */
@import "parts/misc";
@import "parts/front-flex";
@import "parts/front";
/* = = = = = = = = = = Media = = = = = = = = = = */
@import "media";

63
assets/css/parts/_front-flex.scss
View File

@ -1,63 +0,0 @@
.front-flex {
display: flex;
flex-flow: row wrap;
align-items: stretch;
.hero {
display: flex;
background-color: rgba(255, 255, 255, 0.1);
padding: 1rem;
}
.third {
flex: 1 0 30%;
padding: 0.5rem;
min-width: 200px;
}
.half {
flex: 1 0 45%;
padding: 0.5rem;
min-width: 200px;
}
.third, .half {
ul {
list-style-type: none;
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0.5rem 0;
}
}
}
.small {
flex: 1 0 38%;
padding: 0.5rem;
min-width: 300px;
}
.large {
flex: 1 0 61%;
padding: 0.5rem;
min-width: 300px;
}
.odd {
background-color: rgba(255, 255, 255, 0.05);
}
}
@media only screen and (max-width: 960px) {
.front-flex {
display: block;
div, .hero, .hero div {
display: inline-block;
width: 100%;
}
}
}

126
assets/css/parts/_front.scss Normal file
View File

@ -0,0 +1,126 @@
.carousel {
display: block;
overflow-x: hidden;
width: 100%;
nav {
position: absolute;
height: 5rem;
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
z-index: 1000;
ul {
list-style-type: none;
border-bottom: 1px solid $dark-gray;
li {
display: inline-block;
margin: 0;
padding: 0.5rem 1rem;
&.on {
background-color: $dark-gray;
}
a {
text-decoration: none;
font-size: 16pt;
}
}
}
}
main {
width: 100%;
margin-top: 5rem;
article {
display: flex;
vertical-align: top;
flex-direction: row;
width: 500%;
overflow: hidden;
section.carousel-item {
display: flex;
flex-grow: 1;
flex-basis: 20%;
transition: transform 300ms ease;
&#recent, &#publications {
display: inline-block;
}
h2 {
display: none;
}
.third {
flex: 1 0 30%;
padding: 0.5rem;
min-width: 200px;
}
.half {
flex: 1 0 45%;
padding: 0.5rem;
min-width: 200px;
}
.third, .half {
ul {
list-style-type: none;
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0.5rem 0;
}
}
}
.small {
flex: 1 0 38%;
padding: 0.5rem;
min-width: 300px;
}
.large {
flex: 1 0 61%;
padding: 0.5rem;
min-width: 300px;
}
.odd {
background-color: rgba(255, 255, 255, 0.05);
}
}
}
}
}
@media only screen and (max-width: 960px) {
.carousel main article {
display: block;
width: 100%;
section.carousel-item {
display: inline-block !important;
width: 100%;
flex: none !important;
h2 {
display: block !important;
}
& > div {
display: inline-block !important;
flex: none !important;
}
}
}
}