diff --git a/sass/_content.scss b/sass/_content.scss index bd3da2bc2a845d66d0ec5cc85e55bc83e615a611..3e1fdc90ee78d3c48d1ce7ed99dff76555acec7e 100644 --- a/sass/_content.scss +++ b/sass/_content.scss @@ -8,3 +8,8 @@ .roboto-black { font-family: 'Roboto Black'; } + +.media-v-centered { + @extend .media; + align-items: center; +} diff --git a/sass/_teckids.scss b/sass/_teckids.scss index fa86a042303d22ed19db27a41180a1c219d51c3b..ddebd7ada6b27fe76eaa9194855c9e251ef823ba 100644 --- a/sass/_teckids.scss +++ b/sass/_teckids.scss @@ -19,7 +19,12 @@ $project-colors: ( $project-colors-fonts: ( hack-n-fun: #ffffff, schul-frei: #ffffff, - indiedact: #000000, + indiedact: #1c1f33, +); +$project-colors-title-fonts: ( + hack-n-fun: rgba(white, 0.7), + schul-frei: rgba(white, 0.7), + indiedact: rgba(black, 0.5), ); .menu-project-section { @@ -31,6 +36,9 @@ $project-colors-fonts: ( background-color: map-get($project-colors, $project); color: map-get($project-colors-fonts, $project); } + .project-title-#{$project} { + color: map-get($project-colors-title-fonts, $project); + } #menu-project-section-#{$project} { border-color: map-get($project-colors, $project); diff --git a/templates/menu/projects.html b/templates/menu/projects.html index 60cb6070a647cc3e4355e931307b6dd5860118e5..5b844640b1a2a61f82d47f62814324305b4ebba4 100644 --- a/templates/menu/projects.html +++ b/templates/menu/projects.html @@ -3,14 +3,13 @@ <div class="container is-fluid"> <div class="columns"> {% for project in projects.items %} - <section - class="column menu-project-section" - id="menu-project-section-{{ project.slug }}" - > + <section class="column menu-project-section" id="menu-project-section-{{ project.slug }}"> {% set section = get_section(path = "projekte/" ~ project.slug ~ "/_index.md") %} - <h1 class="title is-6 is-mega-menu-title"><a href="{{ section.permalink }}">{{ section.title }}</a></h1> - <strong class="is-mega-menu-subtitle">{{ section.description }}</strong> + <h1 class="title is-6 is-mega-menu-title"><a href="{{ section.permalink }}"> + <p> {{ section.title }} </p> + <p class="is-4">{{ section.description }}</p> + </a></h1> {% for page in project.pages %} <a class="navbar-item" href="{{ page.permalink }}"> diff --git a/templates/project.html b/templates/project.html index 52026d9aa6944470fb9b3cd002ad08eb277cf342..2df61a5f3cfceba1109f9548d0c07c8d6cc2d360 100644 --- a/templates/project.html +++ b/templates/project.html @@ -16,25 +16,26 @@ <section class="hero hero-main is-fullheight-with-navbar project-background-{{ section.extra.project_slug }} roboto-black"> <div class="hero-body"> <div class="container"> - <div class="columns is-vcentered"> - <div class="column is-one-third circle-bg"> - <img class="is-1by1" src="/{{ section.extra.title_icon }}" alt=""> - </div> - <div class="column is-two-fifth project-title"> + <!-- <div class="columns is-vcentered"> --> + <!-- <div class="column is-two-fifth project-title"> --> <div class="columns"> - <div class="column"> + <div class="column project-title-{{ section.extra.project_slug }}"> <h1 class="title is-1">{{ section.title }}</h1> <p class="title is-3"> {{ section.description }} </p> - </div> - </div> + <!-- </div> --> + <!-- </div> --> </div> </div> - <div class="container"> + <div class="container"> + <div class="columns is-vcentered"> + <div class="column is-one-third circle-bg"> + <img class="is-1by1" src="/{{ section.extra.title_icon }}" alt=""> + </div> <div class="project-theses"> {% for thesis in section.extra.theses %} - <article class="media"> + <article class="media-v-centered"> <figure class="media-left"> <p class="image is-64x64"> <img src="/{{ section.extra.list_icon }}" /> @@ -45,6 +46,7 @@ </div> </article> {% endfor %} + </div> </div> </div> </div>