omegamma/assets/scss/apps.scss

100 lines
2.7 KiB
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/>.
*/
// CSS specific to the apps website.
#appslist {
width: Min(108em, 100vw);
}
@media screen and (max-width: 108em) {
#appslist {
width: 81em;
}
}
@media screen and (max-width: 81em) {
#appslist {
width: 54em;
}
}
@media screen and (max-width: 54em) {
#appslist {
width: Min(27em, 100vw);
}
}
.app-download {
--border: solid 1px var(--primary-color);
--border-radius: 1rem;
border-right: var(--border);
border-bottom: var(--border);
&:first-of-type {
border-left: var(--border);
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
.app-download-platform {
border-top-left-radius: var(--border-radius);
}
}
&:last-of-type {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
.app-download-platform {
border-top-right-radius: var(--border-radius);
}
}
.app-download-platform {
line-height: 3;
font-size: x-large;
}
}
@media screen and (max-width: 700px) {
.app-download {
border-left: var(--border);
&:first-of-type {
border-top-left-radius: var(--border-radius) !important;
border-top-right-radius: var(--border-radius) !important;
border-bottom-left-radius: 0;
& .app-download-platform {
border-top-left-radius: var(--border-radius) !important;
border-top-right-radius: var(--border-radius) !important;
}
}
&:last-of-type {
border-top-right-radius: 0;
border-bottom-left-radius: var(--border-radius) !important;
border-bottom-right-radius: var(--border-radius) !important;
& .app-download-platform {
border-top-right-radius: 0;
}
}
}
}