Project page layout

[chriswiesner]

It would be great if you could include a layout template for show-casing a single project. (Project detail page)

[serg]

Hello @chriswiesner,

Thank you for your interest to Yourfolio theme! Yeah, it could be useful to have. This theme was created to be simple as much as possible. In this case I didn't include the ability to define separate pages for the projects. Probably, it could be helpful to add this option and improve the current version of theme. Its needs a time for think of how it should looks. Unfortunately, I couldn't give a promise about how and when it will be done. But I will keep it in list.

Thank you for sharing your idea about enhancement of this theme!

[MUWalter]

Hi there, great template! I also would appreciate a small page for a project description with pictures and the ability to implement videos. Unfortunately I don't know how to do that.

[serg]

Hello @MUWalter,

Thank you for your feedback about this theme! I very appreciate this action! I will take this in consideration.

By the way, you could add this feature on your side. For this the creation of layout and styles are needed. The rough plan is:

• copy the layouts/single.html file into layouts/projects/single.html folder. Modify it for your use case.
• add corresponding folder inside content with files (e.g. content/projects/strato.md).
• add styles for content items (paragraphs, lists, images, videos, etc...) on this layout. Your styles could be merged with static/app.css (please unminify this file before adding updates).

Hope, it was helpful. Have a great day!

[MUWalter]

Hello @MUWalter,

Thank you for your feedback about this theme! I very appreciate this action! I will take this in consideration.

By the way, you could add this feature on your side. For this the creation of layout and styles are needed. The rough plan is:

• copy the layouts/single.html file into layouts/projects/single.html folder. Modify it for your use case.
• add corresponding folder inside content with files (e.g. content/projects/strato.md).
• add styles for content items (paragraphs, lists, images, videos, etc...) on this layout. Your styles could be merged with static/app.css (please unminify this file before adding updates).

Hope, it was helpful. Have a great day!

Thank you very much. I managed to implement a project page.

[chriswiesner]

@MUWalter would be great if you could share it and do a PR here

[MUWalter]

Sure, actually I tried to, but I didn’t understand how this works. It was way easier to do the modifications as Sergey suggested. As soon as I will have time to dig deeper into github, I will post this. But it was really not too difficult.

Am 10.09.2020 um 08:40 schrieb Christoph Wiesner [email protected]:

@MUWalter https://github.com/MUWalter would be great if you could share it and do a PR here

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/serg/yourfolio/issues/2#issuecomment-690023683, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHEVHT2J73UVIA2F2LHBSITSFBYGZANCNFSM4G7SPAUQ.

[MUWalter]

The other thing I am struggling with at the moment is a footer for imprint and data privacy. Any ideas how to do this?

Am 10.09.2020 um 08:40 schrieb Christoph Wiesner [email protected]:

@MUWalter https://github.com/MUWalter would be great if you could share it and do a PR here

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/serg/yourfolio/issues/2#issuecomment-690023683, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHEVHT2J73UVIA2F2LHBSITSFBYGZANCNFSM4G7SPAUQ.

[serg]

Hello,

@chriswiesner, @MUWalter thanks to all for your comments! Seems, like this so actual to have layout like for project items, blog posts, etc... I plan to apply more effort on this. Unfortunately, I haven't time for this at current moment, but it worth for consideration definitely.

@MUWalter regarding to footer. Please see how header partial was implemented and included into layouts/index.html and layouts/_default/single.html.

[MUWalter]

Hello @MUWalter, Thank you for your feedback about this theme! I very appreciate this action! I will take this in consideration.

By the way, you could add this feature on your side. For this the creation of layout and styles are needed. The rough plan is:

• copy the layouts/single.html file into layouts/projects/single.html folder. Modify it for your use case.
• add corresponding folder inside content with files (e.g. content/projects/strato.md).
• add styles for content items (paragraphs, lists, images, videos, etc...) on this layout. Your styles could be merged with static/app.css (please unminify this file before adding updates).

Hope, it was helpful. Have a great day!

Dear @serg,

