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

Visual layout improvements especially for landing page #1780

Merged
merged 13 commits into from
Mar 20, 2025
Merged

Visual layout improvements especially for landing page #1780

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
3346343
use rem units for all font-space declarations (except root)
osma Mar 18, 2025
5dd4ebd
font adjustments on landing page
osma Mar 18, 2025
bb5c90c
set landing page heading to 'Vocabularies'
osma Mar 18, 2025
64aed1b
adjust footer font size and layout
osma Mar 18, 2025
2955f62
make landing page responsive; adjust column gutters
osma Mar 18, 2025
7711467
font size and color adjustments
osma Mar 18, 2025
3278c48
better scope for text color setting
osma Mar 18, 2025
5c98294
adjust vocab title size & style declarations
osma Mar 19, 2025
4cdb5a2
drop some redundant color declarations
osma Mar 19, 2025
0b5e9aa
move font-family and font-size declarations back to body element
osma Mar 19, 2025
96484be
smaller Skosmos logo & spacing adjustments on landing page
osma Mar 19, 2025
702e9ec
rename mb-custom to mb-gutterwidth to better reflect its purpose
osma Mar 19, 2025
fad4d43
use Font Awesome arrow in landing page infobox
osma Mar 19, 2025
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
99 changes: 46 additions & 53 deletions resource/css/skosmos.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
--tooltip-border-color: var(--secondary-medium-color);

/* Font definitions */
--font-size: 14px;
--font-size: 1em; /* same as the browser default font size, often 16px */
--font-family: 'Public Sans', sans-serif;
--font-family-heading: 'EB Garamond', serif;
}
Expand All @@ -47,18 +47,6 @@ body {
font-size: var(--font-size);
}

.fs-1 {
font-size: 4.25em !important;
}

.fs-2 {
font-size: 3.25em !important;
}

.fs-3 {
font-size: 2.75em !important;
}

.bg-dark {
background-color: var(--dark-color) !important;
}
Expand All @@ -74,38 +62,38 @@ body {
/* Font awesome
*****************************************/
#main-container.landing #info-box .fa-arrow-right {
color: var(--info-box-arrow);
color: var(--secondary-dark-color);
}

#main-container.landing-one-vocab #info-box .fa-arrow-right {
color: var(--info-box-one-arrow);
color: var(--secondary-dark-color);
}

#vocab-box .fa-arrow-right {
color: var(--vocab-box-one-arrow);
color: var(--secondary-dark-color);
}

#main-container.vocab-home .fa-arrow-right, #main-container.concept .fa-arrow-right {
color: var(--vocab-text);
font-size: 12px;
font-size: .75rem;
margin: 0 5px;
}

#main-container.vocab-search .fa-arrow-right {
color: var(--vocab-text);
font-size: 12px;
font-size: .85rem;
}

#main-container.vocab-search .list-group .fa-solid, #main-container.vocab-search .list-group .fa-regular {
color: var(--vocab-text);
font-size: 16px;
font-size: 1.15rem;
width: 20px;
text-align: center;
}

.fa-magnifying-glass {
color: var(--search-button-text);
font-size: 22px;
font-size: 1.6rem;
margin: calc((38px - 22px) / 2 ) 0; /* (button height - font height) / 2 */
}

Expand Down Expand Up @@ -172,7 +160,7 @@ body {
/* Headerbar
*****************************************/
#headerbar.landing, #headerbar.landing-one-vocab {
color: var(--headerbar-text-1);
color: var(--dark-color);
}

#headerbar.vocab-home, #headerbar.concept {
Expand All @@ -182,20 +170,23 @@ body {
#skosmos-logo {
background-image: url(../pics/skosmos-RGB.svg);
background-repeat: no-repeat;
background-position: -20px -20px;
width: 400px;
height: 110px;
background-size: 400px;
background-position: -8px -15px;
width: 300px;
height: 80px;
background-size: 300px;
}

#vocab-title {
font-size: 2.5rem;
}

