Skip to content

Commit

Permalink
Merge pull request #115 from TYPO3incubator/task/news-style
Browse files Browse the repository at this point in the history
task/news + templating & frontend styling
  • Loading branch information
pixeldesu authored Apr 12, 2024
2 parents 659b55e + 03e3f26 commit b4bdba5
Show file tree
Hide file tree
Showing 8 changed files with 226 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -1,3 +1,34 @@
body, p, a {
font-family: $font-primary;
}

p {
font-size: toRem(18);
line-height: toRem(30);
font-weight: 300;
}

h2 {
font-family: $font-primary;
font-size: toRem(62);
font-weight: 900;
line-height: toRem(72);
letter-spacing: toRem(1);
color: $color__text__default;
}

h4 {
font-size: toRem(24);
line-height: toRem(36);
font-family: $font-primary;
font-weight: 700;
}

a {
color: $color__primary-red;
text-decoration: none;

&:hover {
border-bottom: 1px solid $color__primary-red;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@
@import "footer-menu";
@import "search";
@import "form";
@import "news";
65 changes: 65 additions & 0 deletions local_packages/football/Resources/Private/Scss/Elements/_news.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
.news {
padding-right: toRem(20);

&--title {
margin-top: toRem(30);
font-size: toRem(24);
font-family: $font-primary;
font-weight: 700;
line-height: toRem(36);
}

&--date {
position: absolute;
width: fit-content;
padding: toRem(2) toRem(20);
margin-top: -34px;
background: $color__primary-red;
color: $color__white;
}

&--image {
height: toRem(275)!important;
width: 100%;
object-fit: cover;
}

&--button {
display: flex;
align-items: center;
width: fit-content;

.icon-arrow {
position: relative;
display: block;
height: toRem(1);
width: toRem(20);
margin-left: toRem(15);
background: $color__primary-red;

&:before, &:after {
content: " ";
position: absolute;
width: 7px;
height: 1px;
background: $color__primary-red ;
}

&:before{
top: toRem(-3);
right: toRem(-1);
transform: rotate(45deg);
}

&:after {
top: toRem(2);
right: toRem(-1);
transform: rotate(-45deg);
}
}
}

&--row {
padding: toRem(40) 0 toRem(60) 0;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,33 @@

<f:render partial="Header/All" arguments="{_all}" />

<div class="row news--row">
<div class="col-lg-4 col-md-6 mb-4">
<div class="news">
<f:image class="news--image" src="EXT:football/Resources/Public/Images/News/15th_charity_tournament.jpg" width="415" />
<p class="news--date">24 Feb 2024</p>
<h4 class="news--title">15th charity tournament </h4>
<p class="news--description">The big soccer spectacle will take place for the 15th time. We have once again invited soccer teams from the region and many have already confirmed their participation. Our charity tournament is also always a meeting point for all soccer fans in the region to get together, chat or even have a beer together.</p>
<a class="news--button" href="/news">Learn more <span class="icon-arrow"></span></a>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="news">
<f:image class="news--image" src="EXT:football/Resources/Public/Images/News/get_ready_for_another_exciting_matches.jpg" width="415" />
<p class="news--date">10 Jun 2024</p>
<h4 class="news--title">Get ready for another exciting match!</h4>
<p class="news--description">On Thursday, 18.04.2023 at 16.30 the time has come, then the current 3rd of the regional league, our FC Bigfoot, meets the rival SurfCamp League. Here is some information about the game: Access to the stadium is possible from 14.30. Catering will be provided.</p>
<a class="news--button" href="/news">Learn more <span class="icon-arrow"></span></a>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="news">
<f:image class="news--image" src="EXT:football/Resources/Public/Images/News/our_new_supporter_lunamedia.jpg" width="415" />
<p class="news--date">13 April 2024</p>
<h4 class="news--title">Our new supporter: Luna Media</h4>
<p class="news--description">A Powerful Partnership: We're thrilled to welcome Luna Media as our newest sponsor! Their support promises to elevate our club to even greater heights, both on and off the field.</p>
<a class="news--button" href="/news">Learn more <span class="icon-arrow"></span></a>
</div>
</div>
</div>
</html>
100 changes: 100 additions & 0 deletions local_packages/football/Resources/Public/Css/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -10725,6 +10725,39 @@ a {
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

p {
font-size: 1.125rem;
line-height: 1.875rem;
font-weight: 300;
}

h2,
.h2 {
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 3.875rem;
font-weight: 900;
line-height: 4.5rem;
letter-spacing: 0.0625rem;
color: #002345;
}

h4,
.h4 {
font-size: 1.5rem;
line-height: 2.25rem;
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 700;
}

a {
color: #FF3232;
text-decoration: none;
}

a:hover {
border-bottom: 1px solid #FF3232;
}

.hero {
position: relative;
height: 100vh;
Expand Down Expand Up @@ -10931,4 +10964,71 @@ a {

textarea.form-control {
min-height: 8.875rem;
}

.news {
padding-right: 1.25rem;
}

.news--title {
margin-top: 1.875rem;
font-size: 1.5rem;
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 700;
line-height: 2.25rem;
}

.news--date {
position: absolute;
width: fit-content;
padding: 0.125rem 1.25rem;
margin-top: -34px;
background: #FF3232;
color: #ffffff;
}

.news--image {
height: 17.1875rem !important;
width: 100%;
object-fit: cover;
}

.news--button {
display: flex;
align-items: center;
width: fit-content;
}

.news--button .icon-arrow {
position: relative;
display: block;
height: 0.0625rem;
width: 1.25rem;
margin-left: 0.9375rem;
background: #FF3232;
}

.news--button .icon-arrow:before,
.news--button .icon-arrow:after {
content: " ";
position: absolute;
width: 7px;
height: 1px;
background: #FF3232;
}

.news--button .icon-arrow:before {
top: -0.1875rem;
right: -0.0625rem;
transform: rotate(45deg);
}

.news--button .icon-arrow:after {
top: 0.125rem;
right: -0.0625rem;
transform: rotate(-45deg);
}

.news--row {
padding: 2.5rem 0 3.75rem 0;
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit b4bdba5

Please sign in to comment.