there is a bug that really drives me crazy. I have no idea why it occurs. Maybe you can have a look at it. I added the project page "Strato" as you described above. Now when you click at the start page on the Strato picture, you'll get redirected to /projects/strato/ . So far, so good.

Start page

Project page

For GDPR reasons I prefer to host the Google fonts myself on my server. I installed the Open Sans webfonts to /static/fonts/ and changed the /themes/yourfolio/assets/scss/_fonts.scss to following using https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin

/* open-sans-regular - latin / @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../fonts/open-sans-v18-latin-regular.eot'); / IE9 Compat Modes / src: local(''), url('../fonts/open-sans-v18-latin-regular.eot?#iefix') format('embedded-opentype'), / IE6-IE8 / url('../fonts/open-sans-v18-latin-regular.woff2') format('woff2'), / Super Modern Browsers / url('../fonts/open-sans-v18-latin-regular.woff') format('woff'), / Modern Browsers / url('../fonts/open-sans-v18-latin-regular.ttf') format('truetype'), / Safari, Android, iOS / url('../fonts/open-sans-v18-latin-regular.svg#OpenSans') format('svg'); / Legacy iOS / } / open-sans-600 - latin / @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('../fonts/open-sans-v18-latin-600.eot'); / IE9 Compat Modes / src: local(''), url('../fonts/open-sans-v18-latin-600.eot?#iefix') format('embedded-opentype'), / IE6-IE8 / url('../fonts/open-sans-v18-latin-600.woff2') format('woff2'), / Super Modern Browsers / url('../fonts/open-sans-v18-latin-600.woff') format('woff'), / Modern Browsers / url('../fonts/open-sans-v18-latin-600.ttf') format('truetype'), / Safari, Android, iOS / url('../fonts/open-sans-v18-latin-600.svg#OpenSans') format('svg'); / Legacy iOS / } / open-sans-700 - latin / @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('../fonts/open-sans-v18-latin-700.eot'); / IE9 Compat Modes / src: local(''), url('../fonts/open-sans-v18-latin-700.eot?#iefix') format('embedded-opentype'), / IE6-IE8 / url('../fonts/open-sans-v18-latin-700.woff2') format('woff2'), / Super Modern Browsers / url('../fonts/open-sans-v18-latin-700.woff') format('woff'), / Modern Browsers / url('../fonts/open-sans-v18-latin-700.ttf') format('truetype'), / Safari, Android, iOS / url('../fonts/open-sans-v18-latin-700.svg#OpenSans') format('svg'); / Legacy iOS */ }

Now here's whats really weird... The fonts on the start page are rendered properly. But as soon as I click on the Strato project page, the fonts are rendered bold. I really don't understand why, because the strato project page uses the same module "text_groups".

Start page with local fonts installed

Project page with local fonts installed

The funny thing is: This only happens in Safari and Mozilla; In chrome this issue doesn't appear. Maybe this helps...

I hope you understand what I mean.

Cheers, Mark

[MUWalter]

Please find the modified page with the project page and the local installed fonts: website standard.zip

[serg]

Hello Mark, The google-webfonts-helper is great tool for getting font files from Google. But we need to set the Customize folder prefix field as /fonts/, because all content inside /static/ folder related to the root of website (e.g. https://domain.name/fonts/). Also I added font-display: swap; css rule for every font variant inside _fonts.scss for improving font loading.

Here is the content of _fonts.scss file:

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/open-sans-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/open-sans-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/open-sans-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/open-sans-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/open-sans-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/open-sans-v18-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/open-sans-v18-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/open-sans-v18-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/open-sans-v18-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/open-sans-v18-latin-600.woff') format('woff'), /* Modern Browsers */
       url('/fonts/open-sans-v18-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/open-sans-v18-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/open-sans-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/open-sans-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/open-sans-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/open-sans-v18-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/open-sans-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/open-sans-v18-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}

[MUWalter]

Great, thank you very much! It works perfectly now.

[serg]

Glad to help! One quick note: we use /fonts/ because fonts injected inside page layout as critical styles. The ../fonts/ path will work if we move the font definition (@import "fonts";) to the /assets/scss/app.scss.