/*!
Theme Name: One
Author: Victor Andeloci
Author URI: https://github.com/victorandeloci
Version: 2.4.3
*/
@import '../plugins/css/normalize';
@import '../plugins/css/splide.min';
@import '../plugins/css/plyr';
@font-face {
font-family: Agency;
src: url(assets/fonts/agency.ttf);
}
@font-face {
font-family: Myriad;
src: url(assets/fonts/MyriadPro-Regular.otf);
}
@font-face {
font-family: Champagne;
src: url(assets/fonts/Champagne_Limousines.ttf);
}
@font-face {
font-family: ChampagneBold;
src: url(assets/fonts/Champagne_Limousines_Bold.ttf);
}
:root {
--orange: #ff8f57;
--darkGrey: #1C1C1C;
--white: #fcfcfc;
--pink: #eb707b;
--brown: #332429;
}
* {
box-sizing: border-box;
}
html {
body {
background: var(--darkGrey);
background: linear-gradient(to bottom, #000, var(--darkGrey) 5%);
color: var(--white);
overflow-x: hidden;
font-family: Myriad;
--plyr-color-main: var(--orange);
.container {
width: 90%;
margin: 0 auto;
}
.row {
display: flex;
.column {
width: 50%;
}
}
audio {
width: 100% !important;
margin-bottom: 1rem;
}
.plyr {
width: 100% !important;
margin-bottom: 1rem;
.plyr__controls {
padding-left: 0;
padding-right: 0;
background-color: transparent;
}
}
a {
color: var(--orange);
}
.subtitle {
font-family: Agency;
font-weight: lighter;
text-transform: uppercase;
margin-top: 0;
padding-left: .5rem;
border-left: solid 2px var(--orange);
&.dark {
color: var(--darkGrey);
}
&.center {
text-align: center;
border-left: none;
border-bottom: solid 2px var(--orange);
padding-left: 0;
padding-bottom: .2rem;
width: min-content;
margin: 0 auto 1rem auto;
}
}
.tags-container {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: .5rem;
.tag {
width: max-content !important;
color: #fff !important;
background-color: var(--pink);
padding: .1rem .5rem;
border-radius: .5rem;
font-size: 75%;
text-decoration: none;
transition: ease-in-out .2s;
&:hover {
text-decoration: none;
background-color: #c75f68;
}
}
}
.social-links {
display: flex;
flex-wrap: nowrap;
gap: 1rem;
margin-bottom: 2rem;
a {
&.facebook {
svg {
fill: #4267b2 !important;
}
}
&.twitch {
svg {
fill: #6441a5 !important;
}
}
&.twitter {
svg {
fill: #50abf1 !important;
}
}
&.youtube {
svg {
fill: #d4101d !important;
}
}
&.instagram {
svg {
fill: #9a27a2 !important;
}
}
&.telegram {
svg {
fill: #0088cc !important;
}
}
&.tiktok {
svg {
fill: #ddd !important;
}
}
svg {
height: 2rem;
}
}
}
.podcast-links {
display: flex;
flex-wrap: nowrap;
gap: 1rem;
margin-bottom: 1rem;
a {
text-decoration: none;
&.spotify {
svg {
fill: #1ed760;
}
}
&.google {
svg {
fill: #4285f4;
}
}
&.rss {
svg {
fill: #f8991c;
}
}
&.apple {
svg {
fill: #AB4CDE;
}
}
&.deezer {
svg {
fill: #ef5466;
}
}
svg {
height: 2rem;
}
}
}
.content {
padding: 1rem;
line-height: 1.35;
--plyr-color-main: var(--orange);
h1,
h2,
h3,
h4 {
font-family: Agency;
text-transform: uppercase;
font-weight: lighter;
}
h2,
h3,
h4 {
opacity: .85;
}
p,
li {
opacity: .85;
}
a {
color: var(--orange);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
iframe {
width: 100% !important;
}
}
#commentsContainer {
padding-top: 2rem;
.wp-comments-container {
color: var(--darkGrey);
.comment-item {
margin-bottom: 1rem;
.author {
display: flex;
align-items: center;
img {
width: 3rem;
height: 3rem;
border: solid 2px #fff;
border-radius: 2rem;
object-fit: cover;
object-position: center;
margin-right: 1rem;
}
.name-date {
.name {
margin: 0;
color: var(--pink);
}
.date {
margin: 0;
opacity: .5;
}
}
}
p {
opacity: .75;
font-size: 90%;
line-height: 1.3;
}
}
}
}
.info-board {
width: 100%;
background-color: var(--darkGrey);
border-right: solid 2px var(--orange);
border-radius: .5rem;
padding: 1rem;
h1 {
margin: .5rem 0 1rem 0;
font-size: 180%;
color: var(--white);
padding-left: .5rem;
border-left: solid 2px var(--orange);
font-family: Agency;
text-transform: uppercase;
}
.game-cover {
width: 100%;
height: auto;
border-radius: .5rem;
background-position: center;
background-size: cover;
margin-bottom: 1rem;
}
.info-content {
span {
color: var(--orange);
font-size: 85%;
}
p {
color: var(--white);
margin: 0;
opacity: .75;
}
hr {
opacity: 0.3;
margin-bottom: 1rem;
}
}
}
.post-details {
margin-bottom: 1rem;
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
gap: .5rem;
opacity: .5;
span {
color: var(--darkGrey);
margin-right: 1rem;
line-height: 0.5;
}
svg {
width: .75rem;
height: .75rem;
fill: var(--darkGrey);
}
}
.post-list-container {
width: 100%;
.post-card {
display: block;
width: 100%;
margin-bottom: 1rem;
&.podcast-ep {
a.thumb {
display: inline-block;
height: 0;
padding-top: 100%;
}
.content {
top: -.5rem;
position: relative;
}
}
a.thumb {
display: block;
width: 100%;
height: 14rem;
border-top-left-radius: .5rem;
border-top-right-radius: .5rem;
background-position: center;
background-size: cover;
}
.content {
background-color: var(--white);
color: var(--darkGrey);
border-bottom-left-radius: .5rem;
border-bottom-right-radius: .5rem;
a {
&:hover {
text-decoration: none;
}
h2 {
margin-bottom: 0;
margin-top: .5rem;
color: var(--darkGrey);
}
}
.post-details {
margin-top: .5rem;
}
}
}
}
#pagination {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
a {
width: 2rem;
height: 2rem;
display: grid;
place-items: center;
text-decoration: none;
color: var(--white);
background-color: var(--orange);
padding: .5rem;
border-radius: 2rem;
span {
width: .75rem;
height: auto;
&.pagination-before {
content: url(assets/img/arrow-left.svg);
}
&.pagination-next {
content: url(assets/img/arrow-right.svg);
}
}
}
}
.loader {
.lds-dual-ring {
display: inline-block;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: .75rem;
height: .75rem;
border-radius: 50%;
border: 2px solid var(--white);
border-color: var(--white) transparent var(--white) transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}
.podcast-items {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
gap: 3%;
&.pch-list {
.podcast-item {
&:first-child {
width: 48.5%;
margin-bottom: .5rem;
background-color: transparent;
a.podcast-ep {
border-bottom-left-radius: .5rem;
border-bottom-right-radius: .5rem;
}
}
}
}
.podcast-item {
width: 48.5%;
margin-bottom: .5rem;
font-family: Myriad;
border-radius: .5rem;
&:first-child {
width: 100%;
background-color: var(--white);
color: var(--darkGrey);
margin-bottom: 1rem;
a.podcast-ep {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.content {
h2 {
margin-top: .5rem;
}
}
}
a {
&.podcast-ep {
background-size: cover;
background-position: center;
display: inline-block;
width: 100%;
height: 0;
padding-top: 100%;
border-radius: .5rem;
}
}
}
}
.card-player {
width: 90%;
margin: 0 auto;
background-color: var(--white);
border-radius: .5rem;
color: var(--darkGrey);
box-shadow: 2px 2px 8px rgba(0, 0, 0, .5);
.row {
width: 100%;
border-radius: .5rem;
gap: .5rem;
.column {
&:nth-child(1) {
border-top-left-radius: .5rem;
border-bottom-left-radius: .5rem;
width: 6rem;
min-height: 6rem;
background-size: cover;
background-position: center;
}
&:nth-child(2) {
width: calc(100% - 6rem);
padding: .5rem .5rem .5rem 0;
display: grid;
place-items: center;
.tags-container {
display: none;
}
h3 {
width: 100%;
font-family: Agency;
text-transform: uppercase;
font-weight: lighter;
font-size: 110%;
margin: 0 0 .5rem 0;
}
.plyr,
audio {
margin-bottom: 0;
.plyr__controls {
padding: 0;
}
}
}
}
}
}
header {
padding: 1rem 0;
&.back-filled {
background-color: #000;
padding: .5rem 0;
.custom-logo-link {
img {
width: 60%;
}
}
}
&.orange {
background-color: #da7b52;
padding-bottom: 0;
}
.custom-logo-link {
display: grid;
place-items: center;
width: 100%;
img {
width: 80%;
height: auto;
}
}
}
#mainNav {
width: 100%;
background-color: #000;
border-top-left-radius: .5rem;
border-top-right-radius: .5rem;
position: fixed;
z-index: 998;
bottom: 0;
left: 0;
display: flex;
justify-content: space-evenly;
box-shadow: 1px -3px 10px rgba(0, 0, 0, 0.5);
a {
padding: .5rem 0;
&.active {
svg {
fill: var(--orange);
}
}
svg {
fill: #5e5e5e;
height: 1.5rem;
}
}
}
section {
&#highlights {
padding: 1rem 0 3rem 0;
.title {
.highlight-controllers {
display: none;
}
}
.highlight-container {
width: 100%;
overflow-x: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
scroll-behavior: smooth;
&::-webkit-scrollbar {
display: none;
}
.items {
width: max-content;
display: flex;
gap: 1rem;
.highlight-item {
width: 18rem;
height: 68vh;
position: relative;
background-size: cover;
background-position: center;
border-radius: .5rem;
color: var(--white);
text-decoration: none;
font-family: Myriad;
user-select: none;
&:first-child {
margin-left: 1rem;
}
&:last-child {
margin-right: 1rem;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to top, #000 25%, transparent);
z-index: 1;
border-radius: .5rem;
transition: ease-in-out .3s;
opacity: 0.85;
&.fixed {
background: linear-gradient(130deg, #000, transparent);
}
}
svg {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
fill: var(--white);
}
.content {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
h3 {
margin-top: 0;
font-family: Agency;
text-transform: uppercase;
opacity: 1;
font-size: 130%;
}
hr {
width: 3rem;
height: 2px;
border: none;
background-color: var(--orange);
margin: 0 0 1rem 0;
transition: ease-in-out .3s;
}
p {
margin: 0;
opacity: .75;
}
}
}
}
}
}
&#podcast {
padding: 1rem 0 3rem 0;
.container {
.selector {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #393939;
border-radius: 2rem;
padding: 0 1rem;
margin-bottom: 2rem;
.podcast-select {
background-color: transparent;
border: none;
color: #bbb;
padding: .5rem 0;
width: 85%;
outline: 0;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
option {
color: var(--darkGrey);
}
}
svg {
width: 1rem;
height: 1rem;
fill: #fff;
}
}
.pagination-container {
width: 100%;
display: grid;
place-items: center;
margin-top: 1rem;
button {
min-width: 10rem;
padding: .5rem 1rem;
background-color: var(--orange);
border-radius: 2rem;
border: none;
color: var(--white);
display: grid;
place-items: center;
cursor: pointer;
transition: ease-in-out .3s;
&:hover {
background-color: var(--pink);
}
}
}
}
}
&.highlight-event {
margin-bottom: 2rem;
.container {
a.event-container {
display: block;
padding: 5em 0;
text-decoration: none;
border-radius: .5rem;
background-size: cover;
background-position: center;
background-blend-mode: overlay;
background-color: rgba(0, 0, 0, .5);
background-repeat: no-repeat;
transition: ease-in-out 0.3s;
h2 {
text-align: center;
font-size: 150%;
margin: 0;
color: #fff;
text-decoration: none;
font-family: Agency;
text-transform: uppercase;
}
hr {
margin-bottom: 2em;
width: 2em;
height: 3px;
background-color: var(--orange);
border: none;
}
p {
&.description {
color: #ddd;
text-align: center;
text-decoration: none;
font-size: 90%;
margin-bottom: 0;
}
}
.instagram-posts {
display: flex;
justify-content: space-between;
iframe {
width: 49% !important;
min-width: unset !important;
max-width: unset !important;
}
}
}
}
}
&#social {
padding-bottom: 1rem;
}
&#videos {
margin-bottom: 2rem;
.container {
.sb_youtube {
.sby_items_wrap {
padding: 0 !important;
display: flex;
flex-wrap: wrap;
gap: 4%;
.sby_item {
width: 48%;
padding: 0 !important;
margin-bottom: 1rem;
}
}
}
}
}
&#reviews {
padding: 1rem 0 3rem 0;
}
&#podcast_category_highlight {
margin-bottom: 3rem;
.container {
background-color: #000;
border-right: solid 2px var(--orange);
border-radius: .5rem;
padding: 2rem 1rem 1rem;
h2.subtitle {
margin-bottom: .5rem;
}
.category-description {
opacity: .75;
font-size: 90%;
margin-top: 0;
margin-bottom: 2rem;
}
}
}
}
main {
&.post,
.page-content {
background-color: var(--white);
padding: 2rem 0 1rem 0;
&.page {
&.not-found {
#highlights {
.subtitle {
color: var(--darkGrey);
}
}
}
.container {
.content {
padding: 0;
h1 {
border-left: solid 2px var(--orange);
padding-left: .5rem;
}
}
}
}
&.about-team {
padding-bottom: 0;
#team {
padding-bottom: 1rem;
background-color: var(--darkGrey);
.team-title {
background-color: var(--white);
padding-bottom: 1rem;
.container {
h2 {
margin-bottom: 0;
}
}
}
.container {
&.team-container {
padding: 2rem 0 1rem 0;
}
h2 {
&.subtitle {
color: var(--darkGrey);
}
}
.team-list {
display: flex;
flex-wrap: wrap;
align-items: center;
align-items: flex-start;
justify-content: center;
gap: 4%;
.team-member {
width: 48%;
display: grid;
place-items: center;
margin-bottom: 1rem;
img {
width: 80%;
height: auto;
border-radius: 50%;
}
h4 {
text-align: center;
font-family: Agency;
font-weight: lighter;
text-transform: uppercase;
margin-bottom: 0;
}
p {
margin: 0;
text-align: center;
opacity: .75;
font-size: 90%;
}
.links {
margin: 1rem 0;
display: flex;
flex-wrap: nowrap;
gap: 1rem;
a {
opacity: .75;
display: grid;
place-items: center;
svg {
height: 1rem;
fill: var(--orange);
}
}
}
}
}
}
.thumb {
width: 100%;
height: 11rem;
background-size: cover;
background-position: center;
position: relative;
.decoration {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, var(--darkGrey), transparent 15%);
}
}
}
}
&.event {
background-blend-mode: overlay;
background-color: transparent;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: auto 100%;
background-color: rgba(0, 0, 0, 0.75);
.container {
.event-details {
.event-logo {
height: 3rem;
width: auto;
}
.event-post-details {
h1 {
font-size: 150%;
font-family: Agency;
font-weight: lighter;
text-transform: uppercase;
}
hr {
margin-bottom: 1em;
margin-left: 0;
width: 3em;
height: 2px;
background-color: var(--orange);
border: none;
}
p {
line-height: 1.35;
}
}
}
.content {
margin-top: 2rem;
padding: 1rem;
border-radius: .5rem;
background-color: var(--white);
.subtitle {
margin-top: 2rem;
}
.event-podcast-content.podcast-items {
.podcast-item {
&:first-child {
a.podcast-ep {
border-bottom-left-radius: .5rem;
border-bottom-right-radius: .5rem;
}
}
}
}
.instagram-posts {
width: 100%;
iframe {
width: 100% !important;
min-width: unset !important;
max-width: unset !important;
}
}
}
}
}
.container {
img {
width: 100%;
height: auto;
user-select: none;
border-radius: .5rem;
&.size-thumbnail {
width: auto;
}
}
iframe {
width: 100% !important;
&.embed-video {
height: 28rem !important;
}
}
.content {
color: var(--darkGrey);
padding: 1rem 0 0 0;
h1 {
font-size: 180%;
margin-top: .5rem;
}
.wp-block-image {
border-radius: .5rem;
overflow: hidden;
background-color: #e7e7e7;
img {
border-radius: 0;
}
a {
pointer-events: none;
}
figcaption {
opacity: .5;
font-size: 85%;
margin: 0;
padding: 1rem;
}
}
.splide {
margin-bottom: 1rem;
.wp-block-image {
max-height: 20rem;
cursor: zoom-in;
}
}
}
.game-score {
margin: 1rem 0;
padding: .5rem 1rem;
border-left: solid 2px var(--orange);
border-radius: .5rem;
background-color: #e7e7e7;
display: flex;
align-items: center;
gap: 1rem;
.score-container {
width: 3rem;
height: 3rem;
background-size: cover;
background-position: center;
display: grid;
place-items: center;
span {
color: var(--white);
text-align: center;
font-size: 100%;
padding-top: .2rem;
padding-left: .2rem;
user-select: none;
font-family: Agency;
}
}
.score-definition {
p {
color: var(--darkGrey);
font-style: italic;
font-weight: lighter;
}
}
}
}
}
&#search {
padding: 1rem 0;
}
&#tag {
padding: 1rem 0;
}
&#category {
padding: 1rem 0;
}
&#rpg {
.banner {
width: 100%;
min-height: 60vh;
position: relative;
background-position: center;
background-size: cover;
background-attachment: fixed;
display: grid;
place-items: center;
.decoration {
width: 100%;
height: 8rem;
position: absolute;
background-size: 100%;
background-repeat: no-repeat;
&.top {
top: 0;
left: 0;
height: 2.5rem;
background-position: 100% bottom;
filter: drop-shadow(2px 1rem 4px rgba(0, 0, 0, 0.3));
}
&.bottom {
bottom: 0;
left: 0;
background-position: bottom;
filter: drop-shadow(2px -8px 1rem rgba(0, 0, 0, 0.5));
}
}
img {
width: 100%;
height: auto;
position: relative;
top: -1rem;
filter: drop-shadow(2px 8px 1rem #000);
}
}
.logo-container {
width: 100%;
padding-bottom: 1rem;
background-color: #322428;
position: relative;
h1 {
font-family: Champagne;
color: #fff;
font-weight: lighter;
width: 100%;
text-align: center;
font-size: 300%;
margin: 0;
position: relative;
top: -1rem;
span {
font-family: ChampagneBold;
color: var(--orange);
}
}
.podcast-links {
justify-content: center;
}
.container {
width: 90%;
margin: 0 auto;
p {
margin: 0;
text-align: center;
opacity: 0.85;
}
}
}
.main-post-container {
width: 100%;
padding: 1rem 0 3rem 0;
position: relative;
background-color: #322428;
&::after {
content: " ";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1rem;
background: linear-gradient(to top, #000, #322428);
}
}
.post-list {
position: relative;
background-color: #000;
padding: 2rem 0 1rem 0;
.subtitle {
&:not(:first-child) {
margin-top: 2rem;
}
}
.podcast-items {
.podcast-item {
&:first-child {
width: 48.5%;
margin-bottom: .5rem;
background-color: unset;
a {
border-bottom-left-radius: .5rem;
border-bottom-right-radius: .5rem;
}
}
}
}
}
.page-content {
padding-top: 0;
}
}
}
#image_show {
position: fixed;
z-index: 999;
width: 100%;
height: 100vh;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .7);
display: none;
place-items: center;
cursor: zoom-out;
&.show {
display: grid;
}
img {
width: 90%;
height: auto;
max-height: 85vh;
object-fit: cover;
border-radius: .5rem;
}
}
footer {
background-color: #000;
padding: 2rem 0 4rem 0;
.container {
#searchform {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--darkGrey);
border-radius: 2rem;
input {
background-color: transparent;
border: none;
color: #fff;
padding: .5rem 1rem;
width: 85%;
outline: 0;
}
button {
background-color: transparent;
border: none;
display: grid;
place-items: center;
padding-right: 1rem;
svg {
width: 1rem;
height: 1rem;
fill: #fff;
}
}
}
.menu {
text-align: center;
padding: 2rem 0;
display: flex;
flex-direction: column;
align-items: center;
li {
list-style: none;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
align-items: center;
&:last-child {
margin-bottom: 0;
}
a {
font-family: Agency;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 120%;
margin-bottom: 1rem;
display: block;
border-bottom: solid 2px var(--orange);
width: max-content;
}
.sub-menu {
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
li {
margin-bottom: 0;
a {
font-family: Myriad;
color: #bbb;
text-transform: none;
font-size: 100%;
margin-bottom: 0;
border-bottom: none;
}
}
}
}
}
.credits {
text-align: center;
a {
color: var(--orange);
text-decoration: none;
}
}
.social-container {
width: 100%;
.social-links {
width: 100%;
justify-content: center;
}
}
}
}
}
}
@import './responsive';
|
Download
