diff options
| -rw-r--r-- | .gitignore | 3 | ||||
| -rw-r--r-- | hugo.toml | 2 | ||||
| -rw-r--r-- | themes/cranky/layouts/shortcodes/prj.html | 148 |
3 files changed, 103 insertions, 50 deletions
@@ -1,3 +1,6 @@ ./assets/images/gallery +public/ *.jpg +*.png +*.webp tags @@ -1,4 +1,4 @@ -baseURL = 'https://chausse.xyz/' +baseURL = 'https://dev.chausse.xyz/' languageCode = 'en-us' title = 'Chausse Benjamin' theme = 'cranky' 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> |