Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove old css grid from base and home #186

Merged
merged 8 commits into from
Jun 6, 2023
Merged

Remove old css grid from base and home #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e9d33c6
Remove old CSS grid classes from base.html, #183
bruvellu Jun 3, 2023
a898f4d
Revise styling IDs for cover image and text, #183
bruvellu Jun 3, 2023
fd1a6b4
Remove unused div in the home page
bruvellu Jun 3, 2023
f38dc8f
Rename intro div with know-more links
bruvellu Jun 3, 2023
749e312
Move #intro styles to home.css with tweaks
bruvellu Jun 3, 2023
801102c
Adjust size for intro text
bruvellu Jun 3, 2023
bc86ee0
Remove old grid classes in home main content, #183
bruvellu Jun 3, 2023
dee0f49
Merge branch 'develop' into remove-old-css-grid
bruvellu Jun 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion meta/static/css/footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
#mainfooter {
font-size:.65rem;
letter-spacing: 2px;
border-style: none;
border-color: initial;
border-width: 0;
border-top: 5px #EEEEEE solid;
padding: .8rem 0;
margin: 0;
background: #fafafa;
}

#footerbase {
Expand Down Expand Up @@ -65,4 +68,4 @@
flex-wrap: wrap;
padding-left: .6rem;
}
}
}
43 changes: 35 additions & 8 deletions meta/static/css/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,56 @@
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-bottom:1rem;
background:#fafafa;
border-radius: 10px;
padding:12px 10px 8px;
border-color:#eee #fafafa;
border-style:solid;
border-width:5px;
}

#intro > #destaque {
#intro > #cover-image {
display: flex;
justify-content: center;
margin-right: 2rem;
}

#intro > .last {
#intro > #cover-text {
width: 60%;
font-size:1rem;
}

.main-content {
#intro h1 {
text-transform:uppercase;
color:#333;
text-align:center;
font-weight:bold;
font-size:1.5rem;
}

#intro-more {
margin-bottom:1rem;
}

#main-content {
width: 100%;
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 0rem 1rem;
justify-content: center;
}

#photos p, #videos p, #tours p {
font-size:.8rem;
width:300px;
}

@media (max-width: 874px) {
#intro > .last {
#intro > #cover-text {
width: 100%;
}
#intro > #destaque {
#intro > #cover-image {
margin: 0px;
}
}
}
66 changes: 0 additions & 66 deletions meta/static/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -658,13 +658,6 @@ Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/] */
margin:17px 0 0 0;
}

#main-more {
margin-bottom:1em;
}

#main-message {
}

#admin {
padding:0 4px;
position:fixed;
Expand Down Expand Up @@ -694,11 +687,6 @@ Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/] */
float:left;
}

nav.main {
text-align:right;
font-size: 1.3em;
}

.menu {
float: right;
display: inline;
Expand Down Expand Up @@ -787,20 +775,6 @@ nav.main {
}

/* FOOTER */
footer.main {
font-size:0.9em;
letter-spacing: 2px;
padding: 1em 0 0.6em;
background: #fafafa;
border-style:solid;
border-color:#EEEEEE #FAFAFA #FFFFFF #FAFAFA;
border-width:5px 5px 0 5px;
margin:0 -5px;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}

.cnpq img {
vertical-align:top;
}
Expand Down Expand Up @@ -1079,46 +1053,6 @@ div#notes {
filter: dropshadow(color=#000000, offx=2, offy=2);
}

/* HOME PAGE */
div.main {
margin-bottom:2em;
}

#intro {
margin-bottom:1em;
background:#fafafa;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding:12px 10px 8px;
border-color:#eee #fafafa;
border-style:solid;
border-width:5px;
}

#destaque {
margin-right:25px;
}

#intro h1 {
text-transform:uppercase;
color:#333;
text-align:center;
font-weight:bold;
font-size:2em;
}

#intro p {
font-size:1.2em;
text-align:justify;
}

.main #photos p, #videos p, #tours p {
font-size:1.1em;
width:300px;
text-align:justify;
}

/* SEARCH PAGE */
div#search-results {
}
Expand Down
10 changes: 5 additions & 5 deletions meta/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,25 +67,25 @@
<link rel="stylesheet" href="{{ STATIC_URL }}css/ui-lightness/jquery-ui-1.8.21.custom.css">
</head>
<body>
<div id='div-container' class="container">
<div id="div-container">

<nav id="nav-header" class="main">
<nav id="nav-header">
{% include 'nav.html' %}
</nav>

<header class="main" id="mainheader">
<header id="mainheader">
{% include 'header.html' %}
</header>

<section class="main" id="content">
<section id="content">
<div class="{% if content_block and content_sidebar %}content-and-sidebar{% else %}content-only{% endif %}">
{% block content %}{% endblock %}
{% block sidebar %}{% endblock %}
</div>

</section>

<footer id="mainfooter" class="main quiet">
<footer id="mainfooter" class="quiet">
{% include 'footer.html' %}
</footer>

Expand Down
19 changes: 8 additions & 11 deletions meta/templates/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,31 +18,28 @@

{% block content %}

<section class="main shadow span-23 last" id="intro">
<div class="span-8" id="destaque">
<section class="shadow" id="intro">
<div id="cover-image">
<a href="{{ main_image.get_absolute_url }}">
{% thumbnail main_image.coverpath "300x200" crop="center" as im %}
<img class="shadow" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt="{{ main_image.title }}">
{% endthumbnail %}
</a>
</div>
<div class="last">
<div id="cover-text">
<h1>{% trans 'Explore a biodiversidade marinha' %}</h1>
<p>
{% blocktrans %}O banco de imagens <em>Cifonauta</em> contém uma grande variedade de fotos e vídeos provenientes de atividades científicas em biologia marinha. As imagens possuem classificação taxonômica, estágio de vida, habitat e outras informações que permitem navegar de maneira intuitiva e didática.{% endblocktrans %}
</p>
<div class="align-center" id="main-more">
<div class="align-center" id="intro-more">
<a href="/about/">{% trans 'saiba mais' %}</a> | <a href="/organization/">{% trans 'organização do conteúdo' %}</a> | <a href="/terms/">{% trans 'termos de uso' %}</a> | <a href="/press/">{% trans 'imprensa' %}</a>
</div>
<div class="quiet align-center" id="main-message">
<!--Contribua com o desenvolvimento do banco enviando <a href="/feedback/">sugestões</a>.-->
</div>
</div>
</section>

<section class="main span-24 last main-content">
<section id="main-content">

<div class="main span-8" id="photos">
<div id="photos">
<h2><a href="/search/?datatype=photo">{% trans 'Fotos' %}</a></h2>
<a href="{{ photo.get_absolute_url }}">
{% thumbnail photo.coverpath "300x200" crop="center" as im %}
Expand All @@ -55,7 +52,7 @@ <h2><a href="/search/?datatype=photo">{% trans 'Fotos' %}</a></h2>
</p>
</div>

<div class="main span-8" id="videos">
<div id="videos">
<h2><a href="/search/?datatype=video">{% trans 'Vídeos' %}</a></h2>
<a href="{{ video.get_absolute_url }}">
{% thumbnail video.coverpath "300x200" crop="center" as im %}
Expand All @@ -68,7 +65,7 @@ <h2><a href="/search/?datatype=video">{% trans 'Vídeos' %}</a></h2>
</p>
</div>

<div class="main span-8 last" id="tours">
<div id="tours">
<h2><a href="/tours/">{% trans 'Tours' %}</a></h2>
<a href="{{ tour.get_absolute_url }}">
{% thumbnail tour_image.coverpath "300x200" crop="center" as im %}
Expand Down