7
1
mirror of https://gitlab.com/ansol/web-ansol.org.git synced 2024-11-22 06:11:30 +00:00

Add icons to CSS

This commit is contained in:
Hugo Peixoto 2021-10-28 17:32:48 +01:00
parent 6b0d38a227
commit 5bdc708add
8 changed files with 344 additions and 336 deletions

View File

@ -0,0 +1 @@
<svg height='300px' width='300px' fill="#c73447" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"><g transform="translate(0,-952.36218)"><path style="opacity:1;color:#c73447;fill:#c73447;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" d="M 78 13 C 78 14.9964 78.90845 23 65.03125 23 L 25 23 C 15.582 23 8 30.582 8 40 C 8 49.41797 15.582 57 25 57 L 65.03125 57 C 78.90845 57 78 65.0036 78 67 L 92 67 L 92 13 L 78 13 z M 35.0625 61 L 42 87 L 68 87 L 60.1875 61 L 35.0625 61 z " transform="translate(0,952.36218)"></path></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

1
assets/images/events.svg Normal file
View File

@ -0,0 +1 @@
<svg height='300px' width='300px' fill="#c73447" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 100" x="0px" y="0px"><title>58</title><g data-name="Group"><rect data-name="Path" x="42.3" y="18.8" width="15.5" height="6"></rect><path data-name="Path" d="M83.9,18.8H74.9v6h5.9V39.6H19.1V24.8h5.9v-6H16.1a3,3,0,0,0-3,3V85a3,3,0,0,0,3,3H83.9a3,3,0,0,0,3-3V21.8A3,3,0,0,0,83.9,18.8Z"></path><rect data-name="Path" x="30.7" y="12" width="6" height="17.95"></rect><rect data-name="Path" x="63.3" y="12" width="6" height="17.95"></rect></g></svg>

After

Width:  |  Height:  |  Size: 565 B

1
assets/images/menu.svg Normal file
View File

@ -0,0 +1 @@
<svg height='300px' width='300px' fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g><path d="M92.021,34.344H7.979V18.407h84.043V34.344z M92.021,42.031H7.979v15.937h84.043V42.031z M92.021,65.656H7.979v15.937 h84.043V65.656z"></path></g></svg>

After

Width:  |  Height:  |  Size: 399 B

1
assets/images/news.svg Normal file
View File

@ -0,0 +1 @@
<svg height='300px' width='300px' fill="#c73447" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 100" x="0px" y="0px"><title>3Artboard 68</title><path d="M86,2H38A12,12,0,0,0,26,14V80a6,6,0,0,1-6,6h0a6,6,0,0,1-6-6V44a6,6,0,0,0-6-6H8a6,6,0,0,0-6,6V80A18,18,0,0,0,20,98H83A15,15,0,0,0,98,83V14A12,12,0,0,0,86,2ZM69.5,80H41V71H69.5ZM83,62H41V53H83ZM69.5,44H41V35H69.5ZM83,26H41V17H83Z"></path></svg>

After

Width:  |  Height:  |  Size: 422 B

1
assets/images/search.svg Normal file
View File

@ -0,0 +1 @@
<svg height='300px' width='300px' fill="#ffffff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M99.337,89.242L68.052,57.956c4.063-6.057,6.246-13.179,6.246-20.636c0-9.923-3.864-19.252-10.881-26.269 C56.4,4.035,47.072,0.171,37.149,0.171c-9.923,0-19.252,3.864-26.269,10.88C3.864,18.068,0,27.397,0,37.32 s3.864,19.251,10.881,26.268s16.345,10.881,26.269,10.881c7.541,0,14.737-2.234,20.838-6.385l31.255,31.253 c1.055,1.056,2.995,0.826,4.332-0.511l5.252-5.252C100.164,92.237,100.393,90.297,99.337,89.242z M37.149,64.405 c-14.936,0-27.086-12.15-27.086-27.085s12.151-27.086,27.086-27.086c14.935,0,27.085,12.151,27.085,27.086 S52.084,64.405,37.149,64.405z"></path></svg>

After

Width:  |  Height:  |  Size: 817 B

