Port _projects.scss (deleting most of it!)
This commit is contained in:
parent
38a2979f82
commit
b1b97e760e
|
@ -8327,6 +8327,84 @@ span.icon-rss::before {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/projects.css */
|
||||
.pair {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.pair .key {
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.pair .value {
|
||||
text-align: right;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.project-carousel .carousel-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.project-carousel .carousel-item br {
|
||||
line-height: 0.6em;
|
||||
}
|
||||
.project-carousel .carousel-item-small {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.project-carousel .carousel-item-small:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
.project-carousel .carousel-description {
|
||||
max-height: 14rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.project-carousel .carousel-fade {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 30px;
|
||||
background: linear-gradient(var(--dim-background-transparent), var(--dim-background));
|
||||
}
|
||||
.project-card {
|
||||
color: var(--fg-font-color);
|
||||
background-color: var(--card-background);
|
||||
border-color: var(--project-card-border-color);
|
||||
transition: box-shadow 0.2s, background-color 0.2s;
|
||||
}
|
||||
.slideshow .project-card {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.project-card:hover {
|
||||
background-color: var(--card-background-hover);
|
||||
}
|
||||
.project-card:hover > .title {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.project-card .image-container {
|
||||
--image-size: 8rem;
|
||||
width: var(--image-size);
|
||||
min-height: var(--image-size);
|
||||
}
|
||||
.project-card .image-container .image {
|
||||
position: absolute;
|
||||
width: var(--image-size);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.project-card .details {
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.project-card .badges:empty {
|
||||
display: none;
|
||||
}
|
||||
.project-card .badge {
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/showcase.css */
|
||||
.showcase-item .gradient {
|
||||
width: 100%;
|
||||
|
|
|
@ -1,272 +0,0 @@
|
|||
.project-carousel {
|
||||
.carousel-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
br {
|
||||
line-height: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-item-small {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-description {
|
||||
max-height: 14rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carousel-fade {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 30px;
|
||||
|
||||
@include usevar(background, "linear-gradient(" dim-background-transparent "," dim-background ")")
|
||||
}
|
||||
}
|
||||
|
||||
.project {
|
||||
.pair {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.key {
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
text-align: right;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-icon {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
margin: 0px;
|
||||
text-align: center;
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
line-height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.screenshots .slideshow {
|
||||
background-color:black;
|
||||
}
|
||||
|
||||
.tags {
|
||||
text-align:center;
|
||||
|
||||
h2 {
|
||||
margin-bottom:5px;
|
||||
}
|
||||
|
||||
li {
|
||||
display:inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.button-bar {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.forum {
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.thread-entry-right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-card {
|
||||
@include usevar(color, 'fg-font-color');
|
||||
@include usevar(background-color, 'card-background');
|
||||
@include usevar(border-color, 'project-card-border-color');
|
||||
|
||||
transition: box-shadow 0.2s, background-color 0.2s;
|
||||
|
||||
.slideshow & {
|
||||
margin-top:8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include usevar(background-color, 'card-background-hover');
|
||||
|
||||
& > .title {
|
||||
text-decoration:underline;
|
||||
}
|
||||
}
|
||||
|
||||
.image-container {
|
||||
$image-size: 8rem;
|
||||
|
||||
width: $image-size;
|
||||
min-height: $image-size;
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
width: $image-size;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
/* Background color given by theme */
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.badges:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.projectlist {
|
||||
.sidebar & {
|
||||
padding:0px;
|
||||
width:340px;
|
||||
|
||||
// background-image:none;
|
||||
// background-color:transparent;
|
||||
// box-shadow:none;
|
||||
|
||||
.project-card.more {
|
||||
height:40px;
|
||||
width:326px;
|
||||
padding-top:5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screenshots .slide {
|
||||
max-width:100%;
|
||||
}
|
||||
|
||||
.slideshow {
|
||||
/* Background color and color given by theme */
|
||||
position:relative;
|
||||
background-image:none;
|
||||
overflow:hidden;
|
||||
|
||||
.optionbar {
|
||||
height:30px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display:inline-block;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.button {
|
||||
line-height:100%;
|
||||
padding:5px 8px;
|
||||
font-weight:400;
|
||||
|
||||
&.current {
|
||||
font-weight:600;
|
||||
}
|
||||
}
|
||||
|
||||
#slide-deck {
|
||||
width:100%;
|
||||
position:relative;
|
||||
transition:left 0.3s;
|
||||
left:0px;
|
||||
text-align:center;
|
||||
display:flex;
|
||||
flex-direction:horizontal;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slide {
|
||||
flex: 1 1 100%;
|
||||
position:relative;
|
||||
|
||||
img {
|
||||
margin:auto;
|
||||
max-height:60vh;
|
||||
max-width:100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.cards {
|
||||
#slide-deck {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.slide {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#project_owner_suggestions {
|
||||
max-height:300px;
|
||||
overflow:auto;
|
||||
position:absolute;
|
||||
border:1px solid transparent;
|
||||
|
||||
#user_template {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
.user_suggestions {
|
||||
@include usevar(background-color, 'project-user-suggestions-background');
|
||||
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
|
||||
&#project_owner_suggestions .user {
|
||||
@include usevar(border-color, 'project-user-suggestions-border-color');
|
||||
|
||||
border-bottom-width: 1px;
|
||||
width: 200px;
|
||||
box-sizing:border-box;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.user {
|
||||
position:relative;
|
||||
margin-left:50px;
|
||||
display: inline-block;
|
||||
margin-right:10px;
|
||||
|
||||
.avatar-icon {
|
||||
left:-50px;
|
||||
bottom:0px;
|
||||
border-radius:50%;
|
||||
border:2px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#project_owners {
|
||||
min-width:50%;
|
||||
}
|
|
@ -0,0 +1,99 @@
|
|||
.pair {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.key {
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
text-align: right;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.project-carousel {
|
||||
.carousel-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
br {
|
||||
line-height: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-item-small {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-description {
|
||||
max-height: 14rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carousel-fade {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 30px;
|
||||
|
||||
background: linear-gradient(var(--dim-background-transparent), var(--dim-background));
|
||||
}
|
||||
}
|
||||
|
||||
.project-card {
|
||||
color: var(--fg-font-color);
|
||||
background-color: var(--card-background);
|
||||
border-color: var(--project-card-border-color);
|
||||
|
||||
transition: box-shadow 0.2s, background-color 0.2s;
|
||||
|
||||
.slideshow & {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--card-background-hover);
|
||||
|
||||
&>.title {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.image-container {
|
||||
--image-size: 8rem;
|
||||
|
||||
width: var(--image-size);
|
||||
min-height: var(--image-size);
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
width: var(--image-size);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
/* Background color given by theme */
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.badges:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
|
@ -12,5 +12,6 @@
|
|||
@import "icons.css";
|
||||
@import "notices.css";
|
||||
@import "progress_bar.css";
|
||||
@import "projects.css";
|
||||
@import "showcase.css";
|
||||
@import "timeline.css";
|
|
@ -110,7 +110,7 @@
|
|||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="projectlist pa3 grid grid-1 grid-2-ns g3">
|
||||
<div class="pa3 grid grid-1 grid-2-ns g3">
|
||||
{{ range .PageProjects }}
|
||||
{{ template "project_card.html" projectcarddata . "" }}
|
||||
{{ end }}
|
||||
|
|
|
@ -41,4 +41,5 @@ nodemon --exec "esbuild src\rawdata\scss\style.css --bundle --loader:.ttf=file -
|
|||
- [ ] Update blog styles to not use `post` and other garbage
|
||||
- [ ] Remove from forum.css
|
||||
- [ ] Remove all uses of .content-block
|
||||
- [ ] Figure out what's up with the projects on the jam pages
|
||||
- [ ] Figure out what's up with the projects on the jam pages
|
||||
- [ ] Determine if we actually need .project-carousel, or if our general carousel styles (?) are sufficient
|
||||
|
|
Loading…
Reference in New Issue