omegamma/assets/scss/components/blocks/card.scss

/**
 * Omegamma - Hugo theme for ad5001.eu and related websites.
 * Copyright (C) 2021  Ad5001
 * 
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

// Cards used on main website
.card {
    --angle: 0deg;
    transition: box-shadow 0.2s;
    box-shadow: 0px 0px 2px 0px #000000;
    
    // Specifiying gradient orientation
    &.topleft2bottomright {
        --angle: 135deg;
    }
    &.topright2bottomleft {
        --angle: 225deg;
    }
    &.top2bottom {
        --angle: 180deg;
    }
    
    // Gradient colors
    &.yellow {
        background: linear-gradient(var(--angle, 0deg), rgba(255,255,204,1) 0%, rgba(255,242,107,1) 100%);
    }
    &.blue {
        background: linear-gradient(var(--angle, 0deg), rgba(204,253,255,1) 0%, rgba(107,250,255,1) 100%); 
    }
    &.red {
        background: linear-gradient(var(--angle, 0deg), rgba(255,204,204,1) 0%, rgba(255,107,107,1) 100%); 
    }
    &.green {
        background: linear-gradient(var(--angle, 0deg), rgba(206,255,204,1) 0%, rgba(124,255,107,1) 100%);
    }
    &.purple {
        background: linear-gradient(var(--angle, 0deg), rgba(229,181,255,1) 0%, rgba(210,114,255,1) 100%);
    }
    &.tea {
        background: linear-gradient(var(--angle, 0deg), rgba(44,181,107,0.3) 0%, rgba(44,181,107,0.8) 100%);
    }
    &.ebon {
        background: linear-gradient(var(--angle, 0deg), #032B67 0%, #040D21 100%);
    }
    
    // For dark background cards
    &.text-white :not([role=button]) > a {
        /* unvisited link */
        &:link, &:visited {
            color: #00c8d7;
        }
        &:hover {
            color: #00c8d7;
        }
    }
}