View File

@ -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;
}

View File

@ -1,309 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
{{- $language_code := site.LanguageCode | default "en-us" -}} <html lang="{{ site.LanguageCode | default "en-us" }}">
<html lang="{{$language_code}}"> {{ partial "site_head" . }}
<body>
{{ partial "site_head" . }}
<style>
:root { --body-width: calc(100vw - 80px); }
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: url(/ansol.org/search.svg) 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: url(/ansol.org/news.svg); }
.campaigns-section h2::before { background-image: url(/ansol.org/campaigns.svg); }
.events-section h2::before { background-image: url(/ansol.org/events.svg); }
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;
}
</style>
<body>
<nav class="main"> <nav class="main">
<div class="body-width"> <div class="body-width">
<a class="menu" href="#" onclick="this.parentNode.parentNode.classList.toggle('menu--expanded')"><img src="/ansol.org/menu.svg"></a> <a class="menu" href="#" onclick="this.parentNode.parentNode.classList.toggle('menu--expanded')"><img src="{{ (resources.Get "images/menu.svg").Permalink }}"></a>
<a href="{{ (site.GetPage "").Permalink }}"><img src="{{ (resources.Get "images/logo.svg").Permalink }}" alt="Associação Nacional para o Software Livre" /></a> <a href="{{ (site.GetPage "").Permalink }}"><img src="{{ (resources.Get "images/logo.svg").Permalink }}" alt="Associação Nacional para o Software Livre" /></a>
<ul class='sections'> <ul class='sections'>
<li><a href="{{ (site.GetPage "Section" "noticias").Permalink }}">Notícias</a></li> <li><a href="{{ (site.GetPage "Section" "noticias").Permalink }}">Notícias</a></li>
@ -330,5 +31,5 @@ article.article h1 {
<p><a href="{{ (site.GetPage "licenca").Permalink }}">Licenças e atribuições</a></p> <p><a href="{{ (site.GetPage "licenca").Permalink }}">Licenças e atribuições</a></p>
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>

View File

@ -84,19 +84,16 @@
<link rel="stylesheet" {{ printf "href=\"https://fonts.googleapis.com/css?family=%s&display=swap\"" . | replaceRE "\\|" "%7C" | safeHTMLAttr }}> <link rel="stylesheet" {{ printf "href=\"https://fonts.googleapis.com/css?family=%s&display=swap\"" . | replaceRE "\\|" "%7C" | safeHTMLAttr }}>
{{ end }} {{ 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" }} {{ $css_options := dict "targetPath" "css/academic.css" }}
{{- if (in (slice (getenv "HUGO_ENV") hugo.Environment) "production") -}} {{- if (in (slice (getenv "HUGO_ENV") hugo.Environment) "production") -}}
{{- $css_options = merge $css_options (dict "outputStyle" "compressed") -}} {{- $css_options = merge $css_options (dict "outputStyle" "compressed") -}}
{{- end -}} {{- end -}}
{{ $sass_template := resources.Get "scss/main.scss" }} {{ $sass_template := resources.Get "scss/ansol.scss" }}
{{ $style := $sass_template | resources.ExecuteAsTemplate "main_parsed.scss" . | toCSS $css_options }} {{ $style := $sass_template | resources.ExecuteAsTemplate "ansol_parsed.scss" . | toCSS $css_options }}
{{ $style := slice $css_bundle_head $style | resources.Concat "css/academic.css" }}
{{- if (eq (getenv "HUGO_ENV") "production") -}} {{- if (eq (getenv "HUGO_ENV") "production") -}}
{{- $style = $style | minify | fingerprint "md5" -}} {{- $style = $style | minify | fingerprint "md5" -}}
{{- end -}} {{- end -}}
<!--<link rel="stylesheet" href="{{ $style.RelPermalink }}">--> <link rel="stylesheet" href="{{ $style.RelPermalink }}">
{{ partial "marketing/google_analytics" . }} {{ partial "marketing/google_analytics" . }}
{{ partial "marketing/google_tag_manager" . }} {{ partial "marketing/google_tag_manager" . }}