Clients/epsf-miniwebsite
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling : adding logo + modifying colors to match logo's colors + adjusting responsiveness + adding new favicons

Browse Source
This commit is contained in:
Exvigilare Gemini
2025-01-23 18:05:49 +01:00
parent a7b4788a6a
commit ec13f0c688
65 changed files with 151 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/tse/assets/css/content.scss
View File

@@ -252,7 +252,7 @@ table {
th,
td {
padding: 2rem;
padding: 1rem;
line-height: 20px;
text-align: left;
vertical-align: top;

4
themes/tse/assets/css/custom.scss
View File

@@ -21,11 +21,11 @@ table.cv td, table th {
.table {
border: 1px solid;
font-size: 80%;
font-size: 1.2rem;
border-color: var(--section-light-bg-color);
//background-color: var(--section-light-bg-color);
background-color: var(--highlight-inverse-contrast);
color: var(--section-light-text-color);
color: var(--section-dark-text-color);
}
.table td, table th {

66
themes/tse/assets/css/responsiveness.scss
View File

@@ -1,9 +1,8 @@
/* ==========================================================================
8. Media Queries - Smaller than 1130px
========================================================================== */
@media only screen and (max-width: 1130px) {
@media only screen and (max-width: 900px) {
/* makes it a top sticky menu */
.fixed-nav {
opacity: 1;
@@ -60,7 +59,7 @@
/* skip the top menu when scrolling */
.post-holder .post {
scroll-margin-top: 48px;
scroll-margin-top: 48px;
}
.post-template .post {
@@ -87,6 +86,23 @@
h4 {
font-size: 2.8rem;
}
#site-head #site-menu, #site-head.withCenteredImage #site-menu {
font-size: 1.5rem;
flex: 1;
order: 2;
flex-basis: 100%;
justify-content: start;
}
#top-banner {
flex-wrap: wrap;
}
#site-head #site-languages,
#site-head.withCenteredImage #site-languages {
order: 1;
}
#blog-logo {
}
}
/* ==========================================================================
@@ -99,13 +115,14 @@
}
#blog-logo {
max-height: 80px;
max-height: 6rem;
margin-left: 1.5rem;
max-width: 40%;
}
.inner,
.pagination {
width: auto;
}
.post {
@@ -116,9 +133,10 @@
line-height: 1.6em;
}
#site-head {
#site-head,
#site-head.withCenteredImage {
// padding: 1.5rem;
height: 65%;
height: 90%;
}
#header-arrow {
@@ -134,8 +152,11 @@
font-size: 3rem;
}
.blog-description {
font-size: 2.2rem;
#site-head .blog-description,
#site-head.withCenteredImage .blog-description {
font-size: 2.5rem;
margin-bottom: 2rem;
padding: 0 1rem;
}
h1,
@@ -164,22 +185,27 @@
.site-footer {
font-size: 1.1rem;
}
#top-banner {
flex-direction: column;
#site-head #top-banner,
#site-head.withCenteredImage #top-banner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100vw;
padding: 1rem 0;
}
#site-languages{
align-self: end;
#site-languages {
align-self: center;
padding-right: 1rem;
}
#site-menu{
width: 100%;
display: flex;
justify-content: space-around;
#site-head #site-menu,
#site-head.withCenteredImage #site-menu {
display: none;
}
#site-head #site-languages .btn-lang, #site-head.withCenteredImage #site-languages .btn-lang{
margin: 1rem .3rem;
#site-head #site-languages .btn-lang,
#site-head.withCenteredImage #site-languages .btn-lang {
margin: 1rem 0.3rem;
font-size: 1rem;
}
}
}

30
themes/tse/assets/css/theme.scss
View File

@@ -7,10 +7,10 @@ body {
#blog-logo {
//display: flex;
max-height: 160px;
max-height: 6rem;
width: auto;
margin: 0 auto;
line-height: 0;
object-fit: contain;
}
#flag-logo {
@@ -24,7 +24,7 @@ body {
}
#site-head, #site-head.withCenteredImage {
position: relative;
// position: relative;
display: table;
width: 100%;
height: 100vh;
@@ -71,7 +71,7 @@ body {
font-weight: 400;
font-family: "Roboto Slab", serif;
letter-spacing: 0;
text-shadow: var(--cover-title-text-shadow);
// text-shadow: var(--cover-title-text-shadow);
//-webkit-text-fill-color: white; /* Will override color (regardless of order) */
//-webkit-text-stroke: 2px var(--cover-title-text-shadow);
-webkit-text-stroke: 5px var(--section-dark-bg-color);
@@ -85,22 +85,30 @@ body {
// max-width: 100%;
// width: 100%;
// height: fit-content;
display: flex;
justify-content: space-between;
padding: 0 2rem;
background-color: var(--cover-title-and-description-guard-bg-color);
}
#site-languages {
//text-align: right;
width: fit-content;
height: 100%;
// height: 100%;
position: relative;
float: right;
order: 2;
}
#site-menu {
position: relative;
float: left;
order: 1;
display: flex;
justify-content: space-around;
align-items: center;
// width: fit-content;
height: 100%;
// height: 100%;
}
#site-languages .btn-lang {
@@ -129,7 +137,8 @@ body {
// position: absolute;
// bottom: 200px;
// max-width: 100%;
align-content: center;
align-content: end;
height: 100%;
}
// Landing screen menu
@@ -147,13 +156,14 @@ body {
// font-size: 16px;
letter-spacing: 1px;
margin: 1rem;
overflow: visible;
padding: 10px 20px 10px 20px;
overflow: visible;
padding: 0.5rem 1rem;
position: relative;
cursor: pointer;
text-transform: uppercase;
font-weight:normal;
border: solid 1px var(--highlight-contrast);
height: fit-content;
// border: solid 1px var(--highlight-contrast);
&:hover {
color: var(--highlight-inverse-contrast);

31
themes/tse/assets/css/variables.scss
View File

@@ -1,33 +1,40 @@
$light-color: #ffffff;
$dark-color: #2a0045ff ;
$primary-color: #183c8f;
$secondary-color: rgb(143, 33, 191);
$tertiary-color: #4eca2cff;
// #{}
// #{$tertiary-color}
:root {
/* === Cover / Landing area === */
--cover-text-color: rgb(0, 52, 141);
--cover-text-color: #{$secondary-color};
/* Used for Landing screen menu buttons, but potentially usable for highlighting other things */
--highlight: #ffc800;
--highlight-contrast: var(--cover-text-color);
--highlight: #{$primary-color};
--highlight-contrast: #{$light-color};
/*inverse colors used for :hover */
--highlight-inverse: var(--cover-text-color);
--highlight-inverse-contrast: rgb(249, 238, 187);
--highlight-inverse: #{$secondary-color};
--highlight-inverse-contrast: rgb(255, 255, 255);
/* visual guard around title and description, when the feature is enabled */
--cover-title-and-description-guard-bg-color: rgba(85, 27, 2, 0.67);
--cover-title-text-shadow: rgb(119, 45, 0) 1px 1px 5px;
--cover-title-and-description-guard-bg-color: #{$light-color};
// --cover-title-text-shadow: rgb(119, 45, 0) 1px 1px 5px;
/* === sticky top/left navigation menus === */
--sticky-menu-text-color: #d65301ea;
--sticky-menu-text-color: #{$light-color};
/* === Alternating content (post) sections === */
/* Light section - text color */
--section-light-text-color:rgb(119, 45, 0);
--section-light-text-color:#{$light-color};
/* Light section - background color */
--section-light-bg-color: #ebbc4f;
--section-light-bg-color: #{$primary-color};
/* Dark section - text color */
--section-dark-text-color: var(--section-light-bg-color);
--section-dark-text-color: #{$primary-color};
/* Dark section - background color */
--section-dark-bg-color: #652200;
--section-dark-bg-color: #{$light-color};
/* Light&Dark section >quote. Suppressive color, compared to 'Light section - text color'*/
--section-uni-quote: grey;

27
themes/tse/assets/js/index.js
View File

@@ -18,7 +18,7 @@ var $sitehead = $("#site-head");
scrollTop: el.offset().top,
},
dur,
function() {
function () {
window.location.hash = el.attr("id");
}
);
@@ -40,7 +40,7 @@ var $sitehead = $("#site-head");
// cover arrow button
$("#header-arrow").click(function (e) {
e.preventDefault()
e.preventDefault();
srcTo($first);
});
}
@@ -55,15 +55,20 @@ var $sitehead = $("#site-head");
if (w >= Math.floor(g) && w <= Math.ceil(h)) {
$(".fixed-nav").fadeOut("fast");
} else if (w < Math.floor(g)) {
$(".fixed-nav").fadeOut("fast");
} else {
$(".fixed-nav").css("display", "flex").fadeIn("fast");
}
$post.each(function () {
if (($(window).height() + w) > ($(document).height() - $(".site-footer").height())) {
if (
$(window).height() + w >
$(document).height() - $(".site-footer").height()
) {
var l = $postholder.length;
$(".fn-item").removeClass("active")
$(".fn-item[item_index='" + (l) + "']").addClass("active")
$(".fn-item").removeClass("active");
$(".fn-item[item_index='" + l + "']").addClass("active");
} else {
var f = $(this).offset().top;
var b = $(this).offset().top + $(this).height();
@@ -83,15 +88,19 @@ var $sitehead = $("#site-head");
i.removeClass("active");
a.fadeIn("slow");
}
}
}
});
});
}
var ulLiIcon = getComputedStyle(document.documentElement).getPropertyValue('--ul-li-icon');
var ulLiIcon = getComputedStyle(document.documentElement).getPropertyValue(
"--ul-li-icon"
);
if (ulLiIcon.length > 0) {
$('ul').addClass("fa-ul");
$("ul li").prepend('<span class="fa-li"><i class="fa ' + ulLiIcon + '"></i></span>');
$("ul").addClass("fa-ul");
$("ul li").prepend(
'<span class="fa-li"><i class="fa ' + ulLiIcon + '"></i></span>'
);
}
$("blockquote p").prepend('<span class="quo fa fa-quote-left"></span>');
$("blockquote p").append('<span class="quo fa fa-quote-right"></span>');