From ea281c5172f0220ca1e1cad3d551729c89cf3a19 Mon Sep 17 00:00:00 2001 From: Atharva Raykar Date: Wed, 13 Dec 2023 16:11:17 +0530 Subject: [PATCH] update previous editions layout and styling --- resources/public/css/style.css | 513 ++++++++++++++------------- src/cljs/inclojure_website/page.cljs | 46 ++- 2 files changed, 277 insertions(+), 282 deletions(-) diff --git a/resources/public/css/style.css b/resources/public/css/style.css index 3361e45..1451162 100644 --- a/resources/public/css/style.css +++ b/resources/public/css/style.css @@ -1,58 +1,58 @@ @font-face { - font-family: 'Cooper Hewitt'; - font-style: normal; - src: url(../fonts/CooperHewitt-Book.otf); - font-weight: 100; + font-family: 'Cooper Hewitt'; + font-style: normal; + src: url(../fonts/CooperHewitt-Book.otf); + font-weight: 100; } @font-face { - font-family: 'Cooper Hewitt'; - src: url(../fonts/CooperHewitt-Medium.otf); - font-weight: 300; + font-family: 'Cooper Hewitt'; + src: url(../fonts/CooperHewitt-Medium.otf); + font-weight: 300; } @font-face { - font-family: 'Cooper Hewitt'; - src: url(../fonts/CooperHewitt-Bold.otf); - font-weight: 600; + font-family: 'Cooper Hewitt'; + src: url(../fonts/CooperHewitt-Bold.otf); + font-weight: 600; } body { - font-style: normal; - font-family: 'Cooper Hewitt', 'Barlow Semi Condensed', sans-serif; - line-height: 1.6; + font-style: normal; + font-family: 'Cooper Hewitt', 'Barlow Semi Condensed', sans-serif; + line-height: 1.6; } body.permalink { - padding-top: 140px; + padding-top: 140px; } a, a:visited { - color: #000; - text-decoration: none; - border-bottom: 2px solid #FFBA00; - transition: border-color 0.6s; + color: #000; + text-decoration: none; + border-bottom: 2px solid #FFBA00; + transition: border-color 0.6s; } a:hover, a:active { - border-color: rgba(0,0,0,0.7) !important; - color: #000 !important; + border-color: rgba(0,0,0,0.7) !important; + color: #000 !important; } hr { - border-color: #E0E8E7; - margin: 3em 0; + border-color: #E0E8E7; + margin: 3em 0; } h1 { - font-size: 32px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.03em; - color: #000; - position: relative; + font-size: 32px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.03em; + color: #000; + position: relative; } h1 a, a:visited { @@ -264,7 +264,7 @@ footer a img { .article-list { list-style: none; - margin: 20px 0 0 0; + margin: 40px 0 0 0; padding: 0; } @@ -513,237 +513,238 @@ table { background-size: contain; } - h1 span { - font-size: 16px; - letter-spacing: 0.4em; - padding-left: 3px; - } - - h2 { - text-transform: uppercase; - font-size: 25px; - color:#000; - margin: 2em 0 1em 0; - border: none; - padding: 0 0 10px 0; - letter-spacing: 0.1em; - font-weight: 500; - border-bottom: 1px dotted; - } - - h3 { - font-size: 22px; - letter-spacing: -0.03em; - } - - h4 { - font-size: 18px; - font-weight: 300; - margin: 2em 0 0.5em 0; - color: #999; - } - - p { - margin-top: 0; - line-height: 1.4; - font-weight: 100; - } - - pre { - word-wrap: break-word; - white-space: break-spaces; - } - - nav { - padding-bottom: 50px; - } - - nav a.link, - nav span { - padding: 5px 6px 0 6px; - font-size: 100%; - } - - nav .nav-links { - display: inline; - } - - .intro { - font-size: 28px; - line-height: 1.4; - margin-top: 0; - margin-bottom: 1em; - } - - .benefactor-slab img { - margin-top: 50px; - } - - .benefactor-slab.platinum img { - width: 38%; - } - - .benefactor-slab.gold img { - width: 34%; - } - - .benefactor-slab.bronze img { - width: 30%; - } - - - .benefactor-slab.community img { - width: 26% - } - - .benefactor-slab a { - vertical-align: middle; - margin: 0 5em 0 2em; - text-decoration: none; - border: none; - } - - .permalink .intro { - margin-top: 0; - } - - .mobile { - display: none; - } - - .no-mobile { - display: block; - } - - .half { - margin-left: 30%; - padding: 130px 40px 10px 40px; - border-left: 8px solid #FFE100; - box-shadow: 20px 0 30px rgba(0,0,0,0.06); - } - - .talk-table td { - font-size: 90%; - width: 15%; - padding-left: 5px; - } - - - .feature { - position: fixed; - top: 0; - left: 0; - width: 30%; - height: 100%; - background-position: 50% 50%; - background-size: contain; - box-sizing: border-box; - } - - .feature-overlay { - opacity: 0.8; - background-image: url("../images/background-texture.png"); - position: fixed; - top: 0; - left: 0; - width: 30%; - height: 100%; - background-position: 50% 50%; - background-size: contain; - box-sizing: border-box; - } - - .people img { - height: 100%; - width: 15%; - position: absolute; - left: 0; - top: 0; - background: #eee; - border-radius: 15%; - } - - .people li { - padding-left: 60px; - line-height: 1.8; - } - - .article-fine-print a img { - width: 17px; - height: 17px; - margin-right: 8px; - transition: border-color 1s; - border: 1px solid #eee; - border-radius: 100px; - padding: 3px; - background: #fff; - position: relative; - } - - .article-fine-print a:hover img { - opacity: 1; - border-color: #333; - } - - .article-list { - margin-top: 1.5em; - } - - .article-list li { - padding: 0 0 0 220px; - min-height: 200px; - margin-top: 1.5em; - } - - .article-image { - width: 200px; - height: 200px; - float: none; - position: absolute; - left: 0; - top: 0; - margin: 0; - border-radius: 10% - } - - .article-image.keynote { - width: 185px; - } - - .article-list h4 { - font-size: 120%; - letter-spacing: 0em; - margin-bottom: 0.3em; - } - - .contents { - padding: 0 40px 0px 40px; - max-width: 700px; - } - - footer { - position: absolute; - top: 32px; - right: 80px; - display: block; - } - - footer a:hover img { - opacity: 1; - border-color: #333; - } + h1 span { + font-size: 16px; + letter-spacing: 0.4em; + padding-left: 3px; + } + + h2 { + text-transform: uppercase; + font-size: 25px; + color:#000; + margin: 2em 0 1em 0; + border: none; + padding: 0 0 10px 0; + letter-spacing: 0.1em; + font-weight: 500; + border-bottom: 1px dotted; + } + + h3 { + font-size: 22px; + letter-spacing: -0.03em; + } + + h4 { + font-size: 18px; + font-weight: 300; + margin: 2em 0 0.5em 0; + color: #999; + } + + p { + margin-top: 0; + line-height: 1.4; + font-weight: 100; + } + + pre { + word-wrap: break-word; + white-space: break-spaces; + } + + nav { + padding-bottom: 50px; + } + + nav a.link, + nav span { + padding: 5px 6px 0 6px; + font-size: 100%; + } + + nav .nav-links { + display: inline; + } + + .intro { + font-size: 28px; + line-height: 1.4; + margin-top: 0; + margin-bottom: 1em; + } + + .benefactor-slab img { + margin-top: 50px; + } + + .benefactor-slab.platinum img { + width: 38%; + } + + .benefactor-slab.gold img { + width: 34%; + } + + .benefactor-slab.bronze img { + width: 30%; + } + + + .benefactor-slab.community img { + width: 26% + } + + .benefactor-slab a { + vertical-align: middle; + margin: 0 5em 0 2em; + text-decoration: none; + border: none; + } + + .permalink .intro { + margin-top: 0; + } + + .mobile { + display: none; + } + + .no-mobile { + display: block; + } + + .half { + margin-left: 30%; + padding: 130px 40px 10px 40px; + border-left: 8px solid #FFE100; + box-shadow: 20px 0 30px rgba(0,0,0,0.06); + } + + .talk-table td { + font-size: 90%; + width: 15%; + padding-left: 5px; + } + + + .feature { + position: fixed; + top: 0; + left: 0; + width: 30%; + height: 100%; + background-position: 50% 50%; + background-size: contain; + box-sizing: border-box; + } + + .feature-overlay { + opacity: 0.8; + background-image: url("../images/background-texture.png"); + position: fixed; + top: 0; + left: 0; + width: 30%; + height: 100%; + background-position: 50% 50%; + background-size: contain; + box-sizing: border-box; + } + + .people img { + height: 100%; + width: 15%; + position: absolute; + left: 0; + top: 0; + background: #eee; + border-radius: 15%; + } + + .people li { + padding-left: 60px; + line-height: 1.8; + } + + .article-fine-print a img { + width: 17px; + height: 17px; + margin-right: 8px; + transition: border-color 1s; + border: 1px solid #eee; + border-radius: 100px; + padding: 3px; + background: #fff; + position: relative; + } + + .article-fine-print a:hover img { + opacity: 1; + border-color: #333; + } + + .article-list { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + } + + .article-list li { + min-height: 50px; + width: max-content; + } + + .article-image { + width: 200px; + height: 200px; + float: none; + position: absolute; + left: 0; + top: 0; + margin: 0; + border-radius: 10% + } + + .article-image.keynote { + width: 185px; + } + + .article-list h4 { + font-size: 120%; + letter-spacing: 0em; + margin-bottom: 0.3em; + } + + .contents { + padding: 0 40px 0px 40px; + max-width: 700px; + } + + footer { + position: absolute; + top: 32px; + right: 80px; + display: block; + } + + footer a:hover img { + opacity: 1; + border-color: #333; + } } /* For devices larger than 900px */ @media (max-width: 1300px) and (min-width: 900px) { - .half { - padding-left: 0; - padding-right: 0; - } - .feature { - padding-left: 30px; - padding-right: 30px; - } + .half { + padding-left: 0; + padding-right: 0; + } + .feature { + padding-left: 30px; + padding-right: 30px; + } } /* Slideshow styles */ diff --git a/src/cljs/inclojure_website/page.cljs b/src/cljs/inclojure_website/page.cljs index c593e0b..1c3a8c7 100644 --- a/src/cljs/inclojure_website/page.cljs +++ b/src/cljs/inclojure_website/page.cljs @@ -305,69 +305,63 @@ [:ol.article-list [:li - [:img.previously.article-image.location - {:alt "bangalore" - :src "images/bangalore-map-caption.jpg"}] - [:div.previously - [:strong "2019"] + [:strong "2020"] [:p.article-subtitle [:a.button.city - {:href "https://www.youtube.com/playlist?list=PLlAML-kjpXY6XllFUezz6RYow6hF4zlFV"} + {:href "https://www.youtube.com/watch?v=dZ4xczP5zDI&list=PLlAML-kjpXY7ZGj6anXfKSqN1XGTCEmmw"} [:img {:style {:height "25px" :width "25px" :vertical-align "middle" :margin-right "10px"} - :alt "" + :alt "", :src links/youtube-png}] "Talks"] [:a.button.city - {:href "https://inclojure.org/archive/2019/#schedule"} + {:href "https://inclojure.org/archive/2020/#schedule"} [:img - {:style {:height "25px" :width "25px" :vertical-align "middle" :margin-right "10px"} + {:style {:height "25px" :width "25px" :vertical-align "middle", :margin-right "10px"} :alt "", :src "images/calendar.svg"}] - "Schedule"]]] + "Schedule"]]]] + [:li [:div.previously - [:strong "2018"] + [:strong "2019"] [:p.article-subtitle [:a.button.city - {:href "https://www.youtube.com/playlist?list=PLlAML-kjpXY4rljddpJ5qMUp-t1Qa-Vfy"} + {:href "https://www.youtube.com/playlist?list=PLlAML-kjpXY6XllFUezz6RYow6hF4zlFV"} [:img - {:style {:height "25px" :width "25px" :vertical-align "middle", :margin-right "10px"} - :alt "", + {:style {:height "25px" :width "25px" :vertical-align "middle" :margin-right "10px"} + :alt "" :src links/youtube-png}] "Talks"] [:a.button.city - {:href "https://inclojure.org/archive/2018/#schedule"} + {:href "https://inclojure.org/archive/2019/#schedule"} [:img - {:style {:height "25px" :width "25px" :vertical-align "middle", :margin-right "10px"} + {:style {:height "25px" :width "25px" :vertical-align "middle" :margin-right "10px"} :alt "", :src "images/calendar.svg"}] "Schedule"]]]] [:li - [:img.previously.article-image.location - {:alt "pune", - :src "images/pune-map-caption.jpg"}] - [:div.previously - [:strong "2020"] + [:strong "2018"] [:p.article-subtitle [:a.button.city - {:href "https://www.youtube.com/watch?v=dZ4xczP5zDI&list=PLlAML-kjpXY7ZGj6anXfKSqN1XGTCEmmw"} + {:href "https://www.youtube.com/playlist?list=PLlAML-kjpXY4rljddpJ5qMUp-t1Qa-Vfy"} [:img - {:style {:height "25px" :width "25px" :vertical-align "middle" :margin-right "10px"} + {:style {:height "25px" :width "25px" :vertical-align "middle", :margin-right "10px"} :alt "", :src links/youtube-png}] "Talks"] [:a.button.city - {:href "https://inclojure.org/archive/2020/#schedule"} + {:href "https://inclojure.org/archive/2018/#schedule"} [:img {:style {:height "25px" :width "25px" :vertical-align "middle", :margin-right "10px"} :alt "", :src "images/calendar.svg"}] - "Schedule"]]] - + "Schedule"]]]] + + [:li [:div.previously [:strong "2016"] [:p.article-subtitle