From 5bdc708add23cbe52de5df1a12027256ab47cdec Mon Sep 17 00:00:00 2001 From: Hugo Peixoto Date: Thu, 28 Oct 2021 17:32:48 +0100 Subject: [PATCH] Add icons to CSS --- assets/images/campaigns.svg | 1 + assets/images/events.svg | 1 + assets/images/menu.svg | 1 + assets/images/news.svg | 1 + assets/images/search.svg | 1 + themes/academic/assets/scss/ansol.scss | 305 +++++++++++++++ themes/academic/layouts/_default/baseof.html | 361 ++---------------- .../academic/layouts/partials/site_head.html | 9 +- 8 files changed, 344 insertions(+), 336 deletions(-) create mode 100644 assets/images/campaigns.svg create mode 100644 assets/images/events.svg create mode 100644 assets/images/menu.svg create mode 100644 assets/images/news.svg create mode 100644 assets/images/search.svg create mode 100644 themes/academic/assets/scss/ansol.scss diff --git a/assets/images/campaigns.svg b/assets/images/campaigns.svg new file mode 100644 index 0000000..3d7f712 --- /dev/null +++ b/assets/images/campaigns.svg @@ -0,0 +1 @@ + diff --git a/assets/images/events.svg b/assets/images/events.svg new file mode 100644 index 0000000..94579b8 --- /dev/null +++ b/assets/images/events.svg @@ -0,0 +1 @@ +58 diff --git a/assets/images/menu.svg b/assets/images/menu.svg new file mode 100644 index 0000000..7d4f1b9 --- /dev/null +++ b/assets/images/menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/news.svg b/assets/images/news.svg new file mode 100644 index 0000000..1ddab55 --- /dev/null +++ b/assets/images/news.svg @@ -0,0 +1 @@ +3Artboard 68 diff --git a/assets/images/search.svg b/assets/images/search.svg new file mode 100644 index 0000000..0d0c897 --- /dev/null +++ b/assets/images/search.svg @@ -0,0 +1 @@ + diff --git a/themes/academic/assets/scss/ansol.scss b/themes/academic/assets/scss/ansol.scss new file mode 100644 index 0000000..03e14d8 --- /dev/null +++ b/themes/academic/assets/scss/ansol.scss @@ -0,0 +1,305 @@ +:root { + --body-width: calc(100vw - 80px); + + --menu-icon: url({{ (resources.Get "images/menu.svg").Permalink }}); + --search-icon: url({{ (resources.Get "images/search.svg").Permalink }}); + --news-icon: url({{ (resources.Get "images/news.svg").Permalink }}); + --campaigns-icon: url({{ (resources.Get "images/campaigns.svg").Permalink }}); + --events-icon: url({{ (resources.Get "images/events.svg").Permalink }}); +} + + +body { margin: 0px; font-family: Roboto; font-weight: 400; } +.body-width { margin: 0px auto; width: var(--body-width); max-width: 1000px; } + +footer { + background-color: #041952; + color: white; + padding: 40px 0px; +} + +footer a:not(:hover) { color: white; } + +footer p { margin: 10px; } + +@media (max-width: 600px) { + .news-list li { flex-direction: column; } + .news-list li .text { width: 280px; } +} + +@media (max-width: 840px) { + :root { --body-width: calc(100vw - 20px); } + nav.main .menu { display: flex; } + nav.main .nav-search { font-size: 0; } + + nav.main { position: relative; } + nav.main .sections { display: none; } + nav.main.menu--expanded .sections { display: block; } + + nav.main .sections { + position: absolute; + top: 100%; + left: 0%; + width: 100%; + background-color: #041952; + border-top: 1px solid white; + } +} +@media (min-width: 841px) { + nav.main .menu { display: none; } +} + +/* #041952 */ +/* #e7d445 */ +/* #1a347b */ +/* #c73447 */ +/* #f1ff8e */ + +a { color: #041952; } +a:hover { background-color: #f1ff8e; color: black; } + +nav.main { background-color: #041952; color: white; display: flex; } +nav.main div { display: flex; justify-content: space-between; } +nav.main img { filter: invert(100%); width: 200px; padding: 15px 0px; } +nav.main ul { display: flex; margin: 0px; padding: 0px; } +nav.main li { list-style-type: none; padding: 0px; font-size: 1.2rem; display: flex; } +nav.main a { text-decoration: none; padding: 10px 10px; display: block; } +nav.main a:not(:hover) { color: white; } +nav.main li a { padding: 15px 20px; display: flex; align-items: center; } + +nav.main .menu { align-items: center; } +nav.main .menu img { width: 40px; padding: 0px; } + +nav.main a:hover img { filter: invert(0%); } + +nav.main .nav-search { + display: flex; + padding-left: 60px; + align-items: center; + background: var(--search-icon) no-repeat; + background-size: 25px 25px; + background-position: 20px center; +} + +nav.main .nav-search:hover { + color: white; + filter: invert(100%); + background-color: #0e007c; +} + +.cta { + display: block; + text-decoration: none; + border: none; + cursor: pointer; + background-color: #c73447; + color: white; + border-color: #601922; + padding: 0px 20px; + font-family: Roboto; + font-size: 1.5rem; + font-weight: 400; + border-radius: 5px; + line-height: 3rem; +} + +.why-join { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 20px; + font-size: 1.5rem; + font-weight: 300; + margin-top: 20px; + margin-bottom: 40px; +} + +.why-join span { + line-height: 3rem; +} + +.news-list { + padding: 0px; + list-style-type: none; + display: flex; + gap: 40px; + justify-content: space-between; + flex-wrap: wrap; + flex-direction: column; + align-items: center; +} + +.campaigns-list { + margin-top: 20px; + padding: 0px; + list-style-type: none; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + gap: 10px; +} + +.campaigns-list li { + width: 300px; +} + +.campaigns-list .title { + font-size: 1.5rem; + font-weight: 400; + margin-top: 10px; +} + +.events-list { + margin-top: 20px; + padding: 0px; + list-style-type: none; + gap: 20px 20px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; +} + +.events-list li { + min-width: 300px; + display: grid; + grid-template-areas: "img headline" "img subheader"; + justify-content: left; + background-color: white; + padding: 20px; + width: calc(50% - 50px); +} + +.events-list .event-cover { + margin-top: -20px; + margin-left: -20px; + margin-bottom: -20px; + margin-right: 15px; + width: 90px; + height: 90px; + object-fit: cover; +} + +.events-list .img { grid-area: img; margin-right: 10px; } +.events-list .headline { grid-area: headline; } +.events-list .date { grid-area: date; } +.events-list .subheader { grid-area: subheader; font-size: 0.8rem; margin-top: 10px; } + +.events-list .title { font-size: 1.25rem; } + +p { margin: 0px; } + +.news-list li { + padding: 0px; + position: relative; + display: flex; +} + +.news-list li .text { + background-color: white; + padding: 20px; + margin-left: 0px; +} + +.news-list h3 { + margin: 0px; + font-size: 1.5rem; + font-weight: 400; + margin-top: 0px; +} + +.news-list .published-date { + font-size: 0.8rem; + color: #444; + margin-top: 15px; + margin-bottom: 10px; +} + +.news-list .summary { + font-size: 0.8rem; +} + +.news-list .cover { + width: 320px; +} + +.news-cover { + width: 320px; + height: 160px; + object-fit: cover; +} + +.campaign-cover { + width: 300px; + height: 150px; + object-fit: cover; +} + +.see-more { margin-top: 30px; } + +.pull-header { + margin-top: 0px; + margin-bottom: 40px; + font-weight: 300; + font-size: 2.25rem; + width: calc(var(--body-width) - 100px); +} + +.news-section { background-color: #f7f7f7; } +.events-section { background-color: #f7f7f7; } + +section h2 { + position: relative; +} + +section h2::before { + content: ""; + background-size: 40px 40px; + width: 40px; + height: 40px; + position: absolute; + top: 0; + left: -50px; +} + +.news-section h2::before { background-image: var(--news-icon); } +.campaigns-section h2::before { background-image: var(--campaigns-icon); } +.events-section h2::before { background-image: var(--events-icon); } + +section { + padding: 40px 0px; +} + +section.news-section { margin-top: 20px; } + +.about { margin-top: 40px; max-width: 660px; } + +article.article { + color: #333; + width: calc(100vw - 80px); + max-width: 600px; + margin: 0px auto; + line-height: 1.3em; +} + +article.article .article-metadata { + margin-bottom: 2em; +} + +article.article p { + margin-bottom: 1em; +} + +article.article .featured-image { + width: 100%; + margin-bottom: 2em; +} + +article.article h1 { + font-size: 2.25rem; + font-weight: 300; + line-height: 2.5rem; +} + + diff --git a/themes/academic/layouts/_default/baseof.html b/themes/academic/layouts/_default/baseof.html index a372092..393a680 100644 --- a/themes/academic/layouts/_default/baseof.html +++ b/themes/academic/layouts/_default/baseof.html @@ -1,334 +1,35 @@ -{{- $language_code := site.LanguageCode | default "en-us" -}} - + + {{ partial "site_head" . }} + + +
+ {{ block "main" . }}{{ end }} +
-{{ partial "site_head" . }} - - - -
- {{ block "main" . }}{{ end }} -
- - {{ partial "site_js" . }} - - - + + diff --git a/themes/academic/layouts/partials/site_head.html b/themes/academic/layouts/partials/site_head.html index fb4e206..b75c91e 100644 --- a/themes/academic/layouts/partials/site_head.html +++ b/themes/academic/layouts/partials/site_head.html @@ -84,19 +84,16 @@ {{ end }} - {{ $css_comment := printf "/*!* Source Themes Academic v%s (https://sourcethemes.com/academic/) */\n" site.Data.academic.version }} - {{ $css_bundle_head := $css_comment | resources.FromString "css/bundle-head.css" }} {{ $css_options := dict "targetPath" "css/academic.css" }} {{- if (in (slice (getenv "HUGO_ENV") hugo.Environment) "production") -}} {{- $css_options = merge $css_options (dict "outputStyle" "compressed") -}} {{- end -}} - {{ $sass_template := resources.Get "scss/main.scss" }} - {{ $style := $sass_template | resources.ExecuteAsTemplate "main_parsed.scss" . | toCSS $css_options }} - {{ $style := slice $css_bundle_head $style | resources.Concat "css/academic.css" }} + {{ $sass_template := resources.Get "scss/ansol.scss" }} + {{ $style := $sass_template | resources.ExecuteAsTemplate "ansol_parsed.scss" . | toCSS $css_options }} {{- if (eq (getenv "HUGO_ENV") "production") -}} {{- $style = $style | minify | fingerprint "md5" -}} {{- end -}} - + {{ partial "marketing/google_analytics" . }} {{ partial "marketing/google_tag_manager" . }}