remove sub module theme and add our own theme
This commit is contained in:
372
themes/tse/assets/css/theme.scss
Normal file
372
themes/tse/assets/css/theme.scss
Normal file
@@ -0,0 +1,372 @@
|
||||
body {
|
||||
--color-text: var(--section-light-text-color);
|
||||
--color-background: var(--section-light-bg-color);
|
||||
width: 100%;
|
||||
}
|
||||
/* ===== Cover =======*/
|
||||
|
||||
#blog-logo {
|
||||
//display: flex;
|
||||
max-height: 160px;
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
#flag-logo {
|
||||
height: 24px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#site-head.withCenteredImage{
|
||||
/* can't be used together with video */
|
||||
background: var(--section-light-bg-color) no-repeat center center;
|
||||
}
|
||||
|
||||
#site-head, #site-head.withCenteredImage {
|
||||
position: relative;
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 0rem;
|
||||
text-align: center;
|
||||
color: var(--highlight);
|
||||
background-size: cover;
|
||||
|
||||
/* Big cover video at the landing area */
|
||||
video {
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: auto;
|
||||
z-index: -100;
|
||||
}
|
||||
|
||||
.title-and-description-guard {
|
||||
margin: auto;
|
||||
padding: 0.6em;
|
||||
background-color: var(--cover-title-and-description-guard-bg-color);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.blog-title {
|
||||
margin: 10px 0 10px 0;
|
||||
font-size: 5rem;
|
||||
letter-spacing: -1px;
|
||||
//text-shadow: var(--cover-title-text-shadow);
|
||||
//-webkit-text-fill-color: white; /* Will override color (regardless of order) */
|
||||
//-webkit-text-stroke: 1px var(--cover-title-text-shadow);
|
||||
-webkit-text-stroke: 3px black;
|
||||
}
|
||||
|
||||
.blog-description {
|
||||
margin: 0;
|
||||
font-size: 3rem;
|
||||
line-height: 1.5em;
|
||||
font-weight: 400;
|
||||
font-family: "Roboto Slab", serif;
|
||||
letter-spacing: 0;
|
||||
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);
|
||||
paint-order: stroke fill;
|
||||
}
|
||||
|
||||
#top-banner {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
background-color: var(--cover-title-and-description-guard-bg-color);
|
||||
|
||||
}
|
||||
|
||||
#site-languages {
|
||||
//text-align: right;
|
||||
width: fit-content;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#site-menu {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: fit-content;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#site-languages .btn-lang {
|
||||
text-decoration: none;
|
||||
background-color: var(--highlight);
|
||||
color: var(--highlight-contrast);
|
||||
border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
display: inline-block;
|
||||
font-size: 70%;
|
||||
margin: 2rem 0.3rem;
|
||||
padding: 0.0rem 0.7rem;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
color: var(--highlight-inverse-contrast);
|
||||
background-color: var(--highlight-inverse);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#site-head-content {
|
||||
|
||||
position: absolute;
|
||||
bottom: 200px;
|
||||
max-width: 100%;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
// Landing screen menu
|
||||
a.btn, #site-languages .btn-lang {
|
||||
font-family: "Oswald", sans-serif;
|
||||
}
|
||||
|
||||
a.btn {
|
||||
text-decoration: none;
|
||||
background-color: var(--highlight);
|
||||
color: var(--highlight-contrast);
|
||||
border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
margin: 1rem;
|
||||
overflow: visible;
|
||||
padding: 10px 20px 10px 20px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
font-weight:normal;
|
||||
border: solid 1px var(--highlight-contrast);
|
||||
|
||||
&:hover {
|
||||
color: var(--highlight-inverse-contrast);
|
||||
background-color: var(--highlight-inverse);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/** The arrow button to scroll to content */
|
||||
#header-arrow {
|
||||
font-size: 140px;
|
||||
margin: -10px auto;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: -20px;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transition: all ease 0.3s;
|
||||
-webkit-transition: all ease 0.3s;
|
||||
-moz-transition: all ease 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========== Sticky menus ===========
|
||||
/* Left sticky menu */
|
||||
.fixed-nav {
|
||||
background-color: var(--section-light-bg-color);
|
||||
border-radius: 0 25px 20px 0;
|
||||
padding: 1em 1.5em;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
z-index: 99999;
|
||||
font-family: "Open Sans Condensed", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
line-height: 130%;
|
||||
font-weight: bold;
|
||||
box-shadow: var(--cover-title-text-shadow);
|
||||
}
|
||||
|
||||
a.fn-item {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: var(--sticky-menu-text-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========= Content ==========*/
|
||||
.post-title {
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.post-holder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
position: relative;
|
||||
|
||||
&.dark {
|
||||
// override variables for alternative style
|
||||
--color-text: var(--section-dark-text-color);
|
||||
--color-background: var(--section-dark-bg-color);
|
||||
|
||||
background-color: var(--section-dark-bg-color);
|
||||
color: var(--section-dark-text-color);
|
||||
|
||||
// Fix <hr> color
|
||||
hr {
|
||||
border-color: var(--section-dark-text-color);
|
||||
}
|
||||
|
||||
// On alt posts move the triangle to the right and match the background the color
|
||||
.post-after {
|
||||
left: unset;
|
||||
right: 6%;
|
||||
border-top-color: var(--section-dark-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* The triangular parts between posts */
|
||||
.post-after {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
z-index: 1;
|
||||
left: 6%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 60px solid transparent;
|
||||
border-right: 60px solid transparent;
|
||||
border-top: 50px solid var(--color-background);
|
||||
border-radius: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Every post, on every page, gets this style on its <article> tag
|
||||
Not inside the post holder as this also applies for single pages
|
||||
*/
|
||||
.post {
|
||||
position: relative;
|
||||
width: calc(100% - 8rem);
|
||||
max-width: 1200px;
|
||||
/*max-width: 700px;*/
|
||||
margin: 0rem auto;
|
||||
/*padding-bottom: 4rem;
|
||||
padding-top: 4rem;*/
|
||||
padding: 4rem 0;
|
||||
height: 70%;
|
||||
word-break: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
/* ======= Single pages =========== */
|
||||
.page-template {
|
||||
|
||||
background-color: var(--single-page-bg-color);
|
||||
color: var(--single-page-text-color);
|
||||
// to remove the white space after the footer on pages shorter
|
||||
// than actually would fit into the browser window
|
||||
min-height: calc(100vh - 2em);
|
||||
|
||||
// Tweak the .post wrapper style
|
||||
.post {
|
||||
margin-top: 0;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
// to account for the margin of content elements
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
// Kill that stylish little circle that was on the border
|
||||
.post:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Insert some mad padding up in the header for better spacing
|
||||
.post-header {
|
||||
padding: 60px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Keep large images within the bounds of the post-width
|
||||
.post-content img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/** ========== Site footer ============ */
|
||||
.site-footer {
|
||||
background: var(--footer-color-background);
|
||||
color: var(--footer-color);
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 1.3rem;
|
||||
position: relative;
|
||||
margin: 0rem 0 0 0;
|
||||
padding: 1rem 0;
|
||||
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.site-footer a {
|
||||
color: var(--footer-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.site-footer a:hover {
|
||||
color: var(--sticky-menu-text-color);
|
||||
}
|
||||
|
||||
/* Footer Icons */
|
||||
.icons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* Footer Links */
|
||||
.site-footer .links {
|
||||
text-align: center;
|
||||
|
||||
ol {
|
||||
list-style-type: none;
|
||||
list-style-position: inside;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-left: unset;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user