klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-07 02:25:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

style.scss: lint

Browse Source
This commit is contained in:
Skia 2023-01-11 15:23:19 +01:00
parent d726f4b1e8
commit d0e121c8eb
1 changed files with 476 additions and 435 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

269
core/static/core/style.scss
View File

@ -11,7 +11,6 @@ $primary-dark-color: hsl(203, 75%, 40%);
$secondary-light-color: hsl(40, 68%, 65%); $secondary-light-color: hsl(40, 68%, 65%);
$secondary-dark-color: hsl(40, 68%, 35%); $secondary-dark-color: hsl(40, 68%, 35%);
$primary-neutral-color: hsl(219.6, 20.8%, 50%); $primary-neutral-color: hsl(219.6, 20.8%, 50%);
$primary-neutral-light-color: hsl(0, 0%, 94%); $primary-neutral-light-color: hsl(0, 0%, 94%);
$primary-neutral-dark-color: hsl(210, 29%, 29%); $primary-neutral-dark-color: hsl(210, 29%, 29%);
@ -29,7 +28,7 @@ $pinktober: #ff5674;
$pinktober-secondary: #8a2536; $pinktober-secondary: #8a2536;
$pinktober-primary-text: white; $pinktober-primary-text: white;
$pinktober-bar-closed: $pinktober-secondary; $pinktober-bar-closed: $pinktober-secondary;
$pinktober-bar-opened: #388E3C; $pinktober-bar-opened: #388e3c;
$shadow-color: rgb(223, 223, 223); $shadow-color: rgb(223, 223, 223);
@ -49,7 +48,11 @@ body {
font-family: sans-serif; font-family: sans-serif;
} }
button, input[type=button], input[type=submit], input[type=reset],input[type=file] { button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"] {
border: none; border: none;
text-decoration: none; text-decoration: none;
background-color: $background-button-color; background-color: $background-button-color;
@ -62,15 +65,24 @@ button, input[type=button], input[type=submit], input[type=reset],input[type=fil
} }
} }
input[type=button], input[type=submit], input[type=reset],input[type=file] { input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"] {
font-weight: bold; font-weight: bold;
} }
button:not(:disabled), input[type=button]:not(:disabled), input[type=submit]:not(:disabled), input[type=reset]:not(:disabled),input[type=file]:not(:disabled) { button:not(:disabled),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled),
input[type="file"]:not(:disabled) {
cursor: pointer; cursor: pointer;
} }
input,textarea[type=text],[type=number]{ input,
textarea[type="text"],
[type="number"] {
border: none; border: none;
text-decoration: none; text-decoration: none;
background-color: $background-button-color; background-color: $background-button-color;
@ -80,7 +92,7 @@ input,textarea[type=text],[type=number]{
border-radius: 5px; border-radius: 5px;
max-width: 95%; max-width: 95%;
} }
textarea{ textarea {
border: none; border: none;
text-decoration: none; text-decoration: none;
background-color: $background-button-color; background-color: $background-button-color;
@ -88,7 +100,7 @@ textarea{
font-size: 1.2em; font-size: 1.2em;
border-radius: 5px; border-radius: 5px;
} }
select{ select {
border: none; border: none;
text-decoration: none; text-decoration: none;
font-size: 1.2em; font-size: 1.2em;
@ -143,7 +155,8 @@ a {
} }
.shadow { .shadow {
box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; box-shadow: rgba(60, 64, 67, 0.3) 0 1px 3px 0,
rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
} }
.w_big { .w_big {
@ -162,7 +175,9 @@ a {
cursor: pointer; cursor: pointer;
} }
[x-cloak] { display: none !important; } [x-cloak] {
display: none !important;
}
/*--------------------------------HEADER-------------------------------*/ /*--------------------------------HEADER-------------------------------*/
@ -195,7 +210,6 @@ header {
background-color: $primary-neutral-dark-color; background-color: $primary-neutral-dark-color;
border-radius: 0px 0px 10px 10px; border-radius: 0px 0px 10px 10px;
#header_logo { #header_logo {
background-color: $white-color; background-color: $white-color;
padding: 0.2em; padding: 0.2em;
@ -338,7 +352,8 @@ header {
flex-wrap: wrap; flex-wrap: wrap;
width: 90%; width: 90%;
margin: 1em auto; margin: 1em auto;
#alert_box, #info_box { #alert_box,
#info_box {
flex: 49%; flex: 49%;
font-size: 0.9em; font-size: 0.9em;
margin: 0.2em; margin: 0.2em;
@ -369,7 +384,6 @@ header {
} }
} }
#page { #page {
width: 90%; width: 90%;
margin: 20px auto 0; margin: 20px auto 0;
@ -470,11 +484,11 @@ header {
} }
&.btn-grey.clickable:not(:disabled):hover { &.btn-grey.clickable:not(:disabled):hover {
background-color:hsl(210,5%,30%); background-color: hsl(210, 5%, 30%);
} }
} }
/*--------------------------------CONTENT------------------------------*/ /*--------------------------------CONTENT------------------------------*/
#quick_notif { #quick_notif {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
@ -485,7 +499,6 @@ header {
} }
} }
#content { #content {
padding: 1em 1%; padding: 1em 1%;
box-shadow: $shadow-color 0 5px 10px; box-shadow: $shadow-color 0 5px 10px;
@ -510,7 +523,7 @@ header {
} }
&.alert-red { &.alert-red {
background-color: rgb(255,245,245); background-color: rgb(255, 245, 245);
color: #c53030; color: #c53030;
border: #fc8181 1px solid; border: #fc8181 1px solid;
} }
@ -554,7 +567,7 @@ header {
} }
} }
/*---------------------------------NEWS--------------------------------*/ /*---------------------------------NEWS--------------------------------*/
#news { #news {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -586,20 +599,23 @@ header {
} }
} }
} }
@media screen and (max-width: $small-devices){ @media screen and (max-width: $small-devices) {
#left_column, #right_column { #left_column,
#right_column {
flex: 100%; flex: 100%;
} }
} }
/* AGENDA/BIRTHDAYS */ /* AGENDA/BIRTHDAYS */
#agenda,#birthdays { #agenda,
#birthdays {
display: block; display: block;
width: 100%; width: 100%;
background: white; background: white;
font-size: 70%; font-size: 70%;
margin-bottom: 1em; margin-bottom: 1em;
#agenda_title,#birthdays_title { #agenda_title,
#birthdays_title {
margin: 0em; margin: 0em;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
box-shadow: $shadow-color 1px 1px 1px; box-shadow: $shadow-color 1px 1px 1px;
@ -615,7 +631,8 @@ header {
box-shadow: $shadow-color 1px 1px 1px; box-shadow: $shadow-color 1px 1px 1px;
height: 20em; height: 20em;
} }
#agenda_content,#birthdays_content { #agenda_content,
#birthdays_content {
.agenda_item { .agenda_item {
padding: 0.5em; padding: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@ -636,7 +653,7 @@ header {
margin: 0em; margin: 0em;
list-style-type: none; list-style-type: none;
font-weight: bold; font-weight: bold;
>li { > li {
padding: 0.5em; padding: 0.5em;
&:nth-child(even) { &:nth-child(even) {
background: $secondary-neutral-light-color; background: $secondary-neutral-light-color;
@ -652,9 +669,9 @@ header {
} }
} }
} }
/* END AGENDA/BIRTHDAYS */ /* END AGENDA/BIRTHDAYS */
/* EVENTS TODAY AND NEXT FEW DAYS */ /* EVENTS TODAY AND NEXT FEW DAYS */
.news_events_group { .news_events_group {
box-shadow: $shadow-color 1px 1px 1px; box-shadow: $shadow-color 1px 1px 1px;
margin-left: 1em; margin-left: 1em;
@ -733,9 +750,9 @@ header {
} }
} }
} }
/* END EVENTS TODAY AND NEXT FEW DAYS */ /* END EVENTS TODAY AND NEXT FEW DAYS */
/* COMING SOON */ /* COMING SOON */
.news_coming_soon { .news_coming_soon {
display: list-item; display: list-item;
list-style-type: square; list-style-type: square;
@ -750,9 +767,9 @@ header {
font-size: 0.9em; font-size: 0.9em;
} }
} }
/* END COMING SOON */ /* END COMING SOON */
/* NOTICES */ /* NOTICES */
.news_notice { .news_notice {
margin: 0em 0em 1em 1em; margin: 0em 0em 1em 1em;
padding: 0.4em; padding: 0.4em;
@ -767,9 +784,9 @@ header {
margin-left: 1em; margin-left: 1em;
} }
} }
/* END NOTICES */ /* END NOTICES */
/* CALLS */ /* CALLS */
.news_call { .news_call {
margin: 0em 0em 1em 1em; margin: 0em 0em 1em 1em;
padding: 0.4em; padding: 0.4em;
@ -787,7 +804,7 @@ header {
margin-left: 1em; margin-left: 1em;
} }
} }
/* END CALLS */ /* END CALLS */
.news_empty { .news_empty {
margin-left: 1em; margin-left: 1em;
@ -798,7 +815,7 @@ header {
} }
} }
@media screen and (max-width: $small-devices){ @media screen and (max-width: $small-devices) {
#page { #page {
width: 98%; width: 98%;
} }
@ -867,29 +884,32 @@ header {
/*---------------------------POSTERS----------------------------*/ /*---------------------------POSTERS----------------------------*/
#poster_list, #screen_list, #poster_edit, #screen_edit{ #poster_list,
#screen_list,
#poster_edit,
#screen_edit {
position: relative; position: relative;
#title{ #title {
position: relative; position: relative;
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
border-bottom: 2px solid black; border-bottom: 2px solid black;
h3{ h3 {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
#links{ #links {
position: absolute; position: absolute;
display: flex; display: flex;
bottom: 5px; bottom: 5px;
&.left{ &.left {
left: 0; left: 0;
} }
&.right{ &.right {
right: 0; right: 0;
} }
.link{ .link {
padding: 5px; padding: 5px;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
@ -897,26 +917,29 @@ header {
border-radius: 20px; border-radius: 20px;
background-color: hsl(40, 100%, 50%); background-color: hsl(40, 100%, 50%);
color: black; color: black;
&:hover{ &:hover {
color: black; color: black;
background-color: hsl(40, 58%, 50%); background-color: hsl(40, 58%, 50%);
} }
&.delete{ &.delete {
background-color: hsl(0, 100%, 40%); background-color: hsl(0, 100%, 40%);
} }
} }
} }
} }
#posters, #screens{ #posters,
#screens {
position: relative; position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
#no-posters, #no-screens{ #no-posters,
#no-screens {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.poster, .screen{ .poster,
.screen {
min-width: 10%; min-width: 10%;
max-width: 20%; max-width: 20%;
display: flex; display: flex;
@ -926,28 +949,28 @@ header {
border-radius: 4px; border-radius: 4px;
padding: 10px; padding: 10px;
background-color: lightgrey; background-color: lightgrey;
*{ * {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.name{ .name {
padding-bottom: 5px; padding-bottom: 5px;
margin-bottom: 5px; margin-bottom: 5px;
border-bottom: 1px solid whitesmoke; border-bottom: 1px solid whitesmoke;
} }
.image{ .image {
flex-grow: 1; flex-grow: 1;
position: relative; position: relative;
padding-bottom: 5px; padding-bottom: 5px;
margin-bottom: 5px; margin-bottom: 5px;
border-bottom: 1px solid whitesmoke; border-bottom: 1px solid whitesmoke;
img{ img {
max-height: 20vw; max-height: 20vw;
max-width: 100%; max-width: 100%;
} }
&:hover{ &:hover {
&::before{ &::before {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -964,11 +987,11 @@ header {
} }
} }
} }
.dates{ .dates {
padding-bottom: 5px; padding-bottom: 5px;
margin-bottom: 5px; margin-bottom: 5px;
border-bottom: 1px solid whitesmoke; border-bottom: 1px solid whitesmoke;
*{ * {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -976,29 +999,32 @@ header {
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
} }
.begin, .end{ .begin,
.end {
width: 48%; width: 48%;
} }
.begin{ .begin {
border-right: 1px solid whitesmoke; border-right: 1px solid whitesmoke;
padding-right: 2%; padding-right: 2%;
} }
} }
.edit, .moderate, .slideshow{ .edit,
.moderate,
.slideshow {
padding: 5px; padding: 5px;
border-radius: 20px; border-radius: 20px;
background-color: hsl(40, 100%, 50%); background-color: hsl(40, 100%, 50%);
color: black; color: black;
&:hover{ &:hover {
color: black; color: black;
background-color: hsl(40, 58%, 50%); background-color: hsl(40, 58%, 50%);
} }
&:nth-child(2n){ &:nth-child(2n) {
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
.tooltip{ .tooltip {
visibility: hidden; visibility: hidden;
width: 120px; width: 120px;
background-color: hsl(210, 20%, 98%); background-color: hsl(210, 20%, 98%);
@ -1008,25 +1034,24 @@ header {
border-radius: 6px; border-radius: 6px;
position: absolute; position: absolute;
z-index: 10; z-index: 10;
ul{ ul {
margin-left: 0; margin-left: 0;
display: inline-block; display: inline-block;
li{ li {
display: list-item; display: list-item;
list-style-type: none; list-style-type: none;
} }
} }
} }
&.not_moderated &.not_moderated {
{
border: 1px solid red; border: 1px solid red;
} }
&:hover .tooltip{ &:hover .tooltip {
visibility: visible; visibility: visible;
} }
} }
} }
#view{ #view {
position: fixed; position: fixed;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
@ -1039,10 +1064,10 @@ header {
visibility: hidden; visibility: hidden;
background-color: rgba(10, 10, 10, 0.9); background-color: rgba(10, 10, 10, 0.9);
overflow: hidden; overflow: hidden;
&.active{ &.active {
visibility: visible; visibility: visible;
} }
#placeholder{ #placeholder {
width: 80vw; width: 80vw;
height: 80vh; height: 80vh;
display: flex; display: flex;
@ -1050,7 +1075,7 @@ header {
align-items: center; align-items: center;
top: 0; top: 0;
left: 0; left: 0;
img{ img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }
@ -1058,7 +1083,6 @@ header {
} }
} }
/*---------------------------ACCOUNTING----------------------------*/ /*---------------------------ACCOUNTING----------------------------*/
#accounting { #accounting {
.journal-table { .journal-table {
@ -1084,7 +1108,12 @@ header {
} }
/*-----------------------------GENERAL-----------------------------*/ /*-----------------------------GENERAL-----------------------------*/
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold; font-weight: bold;
margin-top: 0.5em; margin-top: 0.5em;
} }
@ -1119,12 +1148,15 @@ h6 {
margin-left: 50px; margin-left: 50px;
} }
p, pre { p,
pre {
margin-top: 0.8em; margin-top: 0.8em;
margin-left: 0; margin-left: 0;
} }
ul, ol, dl { ul,
ol,
dl {
margin-top: 1em; margin-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;
margin-left: 25px; margin-left: 25px;
@ -1167,7 +1199,7 @@ blockquote h5:first-child {
table { table {
width: 100%; width: 100%;
font-size: 0.90em; font-size: 0.9em;
} }
td { td {
@ -1207,11 +1239,13 @@ sub {
font-size: smaller; font-size: smaller;
} }
b, strong { b,
strong {
font-weight: bold; font-weight: bold;
} }
i, em { i,
em {
font-style: italic; font-style: italic;
} }
@ -1220,7 +1254,8 @@ i, em {
font-weight: bold; font-weight: bold;
} }
u, .underline { u,
.underline {
text-decoration: underline; text-decoration: underline;
} }
@ -1273,7 +1308,8 @@ u, .underline {
#user_profile_infos_items { #user_profile_infos_items {
margin-top: 3em; margin-top: 3em;
} }
.user_profile_infos_item, .user_profile_infos_item_value { .user_profile_infos_item,
.user_profile_infos_item_value {
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
width: 49%; width: 49%;
@ -1293,7 +1329,8 @@ u, .underline {
text-align: right; text-align: right;
color: grey; color: grey;
font-style: italic; font-style: italic;
&:after, &:before { &:after,
&:before {
content: "\201C"; content: "\201C";
vertical-align: middle; vertical-align: middle;
} }
@ -1329,8 +1366,9 @@ u, .underline {
} }
} }
} }
@media screen and (max-width: $small-devices){ @media screen and (max-width: $small-devices) {
#user_profile_infos, #user_profile_pictures { #user_profile_infos,
#user_profile_pictures {
flex-basis: 50%; flex-basis: 50%;
} }
} }
@ -1439,7 +1477,6 @@ u, .underline {
} }
} }
/*---------------------------------PAGE--------------------------------*/ /*---------------------------------PAGE--------------------------------*/
.page_content { .page_content {
@ -1510,7 +1547,7 @@ textarea {
.last_message span { .last_message span {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow:hidden; overflow: hidden;
width: 100%; width: 100%;
display: block; display: block;
} }
@ -1720,7 +1757,8 @@ label {
} }
} }
#cash_summary_form label, .inline { #cash_summary_form label,
.inline {
display: inline; display: inline;
} }
@ -1775,13 +1813,19 @@ label {
/*--------------------------------JQuery-------------------------------*/ /*--------------------------------JQuery-------------------------------*/
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active,
.ui-state-active, a.ui-button:active, .ui-button:active, .ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover { .ui-button.ui-state-active:hover {
background: $primary-color; background: $primary-color;
border-color: $primary-color; border-color: $primary-color;
} }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-top, .ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-top,
.ui-corner-left { .ui-corner-left {
border-radius: 0; border-radius: 0;
} }
@ -1795,7 +1839,6 @@ label {
max-width: 10em; max-width: 10em;
} }
} }
} }
/* --------------------------------------pedagogy-----------------------------------*/ /* --------------------------------------pedagogy-----------------------------------*/
@ -1808,7 +1851,7 @@ $pedagogy-white-text: #f0f0f0;
.pedagogy { .pedagogy {
&.star-not-checked { &.star-not-checked {
color : #f7f7f7; color: #f7f7f7;
margin-bottom: 0; margin-bottom: 0;
margin-top: 0; margin-top: 0;
} }
@ -1819,10 +1862,10 @@ $pedagogy-white-text: #f0f0f0;
} }
&.grade-without-star { &.grade-without-star {
display: none display: none;
} }
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices) {
&.star-not-checked { &.star-not-checked {
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
@ -1833,7 +1876,7 @@ $pedagogy-white-text: #f0f0f0;
} }
} }
@media screen and (max-width: $small-devices){ @media screen and (max-width: $small-devices) {
&.grade-without-star { &.grade-without-star {
display: block; display: block;
} }
@ -1851,11 +1894,9 @@ $pedagogy-white-text: #f0f0f0;
text-align: center; text-align: center;
border: none; border: none;
} }
} }
#search_form { #search_form {
.search-form-container { .search-form-container {
display: grid; display: grid;
grid-template-columns: auto auto; grid-template-columns: auto auto;
@ -1879,13 +1920,13 @@ $pedagogy-white-text: #f0f0f0;
grid-template-rows: auto; grid-template-rows: auto;
grid-template-areas: "search-bar-input search-bar-button"; grid-template-areas: "search-bar-input search-bar-button";
@media screen and (max-width: $medium-devices){ @media screen and (max-width: $medium-devices) {
grid-template-columns: auto auto; grid-template-columns: auto auto;
grid-template-rows: auto; grid-template-rows: auto;
grid-template-areas: "search-bar-input search-bar-button"; grid-template-areas: "search-bar-input search-bar-button";
} }
@media screen and (max-width: $small-devices){ @media screen and (max-width: $small-devices) {
grid-template-columns: auto; grid-template-columns: auto;
grid-template-rows: auto; grid-template-rows: auto;
grid-template-areas: "search-bar-input"; grid-template-areas: "search-bar-input";
@ -1921,8 +1962,9 @@ $pedagogy-white-text: #f0f0f0;
grid-area: radio-semester; grid-area: radio-semester;
} }
.radio-guide input[type="radio"],input[type="checkbox"] { .radio-guide input[type="radio"],
display:none; input[type="checkbox"] {
display: none;
} }
.radio-guide { .radio-guide {
margin-top: 10px; margin-top: 10px;
@ -1956,7 +1998,7 @@ $pedagogy-white-text: #f0f0f0;
grid-template-rows: auto auto; grid-template-rows: auto auto;
grid-template-areas: grid-template-areas:
"hours-cm hours-td hours-tp hours-te hours-the" "hours-cm hours-td hours-tp hours-te hours-the"
"department credit-type semester . ." ; "department credit-type semester . .";
} }
.department { .department {
@ -2005,7 +2047,7 @@ $pedagogy-white-text: #f0f0f0;
grid-template-rows: 100%; grid-template-rows: 100%;
grid-template-areas: "stars comment"; grid-template-areas: "stars comment";
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices) {
grid-template-columns: 100%; grid-template-columns: 100%;
grid-template-rows: auto auto; grid-template-rows: auto auto;
grid-template-areas: grid-template-areas:
@ -2033,7 +2075,7 @@ $pedagogy-white-text: #f0f0f0;
color: $pedagogy-white-text; color: $pedagogy-white-text;
clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0); clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices) {
clip-path: none; clip-path: none;
} }
} }
@ -2060,7 +2102,7 @@ $pedagogy-white-text: #f0f0f0;
"grade grade-stars uv-infos" "grade grade-stars uv-infos"
". . uv-infos"; ". . uv-infos";
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices) {
grid-template-columns: 50% 50%; grid-template-columns: 50% 50%;
grid-template-rows: auto auto; grid-template-rows: auto auto;
grid-template-areas: grid-template-areas:
@ -2104,14 +2146,14 @@ $pedagogy-white-text: #f0f0f0;
margin-bottom: 30px; margin-bottom: 30px;
margin-top: 10px; margin-top: 10px;
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices) {
grid-template-columns: auto; grid-template-columns: auto;
grid-template-rows: auto auto auto auto; grid-template-rows: auto auto auto auto;
grid-template-areas: grid-template-areas:
"grade-block" "grade-block"
"comment" "comment"
"info" "info"
"comment-end-bar" "comment-end-bar";
} }
.grade-block { .grade-block {
@ -2131,10 +2173,10 @@ $pedagogy-white-text: #f0f0f0;
background-color: $pedagogy-blue; background-color: $pedagogy-blue;
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices) {
grid-template-columns: 50% auto; grid-template-columns: 50% auto;
grid-template-rows: auto; grid-template-rows: auto;
grid-template-areas:"grade-type grade-stars"; grid-template-areas: "grade-type grade-stars";
width: auto; width: auto;
clip-path: none; clip-path: none;
align-content: space-evenly; align-content: space-evenly;
@ -2171,7 +2213,7 @@ $pedagogy-white-text: #f0f0f0;
"anchor" "anchor"
"markdown"; "markdown";
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices) {
border-left: solid; border-left: solid;
border-right: solid; border-right: solid;
border-color: $pedagogy-blue; border-color: $pedagogy-blue;
@ -2199,7 +2241,7 @@ $pedagogy-white-text: #f0f0f0;
grid-area: info; grid-area: info;
padding-bottom: 10px; padding-bottom: 10px;
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices) {
border-left: solid; border-left: solid;
border-right: solid; border-right: solid;
border-color: $pedagogy-blue; border-color: $pedagogy-blue;
@ -2227,7 +2269,7 @@ $pedagogy-white-text: #f0f0f0;
background-color: $pedagogy-blue; background-color: $pedagogy-blue;
margin-top: -1px; margin-top: -1px;
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices) {
grid-template-columns: auto; grid-template-columns: auto;
grid-template-rows: auto auto auto; grid-template-rows: auto auto auto;
grid-template-areas: grid-template-areas:
@ -2247,7 +2289,7 @@ $pedagogy-white-text: #f0f0f0;
background-color: $pedagogy-orange; background-color: $pedagogy-orange;
clip-path: polygon(0 10px, 0 100%, 350px 200%, 300px 10px); clip-path: polygon(0 10px, 0 100%, 350px 200%, 300px 10px);
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices) {
clip-path: none; clip-path: none;
padding: 0; padding: 0;
padding-bottom: 7px; padding-bottom: 7px;
@ -2261,14 +2303,13 @@ $pedagogy-white-text: #f0f0f0;
a:hover { a:hover {
color: $pedagogy-hover-blue; color: $pedagogy-hover-blue;
} }
} }
.date { .date {
grid-area: date; grid-area: date;
color: $pedagogy-white-text; color: $pedagogy-white-text;
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices) {
padding-bottom: 7px; padding-bottom: 7px;
} }
} }
@ -2287,7 +2328,7 @@ $pedagogy-white-text: #f0f0f0;
color: $pedagogy-hover-blue; color: $pedagogy-hover-blue;
} }
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices) {
text-align: center; text-align: center;
justify-self: inherit; justify-self: inherit;
padding-bottom: 7px; padding-bottom: 7px;