Angular – ng build –prod –base-href

Your code has a pair of nested loops. However, given the way you're drawing the grid, you really need three nested loops. Trying to figure out the least amount of code to get from where you are to where you want to be, I came up with the following:

from turtle import Screen, Turtle

def draw_square(turtle, size, num):
    for y in range(num):
        for x in range(num):
            for _ in range(4):
                turtle.forward(size)
                turtle.left(90)

            turtle.forward(size)

        parity = y % 2 == 0
        turn = turtle.left if parity else turtle.right

        turn(90)
        turtle.forward(size * 2 * parity)
        turn(90)

screen = Screen()

yertle = Turtle(visible=False)
yertle.speed('fastest')  # because I have no patience

draw_square(yertle, 25, 20)

screen.exitonclick()

This code is inefficient drawing-wise as the same lines get redrawn which is something to be avoided. My personal favorite solution to this problem is my Tholian Web approach using generators:

from turtle import Turtle, Screen

UNIT_SIZE, GRID_SQUARES = 25, 20

GRID_SIZE = GRID_SQUARES * UNIT_SIZE

def half_grid(turtle):
    speed = turtle.speed()

    for brick in range(GRID_SQUARES):
        direction = [turtle.right, turtle.left][brick % 2 == 1]

        for _ in range(0, GRID_SIZE, speed):
            turtle.forward(speed)
            yield(0)

        direction(90)

        for _ in range(0, UNIT_SIZE, speed):
            turtle.forward(speed)
            yield(0)

        direction(90)

    for _ in range(0, GRID_SIZE, speed):
        turtle.forward(speed)
        yield(0)

heckle = Turtle(shape='arrow')
heckle.speed(5)  # speed needs to be a factor of UNIT_SIZE
heckle.penup()
heckle.goto(-GRID_SIZE / 2, -GRID_SIZE / 2)
heckle.pendown()
heckle.left(90)

jeckle = Turtle(shape='arrow')
jeckle.speed(5)
jeckle.penup()
jeckle.goto(GRID_SIZE / 2, -GRID_SIZE / 2)
jeckle.pendown()
jeckle.left(180)

generator1, generator2 = half_grid(heckle), half_grid(jeckle)

while (next(generator1, 1) + next(generator2, 1) < 2):
    pass

heckle.hideturtle()
jeckle.hideturtle()

screen = Screen()
screen.exitonclick()

But that's probably overkill for your purposes...

In order to use a custom hex palette for an Angular - Material you will need to define the different shades as well as contrast colors for the palette, even if you only want one color. I'd suggest using at least 3 colors (light, normal, dark) so that it works flawless with Material's built in animations:

// below defines your custom color to build a theme palette from
$my-blue: (
  50: #7fdddd,
  100: #7faedd,
  200: #7f7fdd,
  300: #7faedd,
  400: #7faedd,
  500: #7faedd,
  600: #7faedd,
  700: #7faedd,
  800: #7faedd,
  900: #7faedd,
  A100: #7faedd,
  A200: #7faedd,
  A400: #7faedd,
  A700: #7faedd,
  contrast: (
    50: white,
    100: white,
    200: white,
    300: white,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: white,
    A200: white,
    A400: white,
    A700: white,
  )
);
// below creates a primary palette with three shades of blue
$my-primary: mat-palette($my-blue, 100, 50, 200);