summaryrefslogtreecommitdiff
path: root/themes/cranky/layouts
diff options
context:
space:
mode:
Diffstat (limited to 'themes/cranky/layouts')
-rw-r--r--themes/cranky/layouts/shortcodes/prj.html148
1 files changed, 99 insertions, 49 deletions
diff --git a/themes/cranky/layouts/shortcodes/prj.html b/themes/cranky/layouts/shortcodes/prj.html
index 246a8e1..2d7df98 100644
--- a/themes/cranky/layouts/shortcodes/prj.html
+++ b/themes/cranky/layouts/shortcodes/prj.html
@@ -7,55 +7,31 @@
<div class="emptybar"></div>
<div class="filledbar"></div>
</div>
- <p class="summary">{{ .Summary | truncate 220 "..." }}</p>
+ <p class="summary">
+ {{ .Summary | truncate 220 "..." }}
+ </p>
</a>
<!-- End the loop -->
{{ end }}
</div>
-<a class="button projects" href="/projects">More Projects</a>
+<a class="button projects" href="/projects">All Projects</a>
<style>
- .container {
- position: relative;
- height: auto;
- width: 600px;
- left: calc(50% - 300px);
- display: flex;
- margin-bottom: 30px;
- }
.card {
display: flex;
height: auto;
width: 230px;
margin-top: 20px;
- /* background-color: #222d32; */
+ margin-left: 15px;
+ margin-right: 15px;
background: linear-gradient(-45deg, #111a1f, #222d32);
color: var(--text-fg);
border-radius: 10px;
- box-shadow: -1rem 0 3rem #000;
- /* margin-left: -50px; */
transition: 0.4s ease-out;
position: relative;
left: 0px;
}
- .card:not(:first-child) {
- margin-left: -50px;
- }
-
- .card:hover {
- box-shadow: 0 0 4rem #554;
- transform: translateY(-20px);
- transition: 0.4s ease-out;
- color: var(--text-fg);
- }
-
- .card:hover ~ .card {
- position: relative;
- left: 70px;
- transition: 0.4s ease-out;
- }
-
.title {
color: var(--text-fg);
font-weight: bold;
@@ -64,21 +40,10 @@
top: 15px;
}
- .card:hover > .title {
- color: var(--header-fg);
- transition: 0.4s ease-out;
- }
-
- .bar {
- position: absolute;
- top: 70px;
- left: 20px;
- height: 5px;
- width: 150px;
- }
-
.summary {
- /* position: relative; */
+ text-overflow: ellipsis;
+ height: 230px;
+ width: 210px;
margin-top: 80px;
margin-left: 10px;
margin-right: 10px;
@@ -86,10 +51,12 @@
left: 20px;
}
- .emptybar {
- background-color: #2e3033;
- width: 100%;
- height: 100%;
+ .bar {
+ position: absolute;
+ top: 70px;
+ left: 20px;
+ height: 5px;
+ width: 150px;
}
.filledbar {
@@ -102,10 +69,36 @@
transition: 0.6s ease-out;
}
- .card:hover .filledbar {
+ .card .filledbar {
width: 120px;
transition: 0.4s ease-out;
}
+
+ .readmore {
+ bottom: -30px;
+ right: 10px;
+ color: var(--text-fg);
+ font-weight: bold;
+ transition: 0.4s ease-out;
+ }
+
+ .emptybar {
+ background-color: #2e3033;
+ width: 100%;
+ height: 100%;
+ }
+
+ .container {
+ display: flex;
+ flex-wrap: nowrap;
+ margin-bottom: 30px;
+ overflow-x: scroll;
+ }
+
+ .card:hover {
+ color: var(--text-fg);
+ }
+
/* center the button */
.projects {
position: relative;
@@ -113,4 +106,61 @@
margin-top: 30px;
margin-bottom: 30px;
}
+
+@media (hover: hover) {
+
+ .card .filledbar {
+ width: 0px;
+ }
+
+ .card:hover .filledbar {
+ width: 120px;
+ transition: 0.4s ease-out;
+ }
+
+
+ @media (min-width: 730px) {
+
+ .card {
+ box-shadow: -1rem 0 3rem #000;
+ }
+
+ .container {
+ position: relative;
+ height: auto;
+ width: 600px;
+ left: calc(50% - 300px);
+ display: flex;
+ overflow-x: visible;
+
+ }
+
+ .card:not(:first-child) {
+ margin-left: -50px;
+ }
+
+ .card:hover {
+ box-shadow: 0 0 4rem #554;
+ transform: translateY(-20px);
+ transition: 0.4s ease-out;
+ color: var(--text-fg);
+ }
+
+ .card:hover ~ .card {
+ position: relative;
+ left: 70px;
+ transition: 0.4s ease-out;
+ }
+
+ .card:hover > .title {
+ color: var(--header-fg);
+ transition: 0.4s ease-out;
+ }
+
+ .readmore {
+ display: none;
+ }
+
+ }
+}
</style>