#vocab-title a {
color: var(--headerbar-text-2);
color: var(--vocab-text);
font-family: var(--font-family-heading);
text-decoration: none;
}

#search-multi-vocab-title {
color: var(--headerbar-text-2);
color: var(--vocab-text);
font-family: var(--font-family-heading);
}

Expand All @@ -204,7 +195,7 @@ body {
}

#search-wrapper {
color: var(--headerbar-text-2);
color: var(--vocab-text);
float: right;
height: 3.5em;
}
Expand All @@ -215,7 +206,7 @@ body {

#search-wrapper button.dropdown-toggle {
background-color: var(--search-bg);
color: var(--headerbar-text-2);
color: var(--vocab-text);
border: 1px solid var(--search-border);
border-radius: 0;
padding-left: 1rem;
Expand All @@ -234,7 +225,7 @@ body {
#search-wrapper #language-list {
inset: -3px auto auto 0px !important;
background-color: var(--search-bg);
color: var(--headerbar-text-2);
color: var(--vocab-text);
border: 1px solid var(--search-border);
border-radius: 0;
}
Expand All @@ -250,7 +241,7 @@ body {
}

#search-wrapper .form-check-input:checked {
background-color: var(--headerbar-text-2);
background-color: var(--vocab-text);
}

#search-wrapper input {
Expand All @@ -272,7 +263,7 @@ body {
#search-wrapper .dropdown-menu {
transform: translateY(-1px);
background-color: var(--search-dropdown-bg);
color: var(--headerbar-text-2);
color: var(--vocab-text);
border: 1px solid var(--search-border);
border-radius: 0;
}
Expand Down Expand Up @@ -362,7 +353,7 @@ body {
height: 40px;
width: 40px;
padding: 0;
font-size: 20px;
font-size: 1.4rem;
z-index: 5;
}

Expand All @@ -373,8 +364,7 @@ body {
}

#main-container {
padding-top: 2.75rem;
font-size: 1rem;
padding-top: 2.4rem;
}

#main-container h1 {
Expand All @@ -383,10 +373,14 @@ body {
}

#main-container-row {
--bs-gutter-x: 2.25rem;
--bs-gutter-x: 2rem;
}

.mb-gutterwidth {
margin-bottom: var(--bs-gutter-x);
}

/***** Main container langing page & landing page one vocab *****/
/***** Main container landing page & landing page one vocab *****/
#background.landing, #background.landing-one-vocab {
background-color: var(--main-bg-1);
background-image: var(--landing-stripes-1);
Expand All @@ -400,6 +394,7 @@ body {
background-repeat: no-repeat;
background-size: 650px;
background-position: -41px calc(100% + 55px);
padding-top: 0;
}

#vocab-box, #welcome-box, #info-box {
Expand Down Expand Up @@ -438,11 +433,12 @@ body {
}

.vocab-category a {
/** color: var(--secondary-medium-color) solid; **/
color: var(--vocab-link);
font-weight: bold;
text-decoration: underline ;
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: var(--secondary-medium-color);
text-underline-offset: 0.3rem;
}

#main-container.landing #vocab-box h2 {
Expand All @@ -456,9 +452,6 @@ body {

#main-container.landing #info-box {
background-color: var(--info-box-bg);
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}

Expand Down Expand Up @@ -614,7 +607,7 @@ body {
/*** sidebar changes tab ***/
#tab-changes .sidebar-list h2 {
color: var(--vocab-text);
font-size: 20px;
font-size: 1.4rem;
font-weight: bold;
margin: 0;
}
Expand Down Expand Up @@ -693,15 +686,15 @@ body {

#tab-groups .sidebar-list .list-group-item .concept-label i {
color: var(--dark-color);
font-size: 14px;
font-size: 1rem;
}

.hierarchy-button {
background-color: transparent;
color: var(--vocab-text);
border: none;
padding: 0;
font-size: 10px;
font-size: 0.7rem;
}

.hierarchy-button:hover, .hierarchy-button:active {
Expand All @@ -714,7 +707,7 @@ body {
left: 11px;
top: 7px;
z-index: 1;
font-size: 12px;
font-size: .85rem;
}

.hierarchy-button img {
Expand Down Expand Up @@ -761,7 +754,7 @@ body {
.select-wrapper::after { /* Also used in feedback form */
color: var(--vocab-text);
content: '﹀';
font-size: 20px;
font-size: 1.4rem;
position: absolute;
top: 10px;
right: 10px;
Expand Down Expand Up @@ -800,7 +793,7 @@ body {

.property-label h2 {
font-weight: bold;
font-size: 20px !important;
font-size: 1.2rem;
margin-bottom: 0;
display: inline;
}
Expand Down Expand Up @@ -849,7 +842,7 @@ body {
}

nav#concept-breadcrumbs .breadcrumb-current {
color: black;
color: var(--dark-color);
font-weight: normal;
}

Expand All @@ -864,7 +857,7 @@ body {

#copy-preflabel, #copy-notation {
color: var(--vocab-text);
font-size: 30px;
font-size: 2.1rem;
position: relative;
bottom: 10px;
left: 5px;
Expand Down Expand Up @@ -1062,7 +1055,7 @@ body {
/* About page
*****************************************/
#about-content a {
font-size: 1.0em;
font-size: 1.0rem;
color: var(--vocab-link);
text-decoration: underline var(--secondary-medium-color) solid;
font-weight: 700;
Expand All @@ -1073,7 +1066,7 @@ body {
}

.vocab-statistics > h3 {
font-size: 20px !important;
font-size: 1.4rem;
}

/* Tooltips */
Expand Down
13 changes: 7 additions & 6 deletions src/view/base-template.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,9 @@
<div class="row">
<div class="col-7">
{% if pageType == 'vocab-home' %}
<h1 class="fs-2 fw-bold text-decoration-none" id="vocab-title"><a class="text-decoration-none" href="{% if request.vocabid != '' %}{{ request.vocabid }}/{% endif %}{{ request.lang }}/{% if request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}">{{ request.vocab.title(request.contentLang) }}</a></h1>
<h1 class="fw-bold" id="vocab-title"><a class="text-decoration-none" href="{% if request.vocabid != '' %}{{ request.vocabid }}/{% endif %}{{ request.lang }}/{% if request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}">{{ request.vocab.title(request.contentLang) }}</a></h1>
{% else%}
<h2 class="fs-2 fw-bold text-decoration-none" id="vocab-title"><a class="text-decoration-none" href="{% if request.vocabid != '' %}{{ request.vocabid }}/{% endif %}{{ request.lang }}/{% if request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}">{{ request.vocab.title(request.contentLang) }}</a></h2>
<h2 class="fw-bold" id="vocab-title"><a class="text-decoration-none" href="{% if request.vocabid != '' %}{{ request.vocabid }}/{% endif %}{{ request.lang }}/{% if request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}">{{ request.vocab.title(request.contentLang) }}</a></h2>
{% endif %}
</div>
<div class="col-5">
Expand All @@ -107,16 +107,17 @@
<footer class="bg-white pb-5 mt-5">
<div class="container py-5">
<div class="row">
<div class="col-md-7 pe-5">
<p class="fs-5">
<div class="col-md-5 pe-5">
<p class="fs-6">
Skosmos is a web-based tool providing services for accessing controlled vocabularies,
which are used by indexers describing documents and searchers looking
for suitable keywords. Vocabularies are accessed via SPARQL endpoints containing SKOS vocabularies.
</p>
</div>
<div class="col-md-2"></div>
<div class="col-md-5 px-3">
<span class="fs-5 fw-bold">{{ "Contact us!" | trans }}</span>
<p class="fs-5">Yhteystiedot?<p>
<span class="fs-6 fw-bold">{{ "Contact us!" | trans }}</span>
<p class="fs-6">Yhteystiedot?<p>
</div>
</div>
</div>
Expand Down
Loading